DOM Studio

Blocks

18 auto-discovered

Production-shaped interface sections built from DOM Studio primitives: app shells, communication surfaces, conversion flows, and form-led product moments.

Catalog

Block categories

App Shells

Whole-product layouts for dashboards, workspaces, and persistent navigation.

Dashboard Application Layout

Communication

Messaging, inbox, and conversation surfaces with realistic application density.

Chat Mail

Work Management

Planning, prioritization, and delivery surfaces for product and operations teams.

Sprint Planning Saved Filters

Conversion

Authentication, activation, booking, and setup flows that move users into a product or service.

Appointment Booking Onboarding Login

Operations

Operational workspaces for internal teams, customer success, support, and administration.

Team Members Feature Flags Support Center

Developer Experience

Developer-facing product surfaces for API access, integration setup, observability, and platform administration.

Api Keys Webhooks

Account Settings

User-facing settings surfaces for preferences, profile control, account safety, and personalization.

Notification Preferences

Monetization

Billing, subscription, pricing, and revenue-management surfaces for SaaS products.

Billing

Data Capture

Form-led compositions for collecting and validating structured product data.

Data Import Forms

Library

All blocks

Dashboard

App Shells

A product dashboard starter with a side menu, account dropdown, metrics, and card-based content.

1 example src/pages/blocks/dashboard

Chat

Communication

A ChatGPT-style application shell with a thread sidebar, message stream, and composer.

1 example src/pages/blocks/chat

Mail

Communication

A Mac Mail-style three-pane layout with folders, message list, and readable preview panel.

1 example src/pages/blocks/mail

Sprint Planning

Work Management

A sprint planning board for prioritizing backlog work, balancing engineering capacity, and tracking release readiness.

1 example src/pages/blocks/sprint-planning

Api Keys

Developer Experience

An API key management console for creating credentials, reviewing scopes, rotating secrets, and monitoring usage.

1 example src/pages/blocks/api-keys

Appointment Booking

Conversion

A responsive appointment booking flow for choosing a meeting type, date, time, attendee details, and confirmation.

1 example src/pages/blocks/appointment-booking

Team Members

Operations

A team access console for inviting members, changing roles, tracking seats, and reviewing account security signals.

1 example src/pages/blocks/team-members

Webhooks

Developer Experience

A webhook operations console for configuring endpoints, subscribing to events, inspecting deliveries, and retrying failures.

1 example src/pages/blocks/webhooks

Feature Flags

Operations

A feature flag rollout console for targeting audiences, monitoring guardrails, and shipping releases gradually.

1 example src/pages/blocks/feature-flags

Notification Preferences

Account Settings

A notification preference center for channel controls, quiet hours, digest cadence, required alerts, and preference review.

1 example src/pages/blocks/notification-preferences

Saved Filters

Work Management

A saved filters and segment builder workspace for composing rules, previewing matching records, and sharing reusable views.

1 example src/pages/blocks/saved-filters

Onboarding

Conversion

Production-shaped setup flows for converting a new signup into an activated workspace.

1 example src/pages/blocks/onboarding

Data Import

Data Capture

A CSV import mapper for matching columns, reviewing validation issues, and approving data before creation.

1 example src/pages/blocks/data-import

Billing

Monetization

A SaaS billing settings surface for plan management, usage, seats, payment method, and invoices.

1 example src/pages/blocks/billing

Forms

Data Capture

Complete application form starters using field primitives, form state, native controls, and semantic status tokens.

4 examples src/pages/blocks/forms

Support Center

Operations

A support ticket workspace with a queue, SLA signals, customer context, reply composer, and resolution checklist.

1 example src/pages/blocks/support-center

Login

Conversion

A complete authentication starter with social sign-in buttons, email/password fields, and an editable product-side panel.

1 example src/pages/blocks/login

Application Layout

App Shells

A fixed application shell with a left panel that scrolls independently from the main work area.

1 example src/pages/blocks/application-layout