Layout Patterns
Responsive page layouts with app shells, collapsible sidebars, grids, stacks, split views, and centered content containers.
What's Included#
- App shell layout with header and sidebar for dashboard pages
- Collapsible sidebar with context-based state management
- Responsive container component with configurable max-width sizes
- Grid and stack layout utilities for flexible content arrangement
- Split layout for master-detail views and centered layout for auth pages
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the layouts pattern from Bootspring"
- "Apply the Bootspring layouts pattern to my project"
Key Considerations#
- Use CSS Grid for two-dimensional layouts and Flexbox for single-axis alignment
- Make sidebars sticky so navigation remains visible while scrolling content
- Use min-h-screen for full-height layouts to avoid content collapsing
- Convert sidebars to drawers on mobile for responsive behavior
- Maintain consistent spacing using a design token or spacing scale
Related Patterns#
- Navigation - Navigation component patterns
- Cards - Card layout patterns
- Tabs - Tab navigation patterns