fma-ds

Blocks

Multi-file compositions of the registry's components, ready to drop into an app. They install into components/fma-ds/<block>/. Each one comes from a real app's need, so this is not a general application kit.

App Sidebar

An app-shell sidebar block, collapsible to icons: a team switcher (or a static logo), one navigation section per data.nav entry and a user menu.

View block

Auth

The frame of sign-in, sign-up and password recovery screens. The fields are the app's (TextField, password-input, input-otp, password-rules).

View block

Collection Field

A list edited in place inside a form: the user adds an item and fills it right there (payment methods, lots, recipients).

View block

Error Pages

Error screens on top of empty and icon-stack: NotFound (404), Forbidden (403) and UnexpectedError, plus the bare ErrorPage for other cases (maintenance, expired link).

View block

Event Calendar

A headless-first event calendar: month, week, day, N-day, agenda and resource views, with recurring events, time zones and drag and drop.

View block

Feature Promo

A locked feature or an offer on a card: why it matters, what it gives and the call to action.

View block

Filter Toolbar

The controls above a list or DataGrid, composed from parts that are each controlled (value/onChange), so every filter maps to a search param.

View block

Form Wizard

A form in steps, in a dialog or on a page (a new customer, an onboarding).

View block

Notification Center

Notifications in the header and on their own page, driven by props and callbacks (no server state).

View block

Order Summary

What the user is about to confirm before buying: lines, an applicable benefit, discounts, the total and the action.

View block

Page Header

The top of a page, composed from parts: breadcrumbs, the title with its description and actions, and an optional sub-page nav.

View block

Panel Card

A panel on a Card — a dashboard chart or table, or one resource and its status (a contract, the current plan) — with a standard header and a body that handles its own states.

View block

Payment Card

The payment card screens: the saved card and the form to add one.

View block

Plan Builder

Build what the user is about to buy by choosing quantities, with the price in real time: a custom plan with several resources, or a quantity of one item (extra notes, credits).

View block

Pricing Plans

Choose one of a few fixed plans, then confirm. For a plan built from quantities and add-ons, use plan-builder.

View block

Settings Form

A long edit form in sections, saved as a whole (account, company, preferences).

View block

Stat Cards

Totals above a list or on a dashboard: figures on their own or on cards that are static, pressable, links or filters.

View block