Library

Alle Bausteine aus den Referenzen, eingeordnet in FORMA — und jeder fertige Baustein in jeder Richtung.

63 Bausteine aus 10 Referenzen. FORMA hat 37 davon schon, 5 brauchen nur eine neue Achse oder müssen aus einem bestehenden Teil herausgelöst werden, 21 sind neu zu bauen. Neu dazu: Filterleiste, Auswahl-Steuerung, Hinweis, Dialog und Lade-Zustand — jeweils in allen elf Richtungen.

Als Nächstes

Was noch fehlt, nach der Zahl der Referenzen, die es zeigen.

Medien- / Feature-KartePatternNeue Achse5 von 10 Referenzen
Galerie / VorlagenPatternNeu bauen5 von 10 Referenzen
Upsell / AnkündigungPatternNeu bauen5 von 10 Referenzen
Segmented ControlPrimitiveNeue Achse4 von 10 Referenzen
Sheet / DrawerPrimitiveNeu bauen4 von 10 Referenzen
ToastPrimitiveNeu bauen4 von 10 Referenzen
ID / Adresse kopierenPrimitiveNeu bauen4 von 10 Referenzen
Zahl / BetragPrimitiveNeue Achse4 von 10 Referenzen

Inventar

Jede Zeile nennt, woran der Baustein in den Snapshots zu erkennen ist, und was FORMA heute dafür hat.

BausteinEbeneStatusFORMA

Button

10 von 10: Shopify, Asana, Lovable, Manus, Uniswap, Altitude, Browserbase, Coinbase, Deel, Higgsfield

Polaris-Button, Altitude Button, Asana ButtonThemeablePresentation, Uniswap CustomButtonText

PrimitiveVorhanden

ui/button + Achsen buttonShape, buttonStyle, secondary

Navigation

10 von 10: Shopify, Asana, Lovable, Manus, Altitude, Browserbase, Deel, Uniswap, Higgsfield, Coinbase

Polaris-Navigation/Frame, Sidebar, app-sidebar, explore-navbar, rail-peek-logo

ShellVorhanden

FormaShell: top-nav · top-bar+sidebar · sidebar · rail

Skeleton / Lader

8 von 10: Shopify, Altitude, Coinbase, Lovable, Uniswap, Deel, Asana, Browserbase

Polaris-Skeleton*, TableSkeleton/Spinner, SkeletonText/Row, chats-skeleton, loading-row, DotsLoader

PrimitiveVorhanden

ui/skeleton — ruhige Fläche + Spinner (ein drehender Bogen)

Filterleiste

8 von 10: Shopify, Altitude, Browserbase, Lovable, Deel, Uniswap, Coinbase, Manus

Polaris-Filters/IndexFilters/SortPopover, DataTableToolbar/FacetedFilter, sessions-filter-bar, projects-filter-*, filters-container, explore-tokens-search-input, discover-*-select, event-filters

PatternVorhanden

modules/filter-bar — Suche, Facetten, Sortierung, Zurücksetzen

Achse: filters: chips · menus · compact

Textfeld

7 von 10: Shopify, Altitude, Browserbase, Deel, Manus, Uniswap, Coinbase

Polaris-TextField, MuiTextField, Altitude Field/InputGroup

PrimitiveVorhanden

ui/input + Achse inputs

Dialog

7 von 10: Shopify, Altitude, Coinbase, Deel, Uniswap, Manus, Asana

Polaris-Modal, Altitude Dialog, cds Modal, MuiDialog, wallet-modal, ShareModalHeader

PrimitiveVorhanden

ui/dialog — kontrolliert, ds-card, Portal im Scope

Banner / Hinweis

7 von 10: Shopify, Altitude, Coinbase, Browserbase, Asana, Uniswap, Higgsfield

Polaris-Banner, Altitude Alert/ProviderAvailabilityBanner, cds Banner, AlertTitle, FormEligibilityWarningBanner, system-banner

PrimitiveVorhanden

modules/banner — Glyphe + Titel + eine Zeile + eine Aktion

