{"id":30653998,"url":"https://github.com/dedevsclub/dedevs-ui","last_synced_at":"2025-08-31T08:10:07.636Z","repository":{"id":279001711,"uuid":"937442311","full_name":"DeDevsClub/dedevs-ui","owner":"DeDevsClub","description":"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.","archived":false,"fork":false,"pushed_at":"2025-08-26T08:27:35.000Z","size":7970,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"v2","last_synced_at":"2025-08-26T08:42:49.966Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ui.dedevs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DeDevsClub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["DeDevsClub"]}},"created_at":"2025-02-23T03:58:26.000Z","updated_at":"2025-08-26T08:27:39.000Z","dependencies_parsed_at":"2025-07-12T13:15:23.428Z","dependency_job_id":"7baf4e37-e7ce-4821-9f44-7a39e3f35012","html_url":"https://github.com/DeDevsClub/dedevs-ui","commit_stats":null,"previous_names":["dedevsclub/dev-ui","dedevsclub/dedevs-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DeDevsClub/dedevs-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdedevs-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdedevs-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdedevs-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdedevs-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DeDevsClub","download_url":"https://codeload.github.com/DeDevsClub/dedevs-ui/tar.gz/refs/heads/v2","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdedevs-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272953955,"owners_count":25021136,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-31T08:10:06.150Z","updated_at":"2025-08-31T08:10:07.625Z","avatar_url":"https://github.com/DeDevsClub.png","language":"TypeScript","funding_links":["https://github.com/sponsors/DeDevsClub"],"categories":[],"sub_categories":[],"readme":"# 🎨 DeDevs UI Design Registry\n\n\u003e **A production-ready component registry designed for developers building AI Applications, Decentralized Applications, Developer Tools, and Professional Portfolios.**\n\nDeDevs 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.\n\n## 🌟 Why Choose DeDevs UI?\n\n### **For AI Application Developers**\n\n* **AI-specific components**: Chat interfaces, conversation branches, AI response displays\n* **Interactive elements**: Code blocks with syntax highlighting, copy functionality\n* **Real-time features**: Live data visualization and streaming content support\n* **Modern UX patterns**: Optimized for AI-driven user experiences\n\n### **For Decentralized Application (dApp) Builders**\n\n* **Web3 components**: Wallet connection interfaces, transaction displays\n* **Blockchain interactions**: Smart contract integration patterns\n* **Crypto-native UX**: Token displays, NFT galleries, DeFi interfaces\n* **Security-first design**: Built-in best practices for Web3 security\n\n### **For Developer Tool Creators**\n\n* **Code-centric components**: Advanced editors, syntax highlighting, diff viewers\n* **Documentation tools**: API explorers, interactive examples\n* **Development workflows**: Build status indicators, deployment dashboards\n* **CLI integration**: Seamless command-line tool interfaces\n\n### **For Professional Portfolio Sites**\n\n* **Showcase components**: Project galleries, skill matrices, timeline displays\n* **Interactive elements**: Live demos, code previews, contact forms\n* **Professional layouts**: Resume sections, testimonial displays\n* **Performance optimized**: Fast loading, SEO-friendly components\n\n## 🏗️ Architecture Overview\n\nThis monorepo is built with **Turborepo** and follows a modular architecture:\n\n```\ndedevs-ui/\n├── apps/\n│   └── docs/                    # Next.js documentation site\n│       ├── app/                 # App router pages\n│       ├── content/             # MDX documentation\n│       └── public/registry/     # Generated component registry\n├── packages/\n│   ├── ai/                      # AI-specific components\n│   ├── code-block/              # Code display components\n│   ├── editor/                  # Editor components\n│   ├── shadcn-ui/               # Base shadcn/ui components\n│   ├── snippet/                 # Code snippet components\n│   └── ui/                      # Custom UI components\n├── scripts/\n│   ├── index.ts                 # CLI entry point\n│   ├── generate-registry.js     # Registry generation\n│   ├── discover-components.js   # Component discovery\n│   └── register-all-components.js # Batch registration\n└── dist/\n    └── index.js                 # Built CLI executable\n```\n\n### **Core Components**\n\n1. **📦 Component Packages**: Modular packages containing reusable components\n2. **🛠️ CLI Tool**: Custom CLI for installing components (`npx your-registry add component`)\n3. **📚 Documentation Site**: Next.js app with live examples and installation guides\n4. **🤖 Automation Scripts**: Tools for component discovery and registry generation\n5. **📋 Registry System**: JSON-based component metadata and file definitions\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n* **Node.js** 18+ and **pnpm** (recommended)\n* **Git** for version control\n\n### 1. Installation via CLI\n\n```bash\n# Install components directly from the registry\nnpx dedevs-ui add button card dialog\n\n# Or install the CLI globally\nnpm install -g dedevs-ui\ndedevs-ui add ai-chat code-block editor\n```\n\n### 2. Local Development Setup\n\n```bash\n# Clone the repository for local development\ngit clone https://github.com/DeDevsClub/dedevs-ui.git\ncd dedevs-ui\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n```\n\nThe documentation site will be available at `http://localhost:3422`\n\n### 3. Component Categories\n\n#### AI Application Components\n\n* **AI Chat**: Conversation interfaces with streaming support\n* **AI Branch**: Multi-path conversation displays\n* **Code Block**: Syntax-highlighted code with AI integration\n* **Response Display**: AI-generated content presentation\n\n#### Developer Tool Components\n\n* **Editor**: Advanced code editing interfaces\n* **Snippet**: Code snippet management and display\n* **Terminal**: Command-line interface components\n* **Documentation**: Interactive API documentation\n\n#### Portfolio \u0026 Professional Components\n\n* **Project Showcase**: Portfolio project displays\n* **Skill Matrix**: Technology and skill visualization\n* **Timeline**: Career and project timelines\n* **Contact Forms**: Professional contact interfaces\n\n## 🔧 Component Development\n\n### Creating New Components\n\n#### 1. Manual Component Creation\n\nCreate a new package in `packages/`:\n\n```bash\nmkdir packages/your-component\ncd packages/your-component\n```\n\nCreate the component structure:\n\n```\npackages/your-component/\n├── package.json\n├── src/\n│   └── index.tsx\n└── README.md\n```\n\n#### 2. Component Package Structure\n\n**`package.json`**:\n\n```json\n{\n  \"name\": \"@repo/your-component\",\n  \"version\": \"0.0.1\",\n  \"private\": true,\n  \"main\": \"src/index.tsx\",\n  \"types\": \"src/index.tsx\"\n}\n```\n\n**`src/index.tsx`**:\n\n```tsx\nimport React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface YourComponentProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport const YourComponent = ({ className, children, ...props }: YourComponentProps) =\u003e {\n  return (\n    \u003cdiv className={cn('your-component-styles', className)} {...props}\u003e\n      {children}\n    \u003c/div\u003e\n  );\n};\n\nexport default YourComponent;\n```\n\n### Registry Building Process\n\n#### Automated Registry Generation\n\nThis starter kit includes an automated registry generation system that scans your components and builds the complete registry with a single command.\n\n**Quick Start - Build Complete Registry:**\n\n```bash\n# Generate and build the complete registry in one command\npnpm run registry\n```\n\nThis command will:\n\n1. Scan all packages for component files\n2. Generate the `registry.json` file with proper shadcn/ui schema\n3. Build individual component JSON files in `public/r/`\n4. Make your registry ready for CLI consumption\n\n#### Individual Commands\n\nFor more granular control, you can run each step separately:\n\n```bash\n# 1. Generate the registry.json file by scanning packages\npnpm run gen:registry\n\n# 2. Build the registry (creates individual JSON files)\npnpm run build:registry\n```\n\n#### How It Works\n\nThe automated system:\n\n* **Scans `packages/` directory**: Automatically discovers all TypeScript/TSX component files\n* **Excludes config packages**: Ignores `eslint-config`, `typescript-config`, and `shadcn-ui` packages\n* **Handles AI components**: Special logic for the `ai` package to create individual registry entries\n* **Generates descriptions**: Maps component names to meaningful descriptions\n* **Creates proper schema**: Follows the official shadcn/ui registry format\n\n#### Adding New Components\n\nWhen you add new components:\n\n1. Create your component in the appropriate `packages/` directory\n2. Run `pnpm run registry` to regenerate the complete registry\n3. Your new component will be automatically discovered and included\n\n#### Registry Structure\n\nThe automated process creates:\n\n* `registry.json` - Main registry file with all component metadata\n* `public/r/[component].json` - Individual component files for CLI consumption\n\n### Registry File Structure\n\nEach component generates a registry file like this:\n\n```json\n{\n  \"name\": \"your-component\",\n  \"description\": \"A custom component for your design system\",\n  \"dependencies\": [\"@radix-ui/react-slot\"],\n  \"devDependencies\": [\"@types/react\"],\n  \"registryDependencies\": [\"utils\"],\n  \"files\": [\n    {\n      \"name\": \"your-component.tsx\",\n      \"content\": \"...component source code...\"\n    }\n  ],\n  \"type\": \"components:ui\"\n}\n```\n\n### Registry Generation Script Details\n\nThe `scripts/generateRegistry.ts` file is the heart of the automated registry system. Here's how it works:\n\n#### Script Features\n\n* **Automatic Package Discovery**: Scans the `packages/` directory for all subdirectories\n* **Component File Detection**: Identifies `.ts` and `.tsx` files while excluding test files\n* **Smart AI Component Handling**: Creates individual registry entries for each file in the `ai` package\n* **Description Mapping**: Uses a predefined dictionary to provide meaningful component descriptions\n* **Proper Schema Generation**: Creates registry files that comply with shadcn/ui standards\n\n#### Customizing the Script\n\nTo customize the registry generation for your needs:\n\n1. **Update Component Descriptions**: Edit the `COMPONENT_DESCRIPTIONS` object in `scripts/generateRegistry.ts`:\n\n```typescript\nconst COMPONENT_DESCRIPTIONS: Record\u003cstring, string\u003e = {\n  'your-component': 'Description of your component',\n  'another-component': 'Another component description',\n  // Add your components here\n};\n```\n\n2. **Modify Package Exclusions**: Update the `excludedPackages` array:\n\n```typescript\nconst excludedPackages = ['eslint-config', 'typescript-config', 'your-excluded-package'];\n```\n\n3. **Change Registry Metadata**: Update the registry object properties:\n\n```typescript\nconst registry: Registry = {\n  $schema: 'https://ui.shadcn.com/schema/registry.json',\n  name: 'your-registry-name',\n  homepage: 'https://your-registry-homepage.com',\n  items: allItems\n};\n```\n\n#### Script Output\n\nWhen you run `pnpm run gen:registry`, you'll see output like:\n\n```\n🔍 Scanning packages directory...\n📦 Processing package: ai\n📦 Processing package: code\n✅ Registry generated successfully!\n📄 Generated 14 component(s):\n   - ai-branch: AI conversation branch component\n   - code: Code component (includes code-block, code-editor, code-snippet)  \n💾 Registry saved to: registry.json\n```\n\n## 📦 CLI Development and Publishing\n\n### Building the CLI\n\n```bash\n# Build the CLI\npnpm build:cli\n\n# Test the CLI locally\npnpm test:cli\n```\n\n### Publishing Your Registry\n\n#### 1. Prepare for Publishing\n\nEnsure your registry is complete:\n\n```bash\n# Generate and build the complete registry\npnpm run registry\n\n# Build the CLI\npnpm run build:cli\n\n# Build the documentation site\npnpm run build\n```\n\n#### 2. Publish to npm\n\n```bash\n# Patch version (bug fixes)\npnpm pub:patch\n\n# Minor version (new features)\npnpm pub:minor\n\n# Major version (breaking changes)\npnpm pub:major\n```\n\n#### 3. Deploy Documentation\n\nDeploy your docs site to Vercel, Netlify, or your preferred platform:\n\n```bash\n# For Vercel\nvercel --prod\n\n# For Netlify\nnetlify deploy --prod --dir=apps/docs/out\n```\n\n### Using DeDevs UI Registry\n\nInstall components from the DeDevs UI registry:\n\n```bash\n# Install components using npx\nnpx dedevs-ui add ai-chat code-block editor\n\n# Or install globally\nnpm install -g dedevs-ui\ndedevs-ui add button card dialog\n```\n\n## 🛠️ Development Workflow\n\n### Daily Development\n\n```bash\n# Start development server\npnpm dev\n\n# Add new components to packages/\n# Regenerate the complete registry\npnpm run registry\n\n# Test CLI locally\npnpm run test:cli\n```\n\n### Quality Assurance\n\n```bash\n# Lint code\npnpm lint\n\n# Format code\npnpm format\n\n# Type checking\npnpm build\n\n# Validate registry\npnpm validate:registry\n```\n\n### Release Process\n\n1. **Update components** and test locally\n2. **Run full discovery and registration**:\n   ```bash\n   pnpm discover:components\n   pnpm register:all\n   pnpm gen:registry\n   ```\n3. **Build and test CLI**:\n   ```bash\n   pnpm build:cli\n   pnpm test:cli\n   ```\n4. **Commit changes** and create release\n5. **Publish to npm**:\n   ```bash\n   pnpm pub:minor  # or patch/major\n   ```\n6. **Deploy documentation** to your hosting platform\n\n## 📋 Available Scripts\n\n| Script | Description |\n|--------|-------------|\n| `pnpm dev` | Start development server |\n| `pnpm build` | Build all packages and apps |\n| `pnpm build:cli` | Build CLI executable |\n| `pnpm test:cli` | Test CLI locally |\n| `pnpm run gen:registry` | Generate registry.json by scanning packages |\n| `pnpm run build:registry` | Build individual component JSON files |\n| `pnpm run registry` | Complete registry generation and build |\n| `pnpm pub:patch/minor/major` | Version bump and publish |\n| `pnpm lint` | Lint codebase |\n| `pnpm format` | Format code |\n| `pnpm clean` | Clean node\\_modules and build artifacts |\n| `pnpm bump-deps` | Update all dependencies |\n| `pnpm bump-ui` | Update shadcn/ui components |\n\n## 🎯 Best Practices\n\n### Component Development\n\n* **Follow shadcn/ui patterns** for consistency\n* **Use TypeScript** for type safety\n* **Include proper prop interfaces** and documentation\n* **Add examples** in your documentation\n* **Test components** thoroughly before publishing\n\n### Registry Management\n\n* **Run `pnpm run registry`** after adding new components to regenerate the complete registry\n* **Update component descriptions** in `scripts/generateRegistry.ts` for new components\n* **Test the CLI** with `pnpm run test:cli` before publishing\n* **Version components** appropriately using semantic versioning\n* **Document breaking changes** in release notes\n\n### CLI Distribution\n\n* **Test CLI locally** before publishing\n* **Follow semantic versioning** for releases\n* **Provide clear error messages** for users\n* **Include helpful documentation** and examples\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our contributing guidelines and submit pull requests for any improvements.\n\n### Development Setup\n\n1. Fork the repository\n2. Clone your fork: `git clone https://github.com/your-username/dedevs-ui.git`\n3. Install dependencies: `pnpm install`\n4. Create a feature branch: `git checkout -b feature/amazing-feature`\n5. Make your changes and test thoroughly\n6. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n## 🔗 Resources\n\n* **[shadcn/ui](https://ui.shadcn.com)** - Original inspiration and compatibility target\n* **[Turborepo](https://turbo.build)** - Monorepo build system\n* **[Next.js](https://nextjs.org)** - Documentation framework\n* **[Tailwind CSS](https://tailwindcss.com)** - Styling framework\n* **[Radix UI](https://radix-ui.com)** - Primitive components\n\n***\n\n**Ready to accelerate your development with DeDevs UI?** 🚀\n\nWhether 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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedevsclub%2Fdedevs-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdedevsclub%2Fdedevs-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedevsclub%2Fdedevs-ui/lists"}