V4 compoenents and Demos

apps/docs/app.config.ts

@@ -24,6 +24,10 @@ export default defineConfig(
       }
     },
     {
+      title: "SolidUI",
+      description: "The Future of Your Design System",
+      titleTemplate: ":title – SolidUI",
+      editPath: "https://github.com/stefan-karger/solid-ui/edit/dev/:path",
       markdown: {
         expressiveCode: {
           themes: ["github-dark-default", "github-light-default"]
@@ -40,18 +44,18 @@ export default defineConfig(
         packageManagers: {
           presets: {
             npm: {
-              install: "npm i :content",
-              "install-dev": "npm i :content -D",
-              "install-global": "npm i :content -g",
-              "install-local": "npm i",
+              install: "npm install :content",
+              "install-dev": "npm install :content -D",
+              "install-global": "npm install :content -g",
+              "install-local": "npm install",
               run: "npm run :content",
               exec: "npx :content",
               create: "npm init :content"
             },
             pnpm: {
-              install: "pnpm i :content",
-              "install-dev": "pnpm i :content -D",
-              "install-global": "pnpm i :content -g",
+              install: "pnpm add :content",
+              "install-dev": "pnpm add :content -D",
+              "install-global": "pnpm add :content -g",
               "install-local": "pnpm i",
               run: "pnpm :content",
               exec: "pnpx :content",
@@ -67,12 +71,12 @@ export default defineConfig(
               create: "yarn create :content"
             },
             bun: {
-              install: "bun i :content",
-              "install-dev": "bun i :content -d",
-              "install-global": "bun i :content -g",
+              install: "bun add :content",
+              "install-dev": "bun add :content -d",
+              "install-global": "bun add :content -g",
               "install-local": "bun i",
               run: "bun run :content",
-              exec: "bunx :content",
+              exec: "bunx --bun :content",
               create: "bun create :content"
             },
             deno: {

apps/docs/package.json

@@ -8,24 +8,38 @@
     "build": "vinxi build",
     "start": "vinxi start",
     "registry:build": "tsx ./src/scripts/build-registry.ts",
+    "registry:capture": "tsx ./src/scripts/capture-registry.ts",
     "release": "changeset version"
   },
   "dependencies": {
+    "@ark-ui/solid": "^5.28.0",
     "@corvu/calendar": "^0.1.2",
     "@corvu/drawer": "^0.2.4",
+    "@corvu/otp-field": "^0.1.4",
+    "@corvu/resizable": "^0.2.5",
     "@fontsource-variable/geist": "^5.2.8",
     "@fontsource-variable/geist-mono": "^5.2.7",
     "@kobalte/core": "^0.13.11",
     "@kobalte/solidbase": "^0.2.20",
+    "@solid-primitives/refs": "^1.1.2",
     "@solid-primitives/storage": "^4.3.3",
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.15.3",
     "@solidjs/start": "^1.2.0",
+    "@tabler/icons-solidjs": "^3.35.0",
+    "@tanstack/solid-table": "^8.21.3",
+    "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk-solid": "^1.1.2",
+    "embla-carousel-solid": "^8.6.0",
     "rimraf": "^6.0.1",
+    "shadcn": "^3.5.0",
+    "shiki": "^3.15.0",
     "solid-js": "^1.9.9",
+    "solid-sonner": "^0.2.8",
     "tailwind-merge": "^3.3.1",
+    "ts-morph": "^18.0.0",
     "vinxi": "^0.5.7",
     "zod": "^4.1.12"
   },
@@ -34,6 +48,7 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.14",
+    "puppeteer": "^24.30.0",
     "tailwindcss": "^4.1.14",
     "tsx": "^4.20.6",
     "tw-animate-css": "^1.4.0",

apps/docs/public/r/styles/v1/Breadcrumb.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "dependencies": [
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "path": "src/registry/v1/ui/breadcrumb.tsx",
+      "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\r\nimport { Show, splitProps } from \"solid-js\"\r\n\r\nimport type { PolymorphicProps } from \"@kobalte/core\"\r\nimport * as BreadcrumbPrimitive from \"@kobalte/core/breadcrumbs\"\r\n\r\nimport { cn } from \"~/lib/utils\"\r\n\r\nconst Breadcrumb: Component<BreadcrumbPrimitive.BreadcrumbsRootProps> = (props) => (\r\n  <BreadcrumbPrimitive.Root aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\r\n)\r\n\r\nconst BreadcrumbList: Component<ComponentProps<\"ol\">> = (props) => {\r\n  const [local, others] = splitProps(props, [\"class\"])\r\n  return (\r\n    <ol\r\n      class={cn(\r\n        \"flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5\",\r\n        local.class\r\n      )}\r\n      data-slot=\"breadcrumb-list\"\r\n      {...others}\r\n    />\r\n  )\r\n}\r\n\r\nconst BreadcrumbItem: Component<ComponentProps<\"li\">> = (props) => {\r\n  const [local, others] = splitProps(props, [\"class\"])\r\n  return (\r\n    <li\r\n      class={cn(\"inline-flex items-center gap-1.5\", local.class)}\r\n      data-slot=\"breadcrumb-item\"\r\n      {...others}\r\n    />\r\n  )\r\n}\r\n\r\ntype BreadcrumbLinkProps<T extends ValidComponent = \"a\"> =\r\n  BreadcrumbPrimitive.BreadcrumbsLinkProps<T> & { class?: string | undefined }\r\n\r\nconst BreadcrumbLink = <T extends ValidComponent = \"a\">(\r\n  props: PolymorphicProps<T, BreadcrumbLinkProps<T>>\r\n) => {\r\n  const [local, others] = splitProps(props as BreadcrumbLinkProps, [\"class\"])\r\n  return (\r\n    <BreadcrumbPrimitive.Link\r\n      class={cn(\"transition-colors hover:text-foreground\", local.class)}\r\n      data-slot=\"breadcrumb-link\"\r\n      {...others}\r\n    />\r\n  )\r\n}\r\n\r\ntype BreadcrumbPageProps<T extends ValidComponent = \"a\"> =\r\n  BreadcrumbPrimitive.BreadcrumbsLinkProps<T> & { class?: string | undefined }\r\n\r\nconst BreadcrumbPage = <T extends ValidComponent = \"a\">(\r\n  props: PolymorphicProps<T, BreadcrumbPageProps<T>>\r\n) => {\r\n  const [local, others] = splitProps(props as BreadcrumbPageProps, [\"class\"])\r\n  return (\r\n    <BreadcrumbPrimitive.Link\r\n      aria-current=\"page\"\r\n      aria-disabled=\"true\"\r\n      class={cn(\"font-normal text-foreground\", local.class)}\r\n      current\r\n      data-slot=\"breadcrumb-page\"\r\n      role=\"link\"\r\n      {...others}\r\n    />\r\n  )\r\n}\r\n\r\ntype BreadcrumbSeparatorProps<T extends ValidComponent = \"span\"> =\r\n  BreadcrumbPrimitive.BreadcrumbsSeparatorProps<T> & {\r\n    class?: string | undefined\r\n    children?: JSX.Element\r\n  }\r\n\r\nconst BreadcrumbSeparator = <T extends ValidComponent = \"span\">(\r\n  props: PolymorphicProps<T, BreadcrumbSeparatorProps<T>>\r\n) => {\r\n  const [local, others] = splitProps(props as BreadcrumbSeparatorProps, [\"class\", \"children\"])\r\n  return (\r\n    <BreadcrumbPrimitive.Separator\r\n      aria-hidden=\"true\"\r\n      class={cn(\"[&>svg]:size-3.5\", local.class)}\r\n      data-slot=\"breadcrumb-separator\"\r\n      role=\"presentation\"\r\n      {...others}\r\n    >\r\n      <Show\r\n        fallback={\r\n          <svg\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"2\"\r\n            viewBox=\"0 0 24 24\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <path d=\"M9 6l6 6l-6 6\" />\r\n          </svg>\r\n        }\r\n        when={local.children}\r\n      >\r\n        {local.children}\r\n      </Show>\r\n    </BreadcrumbPrimitive.Separator>\r\n  )\r\n}\r\n\r\nconst BreadcrumbEllipsis: Component<ComponentProps<\"span\">> = (props) => {\r\n  const [local, others] = splitProps(props, [\"class\"])\r\n  return (\r\n    <span\r\n      aria-hidden=\"true\"\r\n      class={cn(\"flex size-9 items-center justify-center\", local.class)}\r\n      data-slot=\"breadcrumb-ellipsis\"\r\n      role=\"presentation\"\r\n      {...others}\r\n    >\r\n      <svg\r\n        class=\"size-4\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"2\"\r\n        viewBox=\"0 0 24 24\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path d=\"M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" />\r\n        <path d=\"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" />\r\n        <path d=\"M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" />\r\n      </svg>\r\n      <span class=\"sr-only\">More</span>\r\n    </span>\r\n  )\r\n}\r\n\r\nexport {\r\n  Breadcrumb,\r\n  BreadcrumbList,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n  BreadcrumbEllipsis\r\n}\r\n",
+      "type": "registry:ui"
+    }
+  ]
+}

apps/docs/public/r/styles/v1/accordion-demo.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "accordion"
+  ],
+  "files": [
+    {
+      "path": "src/registry/v1/examples/accordion-demo.tsx",
+      "content": "import {\r\n  Accordion,\r\n  AccordionContent,\r\n  AccordionItem,\r\n  AccordionTrigger\r\n} from \"~/registry/v1/ui/accordion\"\r\n\r\nexport default function AccordionDemo() {\r\n  return (\r\n    <Accordion class=\"w-full\" collapsible defaultValue={[\"item-1\"]} multiple={false}>\r\n      <AccordionItem value=\"item-1\">\r\n        <AccordionTrigger>Product Information</AccordionTrigger>\r\n        <AccordionContent class=\"flex flex-col gap-4 text-balance\">\r\n          <p>\r\n            Our flagship product combines cutting-edge technology with sleek design. Built with\r\n            premium materials, it offers unparalleled performance and reliability.\r\n          </p>\r\n          <p>\r\n            Key features include advanced processing capabilities, and an intuitive user interface\r\n            designed for both beginners and experts.\r\n          </p>\r\n        </AccordionContent>\r\n      </AccordionItem>\r\n      <AccordionItem value=\"item-2\">\r\n        <AccordionTrigger>Shipping Details</AccordionTrigger>\r\n        <AccordionContent class=\"flex flex-col gap-4 text-balance\">\r\n          <p>\r\n            We offer worldwide shipping through trusted courier partners. Standard delivery takes\r\n            3-5 business days, while express shipping ensures delivery within 1-2 business days.\r\n          </p>\r\n          <p>\r\n            All orders are carefully packaged and fully insured. Track your shipment in real-time\r\n            through our dedicated tracking portal.\r\n          </p>\r\n        </AccordionContent>\r\n      </AccordionItem>\r\n      <AccordionItem value=\"item-3\">\r\n        <AccordionTrigger>Return Policy</AccordionTrigger>\r\n        <AccordionContent class=\"flex flex-col gap-4 text-balance\">\r\n          <p>\r\n            We stand behind our products with a comprehensive 30-day return policy. If you&apos;re\r\n            not completely satisfied, simply return the item in its original condition.\r\n          </p>\r\n          <p>\r\n            Our hassle-free return process includes free return shipping and full refunds processed\r\n            within 48 hours of receiving the returned item.\r\n          </p>\r\n        </AccordionContent>\r\n      </AccordionItem>\r\n    </Accordion>\r\n  )\r\n}\r\n",
+      "type": "registry:example"
+    }
+  ]
+}

apps/docs/public/r/styles/v1/accordion.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "dependencies": [
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "path": "src/registry/v1/ui/accordion.tsx",
+      "content": "import type { JSX, ValidComponent } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\n\nimport * as AccordionPrimitive from \"@kobalte/core/accordion\";\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\";\n\nimport { cn } from \"~/lib/utils\";\n\nconst Accordion = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionPrimitive.AccordionRootProps<T>>,\n) => {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n};\n\ntype AccordionItemProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionItemProps<T> & {\n    class?: string | undefined;\n  };\n\nconst AccordionItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionItemProps<T>>,\n) => {\n  const [local, others] = splitProps(props as AccordionItemProps, [\"class\"]);\n  return (\n    <AccordionPrimitive.Item\n      class={cn(\"border-b last:border-b-0\", local.class)}\n      data-slot=\"accordion-item\"\n      {...others}\n    />\n  );\n};\n\ntype AccordionTriggerProps<T extends ValidComponent = \"button\"> =\n  AccordionPrimitive.AccordionTriggerProps<T> & {\n    class?: string | undefined;\n    children?: JSX.Element;\n  };\n\nconst AccordionTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, AccordionTriggerProps<T>>,\n) => {\n  const [local, others] = splitProps(props as AccordionTriggerProps, [\n    \"class\",\n    \"children\",\n  ]);\n  return (\n    <AccordionPrimitive.Header class=\"flex\">\n      <AccordionPrimitive.Trigger\n        class={cn(\n          \"flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-expanded]>svg]:rotate-180\",\n          local.class,\n        )}\n        data-slot=\"accordion-trigger\"\n        {...others}\n      >\n        {local.children}\n        <svg\n          class=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M6 9l6 6l6 -6\" />\n        </svg>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n};\n\ntype AccordionContentProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionContentProps<T> & {\n    class?: string | undefined;\n    children?: JSX.Element;\n  };\n\nconst AccordionContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionContentProps<T>>,\n) => {\n  const [local, others] = splitProps(props as AccordionContentProps, [\n    \"class\",\n    \"children\",\n  ]);\n  return (\n    <AccordionPrimitive.Content\n      class=\"overflow-hidden text-sm data-[closed]:animate-accordion-up data-[expanded]:animate-accordion-down\"\n      data-slot=\"accordion-content\"\n      {...others}\n    >\n      <div class={cn(\"pt-0 pb-4\", local.class)}>{local.children}</div>\n    </AccordionPrimitive.Content>\n  );\n};\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
+      "type": "registry:ui"
+    }
+  ]
+}

apps/docs/public/r/styles/v1/alert-demo.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "src/registry/v1/examples/alert-demo.tsx",
+      "content": "import { IconAlertCircle, IconCheckCircle, IconPopcorn } from \"~/components/icons\"\r\nimport { Alert, AlertDescription, AlertTitle } from \"~/registry/v1/ui/alert\"\r\n\r\nexport default function AlertDemo() {\r\n  return (\r\n    <div class=\"grid w-full max-w-xl items-start gap-4\">\r\n      <Alert>\r\n        <IconCheckCircle />\r\n        <AlertTitle>Success! Your changes have been saved</AlertTitle>\r\n        <AlertDescription>This is an alert with icon, title and description.</AlertDescription>\r\n      </Alert>\r\n      <Alert>\r\n        <IconPopcorn />\r\n        <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>\r\n      </Alert>\r\n      <Alert variant=\"destructive\">\r\n        <IconAlertCircle />\r\n        <AlertTitle>Unable to process your payment.</AlertTitle>\r\n        <AlertDescription>\r\n          <p>Please verify your billing information and try again.</p>\r\n          <ul class=\"list-inside list-disc text-sm\">\r\n            <li>Check your card details</li>\r\n            <li>Ensure sufficient funds</li>\r\n            <li>Verify billing address</li>\r\n          </ul>\r\n        </AlertDescription>\r\n      </Alert>\r\n    </div>\r\n  )\r\n}\r\n",
+      "type": "registry:example"
+    }
+  ]
+}

