shadcn-solid

Docs

SolidStart

Install and configure SolidStart.

CLI

Create project

Start by creating a new SolidStart project using create-solid and select tailwind or uno:

npm create solid@latest

Path Aliases

I'm use the @ alias to make it easier to import your components. This is how you can configure it:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

app.config.ts

import { dirname, resolve } from "node:path"
import { fileURLToPath } from "node:url"
import { defineConfig } from "@solidjs/start/config"
 
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
 
export default defineConfig({
  vite: {
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
      },
    },
  },
})

Run the CLI

Run the shadcn-solid init command to setup your project:

pnpm dlx shadcn-solid@latest init

Configure components.json

You will be asked a few questions to configure components.json:

◆  Which CSS framework would you like to use?
│  ● TailwindCSS
│  ○ UnoCSS
│
◇  Which color would you like to use as base color?
│  Slate
│
◇  Where is your global CSS file?
│  src/app.css
│
◇  Would you like to use CSS variables for colors?
│  Yes
│
◇  Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
│
│
◇  Where is your tailwind.config.cjs located?
│  tailwind.config.cjs
│
◇  Configure the import alias for components:
│  @/components
│
◇  Configure the import alias for utils:
│  @/lib/utils

That's it

You can now start adding components to your project.

pnpm dlx shadcn-solid@latest add button

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

About Astro