Layout Gallery
Cards, headers, navigation, and structural components
Basic Card Variations
Basic Card
Simple card with default styling. Perfect for content sections.
Glass Morphism
Semi-transparent with backdrop blur for modern UI.
Gradient Card
Subtle gradient background for emphasis.
Colored Card
Theme-colored card for special sections.
Interactive Card
Lifts on hover for clickable cards.
Nested Cards
Cards can be nested for complex layouts.
Advanced Card Styling
Cards with customized shadows and borders
Default - border-haze, shadow-sm
Shadow-glass with border white/50
Shadow-glassed with border white/50
Shadow-glassed border-gradient
Borders and Shadows - Full Flexibility
Earth border + shadow-sm
Sunset border + shadow-md
Sunrise border + shadow-lg
Sky border + shadow-xl
Semantic Colors with Hover Effects
Info border
Success border
Warning border
Error border
Minimal Styles - No Border/Shadow with Subtle Backgrounds
No border, no shadow - clean white
No border, no shadow - cloud background
No border, no shadow - haze background
No border, no shadow - gradient background
Navigation Header
Default Navigation Header
Custom Navigation Links
NavigationHeader includes responsive design, user dropdown, notifications, and mobile drawer integration.
Secondary Navigation
Tab Navigation
Pill Style Navigation
Navigation Drawers
Left Navigation
Default left-side drawer for main navigation. Includes overlay, smooth animations, and escape key support.
Right Navigation
Right-side drawer perfect for settings, filters, or secondary navigation. Wider layout for complex forms.
Custom Styled
Fully customizable with filterClassName. Add gradients, custom widths, or unique animations.
Notification Panel
Compact drawer for notifications, alerts, or quick actions. Can be positioned on any side.
Network Background
The network background with animated dots and lines is visible behind this demo page.
Header Component
Welcome, neighbor
Enter or join your community in secondsHello, John
Ready to help your community today?Good morning
[object Object]Good afternoon, Joe
Nancy needs your help tomorrowLogo Component
Resizeable containers with different resize effects on Logo component
Vicinity World logo with gradient SVG and tagline
Explore More Components
Browse other component categories