Styles & Theming

Pixi’VN templates build the UI with shadcn/ui 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/).

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

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

The official theme builder 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:

npx shadcn@latest add <generated-command>

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 Templates → Customise the style.

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

npm run ui:reinit

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 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.