Adding Tailwind V4 & Shadcn Registry (#186)

* feat: adding tw4 styles & shadcn registry & small fixes for some components

* feat: adding themes to the registry and remove useless css properties

* fix: reference root shadcn instead of solid-ui for badge-delta

* fix: adding solid-ui css styles to the registry

* revert cli template (will update with another pr)

* copy paste error...

* revert button changes

---------

Co-authored-by: Stefan E-K <[email protected]>

Author: carere

.gitignore

@@ -19,6 +19,7 @@ netlify
 .classpath
 *.launch
 .settings/
+.vscode/
 
 # Temp
 gitignore

.prettierrc.json

@@ -23,5 +23,8 @@
   "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
   "importOrderMergeDuplicateImports": true,
   "importOrderCombineTypeAndValueImports": true,
-  "plugins": ["@ianvs/prettier-plugin-sort-imports"]
+  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./apps/docs/src/styles/app.css",
+  "tailwindAttributes": ["class"],
+  "tailwindFunctions": ["clsx", "cva"]
 }

apps/docs/app.config.ts

@@ -6,6 +6,7 @@ import rehypePrettyCode from "rehype-pretty-code"
 import rehypeSlug from "rehype-slug"
 import remarkGfm from "remark-gfm"
 import { getHighlighter } from "shiki"
+import tailwindcss from "@tailwindcss/vite";
 
 import rehypeComponent from "./src/lib/mdx/component"
 
