A data-driven Svelte 5 component library

Pass the data.
The component does the rest.

A list is an items array. A tree is a nested shape. A form is its schema. Rokkit components read their own data — selection, validation, theming, keyboard, a11y — so your code stays about what the user sees, not how to wire it.

$ bun add @rokkit/ui

Open the playground Try the chat

data in component out

What makes Rokkit different

Data is the API

A List takes items. A Tree takes a nested shape. A Form reads its schema. No snippet trees, no recursive composition — pass the data, get a working control.

One config drives every look

Pick a style (zen-sumi, rokkit, minimal, material), a skin (paper / ink / accent palette), a typography pair, a density. Set it once on the body — every component picks it up.

Density is a data attribute

Compact for a power-user table. Cozy for a settings page. Comfortable for an onboarding flow. Type stays put — only the rhythm changes.

Embeddable in any AI surface

Every component is a typed artifact — items in, value out, no global state. Drop one into Claude, into your own chat, into Rokkit's playground. Same code, themed to its host.

One component · four styles

The same `<Tabs/>`, rendered four ways — by changing one attribute on the parent.

No variant prop. No conditional CSS in the component. The style — zen-sumi underline, rokkit block, minimal hairline, material pill — comes from data-style on the body. Components don't know which one is on; they just render.

data-style="zen-sumi" ink fill · saffron brand

data-style="rokkit" gradient · ocean brand

data-style="minimal" underline · violet brand

data-style="material" pill · rose brand

For AI · for chat surfaces

Components that
belong in a conversation.

Stream a JSON spec from your model. Rokkit's <Form/>, <Table/>, <Chart/> render the response as a real, themed, interactive artifact. The user clicks. Your model gets the result back.

Human-in-the-loop forms — AI proposes, user confirms
Themed to the host product, not to Rokkit
Same code in the embed, in your app, in Rokkit's own docs
Components serialize to and from JSON

Open the chat demo

/chat · Rokkit demo live components inline

you

Lock the Q3 plan — give me the three priorities and a deadline.

Rokkit

Here's the Q3 plan as an editable form. Toggle the boxes and pick a deadline — submit when ready and I'll continue.

Q3 plan · priorities

Ship rokkit v2.0

Launch the playground beta

Improve a11y coverage

Deadline 30 Sep 2026

EDITABLE RECORD

thinking

picking the right tool…

The eight packages

Pull in only what you need.

see all on npm ↗

@rokkit/core

primitives, tokens, types

@rokkit/data

item shapes, stores

@rokkit/actions

svelte actions: themable, keyboard, focus

@rokkit/states

finite states for interactive UI

@rokkit/icons

icon set · customizable

@rokkit/themes

styles · skins · typography pairs

@rokkit/forms

schema + layout forms

@rokkit/chart

data-driven SVG charts

@rokkit/blocks

markdown code-fence plugins · chart, table, form, list, stepper

NEW

@rokkit/ui

the components themselves

The library is the chat is the docs.

Open the playground, ask for any component or how-to, get a real working artifact back. Browse the same components from the sidebar. Read the same docs they were mounted from.