UI kit

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.

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).
• 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 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.

const title = signal("");
<Input value={title} placeholder="What needs doing?" />

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 of components with some state.