Your interface.
Your source.
40 React components with a shared visual language. Import what you need, or bring the source into your project.
Room to grow
On trackEverything in its place
A shared language, down to the details.
01 / Start with an import
A small addition to your stack.
React 18 or 19. Tailwind CSS 4. Accessible foundations from Radix and React Aria, with shared color, shape, and motion conventions.
npm install earthling-ui02 / Make it your own
Take the implementation with you.
Eject a component and its helpers when you need full control. The same starting point, with the source in your hands.
npx earthling-ui eject buttonThe collection
Good pieces. Yours to put together.
Inputs
11Button
Triggers an action with visual variants for emphasis and context.
Checkbox
Toggles an independent choice between checked and unchecked states.
Color Picker
Combines two-dimensional, channel, swatch, and text color controls.
Input
Collects a single line of text or another native input value.
Label
Names a form control and expands its clickable target.
Radio Group
Selects exactly one choice from a visible set of options.
Select
Chooses one value from a compact, keyboard-accessible menu.
Slider
Selects one value or a bounded range along a track.
Switch
Turns an immediately applied setting on or off.
Textarea
Collects longer, multi-line text with vertical resizing.
Toggle Group
Groups related toggle buttons into a single selection control.
Overlays
08Alert Dialog
An interruptive confirmation dialog for actions with meaningful consequences.
Context Menu
A contextual action menu opened from a pointer or the keyboard.
Dialog
A modal or non-modal surface for focused tasks that need supporting context.
Drawer
A draggable edge panel for supporting tasks, filters, and compact workflows.
Dropdown Menu
A button-triggered menu of commands, choices, and nested actions.
Hover Card
A non-essential preview for linked content, available by pointer hover or keyboard focus.
Popover
A compact anchored surface for controls or information that needs interaction.
Tooltip
A delayed, non-interactive label or hint for a focused or hovered control.
Navigation
05Breadcrumbs
Shows the current page's position within a navigable hierarchy.
Menubar
A persistent application menu that groups commands into keyboard-navigable menus.
Navigation Menu
A responsive collection of links and optional disclosure panels for site navigation.
Pagination
Provides direct navigation through a sequence of result pages.
Tabs
Switches between related sections without leaving the current view.
Feedback
05Alert
Calls attention to an important status, outcome, or next step.
Progress
Communicates determinate completion or an indeterminate operation in progress.
Skeleton
Reserves the shape of content while its data is loading.
Spinner
Indicates short activity when completion cannot be measured.
Toast
A brief status message that appears without interrupting the current task.
Data Display
07Accordion
Organizes related details into expandable sections without leaving the page.
Avatar
Represents a person or organization with an image and resilient fallback.
Badge
Displays compact status or classification metadata beside other content.
Chip
Presents a compact category, attribute, or filter value.
Collapsible
Lets people reveal or hide a single region of supporting content.
Kbd
Formats a keyboard key or shortcut inside instructions and menus.
Table
Presents related records in a responsive, scan-friendly grid.
Layout
04Card
Groups a focused piece of content with optional header, body, and actions.
Scroll Area
Provides a styled viewport while preserving native scrolling behavior.
Separator
Creates a visual or semantic boundary between adjacent groups of content.
Surface
Groups related content on an opaque paper or translucent glass layer.