Sluurp includes a UI kit: the shadcn/ui set of components, rebuilt for Sluurp without React, and served by the binary. Import them in any page or island; there is nothing to install.
```tsx title="islands/signup.tsx" import { Button, Input, Dialog } from "sluurp/kit"; ``` It covers what an app is made of: - **Forms:** Input, Textarea, Checkbox, Switch, Radio group, Select, Combobox, Date picker (a day, or a range across two months side by side), Time picker (hours and minutes in columns, AM and PM where the reader's clock has them), Slider, Tag input, one-time code. - **Layout:** Card, Sheet, Drawer, Dialog, Tabs, Accordion, Resizable panels, Sidebar, Scroll area. - **Feedback:** Toasts, Alerts, Tooltips, Hover cards, Progress, Skeletons, Badges, a Notifications stack (grouped cards that spring out into the list, with [Motion](https://motion.dev)). - **Data:** Table, Pagination, Charts, Calendar, Carousel, Avatars, an emoji picker. - **Menus:** Dropdown, Context menu, Menubar, Navigation menu, Command palette. Every component follows the page's light or dark theme, works with a keyboard and a screen reader, and fits an iPhone. The [admin UI](/docs/admin-ui) is built from the same parts. ## Two-way binding Give a field a signal and it's bound both ways, as `v-model` or `bind:value` are elsewhere: the field shows the signal, and typing writes back to it. No `onInput` is needed. ```tsx title="app.tsx" const title = signal(""); ``` The same goes for `Textarea`, `Switch` and `Checkbox` (`checked`), `Select`, `Combobox`, `Slider`, `DatePicker` and `TimePicker`. A number field writes a number. A plain value or a function is read-only, so a derived value can't be typed over by mistake. ## Try them Everything below is the kit, live and in this page's theme: click, type and drag. The whole island is [one file](https://github.com/SluurpHQ/sluurp/blob/master/website/islands/kit-showcase.tsx) of components with some state.