Use and adapt DUI
Use and adapt DUI: Add React components through the shadcn registry, then edit the source directly in your application.
Use the documented interfaces and source layout for DUI. The sections below retain the README’s examples and configuration details.
Direction support
DUI components use logical layout utilities wherever direction matters. Set the document direction at the application boundary:
<html dir="rtl">
<body>{children}</body>
</html>For left-to-right layouts:
<html dir="ltr">
<body>{children}</body>
</html>Components
Foundations
buttoninputtextareacheckboxswitchbadgecardalertavatarprogressseparatorskeletonspinner
Product primitives
filter-chipstatus-pillempty-statecolor-dottag-chiplegend-itemlist-rowlist-itemcolor-swatchstatus-badgedepartment-dot
Application components
video-playerbannercustom-bannercode-viewerresizablecomposerai-composersearch-inputmenudropdownsidebarmobile-navmodalpopovercharttablecursor
Motion plugins
css-motiongsap-motionmotion-reveal
Blocks
blocks-sign-inblocks-sign-in-cssblocks-sign-in-gsapblocks-sessionblocks-color-filterblocks-hero-simpleblocks-hero-centeredblocks-cta-sectionblocks-feature-gridblocks-gallery-mosaicblocks-photo-storyblocks-testimonial-sectionblocks-testimonial-gridblocks-logo-cloudblocks-local-logo-wallblocks-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.
Local development
Requirements:
- Node.js 20 or newer
- npm 10 or newer
git clone https://github.com/qentrah/DUI.git
cd DUI
npm install
npm run devOpen http://localhost:3000.
Before submitting a change:
npm run lint
npm run build
npm run registry:build
npm run registry:validateCommands in the root manifest
The captured package.json declares the following scripts. Run them from the directory containing that manifest.
| Command | Script |
|---|---|
npm run dev | next dev |
npm run build | next build |
npm run start | next start |
npm run lint | eslint |
Troubleshoot a local change
- Reproduce the smallest example from the quick-start guide.
- Compare required configuration and dependency versions with the README.
- Check the linked issue tracker for the same error. Include the command, runtime version, and relevant error when reporting a problem; omit credentials.
Source and help
The catalog identifies the license as MIT. Read the repository license before redistributing source or assets.
Source captured: 2026-10-11