apps/docs/public/r/styles/v1/alert-dialog-demo.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog-demo",
+  "type": "registry:example",
+  "registryDependencies": [
+    "alert-dialog"
+  ],
+  "files": [
+    {
+      "path": "src/registry/v1/examples/alert-dialog-demo.tsx",
+      "content": "import {\r\n  AlertDialog,\r\n  AlertDialogAction,\r\n  AlertDialogCancel,\r\n  AlertDialogContent,\r\n  AlertDialogDescription,\r\n  AlertDialogFooter,\r\n  AlertDialogHeader,\r\n  AlertDialogTitle,\r\n  AlertDialogTrigger\r\n} from \"~/registry/v1/ui/alert-dialog\"\r\nimport { Button } from \"~/registry/v1/ui/button\"\r\n\r\nexport default function AlertDialogDemo() {\r\n  return (\r\n    <AlertDialog>\r\n      <Button as={AlertDialogTrigger} variant=\"outline\">\r\n        Show Dialog\r\n      </Button>\r\n\r\n      <AlertDialogContent>\r\n        <AlertDialogHeader>\r\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n          <AlertDialogDescription>\r\n            This action cannot be undone. This will permanently delete your account and remove your\r\n            data from our servers.\r\n          </AlertDialogDescription>\r\n        </AlertDialogHeader>\r\n        <AlertDialogFooter>\r\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n          <AlertDialogAction>Continue</AlertDialogAction>\r\n        </AlertDialogFooter>\r\n      </AlertDialogContent>\r\n    </AlertDialog>\r\n  )\r\n}\r\n",
+      "type": "registry:example"
+    }
+  ]
+}