Elements UI
@elements/ui is the UI package for Elements apps: 76 templates, from Button and Input to Dialog, Select, DataTable and Toast, the behaviors they are built from, twelve themes, and the stylesheet they share: the tokens, the type scale, the layout primitives and the classes for buttons, forms, cards and pills. It covers all of the primary UI templates an app will need; anything else can be composed or created from these primitives. It is built for you and your agent: a template is an Elements HTML template with typed attributes, slots and two-way state, imported from its own path and written like any tag. It renders on the server, so the page arrives finished, and it imports its own CSS, so importing a template styles it.
Every new app has it: elements create installs the package and imports it in app/shared/styles/page.css. A theme is one more import after it: twelve ship, from editorial to coder to brutalist, and every template reads the same tokens, so one line restyles all of them. It is its own package, versioned apart from the tooling: an app that wants none of it removes it with elements uninstall @elements/ui.
Every template has a page here: the live examples with their code, and the import. The reference, with every attribute, slot and key, is the manual: elements man ui, also at /man/ui on this site.
Style System
3Forms
22- Button A button or a link that looks like one, in six variants and four sizes.
- ButtonGroup Related buttons, or an input and its buttons, joined into one control.
- Checkbox A native checkbox drawn by the theme, with an indeterminate (mixed) state.
- ColorPicker Pick a color with an area, channel sliders, inputs, swatches and the eye dropper.
- Combobox A text input that filters a list of options as you type, for one value or several shown as chips, with async results.
- Field A label, a control, a description and an error wired together, with native validation that never moves the layout.
- FileUpload Drop, paste or browse for files; see them listed with previews, sizes, errors and progress.
- Input A native text input in the theme's control chrome, with a two-way value.
- InputGroup An Input or Textarea with icons, text and buttons inside one box.
- InputOTP A one-time code in separate slots, with paste, SMS autofill and a pattern.
- Label A native label for a control, which dims when the control is disabled.
- NativeSelect The browser's own select, styled as a control. Native pickers on phones, no script needed.
- NumberInput A number field with stepper buttons, keyboard steps, formatting, wheel and scrub.
- PasswordInput A password field with a button that shows and hides what was typed.
- RadioGroup One choice from a set: native radios sharing a name, with arrow-key movement.
- Select Pick one value, or several, from a styled listbox that lines the selected option up over the trigger.
- Slider Pick a value or a range by dragging thumbs along a track, with full keyboard support.
- Switch An on/off control that takes effect at once: a native checkbox with the switch role.
- TagsInput Type a list of tags into one field: add, edit, delete and paste them from the keyboard.
- Textarea A native multi-line input that grows with its content, between rows and maxRows.
- Toggle A button that is on or off, with aria-pressed.
- ToggleGroup A set of toggle buttons, one or many on, with one tab stop and arrow keys.
Overlays
13- AlertDialog A modal that interrupts with something important and waits for an answer.
- Command A searchable, ranked list of actions run from the keyboard: inline, in a popover, or as a command palette.
- ContextMenu A menu at the pointer on right-click or long-press.
- Dialog A modal window over the page that traps focus until it closes.
- Drawer A panel that slides from an edge and can be dragged away, with snap points and a scaled background.
- DropdownMenu A menu of actions from a button, with submenus, checkbox and radio items.
- HoverCard A preview of what a link points to, shown while the pointer rests on it.
- Menubar A desktop-style bar of menus that stays open as you move across it.
- NavigationMenu Site navigation with large animated dropdown panels.
- Popover Rich content in a floating panel, opened by a trigger, that keeps the page usable.
- Sheet A dialog that slides in from an edge of the screen, for content that complements the page.
- Toast Short notices that stack at an edge of the screen, pause on hover and close on their own or with a swipe.
- Tooltip A short label for a control, shown on hover and keyboard focus.
Display
19- Accordion A stack of headings that each show and hide a panel, one or several at a time.
- Alert A callout that draws attention to a message, with an icon, a title and an action.
- AspectRatio Keeps media at a fixed width-to-height ratio, with its space held before it loads.
- Avatar A user image with an initials fallback, a delayed fallback, a status badge and groups.
- Badge A small label for a status, a count or a category, built on the pill.
- Breadcrumb The path to the current page as a trail of links, composed from parts or built from a list.
- Card A surface with a header, body and footer, built on the base card styles.
- Collapsible A trigger that shows and hides a region, with its height animated.
- Empty The empty state for a list, a search or a page: media, a title, a line and what to do next.
- Item A row with media, a title, a description and actions, alone or in a list.
- Kbd A keyboard key or shortcut, as text.
- Pagination Page numbers with previous and next, from a page count or composed from parts.
- Progress A bar showing how far a task has run, or that it is running.
- Separator A horizontal or vertical rule between content, semantic or decorative.
- Skeleton A placeholder shape shown while content loads, or wrapped around the content so it never moves.
- Spinner An indeterminate loading indicator, the same ring a loading Button draws.
- Table A styled data table with caption, header, footer, alignment and row states.
- Tabs Layered panels, one shown at a time, chosen from a list of tabs.
- Tree A hierarchical list that opens with the arrow keys, selects one node or many, and loads children on demand.
Layout
4- Carousel Slides you swipe, drag or step through, with momentum, snapping, loop and autoplay.
- Resizable Panels separated by handles you drag or move with the arrow keys.
- ScrollArea A scroll container with thin, themed scrollbars over native scrolling.
- Sidebar An app sidebar that collapses to icons or off the canvas and becomes a sheet on phones.
Dates
4- Calendar A month grid for picking one date, several dates or a range, with keyboard navigation across months.
- DatePicker A button or text field that picks one date from a Calendar in a popover.
- DateRangePicker A button that picks a start and end date from a two-month range Calendar in a popover.
- TimePicker A time of day in the browser's own time field, styled as a control, with steps, limits and suggestions.
Data
10- AreaChart Filled areas, stacked or expanded, solid or gradient, with a crosshair tooltip.
- BarChart Vertical, horizontal, stacked and grouped bars with tooltip, legend and labels.
- Chart What every chart shares: the config and its colors, the tooltip, the legend, the palette and the data table.
- DataTable A data grid: sort, search, filter, resize, reorder, pin, group, select, edit, page or virtualize, save views and export.
- Kanban A board of columns of cards you reorder and move by pointer, touch or keyboard, with announcements and a one-column phone layout.
- LineChart Lines over categories with dots, curves, labels and a crosshair tooltip.
- PieChart Pie and donut charts with labels, a center value, an active slice and stacked rings.
- RadarChart Values on radial axes, one polygon per series, over a polygon or circle grid.
- RadialChart Radial bars and gauges, with tracks, labels along the arc and a center value.
- VirtualList A long list, or a grid of rows and columns, that renders only the items near the viewport, with measured row heights.
Chat
4- Attachment A file or source as a thumbnail, chip or row, with preview, size, upload progress and remove.
- Message One chat message with avatar, author, time, streaming Markdown, attachments, actions and response branches.
- MessageList A conversation that stays pinned to the newest message unless the reader scrolls up.
- PromptInput A growing message composer with attachments, tools, a model picker and a send button that stops a streaming reply.