Achse: banners: framed · tinted

Datentabelle

7 von 10: Shopify, Altitude, Deel, Asana, Uniswap, Browserbase, Manus

Polaris-IndexTable/ResourceList, DataTable/ColumnHeader, MuiDataGrid, SpreadsheetCell, top-tokens-explore-table, contexts-table-row-, ant-table

PatternVorhanden

TableHead + DS_TABLE/DS_ROW + SortButton + Checkbox-Auswahl; Achsen tables, tableHead, rows

Achse: tableHead · rows (vorhanden)

Checkbox

6 von 10: Shopify, Altitude, Coinbase, Manus, Uniswap, Browserbase

Polaris-Checkbox, Altitude Checkbox, cds Checkbox, ant-checkbox, RootWebCheckbox

PrimitiveVorhanden

ui/checkbox — Rand in gedämpfter Textfarbe (3:1 für Steuerelemente)

Achse: controls: classic · bevel · material · ios · soft · minimal

Datumsauswahl

6 von 10: Shopify, Altitude, Browserbase, Manus, Deel, Coinbase

Polaris-DatePicker, Altitude Calendar/DataTableDateFilter, Browserbase Calendar, ant-picker, Deel incrementMonth, custom-days

PrimitiveVorhanden

modules/date-picker — Calendar, DatePicker, DateRangePicker mit Voreinstellungen

Status-Badge

6 von 10: Shopify, Altitude, Browserbase, Asana, Uniswap, Higgsfield

Polaris-Badge, Altitude Badge/PendingDot, Browserbase Badge, Asana AvatarBadge

PrimitiveVorhanden

StatusBadge + Achse badges

Tooltip / Popover / Menü

6 von 10: Shopify, Altitude, Browserbase, Deel, Coinbase, Asana

Polaris-Tooltip/Popover/ActionList, HoverCard, DropdownMenuContent, MuiTooltip

PrimitiveVorhanden

ui/tooltip, popover, dropdown-menu

Kennzahl

6 von 10: Shopify, Altitude, Uniswap, Browserbase, Coinbase, Deel

metrics-grid, insight-hero, VaultBalanceCard, StatDisplay, overview-analytics, summary-card-list

PatternVorhanden

modules/metrics — Achse metrics (lead · strip · open · tiles)

Achse: metrics: lead · strip · tiles

Diagramm

6 von 10: Shopify, Uniswap, Deel, Browserbase, Lovable, Asana

chart-svg, donut/funnel/spark-skeleton, pool-balance-chart, chart-value-label, CartesianGrid, BaseChart

PatternVorhanden

modules/line-chart — eine Serie, Crosshair, Tastatur, Tabellenansicht

Ressourcen-Liste

6 von 10: Shopify, Altitude, Browserbase, Lovable, Deel, Uniswap

Polaris-IndexTable + IndexFilters, TreasuryPageDataTable, sessions-*, projects-*, top-pools-explore-table

SectionVorhanden

Block Ressourcen-Liste (src/library/blocks/resource-list.tsx)

Icon-Button

5 von 10: Asana, Uniswap, Browserbase, Deel, Lovable

IconButtonThemeablePresentation, Uniswap IconButton, Deel menu-*-icon

PrimitiveVorhanden

Button size=icon; Prüfung verlangt aria-label

Select

5 von 10: Shopify, Browserbase, Coinbase, Manus, Deel

Polaris-Select, SelectTrigger/SelectContent, cds Select, ant-select

PrimitiveVorhanden

ui/select

Combobox / Autocomplete

5 von 10: Shopify, Altitude, Deel, Asana, Uniswap

Polaris-Combobox/Autocomplete, Altitude Command, MuiAutocomplete, Asana MultiPickerInput, token-option-

PrimitiveVorhanden

modules/combobox — Suche, Einfach- und Mehrfachauswahl, Tastatur

Chip / Tag

5 von 10: Shopify, Coinbase, Deel, Asana, Lovable

Polaris-Tag, cds Tag, menu-item-chip, TokenizerPill, announcement-pill

