UI Elements
UI Elements components: compare
Every UI Elements component side by side: whether it follows the theme or stays dark, how many parts and custom props it has, and whether it is free. Open one for its preview, API and install.
Compare
| Component | Theme | Parts | Custom props | Access |
|---|---|---|---|---|
| Cloud Dancer Slider | Light and dark | 1 | 1 | Free |
| Install Command | Light and dark | 1 | 1 | Free |
| Install Switcher | Light and dark | 1 | 2 | Free |
| Segmented Control | Light and dark | 2 | 2 | Free |
| Stepper | Light and dark | 9 | 14 | Free |
All UI Elements components
5 components, A to Z.
Cloud Dancer SliderFreeBase UI slider dressed as the Cloud Dancer pill: a teal-shaded off-white strip with a dark filled range and a dark orb thumb. Takes one value or a range, with a label per thumb.
Install CommandFreeCopyable shell command in an InputGroup: a $ prompt, the command in Geist Mono and a copy button. If copying fails it selects the text and shows a hint; add the dark class over art.
Install SwitcherFreeInstall command with the package manager as a gliding segmented switch inside the pill: pick pnpm, npm, yarn or bun and the command rewrites; the copy button copies the one showing. Narrow, the switch takes the pill's top row. Add the dark class over art.
Segmented ControlFreePill segmented control on Base UI ToggleGroup: a muted track where a lifted card-ground thumb glides to the pressed item, still under reduced motion. Horizontal only; values are arrays, as in Base UI.
StepperFreeComposable step indicator with list, item, trigger, indicator, title, separator and content parts. Choose numbered steps or progress bars and one of four rail inks; navigation is linear by default.
Thermal Shell
Dark Thermal container painting a void-to-ember radial ground, a status-driven ember glow with heat haze at combustion, and SoftGrain. Uses motion; haze is skipped under reduced motion.
Cloud Dancer Slider
Base UI slider dressed as the Cloud Dancer pill: a teal-shaded off-white strip with a dark filled range and a dark orb thumb. Takes one value or a range, with a label per thumb.