Blocks

Pre-built UI patterns and layouts to accelerate development.

Application Layout

Basic Application Layout

Standard application shell featuring a top app bar with logo, title, icon action buttons, and user profile menu with theme toggle; a le...

Basic Application Layout with Tabs

Standard application shell with a borderless page toolbar and tab bar navigation below it, featuring a top app bar with logo, title, ic...

Compact Context Switcher

Application layout with a compact context switcher in the navigation drawer. The selected context (organization, property, account, wor...

Detailed Context Switcher

Application layout with a detailed context switcher in the navigation drawer. The selected context (organization, property, account, wo...

Dual Scrolling Containers

Application layout demonstrating dual independent scrolling regions where the main content area and a fixed right-side drawer panel eac...

Mini Nav Application Layout

Application shell with a collapsible mini navigation drawer that expands on hover, an app bar with notification icons and a user profil...

Table with Filter Sidesheet

Full application layout with header, left navigation drawer, paginated data table in the body, and a filter sidesheet in the right draw...

Three Panel Layout

Application layout demonstrating content in the left navigation drawer, main body area, and right drawer panel. Uses gray striped boxes...

Cards

Avatar Card

Profile card with a large centered avatar, name, email link, corner notification badge, and an inverted toolbar footer with actions

Basic Card

Structured card with header, header actions, body content area, and footer with action buttons

Cohort Status Card

Responsive card with a summary section (title and subtitle) on the left and a multi-column status grid on the right showing progress th...

Icon Card

Action card featuring an icon, title, and description for quick navigation or feature highlights

Responsive Cards

Auto-fitting responsive grid of content cards that adapts to available space, with each card featuring a header image, category badge,...

Tabbed Card

Card with tab navigation that switches between different content views using forge-tab-bar and forge-view-switcher

Data Display

Horizontal Label Value List

Read-only data display arranged as a two-column grid with labels on the left and values on the right. Labels use the forge-label-value...

Dialogs

Dialog — New object with template selection list

Modal dialog that pairs a short form (name and description fields) with a two-pane master-detail option picker: a scrollable list of se...

Dialog — Share

Modal share dialog for managing who can access a resource (document, report, project, folder). Use when users need to grant or revoke a...

Simple Dialog

Modal dialog with scaffold layout featuring a toolbar header with title and close button, scrollable body content area, and footer tool...

Forms

Add Illustration Form

Centered card form displayed over a decorative background with abstract SVG elements, featuring a header with icon and title, text inpu...

Add User Form

Form card with two-column grid layout for text inputs, leading icons, support text, dropdown selects, grouped checkboxes, and action bu...

Complex Form with Grouped Sections

Responsive form divided into logically grouped sections (project details, timeline, team, location, settings, notifications) using a 6-...

Login Form

Centered authentication form card displayed over a gradient background, featuring credential input fields with labels, a remember-me ch...

Text Assist Menu

Text area and text field with an end-slot icon button that opens a menu of AI-style text editing intents such as check grammar, elabora...

Lists

List Management

Card with a text field and add button for managing a dynamic list of items, supporting keyboard entry and item deletion

Patterns

Filter Facets

Filter facets rendered inside a drawer with scaffold layout, demonstrating checkboxes for multi-select and radio buttons for single-sel...

Scaffold Examples

Sidesheet Scaffold Card

Card component using forge-scaffold with a drawer in the body-left slot, demonstrating a card with an integrated side panel

Simple Scaffold Card

Card component using forge-scaffold for structured layout with toolbar header, scrollable body, and inverted toolbar footer with action...

Tables

Paginated Table

Data table with client-side pagination inside a structured card, featuring header action buttons for filtering, exporting, and addition...

Simple Table

Data table component wrapped in a card container with a toolbar header, demonstrating column configuration and data binding for display...

Table with Actions

Data table inside a card with a toolbar header featuring action buttons for cancel, save draft, and submit operations

Table with Detail Sidesheet

Application layout with a data table where the last column contains an icon button that opens a right-side drawer sidesheet to display...

Table with Icon Actions

Data table inside a card with a toolbar header featuring icon buttons for filtering, exporting, and additional options

Toolbars

Card Header Toolbar

Card header toolbar for a forge-scaffold header slot, with the card title in the start slot styled at heading3

Card Header Toolbar with Actions

Card header toolbar with the card title in the start slot and medium-density icon buttons for filter, export, and more options grouped...

Page Title

Toolbar with page title heading and action icon buttons for notifications, settings, and more options

Page Title with Back Arrow

Toolbar with back navigation button, page title heading, and action icon buttons for notifications, settings, and more options

Toolbar with Button Actions

Toolbar component with a title and action buttons in the end slot, featuring a text button, tonal button, and raised primary button for...