Theme

SupaSaaS is styled solely on the foundational framework of Tailwind CSS and shadcn/ui. This allows for a more consistent and maintainable design system that can be easily customized to fit your brand.

The combination of Tailwind CSS and shadcn/ui gives you ready-to-use components that are fully responsive and functional out of the box which can be fully customized to your liking.

You can find more information about Tailwind CSS and shadcn/ui on their respective websites.

Tailwind CSS configuration

In the root of your project you'll find the tailwind.config.ts file. This is where all of the custom configuration happens to make your styling as plug and play as possible.

The tailwind.config.ts file is where you can add custom colors, fonts, breakpoints, and more.

@/styles/global.css
@layer base {
  :root {
    --background: 0 0% 100%;
    --background-alt: 40 100% 98%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.3rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --background-alt: 240 10% 3.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

Change the theme colors

There is a fantastic tool available for shadcn that allows you to easily change the theme colors to fit your brand, or to browse existing themes that you might like the look of. You can find the Shadcn/ui theme editor here.

Customize each colour to your liking, and once you're happy, just click Copy code and replace your :root and .dark classes inside @/styles/global.css with the new values.

Custom colors

In the @/styles/global.css file you'll find the custom color palette that we've added to the theme.

The variables are defined in the HSL color format which allows for easy manipulation and customization.

For example, when styling some text with the primary color you can use the following CSS:

<p className="text-primary">this is some text</p>

By using HSL colors, you can easily adjust the hue, saturation, lightness and opacity of the color to fit your brand.

For example, when styling some text with your primary colour, you can add the slash operative to change it's opacity.

<p className="text-primary/50">this is some text</p>

This would make the text 50% opaque.

If you prefer to use HEX or RGB colours, you can easily change these values in the @/styles/global.css file.

Afterwards, you'll need to change the variable names in the tailwind.config.ts file to remove the hsl() wrapper function.

For example, if you change the --primary variable to a HEX value, you'll need to update the primary key in the colors object in the tailwind.config.ts file.

tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--primary))", // Remove the hsl() wrapper
      },
    },
  },
};

Change to

tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)", // Remove the hsl() wrapper
      },
    },
  },
};

Light and dark mode

SupaSaaS comes with full light and dark mode out of the box.

To give your users the choice to toggle between themes, I have added a theme switcher component that can be found in @/components/Theme/ThemeToggle.tsx.

The theme switcher component uses the useTheme hook to toggle between the light and dark mode.

@/components/Theme/ThemeToggle.tsx
"use client";

import { MoonIcon, SunIcon } from "lucide-react";
import { useTheme } from "next-themes";

import { Button } from "@/components/ui/button";

export const ThemeToggle = () => {
  const { theme, setTheme } = useTheme();

  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label="theme toggle"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
    >
      <SunIcon className="dark:hidden" />
      <MoonIcon className="hidden dark:block" />
    </Button>
  );
};

Simply import the component wherever you'd like to give your users the choice to toggle between themes.

example.tsx
import { ThemeToggle } from "@/components/Theme/ThemeToggle";

export default function Example() {
  return (
    <div>
      <ThemeToggle />
    </div>
  );
}

Shadcn UI

Shadcn UI is a collection of components that are built on top of Tailwind CSS. It provides a set of components that are fully responsive and functional out of the box.

You can find more information about shadcn/ui on their website.

Adding components

To add a component to your project that is not already included, you can run the following command in your terminal:

npx shadcn-ui@latest add form

This will add the form component to your project. Replace form with the component you'd like to add.

You can find the full list of components on the shadcn/ui docs website.

Once you've added the component, you can import it into your project and use it like any other component.

example.tsx
export default function Example() {
  return (
    <FormField
        control={form.control}
        name="username"
        render={({ field }) => (
            <FormItem>
            <FormLabel>Username</FormLabel>
            <FormControl>
                <Input placeholder="shadcn" {...field} />
            </FormControl>
            <FormDescription>This is your public display name.</FormDescription>
            <FormMessage />
            </FormItem>
        )}
    />
 };

Shadcn UI blocks

Shadcn UI also provides a set of blocks that can be used to quickly build out pages, complete with responsive design and functionality.

You can find the full list of blocks on the shadcn/ui docs website.