# Styles & Theming (/start/interface-font)



Pixi’VN templates build the UI with [shadcn/ui](https://ui.shadcn.com/) on top of Tailwind CSS. Unlike a regular component library, shadcn/ui does not ship as a package: the component source is copied into your own project (under `src/components/ui/`).

<CalloutContainer type="info">
  <CalloutTitle>
    Templates
  </CalloutTitle>

  <CalloutDescription>
    Pixi’VN templates use Vite, Tailwind CSS, and shadcn/ui, so the instructions below are tuned for that setup. See <DynamicLink href="/start/templates">Templates</DynamicLink> for the full project structure.
  </CalloutDescription>
</CalloutContainer>

The whole theme — colors, roundness, fonts, and more — depends on a single file: `src/styles.css`.

## Beyond the base theme builder [#beyond-the-base-theme-builder]

Rather than editing `styles.css` by hand, you can generate a full theme with a visual tool.

### shadcn/ui theme builder [#shadcnui-theme-builder]

The [official theme builder](https://ui.shadcn.com/create) is a visual editor: you pick a base color, adjust the palette for light and dark mode, and set the corner radius, with a live preview of real shadcn components (buttons, cards, inputs, etc.) so you can see the result before applying anything. Once you are happy with it, open the **Copy** section of the page: it gives you a ready-to-run command in the form:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add <generated-command>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Running this command from the root of your project fetches your generated theme and overwrites the color/radius variables in `styles.css` with it, as described in <DynamicLink href="/start/templates">Templates → Customise the style</DynamicLink>.

Once you have that generated code applied to your project, run:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm run ui:reinit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm run ui:reinit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn ui:reinit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun run ui:reinit
    ```
  </CodeBlockTab>
</CodeBlockTabs>

This force-reinstalls every shadcn component already in your project straight from the shadcn registry, using your updated `styles.css` and `components.json`, and reformats the source files afterwards. It keeps all components consistent with the new theme, instead of leaving them on whatever variables they were built with.

### tweakcn [#tweakcn]

[tweakcn](https://tweakcn.com/) is a community-made alternative to the official theme builder. It covers the same colors and radius, but adds live editing of fonts and shadows too, and comes with a gallery of ready-made presets you can start from instead of building a palette from scratch. It also exports its result as CSS variables, so you paste the output into `styles.css` the same way, and can follow it with `npm run ui:reinit`.

These two are the theme generators most widely used with shadcn/ui today. If you come across others, the important thing is that they output plain CSS variables (or a shadcn registry command) — anything in that format drops into `styles.css` the same way.