App Structure
AppShell provides a complete application frame.
Box with customizable width, height, padding, and styling.
Responsive container with perfect readable content.
Layout for creating consistent header structures.
Semantic section for organizing page content.
Page Layout
Code-playground shell with file tabs, resizable editor/preview split, and console.
Full-height sidebar layout template with navigation.
Responsive grid-based page layout template.
Page layout with sidebar positioned on the left side.
Page layout with sidebar positioned on the right side.
Simple single-column page layout template.
Three-column layout with sidebar navigation.
Node-and-connection workspace shell for visual workflow tools.
Grid System
Maintain consistent aspect ratios for responsive media.
Self-calculating grid that automatically determines columns.
Pinterest-style layout for items of varying heights.
Flexible grid layout with responsive columns and animations.
Flex Utilities
Center content both horizontally and vertically.
Group items together with flexible spacing.
Add flexible spacing between elements.
Split layout for dividing content into sections.
Stack elements vertically with consistent spacing.
Responsive Utilities
Utility for responsive breakpoint management.
Lazy loading utility for performance optimization.
Responsive utility for adaptive layouts.
Helpers
Debugging utility for visualizing layout boundaries.
Pin content to specific positions in the layout.