DUI

DUI

An open-source React component library and shadcn registry.

DUI is the design system and shadcn registry maintained by qentrah. Components are copied into your application as source code, so your team owns every line and can adapt the system without adding a runtime UI-library dependency.

Why DUI?

• Distributed through the shadcn CLI
• Zinc-first design tokens with accessible dark surfaces
• TypeScript and Tailwind CSS
• Supports LTR and RTL layouts
• Components remain inside your application and under your control
• Open source under the MIT License

Install

Initialize shadcn in an existing React project:

1npx @qentrah/dui init

Add a DUI component using the npm shortcut:

1npx @qentrah/dui add button

You can also use the shadcn CLI directly:

1npx shadcn@latest add qentrah/DUI/button

You can install multiple items:

1npx @qentrah/dui add button input card

Preview an installation without writing files:

1npx @qentrah/dui add button --dry-run

Pin a release or commit for reproducible installations:

1npx shadcn@latest add qentrah/DUI/button#v0.1.0

Components

Foundations

• button
• input
• textarea
• checkbox
• switch
• badge
• card
• alert
• avatar
• progress
• separator
• skeleton
• spinner

Product primitives

• filter-chip
• status-pill
• empty-state
• color-dot
• tag-chip
• legend-item
• list-row
• list-item
• color-swatch
• status-badge
• department-dot

Application components

• video-player
• banner
• custom-banner
• code-viewer
• resizable
• composer
• ai-composer
• search-input
• menu
• dropdown
• sidebar
• mobile-nav
• modal
• popover
• chart
• table
• cursor

Motion plugins

• css-motion
• gsap-motion
• motion-reveal

Blocks

• blocks-sign-in
• blocks-sign-in-css
• blocks-sign-in-gsap
• blocks-session
• blocks-color-filter
• blocks-hero-simple
• blocks-hero-centered
• blocks-cta-section
• blocks-feature-grid
• blocks-gallery-mosaic
• blocks-photo-story
• blocks-testimonial-section
• blocks-testimonial-grid
• blocks-logo-cloud
• blocks-local-logo-wall
• blocks-faq-section

Blocks install their declared DUI primitives automatically. Motion-enhanced variants are separate registry entries, so products can start with the normal block and opt into CSS or GSAP only when needed.

The source of truth is registry.json. Built registry payloads are generated in public/r.

Direction support

DUI components use logical layout utilities wherever direction matters. Set the document direction at the application boundary:

1<html dir="rtl">
2  <body>{children}</body>
3</html>

For left-to-right layouts:

1<html dir="ltr">
2  <body>{children}</body>
3</html>

Local development

Requirements:

• Node.js 20 or newer
• npm 10 or newer

1git clone https://github.com/qentrah/DUI.git
2cd DUI
3npm install
4npm run dev

Open http://localhost:3000.

Before submitting a change:

1npm run lint
2npm run build
3npm run registry:build
4npm run registry:validate

Registry structure

1app/                 Documentation website
2components/ui/       Installable component source
3components/library/  Documentation previews
4lib/                 Shared utilities and catalogs
5public/r/            Generated registry payloads
6registry.json        Registry source of truth
7components.json      Local shadcn configuration

When adding an installable component:

1. Add its source to components/ui.
2. Declare the item and dependencies in registry.json.
3. Add its documentation metadata to lib/catalog.ts.
4. Add a preview and example source.
5. Build and validate the registry.

Contributing

Contributions are welcome. Read CONTRIBUTING.md before opening a pull request. By participating, you agree to follow the CODE_OF_CONDUCT.md.

For security issues, follow the private reporting process in SECURITY.md.

License

DUI is available under the MIT License.