---
title: "Style Tiptap UI Components"
description: "Style Tiptap UI Components to match your design system or application theme."
canonical_url: "https://tiptap.dev/docs/ui-components/getting-started/style"
---

# Style Tiptap UI Components

Style Tiptap UI Components to match your design system or application theme.

### Add Styles

Component styles are written in SCSS. The SCSS compiler (`sass` or `sass-embedded`) is installed automatically when you install a component or template using the Tiptap CLI. If you follow a manual setup, you'll need to install it manually.

> **Styles are added automatically:**
>
> When you install your first Tiptap UI Component, the CLI automatically injects the required
> .scss imports into your project’s global stylesheet. In most cases,
> no manual setup is needed.

> **Bun projects automatically convert SCSS to CSS:**
>
> If you’re using Bun, the CLI converts all .scss files into .css files at install time and updates the imports accordingly. Your project will use:
>
> ```css
> @import './styles/_variables.css';
> @import './styles/_keyframe-animations.css';
> ```

#### Where Styles Are Imported

The CLI injects these imports into your global stylesheet:

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

If you use a custom entry stylesheet, make sure the imports exist there.

#### Framework-Specific Setup

Below are the locations where the CLI adds the global stylesheet imports for each framework.

#### Next.js (App Router)

Injected into one of:

- `app/globals.css`
- `src/app/globals.css`

File: `app/globals.css` or `src/app/globals.css`

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

#### Vite + React

Injected into:

- `src/index.css`

File: `src/index.css`

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

Paths may differ slightly depending on your project structure.

#### Astro

Injected into your global stylesheet, typically:

- `src/styles/global.css` or whatever file you’ve designated as a global stylesheet

File: `src/styles/global.css` (or your custom entry)

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

#### Laravel (Vite)

Injected into:

- `resources/css/app.css`

File: `resources/css/app.css`

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

#### React Router (Vanilla React)

Injected into:

- `src/index.css`

File: `src/index.css`

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```