Drawer panel

Drawers slide in from the edge of the screen. Ideal for settings panels, detail views, and secondary navigation. Focus is trapped within the drawer while it's open.

v2.4.0 · 47 components · MIT license

Build interfaces
that feel right

Forma is a refined design system for teams who care about every pixel. Accessible, composable, and darkly beautiful.

● StableTypeScriptReact 18Next.js readyWCAG 2.1 AA

Primitives

Everything you need

Atomic components built from design tokens. Every variant, every state, every size — composable by default.

Buttons

v2.4.0MIT

Avatars

JD
AL
MK
PR
JD
AL
MK
+9

Badges & tags

● Active● Offline● PendingNewPremiumDraft

Cards

Design tokens

Color, spacing, and typography exported as CSS variables and JS constants.

Composable API

Every component is headless-first. Bring your own styles or use our presets.

Accessible by default

ARIA patterns, keyboard navigation, and focus management built in from day one.

Form controls

Forms that don't frustrate

Validation states, accessible labels, and composable field groups — all wired up and ready to go.

Toggles, checkboxes & radios

Feedback & display

Communicate every state

Alerts, toasts, progress, skeletons — all the patterns you need to tell users what's happening.

Alerts

Toast

Copied to clipboard

Progress & steps

Uploading files72%
Processing40%
Indexing100%
  • Account
  • Profile
  • Billing
  • Done

Skeleton & spinner

Loading your workspace…

No components yet

Start building your library by adding your first component.

Containers

Structured surfaces

Cards, modals, drawers, accordions — flexible containers that adapt to any layout.

Accordion

What tokens does Forma export?

Forma exports CSS custom properties for color, spacing, radius, shadow, and typography — plus a JS token object for use in styled-components or Tailwind configs.

Is it framework-agnostic?

The core tokens and CSS utilities work anywhere. React components are available via @forma/react, with Vue and Svelte packages coming soon.

How are accessibility levels tested?

We run automated axe-core tests in CI and manual audits with NVDA and VoiceOver on every major release. All interactive components meet WCAG 2.1 AA criteria.

Can I use Forma in a commercial project?

Yes — Forma is MIT licensed. You can use it in personal, open-source, and commercial projects with no restrictions.

Calendar / Date picker

April 2026
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2

Data display

Make data legible

Tables, charts, and lists that scale from a handful of records to millions — without sacrificing clarity.

Monthly revenue

Q1 · Q2 2026

$42k
Jan
$55k
Feb
$49k
Mar
$78k
Apr
$61k
May
$70k
Jun
Component ↑CategoryStatusVersionActions
ButtonPrimitive● Stable2.4.0
DataTableData● Stable2.3.1
CommandMenuNavigation● Beta0.9.2
DateRangePickerForm● Deprecated1.8.0

Pricing

Simple, honest pricing

No hidden fees. Cancel anytime. Every plan includes the full component library.

Starter

Free

forever

  • 47 base components
  • Community support
  • MIT license
POPULAR

Pro

$29

per seat / month

  • Everything in Starter
  • Figma kit included
  • Priority support
  • Private Slack channel

Enterprise

Custom

talk to us

  • Everything in Pro
  • White-label rights
  • SLA & dedicated support
  • Custom token generation

Forma

© 2026 Forma Design System · Built with care · MIT License