PrimitiveVorhanden

modules/chip — entfernbar oder umschaltbar, Form nach buttonShape

Formular-Abschnitt

5 von 10: Shopify, Altitude, Deel, Lovable, Browserbase

Polaris-FormLayout/SettingAction, SettingsSection/FormFields, account-settings, settings-tab-title, rename-project-button

PatternVorhanden

modules/record — FormSection/FormRow, Achse forms (annotated · inline · stacked)

Achse: form: annotated · stacked

Aktivität / Verlauf

5 von 10: Asana, Uniswap, Shopify, Altitude, Lovable

GenericStoryFeed/feed-stack, activity-list-item-, timeline-dot-, TreasuryTransactions, chat-timeline/activity-group-header

PatternVorhanden

modules/record — Activity

Medien- / Feature-Karte

5 von 10: Higgsfield, Shopify, Coinbase, Browserbase, Asana

Higgsfield Modell-Karten mit Video, Polaris-MediaCard/CalloutCard, cds asset cards, playground-template-card-, TemplateCardStructure

PatternNeue Achse

Achse card (cover · overlay · thumb · header)

Achse: card: + feature · layered

Galerie / Vorlagen

5 von 10: Higgsfield, Browserbase, Asana, Lovable, Coinbase

Effekt-Kacheln „Recreate“, playground-template-card-, TemplateGalleryV2, dashboard-template-pill, BlossomCarousel

PatternNeu bauen

fehlt — Raster mit Vorschau und einer Aktion

Upsell / Ankündigung

5 von 10: Shopify, Asana, Altitude, Lovable, Higgsfield

incentives-bundle-modal, TrialFeatureCard, TreasuryUpgradeBanner, announcement-pill/upgrade-button, push-header-bar

PatternNeu bauen

fehlt — sparsam, Anti-Slop-Regeln gelten

Übersicht / Dashboard

5 von 10: Shopify, Browserbase, Altitude, Asana, Uniswap

home-next/metrics-grid, overview-analytics, TreasuryPageLayout, DashboardGridCard, explore-navbar

SectionVorhanden

Lab-Übersicht (PageHeader + Kennzahlen + Sammlung)

Einstellungen

5 von 10: Altitude, Deel, Lovable, Browserbase, Shopify

settings/general, account-settings, settings-sidebar, project-name-field/api-key

SectionVorhanden

Block Einstellungen (src/library/blocks/settings.tsx)

Segmented Control

4 von 10: Shopify, Uniswap, Manus, Browserbase

Polaris-ButtonGroup, segmented-control-indicator, Manus „segmented control“

PrimitiveNeue Achse

steckt nur in ViewTabs (tabs=segmented) — als eigenes Primitive herauslösen

Switch

4 von 10: Coinbase, Uniswap, Manus, Asana

cds Switch, SwitchCompat, earn-swap-toggle-switch, Asana *Toggle

PrimitiveVorhanden

ui/switch — Spur aus: gedämpft, an: primär

Achse: controls: classic · bevel · material · ios · soft · minimal

Avatar

4 von 10: Shopify, Altitude, Deel, Asana

Polaris-Avatar, Altitude Avatar, MuiAvatar

PrimitiveVorhanden

ui/avatar + Achse lead

Sheet / Drawer

4 von 10: Shopify, Coinbase, Altitude, Lovable

Polaris-Sheet, cds Tray, TreasurySheet*, workspace-selector-drawer

PrimitiveNeu bauen

fehlt — Seitenpanel und Bottom-Sheet

Toast

4 von 10: Browserbase, Uniswap, Higgsfield, Lovable

session-created-toast, MismatchToastItem, Toastify, RemixProgressToast

PrimitiveNeu bauen

fehlt

ID / Adresse kopieren

4 von 10: Altitude, Uniswap, Browserbase, Shopify

TruncatedAddress, RevealableBankAccountIdentifier, CopyButton, address-display, copy-input, Polaris-Truncate

PrimitiveNeu bauen

fehlt — gekürzt, mono, Kopieren

