Components at your command — mix, match, and modify
40 accessible React components built on Tailwind CSS 4 and Radix primitives. Import them à la carte or eject them into your project via CLI.
bunx earthling-ui eject buttonOne scheme system, every component
Eight semantic color schemes — primary through bad — work identically across all 40 components, powered by CSS custom properties.
Import it, or own it
Import components à la carte for zero-config use, or eject any component's source into your project when you need full control.
Ready for any stack
React Server Components, Next.js, Vite, CommonJS — every module ships with the right directives, formats, and types.
Every component you need
40 components, organized by what they do.
Inputs
11Collect input from people with accessible form controls.
Button
A button component
Checkbox
A control that allows the user to toggle between checked and unchecked
ColorPicker
A color picker with area, sliders, and swatches
Input
An input component
Label
An accessible label for form controls
RadioGroup
A set of checkable buttons where only one can be checked at a time
Select
A select component
Slider
A slider component
Switch
A switch component
Textarea
A textarea component
ToggleGroup
A toggle group component
Overlays
8Dialogs, menus, and floating panels layered over the page.
AlertDialog
A modal dialog for important confirmations
ContextMenu
Displays a menu triggered by right-click
Dialog
A dialog component
Drawer
A drawer component
DropdownMenu
Displays a menu of actions triggered by a button
HoverCard
For sighted users to preview content available behind a link
Popover
A popover component
Tooltip
A popup that displays information related to an element when hovered
Navigation
5Help people move through your app and find their place.
Feedback
5Communicate state, progress, and outcomes.
Data Display
7Present content and data clearly.
Layout
4Structure pages and group related content.