Blocks

28 reusable blocks for application UI, marketing, commerce and finance. Import components and their TypeScript types from @raydenui/ui/blocks. The library is expanding toward the approved 100-block plan across 12 categories.

Status

Every block is experimental. They are publicly exported, documented and story-covered, and each block’s page records exactly what was measured. None has had a screen-reader pass, a second browser engine, or an operating-system text-size test, so none has earned the stable status the plan reserves for the public supported count. Read a block’s own Verification and Known limitations sections before adopting it.

Within that, the catalog records a second field, verificationLevel. Twenty-four blocks are measured: a completed verification run stands behind them, and their page names its tools, widths, modes and scenarios. The four finance blocks — AccountBalanceBlock, TransferReviewBlock, InvoiceDetailBlock and SubscriptionBillingBlock — are unmeasured: no verification run exists for them yet, so their documented contract is provisional and their responsive and contrast behaviour has not been measured at all.

The machine-readable catalog behind this table — stable ids, category, domain and task tags, status, preview stories, documented states, verification evidence and limitations — is published at /ai/catalog.json under blocks.

Import


import { ProductHeroBlock, PricingPlansBlock, SiteFooterBlock } from "@raydenui/ui/blocks";

Types come from the same entry point:


import type { PricingPlan, CommerceProduct, AppShellNavItem } from "@raydenui/ui/blocks";

Block	Task
HeaderBlock	Navigate a public site with equivalent desktop and collapsed destinations
ApplicationShellBlock	Compose a sidebar, workspace, top bar and collapsed navigation
PageHeaderBlock	Establish page context with breadcrumbs, title, status and actions
WorkspaceSwitcherBlock	Find and switch a workspace, and create or join another
CommandPaletteBlock	Search and activate destinations and actions from the keyboard
SiteFooterBlock	Browse grouped links, legal information, social links and locale controls

See Application chrome for composing the four application blocks.

Application UI

Block	Task
LoginBlock	Authenticate with credentials or configured providers
CreateAccountBlock	Register with validation, password guidance and required consent
KpiOverviewBlock	Compare labelled metrics against an explicit period
TableBlock	Inspect and select payment records
SearchableTableBlock	Search, sort, select and act on configurable records
ProfileSettingsBlock	Edit personal details and avatar, and track unsaved changes
NotificationsBlock	Read a contextual notification feed and follow its actions
TaskListBlock	Add, assign, complete and filter actionable work
EmptyStateBlock	Explain an absence of content and offer a next action

Marketing & conversion

Block	Task
ProductHeroBlock	Explain the product and lead to a primary next step
FeatureOverviewBlock	Scan differentiated capabilities and follow the details
PricingPlansBlock	Compare plans, switch billing period and see included usage

Commerce

Block	Task
ProductCollectionBlock	Browse products with prices and availability
ProductDetailBlock	Inspect a product, choose an option and add it to a cart
ShoppingCartBlock	Review items, change quantity and inspect totals
CheckoutReviewBlock	Review an order before placing it

See Commerce journey for the shared money contract and a connected example. Commerce blocks integrate provider callbacks: they never perform a payment, place an order or claim one succeeded.

Finance & billing

Block	Task
QuickSendBlock	Select a beneficiary to start a transfer
RecentTransactionsBlock	Inspect recent transactions and open their details
AccountBalanceBlock	View available, pending and total balances
TransferReviewBlock	Review a transfer before explicit confirmation
InvoiceDetailBlock	Inspect invoice lines, totals and payment actions
SubscriptionBillingBlock	Manage a plan, its usage, renewal and cancellation

The last four are unmeasured. Finance blocks integrate provider callbacks: they never move money, take a payment, cancel a subscription or claim an outcome your application has not reported.

Shared contracts

Data and persistence belong to your application. Every block exposes callbacks and fetches nothing.

Nothing is manufactured. A block never claims a success your application has not confirmed. Where a success is meaningful it is a prop you pass — notice, confirmation, successMessage or status="success" — and where it is not meaningful the block has no success state at all.

Availability is explicit. A control renders only when its handler is supplied, is explicitly disabled with a visible reason, or is omitted. No block renders a control that has nowhere to go.

Layouts follow their container, not the viewport, so a block dropped into a 400px column collapses there even on a wide screen.

Heading levels are a contract. Blocks accept headingLevel as the element name, "h1" through "h6", so a block fits the page outline it is embedded in. Sub-headings derive from it. Most blocks default to "h2"; ProductHeroBlock and PageHeaderBlock default to "h1" because they usually own the page heading.

Customization

Blocks accept a className prop, which lands on the block’s own container root:


<TableBlock className="rounded-xl shadow-soft-lg" rows={rows} />

Semantic surface, border, text and action roles control intended theming — see design tokens. Note that overriding --color-surface alone is not sufficient: pair it with the matching --color-on-surface* foreground roles.

For deeper customization, compose the individual components from @raydenui/ui.