Zahl / Betrag

4 von 10: Altitude, Coinbase, Uniswap, Shopify

AnimatedNumber, FormattedNumberParts, StatDisplay, relative-change

PrimitiveNeue Achse

Achse numbers — Delta (+/−) und Währung als Teil fehlen

Leerer Zustand

4 von 10: Shopify, Altitude, Browserbase, Lovable

Polaris-EmptyState, TableEmpty, context-sessions-empty-state, dashboard-filtered-empty

PatternVorhanden

modules/data-table — EmptyState: Titel, eine Zeile, Aktion

Eigenschaften-Liste

4 von 10: Shopify, Altitude, Uniswap, Browserbase

Polaris-DescriptionList, Altitude Field/Item, transaction-details-separator, project-id-copy

PatternVorhanden

modules/record — KeyValueList

Eingabe-Composer (KI)

4 von 10: Lovable, Manus, Asana, Shopify

chat-composer-editor/prompt-input/send, chat-input-composer, CommentComposer/AiFloatingPane, sidekick conversation-picker

PatternVorhanden

modules/composer — Composer (Ring, wächst mit, Senden/Stopp, Anhänge)

Achse: composer: field · floating

Nachricht / Thread

4 von 10: Lovable, Manus, Asana, Shopify

pending-message-bubble, chat-thread-*, CommentThread/InboxExpandableThread, user-message-actions

PatternVorhanden

modules/composer — Message (Blase für die Person, Klartext für den Agenten)

Datei-Upload

4 von 10: Shopify, Altitude, Asana, Lovable

Polaris-DropZone, ImageUploadField/SendSheetAttachmentsField, FileImporter, chat-composer-media-row

PatternNeu bauen

fehlt

Schritte / Fortschritt

4 von 10: Altitude, Browserbase, Uniswap, Asana

StepProgress/KybContent/Flow, onboarding-flow-, step-icon/step-timer, Nux*

PatternNeu bauen

fehlt

Workflow-Canvas

4 von 10: Shopify, Deel, Asana, Manus

rf__node-/rf__edge- (React Flow), WorkflowCanvasNodeCard, trigger-conditions

PatternNeu bauen

fehlt; groß — eher später

Detailseite

4 von 10: Uniswap, Asana, Altitude, Shopify

tdp-/pool-details-*, task pane, VaultBalanceCard + Transaktionen

SectionVorhanden

Block Detailseite (src/library/blocks/detail.tsx)

KI-Arbeitsbereich

4 von 10: Lovable, Manus, Browserbase, Shopify

project-editor + preview, Manus app, playground + live-view, sidekick

SectionVorhanden

Block KI-Arbeitsbereich (src/library/blocks/ai-workspace.tsx)

Achse: Slot panels (vorhanden)

Entdecken / Galerie-Seite

4 von 10: Higgsfield, Coinbase, Uniswap, Browserbase

Higgsfield-Startseite, discover-*, explore, templates

SectionNeu bauen

fehlt

Workspace-Wechsler

4 von 10: Browserbase, Lovable, Shopify, Uniswap

org-project-switcher-org-button, workspace-menu-trigger, shop-picker, wallet-item-

ShellNeue Achse

nur UserMenu — Wechsler als Shell-Teil

Achse: nav-kopf: brand · switcher

Suche / ⌘K im Kopf

4 von 10: Shopify, Asana, Uniswap, Lovable

SearchIcon, TopbarSearchTypeahead, nav-search-input

ShellVorhanden

NavSearch (Suchfeld an/aus)

Radio-Gruppe

3 von 10: Shopify, Altitude, Manus

Polaris-RadioButton/ChoiceList, Altitude RadioGroup

PrimitiveVorhanden

ui/radio-group

Achse: controls: classic · bevel · material · ios · soft · minimal

Fortschritt / Meter

3 von 10: Shopify, Altitude, Asana

Polaris-ProgressBar, Altitude Meter, GoalProgressSubgoalRow

PrimitiveVorhanden

ui/progress

Aufklapper

