shadcn/ui components in extensions

​

When shadcn/ui is a good fit

• You need reusable UI primitives across sidebar, popup, and options surfaces.
• You already use React + Tailwind in product code.
• You want source-owned components that your team can fully customize.

​

shadcn/ui capabilities

​

Template examples

​

Sidebar + shadcn/ui template

npx extension@latest create my-extension --template=sidebar-shadcn

pnpx extension@latest create my-extension --template=sidebar-shadcn

yarn dlx extension@latest create my-extension --template=sidebar-shadcn

bunx extension@latest create my-extension --template=sidebar-shadcn

deno run -A npm:extension@latest create my-extension --template=sidebar-shadcn

​

Stack assumptions

• React + TypeScript
• Tailwind CSS
• PostCSS (@tailwindcss/postcss)
• Local components/ui/* component files (shadcn-style structure)

​

Manual setup in an existing project

1. Set up Tailwind and PostCSS (see Tailwind CSS).
2. Initialize shadcn in your project and generate components.
3. Keep generated UI components inside your extension source (for example, src/components/ui/).
4. Import your Tailwind stylesheet in the extension entry where UI renders.

​

PostCSS example (Tailwind v4)

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

​

Example components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tsx": true,
  "tailwind": {
    "css": "sidebar/styles.css",
    "cssVariables": true
  }
}

​

Usage

import { Button } from "@/components/ui/button";
import "./styles.css";

export default function MyComponent() {
  return <Button className="text-lg font-semibold">Click Me</Button>;
}

​

Content script notes

• Extension pages (popup/options/sidebar/new tab) are the easiest place to start with shadcn/ui.
• For content scripts, import your style entry in the content-script entrypoint.
• Extension.js emits content-script styles through its CSS pipeline, and they can still conflict with host page styles.

​

Best practices

• Treat shadcn/ui as source-owned components, not a runtime UI package import.
• Keep Tailwind config/content paths aligned with your extension folders (pages, scripts, src).
• Start with one surface (like sidebar or popup) before adding content-script rendering complexity.
• Keep shared tokens and utility helpers in dedicated files (lib/utils, design tokens, theme variables).

​

Next steps

• Set up Tailwind CSS if you have not already.
• Add linting and formatting with ESLint and Prettier.