Stems UIMenu
Components
- Accordion
- Alert Dialog
- Autocomplete
- Avatar
- Button
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Context Menu
- Dialog
- Drawer
- Dropdown Menu
- Field
- Fieldset
- Form
- Input
- Label
- Menubar
- Meter
- Navigation Menu
- Number Field
- OTP Field
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Slider
- Switch
- Tabs
- Toast
- Toggle Button
- Toggle Button Group
- Toolbar
- Tooltip
Accessible UI for Remix 3
Stems is two things: stems-ui, headless primitives written the Remix 3 way (mixins, Context, bubbling events, native-first markup), and a shadcn-compatible registry of styled components built on them that you copy into your app and own.
Quick start
- 1Set up your appAdd an
#app/*import alias, Tailwind CSS v4, and acomponents.json. See Installation. - 2Add the theme and components
npx shadcn add @stemsui/theme @stemsui/dropdown-menu - 3Render inside a client entryInteractive components run in a
clientEntry(...)boundary. Make them yours with theming, or go headless.
Components
- AccordionA vertically stacked set of interactive headings that each reveal a section of content.
- Alert DialogA dialog that requires a user response to proceed.
- AutocompleteA free-text input with suggestions and inline completion.
- AvatarAn image with a fallback for representing a user.
- ButtonDisplays a button or a component that looks like a button.
- CheckboxA control for toggling an option on or off.
- Checkbox GroupShared state for a set of checkboxes.
- CollapsibleAn interactive component which expands/collapses a panel.
- ComboboxAn input with a filterable list of options; single with groups, or multiple as chips.
- Context MenuA menu that appears at the pointer on right click or long press.
- DialogA popup that opens on top of the entire page.
- DrawerA panel that slides in from the edge of the screen, with swipe-to-dismiss.
- Dropdown MenuA menu of actions or options, opened from a button.
- FieldLabels, descriptions, and validation for a form control.
- FieldsetGroups related form controls under a legend.
- FormA native form with consolidated validation errors.
- InputA text field for user input.
- LabelAn accessible label for form controls.
- MenubarA horizontal bar of menus, like a desktop application menu.
- MeterA graphical display of a numeric value within a range.
- Navigation MenuA collection of links and menus for website navigation.
- Number FieldA numeric input with increment and decrement buttons and a scrub area.
- OTP FieldEntry for one-time passwords and verification codes.
- PopoverAn accessible popup anchored to a button.
- Preview CardA popup that previews a link destination on hover.
- ProgressDisplays the completion status of a task.
- Radio GroupA set of options where only one can be selected.
- Scroll AreaA native scroll container with custom scrollbars.
- SelectChoose one or more values from a dropdown list.
- SliderSelect a value or range by dragging a thumb.
- SwitchA control that indicates whether a setting is on or off.
- TabsA set of layered sections of content, displayed one at a time.
- ToastShort, temporary notifications.
- Toggle ButtonA two-state button that can be on or off.
- Toggle Button GroupA set of toggle buttons with shared state.
- ToolbarA container for grouping a set of buttons and controls.
- TooltipA popup that shows a short hint when an element is hovered or focused.