Introduction

dsui is a library of React components, blocks and themes for building Korean web apps. Colour, spacing, corners, shadows and motion are all set as tokens, and the components read only those tokens. Change a token and the whole screen changes with it.

You don't install it as a package. You copy the source files into your project. The registry is open in the shadcn format, so one npx shadcn command brings in a component and the shared files it needs. The copied code is your code, so you can change it as you like.

Most components and blocks are refined from MIT-licensed items. Installing one also brings in a LICENSE file with the copyright notice. Leave it in place.

dsui is also used to build the devs7udio studio site. The header, footer, 404 screen, buttons and input fields on this site are all dsui items.

The current version is on the v badge above. It matches the newest entry of the changelog, and the same number is written in the README of the design-system artifact.

Every component and block shares the same foundation.

• Tokens: foundation.css holds colour, type, corner, shadow and motion duration variables. Light and dark values live side by side.
• Motion: springs and curves for presses, panels and moving highlights are called by name.
• Sound: each role, such as click, select, open and close, has a short sound effect. People can turn sounds off or lower the volume.
• Icons: interface icons such as close, check and arrows are called by role name. A theme can swap the icons.
• Illustrations: call one by name, like <Illustration name="hero-collage" animated />. Colours are theme tokens; a picture a theme has not drawn is the base one in the theme's colours. AuthPanel, FaqSection, ContactSection and SiteFooter take an illustration prop, and the NotFound (404) block carries one by default.

Every item has its own page. The Button page, for example, is laid out like this.

• Preview: a working demo of the real component. You can switch light, dark and themes.
• Controls: in the right-hand panel, change the item's real properties, such as kind, size or disabled, and the preview updates right away. Colour and corners belong to the theme, so you only pick the theme to preview.
• Description: the title, a one-line summary and tags tell you what the item is.
• Source: the files in the item, as they are. You can also view them as Markdown.
• Install: the install command in npm, pnpm, yarn and bun tabs. You can also expand the files, npm packages and shared items it brings in. Items that can't be installed yet show a note instead of a command.
• AI prompt: instructions to paste into an AI tool so it builds a similar screen. Only some items have one.
• Related items: the items this one uses, the blocks that use it and similar items.

Install a single component by its URL. Let's add the button.

npx shadcn@latest add https://dsui.vercel.app/r/button.json

Blocks work the same way. The components a block uses come with it.

npx shadcn@latest add https://dsui.vercel.app/r/faq-section.json

After installing, import the shared token file components/arc/foundation.css once in your global stylesheet. Without it, components get no colours or corners. The full steps are in Installation.

• Korean copy is the default. Notices, accessibility labels and error messages are written in a friendly Korean tone. Dates and numbers default to ko-KR and the time zone to Asia/Seoul. Some sample content in blocks is still in English.
• Input fields fill in on focus. Instead of drawing a ring, the field surface fills with the accent colour and the text colour changes. On an error it fills with the danger colour.
• Sound and motion are handled by role too. Components call role names such as click and open, not file names. That lets a theme change sounds and movement.
• Themes inherit. A new theme inherits base and lists only the values it changes. Colour, icons, sounds, motion, type, corners, shadows and illustrations that it leaves out carry over; illustrations inherit one picture at a time.

• Generative UI (preview): an AI model builds screens with dsui components. OpenUI and json-render are both supported, and a component is defined once.
• 17 illustrations for heroes, section headers, card covers, page tops, the splash screen and a footer band, with pictures the seasonal themes drew themselves.
• The NotFound block (404) with an illustration and a way back.
• Headers: the app header uses the full logo and lifts into a floating bar when you scroll.
• The control panel now adjusts each item's real properties.
• Addresses: install from /r/<name>.json; AI documents are at /llms.txt and /items/<name>.md. The earlier addresses redirect.

The full list is in the changelog.

• InstallationWhat you need, install commands, where files go and troubleshooting.
• ThemingHow tokens connect and how to make your own theme.
• AI and MCPTell AI tools about dsui with llms.txt, item Markdown and the MCP server.
• Generative UIHow to let an AI model build screens with dsui components.