Section
Semantic HTML5 section wrapper with built-in spacing utilities and accessibility landmarks for document structure organization
Section
Layout wrapper for landing pages and app shells. Provides backgrounds, max-width control, padding, and full-height hero sections.
Section variants
Use variant to change the background style while keeping content contained via Container.
Default, muted, accent & gradient
Default Section
Standard background color with consistent padding and a max-width container.
Muted Section
Subtle background to differentiate sections and create visual hierarchy.
Accent Section
Emphasized section with accent background color.
Gradient Section
Gradient background perfect for hero sections and call-to-actions.
Padding
Control vertical spacing with the padding prop:"sm", "default", "lg" or "xl".
sm / default / lg / xl
Compact vertical spacing for dense layouts.
Standard vertical spacing for most sections.
Generous spacing to highlight content.
Maximum spacing for hero sections.
Special features
Add borders with bordered or take over the viewport with fullHeight for hero layouts.
Bordered & full-height
Bordered section
Adds top and bottom borders to visually separate sections.
Welcome to our platform
Full viewport height hero section, perfect for splash screens and primary calls-to-action.
Practical landing page layout
Combine multiple Section blocks to build hero, features and CTA sections for marketing pages.
Hero, features & CTA
Build amazing interfaces
Saha UI provides everything you need to create beautiful, responsive web applications.
Key features
Fast performance
Optimized components with GPU-accelerated animations.
Beautiful design
Modern glassmorphism effects and smooth transitions.
Easy to use
Intuitive API with full TypeScript support.
Ready to get started?
Join thousands of developers building amazing applications.
Max width
Use maxWidth to constrain the section content without changing the container size: "sm", "md", "xl", or "full".
sm / md / xl / full width
Great for focused content (e.g. forms, articles).
Balanced width for most layouts.
Wide layouts for dense content or dashboards.
No max-width limit – stretches to full viewport width.
Usage Guidelines
When to Use
- Page sections with titles
- Semantic document structure
- Accessibility landmarks
Accessibility
- Uses semantic HTML5 section element
- Supports aria-label for landmarks
Performance
- Pure HTML element
- No runtime overhead
Common Mistakes
- Missing heading for section
- Using for non-semantic grouping
Frequently Asked Questions
Related Components
View allResponsive container implementing max-width constraints with fluid padding and automatic centering for consistent content alignment across breakpoints
CSS Grid-based layout system with configurable columns, gaps, and responsive GridItem children supporting explicit placement and spanning
Masonry layout system with configurable columns for Pinterest-style cascading grid layouts
Material-style elevated surface with shadow variants and glass morphism effects