A production-ready component registry designed for developers building AI Applications, Decentralized Applications, Developer Tools, and Professional Portfolios.
DeDevs UI is a comprehensive design system and component registry built with shadcn/ui compatibility and custom CLI tooling. It provides specialized components and patterns specifically crafted for modern development needs, enabling developers to rapidly build sophisticated applications across multiple domains.
This monorepo is built with Turborepo and follows a modular architecture:
dedevs-ui/
├── apps/
│ └── docs/ # Next.js documentation site
│ ├── app/ # App router pages
│ ├── content/ # MDX documentation
│ └── public/registry/ # Generated component registry
├── packages/
│ ├── ai/ # AI-specific components
│ ├── code-block/ # Code display components
│ ├── editor/ # Editor components
│ ├── shadcn-ui/ # Base shadcn/ui components
│ ├── snippet/ # Code snippet components
│ └── ui/ # Custom UI components
├── scripts/
│ ├── index.ts # CLI entry point
│ ├── generate-registry.js # Registry generation
│ ├── discover-components.js # Component discovery
│ └── register-all-components.js # Batch registration
└── dist/
└── index.js # Built CLI executable
npx your-registry add component)# Install components directly from the registry
npx dedevs-ui add button card dialog
# Or install the CLI globally
npm install -g dedevs-ui
dedevs-ui add ai-chat code-block editor
# Clone the repository for local development
git clone https://github.com/DeDevsClub/dedevs-ui.git
cd dedevs-ui
# Install dependencies
pnpm install
# Start development server
pnpm dev
The documentation site will be available at http://localhost:3422
Create a new package in packages/:
mkdir packages/your-component
cd packages/your-component
Create the component structure:
packages/your-component/
├── package.json
├── src/
│ └── index.tsx
└── README.md
package.json:
{
"name": "@repo/your-component",
"version": "0.0.1",
"private": true,
"main": "src/index.tsx",
"types": "src/index.tsx"
}
src/index.tsx:
import React from 'react';
import { cn } from '@/lib/utils';
export interface YourComponentProps {
className?: string;
children?: React.ReactNode;
}
export const YourComponent = ({ className, children, ...props }: YourComponentProps) => {
return (
<div className={cn('your-component-styles', className)} {...props}>
{children}
</div>
);
};
export default YourComponent;
This starter kit includes an automated registry generation system that scans your components and builds the complete registry with a single command.
Quick Start - Build Complete Registry:
# Generate and build the complete registry in one command
pnpm run registry
This command will:
registry.json file with proper shadcn/ui schemapublic/r/For more granular control, you can run each step separately:
# 1. Generate the registry.json file by scanning packages
pnpm run gen:registry
# 2. Build the registry (creates individual JSON files)
pnpm run build:registry
The automated system:
packages/ directory: Automatically discovers all TypeScript/TSX component fileseslint-config, typescript-config, and shadcn-ui packagesai package to create individual registry entriesWhen you add new components:
packages/ directorypnpm run registry to regenerate the complete registryThe automated process creates:
registry.json - Main registry file with all component metadatapublic/r/[component].json - Individual component files for CLI consumptionEach component generates a registry file like this:
{
"name": "your-component",
"description": "A custom component for your design system",
"dependencies": ["@radix-ui/react-slot"],
"devDependencies": ["@types/react"],
"registryDependencies": ["utils"],
"files": [
{
"name": "your-component.tsx",
"content": "...component source code..."
}
],
"type": "components:ui"
}
The scripts/generateRegistry.ts file is the heart of the automated registry system. Here's how it works:
packages/ directory for all subdirectories.ts and .tsx files while excluding test filesai packageTo customize the registry generation for your needs:
COMPONENT_DESCRIPTIONS object in scripts/generateRegistry.ts:const COMPONENT_DESCRIPTIONS: Record<string, string> = {
'your-component': 'Description of your component',
'another-component': 'Another component description',
// Add your components here
};
excludedPackages array:const excludedPackages = ['eslint-config', 'typescript-config', 'your-excluded-package'];
const registry: Registry = {
$schema: 'https://ui.shadcn.com/schema/registry.json',
name: 'your-registry-name',
homepage: 'https://your-registry-homepage.com',
items: allItems
};
When you run pnpm run gen:registry, you'll see output like:
🔍 Scanning packages directory...
📦 Processing package: ai
📦 Processing package: code
✅ Registry generated successfully!
📄 Generated 14 component(s):
- ai-branch: AI conversation branch component
- code: Code component (includes code-block, code-editor, code-snippet)
💾 Registry saved to: registry.json
# Build the CLI
pnpm build:cli
# Test the CLI locally
pnpm test:cli
Ensure your registry is complete:
# Generate and build the complete registry
pnpm run registry
# Build the CLI
pnpm run build:cli
# Build the documentation site
pnpm run build
# Patch version (bug fixes)
pnpm pub:patch
# Minor version (new features)
pnpm pub:minor
# Major version (breaking changes)
pnpm pub:major
Deploy your docs site to Vercel, Netlify, or your preferred platform:
# For Vercel
vercel --prod
# For Netlify
netlify deploy --prod --dir=apps/docs/out
Install components from the DeDevs UI registry:
# Install components using npx
npx dedevs-ui add ai-chat code-block editor
# Or install globally
npm install -g dedevs-ui
dedevs-ui add button card dialog
# Start development server
pnpm dev
# Add new components to packages/
# Regenerate the complete registry
pnpm run registry
# Test CLI locally
pnpm run test:cli
# Lint code
pnpm lint
# Format code
pnpm format
# Type checking
pnpm build
# Validate registry
pnpm validate:registry
pnpm discover:components
pnpm register:all
pnpm gen:registry
pnpm build:cli
pnpm test:cli
pnpm pub:minor # or patch/major
| Script | Description |
|---|---|
pnpm dev | Start development server |
pnpm build | Build all packages and apps |
pnpm build:cli | Build CLI executable |
pnpm test:cli | Test CLI locally |
pnpm run gen:registry | Generate registry.json by scanning packages |
pnpm run build:registry | Build individual component JSON files |
pnpm run registry | Complete registry generation and build |
pnpm pub:patch/minor/major | Version bump and publish |
pnpm lint | Lint codebase |
pnpm format | Format code |
pnpm clean | Clean node_modules and build artifacts |
pnpm bump-deps | Update all dependencies |
pnpm bump-ui | Update shadcn/ui components |
pnpm run registry after adding new components to regenerate the complete registryscripts/generateRegistry.ts for new componentspnpm run test:cli before publishingContributions are welcome! Please read our contributing guidelines and submit pull requests for any improvements.
git clone https://github.com/your-username/dedevs-ui.gitpnpm installgit checkout -b feature/amazing-featureThis project is licensed under the MIT License. See the LICENSE file for details.
Ready to accelerate your development with DeDevs UI? 🚀
Whether you're building AI applications, decentralized apps, developer tools, or professional portfolios, DeDevs UI provides the components and patterns you need. Start by installing components via CLI or explore the full documentation to see what's available for your next project!
FAQs
CLI tool for adding components from the DeDevs UI Design Registry
We found that dedevs-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Research
/Security News
Malicious Chrome and Firefox extensions target Axiom Trade and Padre users, stealing session tokens and wallet data.
Security News
GPT-6 Astra hits 100% on ExploitBench and finds zero-days autonomously, while independent tests reveal scope violations and monitoring gaps.
Product
Socket can now send alerts and supply chain attack notifications to Microsoft Teams, with filters that route the right updates to each channel.