---
title: "Vite"
description: "Install and configure Tiptap UI Components in your Vite project."
canonical_url: "https://tiptap.dev/docs/ui-components/install/vite"
---

# Vite

Install and configure Tiptap UI Components in your Vite project.

Use the command below to scaffold a new Vite project. When prompted, choose `React + TypeScript`.

```bash
npm create vite@latest
```

## Configure TypeScript Paths

Vite splits TypeScript config into multiple files. You'll need to update both `tsconfig.json` and `tsconfig.app.json`.

Within `tsconfig.json` add the following inside `compilerOptions`:

```json
{
  // ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

In `tsconfig.app.json` update these `compilerOptions`:

```json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
  // ...
}
```

## Update Vite Configuration

To enable path aliases and avoid `__dirname` type errors:

Install Node types:

```bash
npm install -D @types/node
```

And then edit `vite.config.ts`:

```ts
import path from 'path'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
```

## Render the editor

> **A new project still shows the default Vite page:**
>
> Scaffolding creates a standard Vite + React app. Adding components copies them into
> `src/components/` as source, but `src/App.tsx` still renders Vite's default starter page until you
> render a Tiptap component there yourself. This is expected, not a broken install.

Replace the contents of `src/App.tsx` with the template or component you installed. For example, the **Simple Editor** template:

```tsx
import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function App() {
  return <SimpleEditor />
}
```

Start the dev server to see your editor:

```bash
npm run dev
```

## Add Tiptap components

Install Tiptap UI components using the CLI. For example, to add the `HeadingButton` component:

```bash
npx @tiptap/cli@latest add heading-button
```

The command above will install the `HeadingButton` component and its dependencies. You can then import and use it in your **Tiptap** project:

```tsx
import { HeadingButton } from '@/components/ui/heading-button'

export default function App() {
  // Tiptap ...

  return (
    <>
      <HeadingButton level={1}>Heading 1</HeadingButton>
      <HeadingButton level={2}>Heading 2</HeadingButton>
      <HeadingButton level={3}>Heading 3</HeadingButton>
    </>
  )
}
```

## Add Styles

> **Styles are added automatically:**
>
> When you install your first Tiptap UI Component, the CLI automatically adds the required
> .scss imports to your main stylesheet. In most cases, **no manual setup is needed**.

Before proceeding, ensure your project includes a CSS reset.
If you are using Tailwind CSS, you already have one.

#### Where styles are imported

The CLI automatically injects style imports into your global stylesheet, such as:

- `src/index.css` (depending on your project)

If you’ve customized your entry file, make sure this is present:

**File:** `src/index.css` (depending on your project)

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

Learn more about configuring styles in the [style setup guide](https://tiptap.dev/docs/ui-components/getting-started/style.md).