DUI: An Open-Source React Component Library and shadcn Registry

Overview

DUI is an open-source React component library and shadcn registry designed to provide a robust design system for developers. It is distributed through the shadcn CLI, offering a Zinc-first design with accessible dark surfaces. Built with TypeScript and Tailwind CSS, DUI supports both LTR (Left-to-Right) and RTL (Right-to-Left) layouts, ensuring versatility across different applications. A key feature of DUI is that components remain inside your application, keeping them under your control. The library is open-source and available under the MIT License.

Benefits

DUI offers several key advantages for developers. It provides a wide range of components categorized into four main groups: Foundations, Product Primitives, Application Components, and Motion Plugins. Foundations include basic building blocks like buttons, inputs, textareas, checkboxes, switches, badges, cards, alerts, avatars, progress bars, separators, skeletons, and spinners. Product Primitives are designed for product-specific needs and include filter chips, status pills, empty states, color dots, tag chips, legend items, list rows, list items, color swatches, status badges, and department dots. Application Components are advanced components for complex application needs such as video players, banners, custom banners, code viewers, resizable elements, composers, AI composers, search inputs, menus, dropdowns, sidebars, mobile navigation, modals, popovers, charts, tables, and cursors. Motion Plugins allow developers to add motion effects using CSS, GSAP, or motion reveal. Additionally, DUI offers pre-built blocks for common layouts and sections like sign-in pages, session blocks, color filters, hero sections, CTA sections, feature grids, gallery mosaics, photo stories, testimonial sections, testimonial grids, logo clouds, local logo walls, and FAQ sections. These blocks automatically install their declared DUI primitives. Motion-enhanced variants are separate registry entries, allowing products to start with the normal block and opt into CSS or GSAP only when needed. DUI components use logical layout utilities wherever direction matters, supporting both left-to-right and right-to-left layouts. The library is open-source and available under the MIT License, making it accessible to all developers.

Use Cases

DUI can be used in a variety of scenarios. Developers can initialize shadcn in an existing React project using the commandnpx @qentrah/dui init. Once initialized, they can add DUI components using the npm shortcutnpx @qentrah/dui add button. Alternatively, they can use the shadcn CLI directly with the commandnpx shadcn@latest add qentrah/DUI/button. For installing multiple components at once, developers can usenpx @qentrah/dui add button input card. They can also preview an installation without writing files using the--dry-runflag with the commandnpx @qentrah/dui add button --dry-run. To ensure reproducible installations, developers can pin a specific release or commit using the commandnpx shadcn@latest add qentrah/DUI/button#v0.1.0. DUI is suitable for developers who need a robust design system for their React applications, especially those working with TypeScript and Tailwind CSS. It is ideal for projects that require support for both left-to-right and right-to-left layouts, such as international applications or those targeting diverse user bases. Developers can also contribute to DUI or develop locally by ensuring they have Node.js 20 or newer and npm 10 or newer. They can set up the local development environment by cloning the repository, installing dependencies, and running the development server. Before submitting a change, developers should run linting, building, and registry validation commands to ensure code quality.

Pricing

DUI is available under the MIT License, which means it is free to use and modify. There are no associated costs for using the library.

Vibes

There are no specific reviews, testimonials, or public reception details available in the provided article about DUI.

Additional Information

DUI is an open-source project available under the MIT License. Contributions to DUI are welcome, and developers can refer to the project's contribution guidelines for more information on how to contribute. For security issues, developers should follow the private reporting process outlined in the project's security policy. The registry structure is organized into several directories, includingapp/for the documentation website,components/ui/for installable component source,components/library/for documentation previews,lib/for shared utilities and catalogs,public/r/for generated registry payloads,registry.jsonas the registry source of truth, andcomponents.jsonfor local shadcn configuration. When adding an installable component, developers should add its source tocomponents/ui, declare the item and dependencies inregistry.json, add its documentation metadata tolib/catalog.ts, add a preview and example source, and then build and validate the registry.