{"id":49427514,"url":"https://github.com/solidcn-ui/solidcn","last_synced_at":"2026-04-29T10:03:29.652Z","repository":{"id":346105735,"uuid":"1188464683","full_name":"solidcn-ui/solidcn","owner":"solidcn-ui","description":"A port of shadcn/ui for SolidJS — accessible, composable, and yours to own.","archived":false,"fork":false,"pushed_at":"2026-04-29T08:21:43.000Z","size":857,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-29T08:29:30.869Z","etag":null,"topics":["corvu","kobalte","shadcn","solidjs","tailwindcss","ui","vite"],"latest_commit_sha":null,"homepage":"https://solidcn.nizarfadlan.dev","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/solidcn-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-22T05:31:43.000Z","updated_at":"2026-04-29T08:21:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/solidcn-ui/solidcn","commit_stats":null,"previous_names":["nizarfadlan/solidcn","solidcn-ui/solidcn"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/solidcn-ui/solidcn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidcn-ui%2Fsolidcn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidcn-ui%2Fsolidcn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidcn-ui%2Fsolidcn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidcn-ui%2Fsolidcn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solidcn-ui","download_url":"https://codeload.github.com/solidcn-ui/solidcn/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solidcn-ui%2Fsolidcn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32420356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T06:29:02.080Z","status":"ssl_error","status_checked_at":"2026-04-29T06:29:00.631Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["corvu","kobalte","shadcn","solidjs","tailwindcss","ui","vite"],"created_at":"2026-04-29T10:03:26.203Z","updated_at":"2026-04-29T10:03:29.648Z","avatar_url":"https://github.com/solidcn-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003esolidcn\u003c/h1\u003e\n  \u003cp\u003eBeautifully designed components for SolidJS. Copy, paste, own.\u003c/p\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"https://solidcn.nizarfadlan.dev\"\u003eDocumentation\u003c/a\u003e\n    ·\n    \u003ca href=\"https://solidcn.nizarfadlan.dev/docs/components/button\"\u003eComponents\u003c/a\u003e\n    ·\n    \u003ca href=\"https://solidcn.nizarfadlan.dev/docs/registry\"\u003eRegistry\u003c/a\u003e\n    ·\n    \u003ca href=\"https://solidcn.nizarfadlan.dev/docs/cli\"\u003eCLI\u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp\u003e\n    \u003cimg src=\"https://img.shields.io/badge/SolidJS-2.x-blue?logo=solid\" alt=\"SolidJS\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-v4-38bdf8?logo=tailwindcss\" alt=\"Tailwind CSS v4\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript\" alt=\"TypeScript\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-green\" alt=\"MIT License\" /\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## What is this?\n\n**solidcn** is a port of [shadcn/ui](https://ui.shadcn.com) for [SolidJS](https://www.solidjs.com). It is **not a component library** — it is a collection of reusable, accessible, copy-paste components that you own and can customize.\n\nPick the components you need. Copy the source into your project. Adapt them to your design. No black box.\n\nBuilt on top of:\n\n- **[Kobalte](https://kobalte.dev)** — headless, accessible UI primitives\n- **[corvu](https://corvu.dev)** — advanced SolidJS UI primitives (Drawer, Resizable, etc.)\n- **[Tailwind CSS v4](https://tailwindcss.com)** — utility-first styling\n- **[class-variance-authority](https://cva.style)** — type-safe variant management\n- **[@modular-forms/solid](https://modularforms.dev)** — form handling\n\n---\n\n## Quick Start\n\n```bash\n# Scaffold a new project\nnpm create solidcn-app@latest my-app\n\n# Or add to an existing SolidStart project\nnpx solidcn@latest init\n```\n\nThen add your first component:\n\n```bash\nnpx solidcn@latest add button\n```\n\nUse it in your app:\n\n```tsx\nimport { Button } from \"~/components/ui/button\";\n\nexport default function App() {\n  return \u003cButton\u003eHello, SolidJS\u003c/Button\u003e;\n}\n```\n\n---\n\n## Components\n\n42 components across all categories, built with accessibility in mind.\n\n| Category | Components |\n|---|---|\n| **Core** | Button, Badge, Separator, Accordion, Checkbox, Radio Group, Toggle, Switch, Slider, Progress, Tooltip, Popover, Dialog, Alert Dialog, Dropdown Menu, Context Menu, Select, Combobox, Tabs, Collapsible |\n| **Layout \u0026 Form** | Card, Table, Avatar, Skeleton, Input, Textarea, Label, Form, Calendar, Date Picker, Command, Breadcrumb, Pagination, Navigation Menu, Menubar |\n| **Complex \u0026 Overlay** | Sheet, Drawer, Resizable, Carousel, Scroll Area, Sidebar, Hover Card |\n| **Toast** | Standard Toast, Sileo Toast (physics-based SVG morphing) |\n\n---\n\n## Packages\n\n| Package | Description |\n|---|---|\n| `@solidcn/core` | 42+ UI components |\n| `@solidcn/toast` | Dual toast system — Standard + physics-based Sileo mode |\n| `@solidcn/themes` | CSS variable tokens, `ThemeProvider`, `useTheme`, 7 built-in themes |\n| `solidcn` (CLI) | `init`, `add`, `diff`, `update`, `search`, `list`, `view`, `registry`, `mcp` commands |\n| `create-solidcn-app` | `npm create solidcn-app` project scaffolder |\n| `@solidcn/mcp-cloudflare` | Cloudflare Worker for HTTP MCP transport |\n\n---\n\n## Theming\n\nAll components are styled with CSS variables. Swap themes at runtime, or generate your own.\n\n```tsx\nimport { ThemeProvider } from \"@solidcn/themes\";\n\nexport default function App() {\n  return (\n    \u003cThemeProvider defaultTheme=\"zinc\" defaultColorScheme=\"dark\"\u003e\n      {/* your app */}\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\nBuilt-in themes: `default` · `slate` · `zinc` · `rose` · `blue` · `green` · `orange`\n\n---\n\n## Open Registry\n\nsolidcn supports a decentralized registry protocol. Publish your own components, use from any URL.\n\n```json\n// solidcn.json\n{\n  \"registries\": {\n    \"@acme\": \"https://ui.acme.com/r/{name}.json\"\n  }\n}\n```\n\n```bash\n# Install from a named registry\nnpx solidcn@latest add @acme/card\n\n# Install directly from a URL\nnpx solidcn@latest add https://ui.acme.com/r/card.json\n```\n\n---\n\n## Update Workflow (shadcn-like)\n\nUse this flow to safely update components you already installed:\n\n```bash\n# 1) Inspect what would change\nnpx solidcn@latest diff button --only-modified\n\n# Optional: show line-level patch\nnpx solidcn@latest diff button --only-modified --patch\n\n# 2) Apply updates\nnpx solidcn@latest update button --only-modified\n\n# Optional: preview update without writing files\nnpx solidcn@latest update button --dry-run --only-modified\n```\n\n---\n\n## MCP Server\n\nsolidcn ships with a built-in [Model Context Protocol](https://modelcontextprotocol.io) server, letting AI agents browse and install components directly.\n\n```bash\n# Cursor / Claude Desktop\nnpx solidcn@latest mcp\n```\n\nAvailable tools: `search_components` · `get_component` · `install_component` · `list_components` · `get_registry_info` · `get_component_docs`\n\nDeploy your own HTTP MCP endpoint with `@solidcn/mcp-cloudflare`:\n\n```bash\ncd packages/mcp-cloudflare\npnpm deploy\n```\n\n---\n\n## Repository Structure\n\n```\nsolidcn/\n├── packages/\n│   ├── core/                 → @solidcn/core (42+ components)\n│   ├── toast/                → @solidcn/toast (Standard + Sileo)\n│   ├── themes/               → @solidcn/themes (CSS vars + ThemeProvider)\n│   ├── cli/                  → solidcn CLI (npx solidcn@latest)\n│   ├── create-solidcn-app/   → npm create solidcn-app\n│   └── mcp-cloudflare/       → @solidcn/mcp-cloudflare (HTTP MCP Worker)\n├── apps/\n│   └── docs/                 → Documentation site (SolidStart)\n├── biome.json\n├── pnpm-workspace.yaml\n└── package.json\n```\n\n---\n\n## Development\n\n**Prerequisites:** Node.js ≥ 20, pnpm ≥ 9\n\n```bash\n# Clone and install\ngit clone https://github.com/nizarfadlan/solidcn.git\ncd solidcn\npnpm install\n\n# Build all packages\npnpm build\n\n# Start docs site\npnpm --filter @solidcn/docs dev\n\n# Typecheck everything\npnpm typecheck\n\n# Lint\npnpm lint\n```\n\n---\n\n## FAQ\n\n**Is this affiliated with shadcn/ui?**\nNo. solidcn is an independent port inspired by shadcn/ui's approach (copy-paste, not a dependency). It follows the same philosophy for the SolidJS ecosystem.\n\n**Do I need to install `@solidcn/core` as a dependency?**\nNo. When you run `npx solidcn@latest add button`, the component source is copied directly into your project under `src/components/ui/`. You own the code.\n\n**Can I use solidcn without the CLI?**\nYes. Every component can be manually copied from the [documentation](https://solidcn.nizarfadlan.dev).\n\n**Is dark mode supported?**\nYes. All components use CSS variables. Dark mode works via the `.dark` class strategy or `prefers-color-scheme` media query, configurable per project.\n\n---\n\n## License\n\nMIT © [Nizar Izzuddin Yatim Fadlan](https://nizarfadlan.dev)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤️ for the SolidJS community\u003c/sub\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidcn-ui%2Fsolidcn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidcn-ui%2Fsolidcn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidcn-ui%2Fsolidcn/lists"}