3 von 10: Shopify, Coinbase, Asana

Polaris-Collapsible, cds Collapsible, SidebarCollapsibleHeader

PrimitiveNeu bauen

fehlt

Befehlspalette

3 von 10: Altitude, Shopify, Asana

Altitude Command, Polaris-Listbox/OptionList, TopbarSearchTypeahead

PatternNeu bauen

fehlt — ⌘K

Bestätigung / Freigabe

3 von 10: Altitude, Uniswap, Asana

InlineProposalActions/ProposalActionController, show-accept-changes, TimesheetApprovalStatusButton

PatternVorhanden

im Block KI-Arbeitsbereich: Banner mit der Frage und einer Bestätigung

Code / Konsole

3 von 10: Browserbase, Manus, Lovable

console-line/-timestamp, CodeViewer, error-details

PatternNeu bauen

fehlt

Onboarding / Wizard

3 von 10: Altitude, Browserbase, Asana

KybContent/accountSetupVerification, onboarding-flow-, NuxRedesignedScreenStructure

SectionNeu bauen

fehlt

Transaktions-Sheet

3 von 10: Altitude, Uniswap, Coinbase

TreasurySheetAmountField/ReceiptCard, SwapCurrencyInput, buy-v2

SectionNeu bauen

fehlt — Betrag, Details, Bestätigen

Seitenwechsel

2 von 10: Shopify, Manus

Polaris-Pagination, ant-pagination

PrimitiveNeu bauen

fehlt

Mehrfachaktionen

2 von 10: Shopify, Asana

Polaris-BulkActions/SelectAllActions, portfolio-bulk-add

PatternVorhanden

modules/data-table — BulkActionBar, Achse bulk (inline · floating)

Neu anlegen (Composer)

2 von 10: Lovable, Manus

dashboard-create-placeholder/composer

SectionVorhanden

Lab /new

Inbox

2 von 10: Asana, Altitude

InboxExpandableThread/InboxCompactThreadBase, proposalInbox

SectionNeu bauen

fehlt

Mobile Tab-Leiste

2 von 10: Coinbase, Uniswap

ActivityIcon/DiscoverIcon/EarnIcon, mobile-promo-banner

ShellNeu bauen

fehlt — mobil unten

Slider

1 von 10: Shopify

Polaris-RangeSlider

PrimitiveNeu bauen

fehlt; niedrige Priorität

Code-Eingabe (OTP)

1 von 10: Altitude

InputOTP, OtpVerification

PrimitiveNeu bauen

fehlt; niedrige Priorität

Tastenkürzel

1 von 10: Shopify

Polaris-KeyboardKey

PrimitiveNeu bauen

fehlt; klein

Board / Kanban

1 von 10: Asana

BoardColumn, DraggableCard, BoardGroupColumnHeader

PatternNeu bauen

fehlt; als collection=board denkbar

Achse: collection: + board

Mega-Menü

1 von 10: Higgsfield

Explore/Image/Video/Audio mit „New“-Markern

ShellNeue Achse

TopBar ohne Untermenüs

Achse: topbar: flat · mega

Verteilung

Die Library als shadcn-Registry und jedes Preset als W3C Design Tokens (DTCG). Der öffentliche Build lässt die privaten Testteile weg: die GT-Standard-Schrift und den Inspector — das Panel ist dort DialKit.

Kitnpx shadcn@latest add <lab-url>/r/forma.json

Block Ressourcen-Listenpx shadcn@latest add <lab-url>/r/forma-block-resource-list.json

Block Detailseitenpx shadcn@latest add <lab-url>/r/forma-block-detail.json

Block Einstellungennpx shadcn@latest add <lab-url>/r/forma-block-settings.json

Block KI-Arbeitsbereichnpx shadcn@latest add <lab-url>/r/forma-block-ai-workspace.json

Design Tokens pro Richtung:

Library

Blocks: ganze Seiten in zwei Richtungen

Projekte

Projekte

Jeder Baustein in jeder Richtung

Als Nächstes

Inventar

Verteilung