Introduction

How it works

There is no package to install and no version to follow. You copy the component files from the kit into your own components/ folder, import them like anything else you wrote, and change them when your product needs something the kit did not foresee. Nothing to update, nothing to wait on.

The components only depend on the headless library of your framework, on Motion for the few animations, and on clsx to merge class names. Styling is plain Tailwind CSS: every state is a data attribute you can read in the file.

What is inside

73 components and layouts, in 12 categories. Each component page shows its examples and its API, and the catalogue lists everything by category:

• Layouts: the shells a page sits in: sidebar, stacked, auth, detail and split.
• Page structure: headers, sections, cards, dividers and text that organise a page.
• Inputs: text, secrets, codes, phone numbers, dates, tags and images.
• Selection: one value or several, from a list, a search, a card or a switch.
• Buttons and menus: what people click: buttons, dropdown menus and the copy button.
• Overlays: dialogs, panels and tooltips that take the focus and give it back.
• Navigation: how people move around: bars, breadcrumbs, pages, steps and the palette.
• Tables: registers: the table, its cells, sorting, filters and export.
• Records: a record's facts, its status and who it belongs to.
• Activity: what happened on a record: its history, the notes on it, the notifications it sends.
• Metrics: figures and their shape: meters, sparklines and stat bands.
• Feedback: what the app says back: alerts, notices, toasts, loading and empty states.

React and Vue

The React kit builds on Headless UI, the Vue kit on Reka UI. Same component names, same props, same slots. The framework switch in the header sets which one the code blocks show, and remembers your choice.

Next steps

• Installation: copy the files, install the dependencies, wire your router.
• Theming: set your accent once as CSS variables, turn on dark mode.