Beautiful UI components
for AI-powered apps

An alert is a message that is displayed to the user. It makes use of the ARIA role "alert" to highlight the importance of the message to assistive technologies.

Renders an avatar. Falls back to initial letters if no image is provided.

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

A Card is a container that groups and organizes content in a consistent manner.

A Chat contains a list of messages.

A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.

A checkbox group allows a user to select multiple items from a list of options.

A syntax-highlighted code block component, built using react-syntax-highlighter.

A syntax-highlighted inline code component, built using react-syntax-highlighter.

A color field allows users to edit a hex color or individual color channel value.

A component for selecting a color using a slider. Provides interactive color selection with proper accessibility semantics.

A component for displaying a color swatch. Provides visual representation of a color with proper accessibility semantics.

A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

A Description is text with attributes that improve screen reader announcements, usually used to provide more context on a field or control.

A dialog is an overlay shown above other content in an application.

A disclosure component that shows and hides content when triggered.

An empty state is a fallback UI shown in the absence of data, e.g. for a search with no results.

A field button can used inside a group component to add additional functionality to a field.

A field error displays validation errors for a field within a form.

A group represents a set of related UI controls, and supports interactive states for styling.

A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.

A FormCheckboxGroup connects a CheckboxGroup to a Form component using react-hook-form.

A FormComboBox connects a ComboBox to a Form component using react-hook-form.

A component that resets the form after a successful submission. Used to test that form fields are reset after a successful submission.

A FormSelect connects a Select to a Form component using react-hook-form.

A FormSubmitButton handles form submission, and listen's to react-hook-form's state to handle disabled * pending states appropriately.

A form text field connects a <TextField /> to a <Form /> component using react-hook-form.

A heading renders a semantic heading with pre-determined typography styles

An input is a primitive component used when composing fields, like text fields, search fields, etc.

Signals that a keyboard shortcut is available for the user to use.

A Label is used when composing a form field, and handles associating the label with the field via the id and for attributes on your behalf.

A link allows a user to navigate to another page or resource within a web page or application.

A listbox displays a list of options and allows a user to select one or more of them.

A loader icon to indicate that content is loading.

A menu displays a list of actions or options that a user can choose.

A popover is an overlay element positioned relative to a trigger.

A search field allows a user to enter and clear a search query.

A select displays a collapsible list of options and allows a user to select one of them.

An animated Skeleton component, for use as a loading placeholder.

A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.

Tabs organize content into multiple sections and allow users to navigate between them.

A Tag is a presentational component used to display short snippets of information, often in a group of tags.

An TextArea is a primitive component used when composing fields, (e.g. TextField, SearchField, NumberField).

TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

A tooltip displays a description of an element on hover or focus.

The top nav component is an ready-made nav that appears at the top of the page.