dsui, a design system for Korean web apps

Preview components, blocks and themes, then take the source. Now the screens an AI writes are drawn with the same parts.

npx shadcn@latest add https://dsui.vercel.app/r/gen-ui.json

response.openuitext

root = Card([
  Input("Email", "email"),
  Button("Send", "primary")
], "Sign up")

One component definition feeds both frameworks.

What is in dsui

The library on one page. Each item has its own page with the details.

Components and blocks
Parts of a screen from buttons to charts, and ready sections such as headers and heroes. Hover, press and focus come with sound.
Tokens and themes
Colour, spacing, radius, shadow and motion are tokens. Seasonal themes change icons, sound, fonts and illustrations too.
Installed as source
A shadcn registry, not a package. One command brings the component and its files, and the copied code is yours.
Illustrations
Flat-shape pictures for heroes, a 404 and card covers. Themes can redraw them; any they skip fall back to base in the theme's colours.
AI and MCP
llms.txt, an MCP server and the dsui skill are open. AI tools find items and compose them by the rules.
Generative UI
A model can write dsui components in OpenUI and json-render. Define one once and use it in both.

A component is not built twice. One neutral spec becomes an adapter for each framework.

Define it once
Write the name, when to use it, props (zod), slots and events as a spec. Only serializable props, no callbacks or nodes.
An adapter converts it
OpenUI gets defineComponent and createLibrary, json-render gets defineCatalog and defineRegistry, and each produces its system prompt.
A model draws the screen
The OpenUI Lang or JSON spec a model writes is drawn with dsui components, and its copy follows the tone rules.

It starts with twelve components, such as Button, Input, Select, Switch, Alert, MetricCard and Card. The rest follow.

Installing one item takes about a minute.

No sign-up needed