# Earthling UI

> React 18/19 and Tailwind CSS 4 components. Import from earthling-ui/<name> or eject source for ownership.

Use installed-version metadata. Run `earthling-ui list --json`, then `earthling-ui info <name> --json`; add `--source` only when needed. Preview ejection with `earthling-ui eject <name> --dry-run --json`. Keep the package stylesheet when ejecting.

## Reference

- [Usage and conventions](https://ui.earthling.dev/getting-started): installation, theming, composition, and CLI.
- [Component catalog](https://ui.earthling.dev/catalog.json): generated exports, import paths, source files, and versioned dependencies.
- [Component source](https://github.com/earthling-dev/earthling-ui/blob/main/packages/earthling-ui/src/components/index.ts): public entry points; each component directory has its implementation.
- [Theme](https://github.com/earthling-dev/earthling-ui/blob/main/packages/earthling-ui/src/index.css): default tokens and Tailwind integration.
- [Dark theme](https://github.com/earthling-dev/earthling-ui/blob/main/packages/earthling-ui/src/themes/dark.css): theme-dark utility.


## Component documentation

- [Accordion](https://ui.earthling.dev/components/accordion): Organizes related details into expandable sections without leaving the page.
- [Alert](https://ui.earthling.dev/components/alert): Calls attention to an important status, outcome, or next step.
- [Alert Dialog](https://ui.earthling.dev/components/alert-dialog): An interruptive confirmation dialog for actions with meaningful consequences.
- [Avatar](https://ui.earthling.dev/components/avatar): Represents a person or organization with an image and resilient fallback.
- [Badge](https://ui.earthling.dev/components/badge): Displays compact status or classification metadata beside other content.
- [Breadcrumbs](https://ui.earthling.dev/components/breadcrumbs): Shows the current page's position within a navigable hierarchy.
- [Button](https://ui.earthling.dev/components/button): Triggers an action with visual variants for emphasis and context.
- [Card](https://ui.earthling.dev/components/card): Groups a focused piece of content with optional header, body, and actions.
- [Checkbox](https://ui.earthling.dev/components/checkbox): Toggles an independent choice between checked and unchecked states.
- [Chip](https://ui.earthling.dev/components/chip): Presents a compact category, attribute, or filter value.
- [Collapsible](https://ui.earthling.dev/components/collapsible): Lets people reveal or hide a single region of supporting content.
- [Color Picker](https://ui.earthling.dev/components/color-picker): Combines two-dimensional, channel, swatch, and text color controls.
- [Context Menu](https://ui.earthling.dev/components/context-menu): A contextual action menu opened from a pointer or the keyboard.
- [Dialog](https://ui.earthling.dev/components/dialog): A modal or non-modal surface for focused tasks that need supporting context.
- [Drawer](https://ui.earthling.dev/components/drawer): A draggable edge panel for supporting tasks, filters, and compact workflows.
- [Dropdown Menu](https://ui.earthling.dev/components/dropdown-menu): A button-triggered menu of commands, choices, and nested actions.
- [Hover Card](https://ui.earthling.dev/components/hover-card): A non-essential preview for linked content, available by pointer hover or keyboard focus.
- [Input](https://ui.earthling.dev/components/input): Collects a single line of text or another native input value.
- [Kbd](https://ui.earthling.dev/components/kbd): Formats a keyboard key or shortcut inside instructions and menus.
- [Label](https://ui.earthling.dev/components/label): Names a form control and expands its clickable target.
- [Menubar](https://ui.earthling.dev/components/menubar): A persistent application menu that groups commands into keyboard-navigable menus.
- [Navigation Menu](https://ui.earthling.dev/components/navigation-menu): A responsive collection of links and optional disclosure panels for site navigation.
- [Pagination](https://ui.earthling.dev/components/pagination): Provides direct navigation through a sequence of result pages.
- [Popover](https://ui.earthling.dev/components/popover): A compact anchored surface for controls or information that needs interaction.
- [Progress](https://ui.earthling.dev/components/progress): Communicates determinate completion or an indeterminate operation in progress.
- [Radio Group](https://ui.earthling.dev/components/radio): Selects exactly one choice from a visible set of options.
- [Scroll Area](https://ui.earthling.dev/components/scroll-area): Provides a styled viewport while preserving native scrolling behavior.
- [Select](https://ui.earthling.dev/components/select): Chooses one value from a compact, keyboard-accessible menu.
- [Separator](https://ui.earthling.dev/components/separator): Creates a visual or semantic boundary between adjacent groups of content.
- [Skeleton](https://ui.earthling.dev/components/skeleton): Reserves the shape of content while its data is loading.
- [Slider](https://ui.earthling.dev/components/slider): Selects one value or a bounded range along a track.
- [Spinner](https://ui.earthling.dev/components/spinner): Indicates short activity when completion cannot be measured.
- [Surface](https://ui.earthling.dev/components/surface): Groups related content on an opaque paper or translucent glass layer.
- [Switch](https://ui.earthling.dev/components/switch): Turns an immediately applied setting on or off.
- [Table](https://ui.earthling.dev/components/table): Presents related records in a responsive, scan-friendly grid.
- [Tabs](https://ui.earthling.dev/components/tabs): Switches between related sections without leaving the current view.
- [Textarea](https://ui.earthling.dev/components/textarea): Collects longer, multi-line text with vertical resizing.
- [Toast](https://ui.earthling.dev/components/toast): A brief status message that appears without interrupting the current task.
- [Toggle Group](https://ui.earthling.dev/components/toggle-group): Groups related toggle buttons into a single selection control.
- [Tooltip](https://ui.earthling.dev/components/tooltip): A delayed, non-interactive label or hint for a focused or hovered control.