Getting Started

Install

pnpm add @forma-studio/components

Then install the peer dependencies if you don't already have them:

pnpm add react react-dom tailwindcss @base-ui-components/react

Load fonts

The library uses Syne (headings), DM Sans (UI text), and DM Mono (code). Font files are not bundled — you must load them.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet" />

pnpm add @fontsource/syne @fontsource/dm-sans @fontsource/dm-mono

import '@fontsource/syne/800.css'
import '@fontsource/dm-sans/300.css'
import '@fontsource/dm-sans/400.css'
import '@fontsource/dm-sans/500.css'
import '@fontsource/dm-mono/400.css'

:root {
  --font-display: 'Your Heading Font', sans-serif;
  --font-body:    'Your Body Font', sans-serif;
  --font-mono:    'Your Mono Font', monospace;
}

Setup CSS

In your global CSS entry point, import Tailwind and the component styles:

@import "tailwindcss";
@import "@forma-studio/components/styles";

This single import gives you:

• All design tokens as CSS custom properties (--color-bg-base, --radius-sm, etc.)
• Pre-compiled component styles
• Tailwind v4 bridge so tokens work as utility classes (bg-bg-base, text-text-primary)
• Dark-first theme with light mode via data-theme="light"

Use a component

import { Button } from '@forma-studio/components'

export function App() {
  return (
    <Button.Root variant="primary" size="md">
      Get started
    </Button.Root>
  )
}

TypeScript types are bundled — no separate @types/* package needed.

Component anatomy

All components use a namespace compound pattern. Each export is a namespace object with subcomponents:

import { Accordion } from '@forma-studio/components'

<Accordion.Root>
  <Accordion.Item value="q1">
    <Accordion.Trigger>Question</Accordion.Trigger>
    <Accordion.Panel>Answer</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

This makes it clear which subcomponents belong together and avoids import collisions when composing multiple components on the same page.

Peer dependency versions

Next steps