Styling the application

Learn how to style your supastarter application.

To build the user interface supastarter comes with Tailwind CSS and Base UI pre-installed.

Why Tailwind CSS and Base UI

The combination of Tailwind CSS and Base UI allows gives ready-to-use, complex UI components that can be fully customized to match your brands design.

Theme configuration

In the packages/tooling/tailwind/theme.css file you can configure the Tailwind CSS theme. Next to the default Tailwind CSS theme configuration you will also find two color variable objects in the file for light and dark mode. These color variables will be passed into the Tailwind CSS theme configuration and are used across the UI of the application.

The default palette sits on Tailwind’s olive scale—warm olive-50 paper, olive-tinted borders, and olive-950 actions—plus a chromatic --touch accent for highlights.

@layer base {
  :root {
    --border: var(--color-olive-200);
    --input: var(--color-olive-200);
    --ring: var(--color-olive-400);
    --background: var(--color-olive-50);
    --foreground: var(--color-olive-950);
    --primary: var(--color-olive-950);
    --primary-foreground: var(--color-olive-50);
    --secondary: var(--color-olive-100);
    --secondary-foreground: var(--color-olive-900);
    --destructive: var(--color-red-700);
    --destructive-foreground: var(--color-white);
    --success: var(--color-green-800);
    --success-foreground: var(--color-white);
    --warning: var(--color-yellow-700);
    --warning-foreground: var(--color-white);
    --muted: var(--color-olive-100);
    --muted-foreground: var(--color-olive-600);
    --accent: var(--color-olive-100);
    --accent-foreground: var(--color-olive-900);
    --touch: oklch(0.51 0.12 128);
    --touch-foreground: oklch(0.99 0.01 128);
    --popover: var(--color-white);
    --popover-foreground: var(--color-olive-950);
    --card: var(--color-white);
    --card-foreground: var(--color-olive-950);
    --radius: 0.625rem;
  }

  .dark {
    --border: var(--color-olive-800);
    --input: var(--color-olive-800);
    --ring: var(--color-olive-500);
    --background: var(--color-olive-950);
    --foreground: var(--color-olive-50);
    --primary: var(--color-olive-50);
    --primary-foreground: var(--color-olive-950);
    /* ... */
  }
}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-touch: var(--touch);
  --color-touch-foreground: var(--touch-foreground);
  /* ... */
}

Change fonts

Marketing uses Inter for body copy and DM Sans for headings. The SaaS app uses Inter throughout. Fonts are loaded from Google Fonts in the root route head() links, then wired to Tailwind in globals.css.

apps/marketing/routes/__root.tsx

links: [
  {
    rel: "stylesheet",
    href: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
  },
],

apps/marketing/routes/globals.css

@theme inline {
  --font-inter: "Inter";
  --font-dm-sans: "DM Sans";
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;
}

Swap the Google Fonts URL and CSS variables when you want a different type pairing.

shadcn/ui

supastarter is also fully compatible with shadcn/ui, which is an amazing tool to quickly build your own component library with Base UI and Tailwind CSS.

All UI components are located in the packages/ui package and can be imported from @repo/ui/components/[component-name].

To use the shadcn/ui CLI in your supastarter project, run the following command from your project's root:

pnpm --filter=ui shadcn [command]

Since supastarter uses Base UI, make sure the components are added from the Base UI registry with the --base base flag (shadcn/ui also offers radix and aria registries).

For example to add the skeleton component you would run:

pnpm --filter=ui shadcn add --base base skeleton

Using UI components

After adding components, you can import them from @repo/ui:

import { Button } from "@repo/ui/components/button";
import { Card } from "@repo/ui/components/card";
import { cn } from "@repo/ui";

The cn utility function for merging Tailwind classes is also available from @repo/ui.

Styling the application

Theme configuration

Change fonts

shadcn/ui

Using UI components

On this page