{"id":30653979,"url":"https://github.com/dedevsclub/devcn-ui","last_synced_at":"2025-10-16T12:32:37.792Z","repository":{"id":308408794,"uuid":"1032565206","full_name":"DeDevsClub/devcn-ui","owner":"DeDevsClub","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-05T18:28:08.000Z","size":2834,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-04T03:42:46.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://devcn-ui.vercel.app","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":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-05T13:46:14.000Z","updated_at":"2025-08-05T18:28:12.000Z","dependencies_parsed_at":"2025-08-05T20:39:15.079Z","dependency_job_id":null,"html_url":"https://github.com/DeDevsClub/devcn-ui","commit_stats":null,"previous_names":["dedevsclub/devcn-ui"],"tags_count":0,"template":false,"template_full_name":"DeDevsClub/design-registry-starter","purl":"pkg:github/DeDevsClub/devcn-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdevcn-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdevcn-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdevcn-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdevcn-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DeDevsClub","download_url":"https://codeload.github.com/DeDevsClub/devcn-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeDevsClub%2Fdevcn-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000781,"owners_count":26082851,"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-10-08T02:00:06.501Z","response_time":56,"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:00.987Z","updated_at":"2025-10-08T22:13:30.029Z","avatar_url":"https://github.com/DeDevsClub.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 Design Registry Starter Kit\n\n\u003e **A production-ready template for building your own component registry with shadcn/ui compatibility and custom CLI tooling.**\n\nThis starter kit provides everything you need to create, maintain, and distribute a component registry similar to [shadcn/ui](https://ui.shadcn.com). Built with modern tooling and best practices, it enables developers to build their own design systems with seamless CLI integration.\n\n## 🌟 Why Use This Starter Kit?\n\n### **For Component Library Authors**\n\n* **Zero-config setup**: Get a fully functional registry in minutes\n* **shadcn/ui compatibility**: Leverage the existing ecosystem and tooling\n* **Automated workflows**: Component discovery, registry generation, and publishing\n* **Professional documentation**: Built-in docs site with live examples\n* **CLI distribution**: Publish your own `npx your-registry add component` CLI\n\n### **For Development Teams**\n\n* **Consistent design system**: Maintain design consistency across projects\n* **Easy adoption**: Developers can add components with a single command\n* **Version control**: Track component changes and updates\n* **Customization**: Full control over component implementations\n\n## 🏗️ Architecture Overview\n\nThis monorepo is built with **Turborepo** and follows a modular architecture:\n\n```\ndevcn-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* **GitHub account** for repository hosting\n\n### 1. Clone and Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/your-username/devcn-ui.git\ncd devcn-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### 2. Customize Your Registry\n\n#### Update Package Information\n\nEdit `package.json` to reflect your registry:\n\n```json\n{\n  \"name\": \"your-registry-name\",\n  \"description\": \"Your custom component registry\",\n  \"homepage\": \"https://your-registry.com\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/your-username/your-registry.git\"\n  },\n  \"bin\": {\n    \"your-cli\": \"dist/index.js\"\n  }\n}\n```\n\n#### Update CLI Configuration\n\nModify `scripts/index.ts` to customize your CLI:\n\n```typescript\n// Update the registry URL\nconst url = new URL(\n  `registry/${packageName}.json`,\n  'https://your-registry.com/'  // Your registry URL\n);\n```\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-block\n📦 Processing package: editor\n✅ Registry generated successfully!\n📄 Generated 14 component(s):\n   - ai-branch: AI conversation branch component\n   - code-block: Enhanced code block component\n   - editor: Code editor component\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 publish:patch\n\n# Minor version (new features)\npnpm publish:minor\n\n# Major version (breaking changes)\npnpm publish: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 Your Published Registry\n\nOnce published, users can install components from your registry:\n\n```bash\n# Install your CLI globally or use with npx\nnpx your-registry-name add button card dialog\n\n# Or install globally\nnpm install -g your-registry-name\nyour-registry-name add button\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 generate: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 publish: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 publish: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/devcn-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 build your own component registry?** 🚀\n\nStart by cloning this repository and following the setup instructions above. Within minutes, you'll have a fully functional component registry with CLI distribution capabilities!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedevsclub%2Fdevcn-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdedevsclub%2Fdevcn-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdedevsclub%2Fdevcn-ui/lists"}