Documentation
Next.js
UI & styling

UI & Styling

To build the user interface supastarter comes with Tailwind CSS (opens in a new tab) and Radix UI (opens in a new tab) pre-installed.

💡

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

Theme configuration

In the packages/config/tailwind/index.ts 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.

const lightVariables = {
  colors: {
    border: '#e2e8f0',
    input: '#e2e8f0',
    ring: '#0072f5',
    background: '#ffffff',
    foreground: '#020817',
    primary: '#0072f5',
    'primary-foreground': '#ffffff',
    secondary: '#f1f5f9',
    'secondary-foreground': '#0f172a',
    error: '#ef4444',
    'error-foreground': '#ffffff',
    success: '#39a561',
    'success-foreground': '#ffffff',
    muted: '#f8fafc',
    'muted-foreground': '#64748b',
    accent: '#f1f5f9',
    'accent-foreground': '#0f172a',
    popover: '#ffffff',
    'popover-foreground': '#020817',
    card: '#ffffff',
    'card-foreground': '#020817',
  },
};
 
const darkVariables = {
  colors: {
    border: '#2f3e57',
    input: '#1e293b',
    ring: '#0072f5',
    background: '#121924',
    foreground: '#f8fafc',
    primary: '#0072f5',
    'primary-foreground': '#ffffff',
    secondary: '#1e293b',
    'secondary-foreground': '#f8fafc',
    error: '#ef4444',
    'error-foreground': '#ffffff',
    success: '#39a561',
    'success-foreground': '#f8fafc',
    muted: '#020817',
    'muted-foreground': '#94a3b8',
    accent: '#1e293b',
    'accent-foreground': '#f8fafc',
    popover: '#121924',
    'popover-foreground': '#f8fafc',
    card: '#121924',
    'card-foreground': '#f8fafc',
  },
};

Storybook

supastarter also includes Storybook (opens in a new tab) to help you build and document your UI components. You can find the Storybook stories in the /apps/web/stories folder.

To start Storybook run the following command:

pnpm storybook
MailsE2E testing