> ## Documentation Index
> Fetch the complete documentation index at: https://novel.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Start using the editor in 5 minutes

## Installation

Novel package doeesn't have any styles included. It's just a collection of custom configs and components for Tiptap.

<CodeGroup>
  ```bash npm
  npm i novel
  ```

  ```bash yarn
  yarn add novel
  ```

  ```bash pnpm
  pnpm add novel
  ```
</CodeGroup>

## Usage

<CardGroup>
  <Card
    title="Tailwind"
    icon={
     <svg className='h-8 w-8' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
         <g clipPath="url(#prefix__clip0)">
             <path fill="#38bdf8" fillRule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" />
         </g>
         <defs>
             <clipPath id="prefix__clip0">
                 <path fill="#fff" d="M0 0h54v32.4H0z"/>
             </clipPath>
         </defs>
     </svg>
  }
    href="/guides/tailwind"
  >
    Usage with Tailwind and Shadcn-UI
  </Card>

  <Card icon="react" href="/components" title="Custom">
    Write your own styles using the Novel components
  </Card>
</CardGroup>

## Anatomy

This is mostly how you would use the editor in your application. Similar to Radix Primitives, Novel exports a set of components that you can use to build your own editor.

```tsx
import {
  EditorBubble,
  EditorBubbleItem,
  EditorCommand,
  EditorCommandItem,
  EditorContent,
  EditorRoot,
} from "novel";

export default () => (
  <EditorRoot>
    <EditorContent>
      <EditorCommand>
        <EditorCommandItem />
        <EditorCommandItem />
        <EditorCommandItem />
      </EditorCommand>
      <EditorBubble>
        <EditorBubbleItem />
        <EditorBubbleItem />
        <EditorBubbleItem />
      </EditorBubble>
    </EditorContent>
  </EditorRoot>
);
```