Components
50+ components, all self-contained — each ships its own .jl-* CSS classes built on the design tokens and works with or without Tailwind.
Every component ships in HTML (the .jl-* classes, plus a small vanilla JS controller for the interactive ones), Vue, and React. The last two columns tell you how a component behaves on small screens — for the details, see Responsive & mobile:
- Responsive — looks right at any width. It reflows, goes full-width, and grows its touch targets, but keeps the same shape and behavior.
- Adaptive — changes how it looks and works on a phone. Overlays dock to the bottom as sheets, the navigation collapses into a slide-in drawer, and inputs hand off to the native mobile picker. An adaptive component is responsive as well.
| Component | HTML | Vue | React | Responsive | Adaptive |
|---|---|---|---|---|---|
| Accordion | ✅ | ✅ | ✅ | — | — |
| Alert | ✅ | ✅ | ✅ | — | — |
| Anchored Popup | ✅ | ✅ | ✅ | ✅ | ✅ |
| App Shell | ✅ | ✅ | ✅ | ✅ | ✅ |
| Avatar | ✅ | ✅ | ✅ | — | — |
| Badge | ✅ | ✅ | ✅ | — | — |
| Banner | ✅ | ✅ | ✅ | — | — |
| Bottom Nav | ✅ | ✅ | ✅ | ✅ | ✅ |
| Breadcrumb | ✅ | ✅ | ✅ | ✅ | — |
| Button | ✅ | ✅ | ✅ | ✅ | — |
| Card | ✅ | ✅ | ✅ | ✅ | — |
| Carousel | ✅ | ✅ | ✅ | ✅ | ✅ |
| Chart | ✅ | ✅ | ✅ | ✅ | — |
| Checkbox | ✅ | ✅ | ✅ | ✅ | — |
| Collapsible | ✅ | ✅ | ✅ | — | — |
| Combobox | ✅ | ✅ | ✅ | ✅ | ✅ |
| Command Palette | ✅ | ✅ | ✅ | — | — |
| Date Picker | ✅ | ✅ | ✅ | ✅ | ✅ |
| Dialog | ✅ | ✅ | ✅ | ✅ | ✅ |
| Divider | ✅ | ✅ | ✅ | — | — |
| Drawer | ✅ | ✅ | ✅ | ✅ | ✅ |
| File Upload | ✅ | ✅ | ✅ | — | — |
| Dropdown Menu | ✅ | ✅ | ✅ | ✅ | ✅ |
| Empty State | ✅ | ✅ | ✅ | — | — |
| Field | ✅ | ✅ | ✅ | ✅ | — |
| Icon Button | ✅ | ✅ | ✅ | ✅ | — |
| Input | ✅ | ✅ | ✅ | ✅ | — |
| Kbd | ✅ | ✅ | ✅ | — | — |
| Number Input | ✅ | ✅ | ✅ | ✅ | — |
| Page Header | ✅ | ✅ | ✅ | ✅ | — |
| Pagination | ✅ | ✅ | ✅ | ✅ | — |
| Popover | ✅ | ✅ | ✅ | ✅ | ✅ |
| Progress | ✅ | ✅ | ✅ | — | — |
| Radio Group | ✅ | ✅ | ✅ | ✅ | — |
| Rating | ✅ | ✅ | ✅ | — | — |
| Resizable | ✅ | ✅ | ✅ | ✅ | — |
| Responsive Table | ✅ | ✅ | ✅ | ✅ | ✅ |
| Scroll Area | ✅ | ✅ | ✅ | — | — |
| Segmented Control | ✅ | ✅ | ✅ | ✅ | — |
| Select | ✅ | ✅ | ✅ | ✅ | ✅ |
| Sidebar | ✅ | ✅ | ✅ | ✅ | ✅ |
| Skeleton | ✅ | ✅ | ✅ | — | — |
| Slider | ✅ | ✅ | ✅ | — | — |
| Snippet | ✅ | ✅ | ✅ | — | — |
| Spinner | ✅ | ✅ | ✅ | — | — |
| Stat | ✅ | ✅ | ✅ | ✅ | — |
| Stepper | ✅ | ✅ | ✅ | ✅ | — |
| Swipe Row | ✅ | ✅ | ✅ | ✅ | ✅ |
| Switch | ✅ | ✅ | ✅ | ✅ | — |
| Table | ✅ | ✅ | ✅ | ✅ | — |
| Tabs | ✅ | ✅ | ✅ | ✅ | — |
| Tag | ✅ | ✅ | ✅ | — | — |
| Textarea | ✅ | ✅ | ✅ | ✅ | — |
| Timeline | ✅ | ✅ | ✅ | — | — |
| Toast | ✅ | ✅ | ✅ | — | — |
| Toggle | ✅ | ✅ | ✅ | — | — |
| Toolbar | ✅ | ✅ | ✅ | ✅ | ✅ |
| Tooltip | ✅ | ✅ | ✅ | ✅ | ✅ |
| Tree View | ✅ | ✅ | ✅ | — | — |
Run jlds list from a project with jlds.json to see what's available for your detected framework — see CLI: list.
The HTML column means the component's .jl-* CSS classes (and JS controller, where needed) work directly in markup — no CLI or framework required, see HTML.