CALIPER UICaliper UI
Typed React components on native HTML and Tailwind. React is the only dependency.
pnpm add caliper-uinpm install caliper-uiyarn add caliper-uibun add caliper-uiComponent preview
Shown under the field.
64 px
0 px100 px
Button geometry
Control height 32 px. Corner radius 4 px. Focus ring 1 px. Four variants: solid, outline, ghost, destructive.
⌘KEsc
| Token | Value |
|---|---|
| Radius | 4px |
| Height | 32px |
Open the dialog, then try Tab, Shift+Tab, and Escape.
Use the header command menu, or press ⌘K or Ctrl+K.
What you install
- Runtime
- React
- Styling
- Tailwind CSS
- Helper
- cn
Command menu
Open command menu⌘K
Move selection↑↓
Run selected actionEnter
CloseEsc
Components
Choose a name to open it in the preview.
| Component | Behavior | Source file |
|---|---|---|
| Button | 4 variants, 3 sizes | button.tsx |
| Input | Native input, invalid state | input.tsx |
| Textarea | Native textarea | textarea.tsx |
| Checkbox | Native checkbox and a visible label | checkbox.tsx |
| Radio Group | Native radios in a fieldset | radio-group.tsx |
| Dialog | Native dialog, controlled or uncontrolled | dialog.tsx |
| Command Palette | Search, arrows, Enter, ⌘K or Ctrl+K | command-palette.tsx |
| Table | Semantic table, scrolls sideways | table.tsx |
| Kbd | Keyboard key labels | kbd.tsx |
| Field | Label, hint, and error | field.tsx |
| Gauge | Native meter and a readout | gauge.tsx |
| Progress | Native progress bar | progress.tsx |
| Slider | Native range input | slider.tsx |
| Select | Native select | select.tsx |
| Dropdown Menu | Popover menu, submenu, separator | dropdown-menu.tsx |
| Disclosure | Native details | disclosure.tsx |
| Icons | Inline SVGs | icons.tsx |