Getting started

Documentation

DUI gives your team owned component source instead of another runtime dependency. Install only what you need and adapt it inside your application.

Installation

Initialize shadcn in your React project, then add components directly from the qentrah registry.

npx shadcn@latest init

npx shadcn@latest add qentrah/DUI/button

Project setup

The CLI copies source into your configured components directory.

Required npm dependencies are installed automatically.

Aliases follow the consuming project’s components.json configuration.

Theming

DUI uses a Zinc-first neutral palette. Components inherit your Tailwind tokens and remain easy to restyle inside the consuming application.

RTL and Arabic

DUI uses logical CSS properties such as margin-inline-start through Tailwind’s ms-* and ps-* utilities. Set dir="rtl" on the document for Arabic interfaces.

Motion blocks

Animation is offered as a plugin variant on an existing block. On the Sign In block page, documentation tabs switch between Normal, CSS animation, and GSAP animation. Those tabs are not installed in your application; the selected CLI command installs only the block and its chosen animation plugin.

npx shadcn@latest add qentrah/DUI/blocks-sign-in

npx shadcn@latest add qentrah/DUI/blocks-sign-in-css

npx shadcn@latest add qentrah/DUI/blocks-sign-in-gsap

Cursor interactions are hidden on coarse pointers, and animation blocks respect the user’s reduced-motion preference.

Registry workflow

Every installable item is declared in the root registry.json and built into public/r for inspection and hosted usage.

Browse components