Styling
Styling is handled using TailwindCSS (opens in a new tab) and ShadCN UI (opens in a new tab). ShadCN is popular UI component library, maintained by Vercel, combining accessible Radix UI (opens in a new tab) primitives with TailwindCSS styling. The huge benefit of it over other React component libraries is the components and their styling configurations live directly inside your app alongside your other React components, rather than having to be imported from an NPM package, giving you full control over them. It is in essence just a light wrapper around Radix UI, allowing you to change the underlying styles however you please while retaining the accessibility provided by Radix UI.
It uses a powerful CSS-variable based theming system to provide colors, border radius, animations, and light/dark themes which comes with an extremely low runtime cost compared to CSS-in-JS theming systems.
Theming
Light/dark mode can be toggled with the <ModeToggle/>
component. This is present on the marketing pages and the dashboard page.
The color theme of the app can be toggled with the <ThemeCustomiser />
component. This allows you to switch between the default color ShadCN themes. This is mostly for initial testing and when you launch your app you should remove this and the app/styles/shadcn-themes.css
file that supports it.
Adding new components
The ShadCN UI (opens in a new tab) documentation is the best place to go to add new components. There are 50+ components currently and more are being added regularly, as are additional features to the component library itself;
LLMs
Vercel have a tool for generating UIs via prompts called v0 (opens in a new tab). If ShadCN does not have a specific component you're looking for, or if there's an existing one you want to edit (opens in a new tab), v0 can be extremely helpful as it's well-versed in the style of ShadCN.
Claude (opens in a new tab) also seems to have excellent knowledge of the ShadCN theming system and is very helpful at generating components that match the style.