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

# Quickstart

> Install a Fonttrio pairing and see it in action in under 2 minutes.

# Quickstart

Get started with Fonttrio in under 2 minutes. This guide will walk you through installing your first font pairing and using it in your project.

<Note>
  This guide assumes you already have a Next.js 14+ project with shadcn/ui and Tailwind CSS installed. If not, see the [Installation](/installation) guide for setup instructions.
</Note>

## Install a Pairing

<Steps>
  <Step title="Choose a pairing">
    Browse available pairings at [fonttrio.xyz](https://www.fonttrio.xyz) or pick one from the categories below:

    * **Editorial** - Classic serif pairing for content-heavy sites
    * **Minimal** - Clean sans-serif for modern apps
    * **Corporate** - Professional pairing for business sites
    * **Creative** - Unique pairing for portfolios

    For this example, we'll use the **Editorial** pairing.
  </Step>

  <Step title="Run the install command">
    Install the pairing using the shadcn CLI:

    <CodeGroup>
      ```bash npm theme={null}
      npx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
      ```

      ```bash pnpm theme={null}
      pnpm dlx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
      ```

      ```bash yarn theme={null}
      yarn dlx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
      ```

      ```bash bun theme={null}
      bunx shadcn@latest add https://www.fonttrio.xyz/r/editorial.json
      ```
    </CodeGroup>

    This command will:

    * Download the font configuration
    * Install the three fonts (heading, body, mono)
    * Set up CSS variables in your `globals.css`
    * Configure font loading in your Next.js app
  </Step>

  <Step title="Verify installation">
    Check that the following CSS variables were added to your `app/globals.css`:

    ```css theme={null}
    :root {
      --font-heading: var(--font-playfair-display);
      --font-body: var(--font-source-serif-4);
      --font-mono: var(--font-jetbrains-mono);
    }
    ```

    The typography scale CSS should also be present:

    ```css theme={null}
    h1 {
      font-family: var(--font-heading);
      font-size: 2.25rem;
      line-height: 1.2;
      letter-spacing: -0.025em;
      font-weight: 700;
    }

    body, p {
      font-family: var(--font-body);
      line-height: 1.65;
    }

    code, pre {
      font-family: var(--font-mono);
    }
    ```
  </Step>

  <Step title="Use the fonts in your components">
    The fonts are now available throughout your project. You can use them in two ways:

    **Option 1: Use HTML elements** (automatic styling)

    ```tsx theme={null}
    export default function Page() {
      return (
        <div>
          <h1>Beautiful Typography</h1>
          <p>This text automatically uses your installed font pairing.</p>
          <code>console.log('Monospace code')</code>
        </div>
      )
    }
    ```

    **Option 2: Use CSS variables directly**

    ```tsx theme={null}
    export default function Page() {
      return (
        <div>
          <h1 className="font-[family-name:var(--font-heading)]">
            Custom Heading
          </h1>
          <p className="font-[family-name:var(--font-body)]">
            Custom body text with the selected font.
          </p>
          <code className="font-[family-name:var(--font-mono)]">
            Monospace code
          </code>
        </div>
      )
    }
    ```
  </Step>

  <Step title="Preview your changes">
    Start your development server:

    ```bash theme={null}
    npm run dev
    ```

    Visit your app and you'll see the new typography in action!
  </Step>
</Steps>

## Try Different Pairings

You can install multiple pairings and switch between them:

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json
npx shadcn@latest add https://www.fonttrio.xyz/r/corporate.json
```

To switch pairings, simply update the CSS variable values in your `globals.css`:

```css theme={null}
:root {
  /* Change from Editorial to Minimal */
  --font-heading: var(--font-inter);
  --font-body: var(--font-inter);
  --font-mono: var(--font-jetbrains-mono);
}
```

## Example Component

Here's a complete example of a component using Fonttrio:

```tsx theme={null}
export default function BlogPost() {
  return (
    <article className="max-w-2xl mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold mb-4">
        Building Better Typography
      </h1>
      
      <p className="text-lg text-muted-foreground mb-8">
        A guide to using font pairings effectively
      </p>
      
      <div className="prose">
        <h2>Why Typography Matters</h2>
        <p>
          Good typography creates hierarchy, improves readability, 
          and establishes your brand's visual identity.
        </p>
        
        <h3>The Three Font Rule</h3>
        <p>
          Most designs work best with three fonts:
        </p>
        <ul>
          <li>One for headings</li>
          <li>One for body text</li>
          <li>One for code and UI elements</li>
        </ul>
        
        <pre>
          <code>console.log('Perfect typography');</code>
        </pre>
      </div>
    </article>
  )
}
```

## What's Next?

<CardGroup cols={2}>
  <Card title="Browse All Pairings" icon="grid" href="https://www.fonttrio.xyz">
    Explore all 49 curated font pairings with live previews
  </Card>

  <Card title="Installation Guide" icon="book" href="/installation">
    Detailed setup instructions and troubleshooting
  </Card>

  <Card title="Customization" icon="wrench">
    Learn how to customize typography scales and font weights
  </Card>

  <Card title="Examples" icon="code">
    See real-world examples of Fonttrio in production
  </Card>
</CardGroup>

<Tip>
  Each pairing page on [fonttrio.xyz](https://www.fonttrio.xyz) includes an interactive type tester and context previews to help you make the right choice.
</Tip>