Setup

Installing the DeDevs UI Design Registry is straightforward and can be done in a couple of ways. You can use the dedicated DeDevs UI CLI for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.

This guide will walk you through the prerequisites and the installation steps for both methods, complete with example commands. By the end, you'll have specialized components ready to use in your project across various domains including AI interfaces, blockchain applications, and developer portfolios.

Prerequisites

Before installing DeDevs UI Design Registry, make sure your environment meets the following requirements:

• Node.js, version 18 or later
• A React project, version 18 or later
• shadcn/ui installed in your project. In practice, this means you have already initialized shadcn in your project (for example by running npx shadcn@latest init and configuring Tailwind CSS). DeDevs UI Design Registry currently supports only the CSS Variables mode of shadcn/ui for theming.

Installing Components

You can install DeDevs UI Design Registry components using either the DeDevs UI CLI or the shadcn/ui CLI. Both achieve the same result: adding the selected component's code and any needed dependencies to your project. For example, to install a component, you would run:

dedevsshadcn

npx dedevs-ui@latest add snippet

The CLI will download the component's code and integrate it into your project's directory (usually under your components folder). By default, Design Registry components are added to the @/components/ui/dedevs-ui/ directory (or whatever folder you've configured in your shadcn components settings).

For instance, the command above will place the component files in @/components/ui/dedevs-ui/snippet/. The CLI also ensures that any required dependencies (for example, specific headless libraries a component might need) are installed automatically.

Component Categories

The Design Registry includes specialized components across multiple domains:

AI Interface Components:

• AI Response - Renders AI-generated content with markdown support
• AI Input - Enhanced input fields for AI conversations
• AI Reasoning - Visualizes AI thought processes and decision-making

Blockchain/Web3 Components:

• Wallet Connect - Wallet connection and management interfaces
• Token Display - Token balances and information displays
• Transaction History - Transaction lists and status tracking

Developer Portfolio Components:

• Project Showcase - Interactive project galleries and case studies
• Code Snippet - Syntax-highlighted code displays with copy functionality
• Skill Matrix - Visual skill and technology displays

General Purpose Components:

• Theme Switcher - Dark/light mode toggle with system preference detection
• Interactive Elements - Enhanced buttons, forms, and navigation components

To install any of these components, use the same CLI command pattern:

npx dedevs-ui add <component-name>