@@ -19,6 +20,7 @@ export default defineConfig({
   extensions: ["mdx", "md"],
   vite: {
     plugins: [
+      tailwindcss(),
       mdx.withImports({})({
         jsx: true,
         jsxImportSource: "solid-js",

apps/docs/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "scripts": {
     "dev": "vinxi dev",
-    "build": "vinxi build",
-    "build:registry": "tsx ./src/scripts/build-registry.ts",
+    "build": "shadcn build && vinxi build",
+    "build:registry": "tsx ./src/scripts/build-registry.ts && shadcn build",
     "start": "vinxi start",
     "release": "changeset version",
     "lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\""
@@ -39,22 +39,24 @@
     "solid-mdx": "^0.0.7",
     "solid-sonner": "^0.2.8",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7",
     "undici": "^5.28.4",
     "vinxi": "^0.4.3"
   },
   "devDependencies": {
     "@types/node": "^18.19.41",
     "@types/unist": "^3.0.2",
-    "autoprefixer": "^10.4.20",
     "eslint": "^8.56.0",
     "estree-util-value-to-estree": "^3.1.2",
     "postcss": "^8.4.49",
     "rehype-pretty-code": "0.10.1",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "shiki": "0.14.5",
-    "tailwindcss": "^3.4.15",
+    "shadcn": "^2.5.0",
+    "tailwindcss": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.4",
+    "@kobalte/tailwindcss": "^0.9.0",
+    "tw-animate-css": "^1.2.8",
     "tsx": "^4.16.2",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",

apps/docs/postcss.config.js

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "title": "Accordion",
+  "description": "An accordion component",
+  "dependencies": [
+    "@kobalte/core",
+    "solid-js"
+  ],
+  "files": [
+    {
+      "path": "src/registry/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 = AccordionPrimitive.Root\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 <AccordionPrimitive.Item class={cn(\"border-b\", local.class)} {...others} />\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, [\"class\", \"children\"])\n  return (\n    <AccordionPrimitive.Header class=\"flex\">\n      <AccordionPrimitive.Trigger\n        class={cn(\n          \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180\",\n          local.class\n        )}\n        {...others}\n      >\n        {local.children}\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"size-4 shrink-0 transition-transform duration-200\"\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, [\"class\", \"children\"])\n  return (\n    <AccordionPrimitive.Content\n      class={cn(\n        \"animate-accordion-up overflow-hidden text-sm transition-all data-[expanded]:animate-accordion-down\",\n        local.class\n      )}\n      {...others}\n    >\n      <div class=\"pb-4 pt-0\">{local.children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

apps/docs/public/r/accordion.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog",
+  "description": "An alert dialog component",
+  "dependencies": [
+    "@kobalte/core",
+    "solid-js"
+  ],
+  "files": [
+    {
+      "path": "src/registry/ui/alert-dialog.tsx",
+      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as AlertDialogPrimitive from \"@kobalte/core/alert-dialog\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\ntype AlertDialogOverlayProps<T extends ValidComponent = \"div\"> =\n  AlertDialogPrimitive.AlertDialogOverlayProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AlertDialogOverlayProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogOverlayProps, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype AlertDialogContentProps<T extends ValidComponent = \"div\"> =\n  AlertDialogPrimitive.AlertDialogContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst AlertDialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AlertDialogContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogContentProps, [\"class\", \"children\"])\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        class={cn(\n          \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full\",\n          local.class\n        )}\n        {...others}\n      >\n        {local.children}\n        <AlertDialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M18 6l-12 12\" />\n            <path d=\"M6 6l12 12\" />\n          </svg>\n          <span class=\"sr-only\">Close</span>\n        </AlertDialogPrimitive.CloseButton>\n      </AlertDialogPrimitive.Content>\n    </AlertDialogPortal>\n  )\n}\n\ntype AlertDialogTitleProps<T extends ValidComponent = \"h2\"> =\n  AlertDialogPrimitive.AlertDialogTitleProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, AlertDialogTitleProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogTitleProps, [\"class\"])\n  return <AlertDialogPrimitive.Title class={cn(\"text-lg font-semibold\", local.class)} {...others} />\n}\n\ntype AlertDialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  AlertDialogPrimitive.AlertDialogDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, AlertDialogDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogDescriptionProps, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

apps/docs/public/r/alert-dialog.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "title": "Alert",
+  "description": "An alert component",
+  "dependencies": [
+    "@kobalte/core",
+    "class-variance-authority",
+    "solid-js"
+  ],
+  "files": [
+    {
+      "path": "src/registry/ui/alert.tsx",
+      "content": "import type { Component, ComponentProps, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as AlertPrimitive from \"@kobalte/core/alert\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n)\n\ntype AlertRootProps<T extends ValidComponent = \"div\"> = AlertPrimitive.AlertRootProps<T> &\n  VariantProps<typeof alertVariants> & { class?: string | undefined }\n\nconst Alert = <T extends ValidComponent = \"div\">(props: PolymorphicProps<T, AlertRootProps<T>>) => {\n  const [local, others] = splitProps(props as AlertRootProps, [\"class\", \"variant\"])\n  return (\n    <AlertPrimitive.Root\n      class={cn(alertVariants({ variant: props.variant }), local.class)}\n      {...others}\n    />\n  )\n}\n\nconst AlertTitle: Component<ComponentProps<\"h5\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <h5 class={cn(\"mb-1 font-medium leading-none tracking-tight\", local.class)} {...others} />\n}\n\nconst AlertDescription: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <div class={cn(\"text-sm [&_p]:leading-relaxed\", local.class)} {...others} />\n}\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

apps/docs/public/r/alert.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "type": "registry:ui",
+  "title": "Aspect Ratio",
+  "description": "An aspect ratio component",
+  "dependencies": [
+    "solid-js"
+  ],
+  "files": [
+    {
+      "path": "src/registry/ui/aspect-ratio.tsx",
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\nimport { mergeProps, splitProps } from \"solid-js\"\n\ntype AspectRatioProps = ComponentProps<\"div\"> & { ratio?: number }\n\nconst AspectRatio: Component<AspectRatioProps> = (rawProps) => {\n  const props = mergeProps({ ratio: 1 / 1 }, rawProps)\n  const [local, others] = splitProps(props, [\"ratio\"])\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        \"padding-bottom\": `${100 / local.ratio}%`\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0\n        }}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport { AspectRatio }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

apps/docs/public/r/aspect-ratio.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "title": "Avatar",
+  "description": "An avatar component",
+  "dependencies": [
+    "solid-js",
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "path": "src/registry/ui/avatar.tsx",
+      "content": "import type { ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as ImagePrimitive from \"@kobalte/core/image\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\ntype AvatarRootProps<T extends ValidComponent = \"span\"> = ImagePrimitive.ImageRootProps<T> & {\n  class?: string | undefined\n}\n\nconst Avatar = <T extends ValidComponent = \"span\">(\n  props: PolymorphicProps<T, AvatarRootProps<T>>\n) => {\n  const [local, others] = splitProps(props as AvatarRootProps, [\"class\"])\n  return (\n    <ImagePrimitive.Root\n      class={cn(\"relative flex size-10 shrink-0 overflow-hidden rounded-full\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype AvatarImageProps<T extends ValidComponent = \"img\"> = ImagePrimitive.ImageImgProps<T> & {\n  class?: string | undefined\n}\n\nconst AvatarImage = <T extends ValidComponent = \"img\">(\n  props: PolymorphicProps<T, AvatarImageProps<T>>\n) => {\n  const [local, others] = splitProps(props as AvatarImageProps, [\"class\"])\n  return <ImagePrimitive.Img class={cn(\"aspect-square size-full\", local.class)} {...others} />\n}\n\ntype AvatarFallbackProps<T extends ValidComponent = \"span\"> =\n  ImagePrimitive.ImageFallbackProps<T> & { class?: string | undefined }\n\nconst AvatarFallback = <T extends ValidComponent = \"span\">(\n  props: PolymorphicProps<T, AvatarFallbackProps<T>>\n) => {\n  const [local, others] = splitProps(props as AvatarFallbackProps, [\"class\"])\n  return (\n    <ImagePrimitive.Fallback\n      class={cn(\"flex size-full items-center justify-center bg-muted\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n",
+      "type": "registry:ui"
+    }
+  ]
+}