Components

65 token-driven, fully accessible, open-code primitives — including AI-native components for streaming UIs, chat interfaces, and agent-powered applications. Each component ships as plain TypeScript source that you install via the CLI and own outright.

Components are organised into four layers: primitives (this page), patterns, blocks, and AI-native UI. Unlike a runtime library, each component you add lives in your codebase — edit it, extend it, or replace it at any time. Run npx aether-ui add <name> to install any component in seconds.

Primitives

Radix primitives

105 tests

Test coverage

Actions

ButtonTriggers an action. 6 variants, 4 sizes, asChild.Button GroupSegmented row of buttons with shared border treatment.ToggleTwo-state pressed/unpressed button.Toggle GroupSingle or multiple selection from a set of toggles.

Display

AlertContextual feedback banner with 5 severity variants.Aspect RatioConstrains content to a fixed width/height ratio.AvatarUser avatar with image and fallback initials.BadgeStatus, category, or count label.CardSurface container with header, content, footer.CarouselTouch-friendly slider with prev/next navigation.ChartRecharts wrappers with token-based colors. Bar, Line, Area, Pie.KbdKeyboard key badge for shortcuts and hotkeys.ProgressHorizontal progress bar with animated fill.ResizableDraggable split-pane panels for adjustable layouts.Scroll AreaCustom scrollbar overlay for any container.SeparatorHorizontal or vertical visual divider.SkeletonLoading placeholder that mimics content shape.SliderDraggable range input with min, max, and step.SpinnerAnimated loading indicator with four sizes.TableSemantic data table with 8 sub-components.

Forms

CalendarDate picker with single, multiple, and range modes.CheckboxBinary toggle with indeterminate support.ComboboxSearchable select built from cmdk + Radix Popover.Date PickerDate selection field with Calendar and Popover.InputSingle-line text field. All HTML input types.Input GroupInput with left/right addon slots for icons and labels.Input OTPOne-time password input with individual digit slots.LabelAccessible form label via Radix UI.Radio GroupSingle-select from a set of options.SelectAccessible single-select dropdown.SwitchOn/off slide toggle.TextareaMulti-line text field.

Navigation

AccordionCollapsible content sections with animated transitions.CollapsibleExpand/collapse any content section with programmatic control.MenubarApplication-level menu bar with sub-menus and shortcuts.Navigation MenuNavigation menu with animated content panels.PaginationPage navigation with prev/next and numbered links.SidebarCollapsible sidebar with icon-only and full modes.TabsLayered content panels with tab navigation.

Overlays

Alert DialogBlocking confirmation dialog for destructive actions.Context MenuRight-click contextual action menu.DialogModal window with focus trap and backdrop.DrawerBottom-sheet drawer with drag-to-dismiss gesture.Dropdown MenuFloating menu anchored to a trigger element.Hover CardRich preview card revealed on hover.PopoverFloating overlay anchored to a trigger for detail panels.SheetSlide-in panel from any screen edge.SonnerModern opinionated toast queue with promise support.ToastNon-blocking notification messages.TooltipContextual label on hover or focus.

Utilities

Visually HiddenHides content visually while keeping it accessible to screen readers.

AI-native components

Aether UI ships 14 AI-native primitives under @aetherstack/ui/ai — StreamingText, PromptInput, ChatBubble, MarkdownRenderer, ThinkingIndicator, and more. They accept both plain strings and AsyncIterable<string> for streaming, and are SDK-agnostic — wire in your own AI provider.

AI & LLMs documentation →

Open code

Unlike a traditional component library, Aether UI copies component source directly into your project. You own and control each file — no black box, no version lock-in.

Installation guide →