shadcn/ui#

Extension.js offers support for using shadcn/ui, a component library that works seamlessly with Tailwind CSS to build user interfaces with minimal setup.

Getting Started with shadcn/ui#

The easiest way to get started with shadcn/ui in Extension.js is by integrating it directly into your extension project, alongside Tailwind CSS. This allows you to take advantage of ready-to-use components while leveraging the utility-first CSS approach of Tailwind.

Installation#

To install shadcn/ui and its required dependencies, run:

npx install shadcn-ui tailwindcss postcss autoprefixer

Configuration#

Once installed, make sure you configure Tailwind and shadcn/ui properly. Add tailwindcss and shadcn/ui to your Tailwind configuration file:

tailwind.config.js;

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{html,js,ts,jsx,tsx,mdx}",
    "./**/*.{html,js,ts,jsx,tsx,mdx}",
    "./src/**/*.{html,js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("shadcn-ui/tailwind")],
};

Usage#

shadcn/ui components are fully customizable through Tailwind classes. To use shadcn/ui components in your extension, simply import the components you need and style them with Tailwind classes.

// MyComponent.jsx

import { Button } from "shadcn-ui";
import "./css/globals.css";

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

Usage in Content Scripts#

For content_scripts, dynamically import the global CSS file:

// ./content_script.jsx

import("./css/globals.css");
import { Button } from 'shadcn-ui';

export default function MyContentScript() {
  return <Button className="text-3xl font-bold">Action</Button>;
}
## Updating manifest.json

If you are using content_scripts, don’t forget to update your manifest.json:

```diff
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "My Content Script Extension",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
+     "css": ["./css/globals.css"]
    }
  ]
}

Next Steps#

• To take your shadcn/ui and Tailwind CSS setup to the next level, make sure you follow best practices for component-based architecture during the extension development.