Components

Every ChromeShip project ships with the full shadcn/ui catalog — 50+ components, pre-installed and ready to use. Import from @/components/ui and build your UI across all surfaces.

What you get

Your project's src/components/ui/ folder contains every shadcn component. Nothing is hidden in node_modules — you own the source. Customize colors, radii, animations, or component internals directly.

50+ components included:

Use them anywhere

Same imports, same components — across every surface. Popup, side panel, options, and content scripts all share the same component library.

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 the components you actually import. Even though 50+ components live in src/components/ui/, your extension ZIP only contains the ones you used. No manual cleanup needed — import what you need, ignore the rest.

Customize everything

Every component is a standalone .tsx file with its own styles. Edit the source directly:

• 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 get the same components. ChromeShip inlines the CSS, isolates the UI in a Shadow DOM, and routes shadcn portals into the shadow root. Your injected toolbar or overlay uses the same Button and Card as your popup — no special handling needed.