Theming, Tailwind and Shadcn

Overview

In StartupFast.dev, you have custom components made from scratch for you on top of all the Shadcn components. This will cover pretty much every use case you will need to build any kind of web app. We have also made theming your app easy thanks to Tailwind CSS themes.

Shadcn

In order to give you the most reliable and fast prototype capabilities, we have installed Shadcn UI. This means that on top of all the components made for you that you will find in the documentation, you can use any of the available components in the Shadcn library: component list here. It also means that any component that you install will be already themed with your application colors (see "Theming" section).

Let's say you want to use a <Badge> component from Shadcn. Following their documentation, you will just need to install it:

1npx shadcn@latest add badge

This will create the component under /components/ui. You can now import it in your app.

Tailwind

StartupFast.dev uses Tailwind for easy and fast development. Refer to the official documentation to learn all the class names and properties.

Theming

Below there are all the color variables of your theme (colors may change in the default repo), you can change them by modifying the variables defined in the globals.css file where both Light and Dark mode settings are defined.