Component Showcase

Typography

Body text uses Cal Sans UI at 1rem with 1.7 line-height. Code: npm install @formstep/ui. Links: an inline link. Bold: important phrase. Emphasis: quiet emphasis. Keyboard: press ⌘ K to open search.

Long paragraph for line-length tuning — Formstep lets you build forms quickly using a drag-and-drop editor with 25+ field types, conditional logic, AI-assisted generation, and direct integrations with the tools you already use. Body text targets 65–68 characters per line for sustained reading.

Heading 3 — section sub-topic

Sub-section copy follows.

Heading 4 — minor heading

Even smaller subdivisions.

"Make it as simple as possible, but no simpler." — pull quote example.

Action buttons

Callouts

Code blocks

import { z } from 'zod'

export const Submission = z.object({
  id: z.string(),
  email: z.string().email(),
  createdAt: z.coerce.date(),
})

export type Submission = z.infer<typeof Submission>

# install
pnpm add @formstep/ui

# run dev
pnpm dev

{
  "id": "sub_01HQ7ZP9X2",
  "event": "submission.created",
  "form_id": "frm_abc123"
}

Step list

1. 1

   Install dependencies

   Run pnpm install at the repo root.

2. 2

   Configure your workspace

   Set workspace name, slug, and theme.

3. 3

   Invite teammates

   Up to unlimited collaborators on Pro.

4. 4

   Publish your first form

   Click Publish to lock in changes and generate a share link.

Link cards

Media card

Tables

Inline elements

• Unordered list item with bold emphasis.
• Item with inline-code.
• Item with a link.

1. First ordered step.
2. Second step with details.
3. Third step concludes the flow.

End of showcase.