Vite

Install with Vite

Configure a Vite + Preact project for copy-paste shadcn-preact components. This follows the same shape as the official shadcn/ui Vite guide, but replaces the React CLI flow with this port's manual copy workflow.

Create a Vite project

Start from the Preact TypeScript template. The components in this repository are TypeScript-first and use JSX with `preact/compat` where needed.

bun create vite my-app --template preact-ts
cd my-app
bun install

Install Tailwind CSS

This project uses Tailwind CSS v4 through PostCSS. Add Tailwind and the animation utilities used by the components.

bun add -d tailwindcss @tailwindcss/postcss postcss tw-animate-css

Create `postcss.config.js`:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

Add theme tokens

Replace your global CSS with Tailwind imports and the shadcn-compatible CSS variables. You can copy the full token block from this repository's `src/index.css`.

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Install component dependencies

Install the shared dependencies used across the implemented components. Add optional dependencies only when you copy components that need them.

bun add class-variance-authority clsx tailwind-merge lucide-preact

# floating overlays
bun add @floating-ui/react-dom

# calendar
bun add react-day-picker date-fns

# charts
bun add recharts

Configure import aliases

Keep `@/*` and `@ui/*` in sync between TypeScript and Vite. The React aliases point React-targeting packages at `preact/compat`.

// tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@ui/*": ["./src/components/ui/*"],
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    }
  }
}

// vite.config.ts
import preact from "@preact/preset-vite";
import { resolve } from "node:path";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src/"),
      "@ui": resolve(__dirname, "./src/components/ui/"),
      react: "preact/compat",
      "react-dom": "preact/compat",
    },
  },
});

Copy the component source

Use `degit` to download the `src/components/ui` directory directly from the GitHub repository into your app. This copies every implemented component plus the shared primitives in `share/`.

bunx degit https://github.com/LiasCode/shadcn-preact/src/components/ui#main ./src/components/ui

Next steps

Browse components

Open the component catalog and copy what you need.

Start with Button

Verify aliases, utilities, and Tailwind tokens.