Blocks
Full page sections assembled from atoms and molecules. Copy the code and drop it directly into any layout.
7 blocks
Built on Molecules + Atoms
How To Use This Page
Blocks are organized around screen-level jobs such as sign-in, navigation, shell layout, and settings so you can copy a whole composed surface.
Use these when you need a strong production starting point rather than assembling a page from primitives manually.
How The Content Is Grouped
- The top-level Blocks page groups the catalog by subcategory, making it easier to choose a family of patterns before drilling into an implementation.
- Use the highlighted links below to start with the highest-signal areas of the section.
Sign In
A centered authentication card with email, password, and OAuth provider buttons.
Navbar
A top navigation bar with logo, nav links, and a user profile menu.
Form Layout
A multi-section settings form with labels on the left and controls on the right.
App Shell · Sidebar
A sidebar navigation shell with logo, nav links, and a user menu. Collapses on mobile.
App Shell · Stacked
A top-navigation shell with logo, links, notification bell, and a user dropdown.
Detail Screen
A full entity detail page with page heading, description list, team roster, and activity feed.
Settings Screen
A multi-section settings page with profile, notifications, password, and danger zone.