# Use and adapt DUI

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:

```tsx
<html dir="rtl">
  <body>{children}</body>
</html>
```

For left-to-right layouts:

```tsx
<html dir="ltr">
  <body>{children}</body>
</html>
```

## 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`](https://github.com/qentrah/DUI/blob/master/registry.json). Built registry payloads are generated in [`public/r`](https://github.com/qentrah/DUI/blob/master/public/r).

## Local development

Requirements:

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

```bash
git clone https://github.com/qentrah/DUI.git
cd DUI
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

Before submitting a change:

```bash
npm run lint
npm run build
npm run registry:build
npm run registry:validate
```

## Commands in the root manifest

The captured [package.json](https://github.com/qentrah/DUI/blob/HEAD/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

1. Reproduce the smallest example from the [quick-start guide](/docs/qentrah-dui/quick-start-guide).
2. Compare required configuration and dependency versions with the README.
3. 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

- [GitHub repository](https://github.com/qentrah/DUI)
- [Original README](https://github.com/qentrah/DUI/blob/master/README.md)
- [Issues and existing reports](https://github.com/qentrah/DUI/issues)
- [Open the project website](https://dui.qentrah.com)

The catalog identifies the license as **MIT**. Read the repository license before redistributing source or assets.