Components

Build polished extension interfaces from 60 included shadcn/ui components. You own their source and only imported components enter the final bundle.

What you get

Your project's src/components/ui/ folder contains the component source generated from the official shadcn catalog. Edit it, remove it, or extend it like any other project code.

The catalog includes:

Use them anywhere

Use the same imports in popup, side panel, options, new tab, and injected content UI.

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

export function MyPopup() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Settings <Badge>New</Badge></CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Your name" />
        <Button className="mt-3">Save</Button>
      </CardContent>
    </Card>
  );
}

Tree-shaken at build time

Vite only bundles imported code. The catalog can stay in the project without adding every component to the extension ZIP.

Customize everything

Each component is a normal .tsx file. Customize the system at the level that fits the product:

• Change colors and radii in globals.css via CSS variables.
• Customize animations per component.
• Replace or remove any component — they're yours.
• Add new shadcn components with npx shadcn add.

The components.json file tracks your shadcn configuration. @/components/ui is aliased in tsconfig.json — no relative import paths needed.

Theme

Every surface is wrapped in a ThemeProvider with defaultTheme="system". Use CSS variables and Tailwind tokens — light, dark, and system modes work out of the box.

// globals.css — customize these CSS variables to change the look of every component
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 221 100% 62%;
  --primary-foreground: 210 40% 98%;
  --radius: 0.5rem;
  // ... 30+ tokens
}

Content scripts and Shadow DOM

Content scripts use the same components through injected-ui.tsx. ChromeShip mounts them in a Shadow DOM, injects the project styles, and keeps popovers, dialogs, and other portal-based layers inside that isolated root.

Next

Build a popup or side panel with your components. Customize the theme to match your brand. Explore the getting started guide for a full walkthrough.