> For the complete documentation index, see [llms.txt](https://nextjs-docs.adarshdubey.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextjs-docs.adarshdubey.com/get-started/custom-styles.md).

# Custom styles

## Overview

Here, we're going to talk about all the ways you can customize the styles and use them according to your preferences.

## Styling

### Colors

Currently, all the atomic styles are in `src/app/globals/css` file.

{% code title="globals.css" %}

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    /* other styles */
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 210 40% 98%;
    /* other styles */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

{% endcode %}

Then, to be able to use them in components using tailwind's classes, we use them in `tailwind.config.ts`

{% code title="tailwind.config.ts" %}

```typescript
import type { Config } from 'tailwindcss';
// other imports

const config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        // other colors
      },
    },
    // other styles
  },
  plugins: [require('tailwindcss-animate')],
} satisfies Config;

export default config;
```

{% endcode %}

Now, we can use class like `bg-background` in our components, and it'll work perfectly fine.

To add custom styles, check out shadcn/ui's docs on the same: <https://ui.shadcn.com/docs/theming#css-variables>

### Fonts

This starter kit supports multiple fonts out of the box. Check out [Multiple Fonts](/get-started/multiple-fonts.md) page for more information.

### Dark Mode

This starter kit supports dark mode out of the box. Check out [Dark Mode](/get-started/dark-mode.md) page for more information.

### Component based

This starter kit is based on Shadcn/UI for styling and components. All the components installed by Shadcn/UI will be in the `src/components/ui/` directory.

If you would like to edit styling of any of the component, simply check out it's respective component file in `src/component/ui/` directory and you can customize it there.

## Other resources

* Shadcn/ui's Docs: <https://ui.shadcn.com/docs/theming>
* TailwindCSS's Docs: <https://tailwindcss.com/docs/adding-custom-styles>