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

# Astro

Install and configure Tiptap UI Components in your Astro project.

Use the command below to scaffold a new Astro project with TypeScript.

```bash
npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
```

## Edit tsconfig.json file

Add the following code to the `tsconfig.json` file to resolve paths:

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

## 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 React from 'react'
import { HeadingButton } from '@/components/ui/heading-button'

export default function EditorPage() {
  // Tiptap setup...

  return (
    <div className="editor-page">
      <div className="toolbar">
        <HeadingButton level={1}>Heading 1</HeadingButton>
        <HeadingButton level={2}>Heading 2</HeadingButton>
        <HeadingButton level={3}>Heading 3</HeadingButton>
      </div>
      {/* Your editor component */}
    </div>
  )
}
```

## 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:

- `styles/global.css`

**File:** `styles/global.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).