Alert Notification Center
A sophisticated notification center component with dropdown interface for managing alerts and notifications. Features unread count badges, categorized notification types (info, success, warning, error), visual type indicators, and comprehensive action controls. Includes notification status management, timestamp display, and bulk actions like 'View all' and 'Mark all read'. Uses content structure pattern for simplified props interface. Perfect for application headers, dashboards, and user notification systems requiring real-time alert management.
Header Marketing 05
A modern floating navigation header with backdrop blur and rounded design. Features centered logo, navigation links, and auth buttons in a glassmorphism container. Includes responsive mobile sheet drawer with detailed navigation descriptions. Perfect for modern SaaS applications, startups, and contemporary web platforms requiring sleek, floating navigation design.
Hero 02
A full-width hero section with integrated dashboard preview and indigo gradient theme. Features grid pattern background, customizable content structure with title, subtitle, and CTA button, and embedded dashboard image preview. Spans entire viewport width with professional indigo color scheme, responsive design, and optimized image loading. Perfect for SaaS platforms, development tools, and tech products requiring immersive hero presentation with product showcase.
Stats 06
A clean statistics component with large numbers, icons, and descriptive labels. Features a responsive grid layout, large typography for impact, and centered alignment. Perfect for showcasing key metrics, community statistics, and achievements on landing pages and marketing sections requiring minimal design with maximum visual impact.
Carousels 01
An auto-scrolling tag carousel component with colorful category tags, icons, and smooth transitions. Features embla carousel with autoplay functionality, gradient fade effects on edges, responsive design, and customizable tag colors. Each tag includes an icon, text, link navigation, and hover effects with color transitions. Perfect for category navigation, product showcases, feature highlights, and content discovery sections requiring engaging visual presentation with smooth animations.
Testimonials 08
A comprehensive testimonials component featuring a header section, integrated logo carousel from logos-02, and a masonry-style grid layout of testimonials. Features Twitter-style testimonial cards with user avatars, handles, and content, smooth scrolling logo carousel with autoplay, and responsive three-column masonry layout with staggered heights. Perfect for showcasing social media testimonials, customer feedback, and building social proof with integrated company logos and authentic user testimonials.
Testimonials 09
A modern testimonials grid component with mixed card layouts and professional developer testimonials. Features a three-column masonry-style grid with different sized testimonial cards, large teal and light background variants, small dark cards, and realistic developer testimonials from tech companies. Includes responsive design, customer avatars, company branding, and customizable background elements. Perfect for developer tools, SaaS platforms, and tech companies showcasing customer success stories with professional presentation.
Testimonials 07
A responsive testimonials grid component with avatar initials and gradient backgrounds. Features customizable testimonials data, clean card layout with rounded corners, and gradient avatar initials. Perfect for showcasing customer feedback with visual appeal. Includes responsive grid layout that adapts from single column on mobile to three columns on desktop, with centered content and muted background section.
Stats 05
An education-focused stats component with animated decorative icons and hover effects. Features large statistics display for education platforms with floating education-themed icons (graduation cap, books, brain, stars), responsive 3-column grid layout, hover scale animations, and content structure pattern. Perfect for education websites, online learning platforms, course marketplaces, and academic institutions showcasing student enrollment, instructor count, and completion rates.
CTA 01
A premium call-to-action section with gradient background, subtle dot pattern, badge highlight, and dual action buttons. Features engaging visual hierarchy with sparkles icon badge, compelling headline and description, primary and secondary CTAs with hover effects, and responsive design. Perfect for converting visitors with high-impact visual design and clear action paths.
CTA 02
A comprehensive call-to-action section with two-column layout featuring content on the left and interactive video demo on the right. Includes feature highlights with icons, dual action buttons, floating achievement cards, and professional business-focused design. Perfect for enterprise software and B2B service presentations requiring detailed feature showcasing and social proof through statistics.
CTA 03
A sophisticated call-to-action section with subtle pattern background, two-column layout featuring content with checkmark features on the left and statistics cards on the right. Includes trust badge, feature checklist with green checkmarks, dual action buttons, and performance metrics cards with backdrop blur effect. Perfect for showcasing business results and building trust through social proof with quantified metrics.
CTA 04
A centered call-to-action card with plan details, features list, and dual action buttons. Features a popular plan badge, compelling headline, feature checklist with dot indicators, and trust disclaimer. Perfect for converting visitors with a clean, focused design that emphasizes the value proposition and removes distractions.
CTA 05
A hero-style call-to-action section with full-width background image, gradient overlay, and feature highlights. Features compelling headline, three feature cards with icons and descriptions, dual action buttons, and trust disclaimer. Perfect for high-impact conversion pages requiring visual storytelling with professional imagery and clear value propositions.
Testimonials 06
A large-format testimonial component with prominent quotation mark and spacious layout. Features a massive cyan quotation mark, grid-based layout with testimonial text and author attribution section, company branding display, and professional typography. Perfect for hero sections, featured testimonials, and landing pages requiring impactful single testimonial presentation with clean, modern design and strong visual hierarchy.
Hero 01
A modern hero section with gradient background, animated elements, and call-to-action buttons. Features customizable title with gradient text effect, announcement badge, dual CTA buttons with hover animations, and framework logos showcase. Includes animated background gradient, responsive design, and comprehensive customization options for all text, links, and visual elements. Perfect for landing pages, product launches, and marketing sites requiring impactful hero presentation with professional polish.
Confirmation Modals
Flexible confirmation modal component for destructive or important actions with customizable actions, TypeScript interfaces, and comprehensive interaction patterns. Features proper accessibility, keyboard navigation, responsive design, and customizable action handlers. Perfect for delete confirmations, logout prompts, archive operations, and any user action requiring confirmation with consistent UX patterns.
Form Modals
Flexible form modal component for data collection and editing with customizable form fields including text inputs, textareas, selects, and switches. Features proper TypeScript interfaces, form validation, responsive design, keyboard navigation, and comprehensive submit handlers. Perfect for creating new records, editing existing data, user profiles, invitations, settings forms, and any workflow requiring structured data input with consistent UX patterns.
Profile & Settings Modals
Complex modal component for displaying user profiles and comprehensive settings management with tabbed interface. Features profile information display with avatar and badges, notification settings management, security controls, billing management, activity history, and secure session management. Includes responsive design, keyboard navigation, and extensive customization options. Perfect for user account management, admin panels, comprehensive user settings, and professional applications requiring detailed user management interfaces.
Data Display Modals
Data display modal component for showing lists, tables, and detailed application data with search functionality and interactive elements. Features team directory with member profiles, contact information, status indicators, and projects overview with progress tracking and summary statistics. Includes responsive design, keyboard navigation, search filtering, scrollable content areas, and comprehensive data management capabilities. Perfect for admin dashboards, team management, project tracking, user directories, and any application requiring detailed data visualization with user interaction and real-time status updates.
Media & Content Modals
Media & content modal component for displaying image galleries and detailed image viewers with zoom, rotation, and navigation capabilities. Features responsive grid gallery layout, full-screen image viewer with controls, image metadata display, zoom in/out functionality, image rotation, navigation between images, download and share actions, and comprehensive interaction handlers. Includes customizable gallery settings, scrollable content areas, empty state handling, and professional media management interface. Perfect for portfolio sites, media management systems, photo galleries, digital asset libraries, and any application requiring professional image display with user interaction and comprehensive media controls.
Multi-Step Wizard Modals
Multi-step wizard modal component for complex workflows and guided setup processes with form validation, step navigation, and progress tracking. Features customizable steps and fields, form validation, progress indicators, step completion tracking, and comprehensive interaction handlers. Includes support for optional steps, step skipping, review screens, and flexible form field types. Perfect for onboarding flows, project setup wizards, account creation processes, and any application requiring guided multi-step user interactions with professional UX patterns.
Basic Toast Examples
A comprehensive toast demonstration component showcasing basic toast notifications with different configurations including simple messages, icons, and descriptions. Features interactive buttons to trigger various toast types with usage examples and customizable display options. Perfect for demonstrating toast functionality, user feedback systems, and notification implementations using Sonner.
Status Toast Examples
Status toast demonstration component showcasing different toast types (success, error, warning, info) with semantic colors and appropriate icons. Features interactive buttons for each status type with consistent styling and messaging patterns. Perfect for user feedback systems, notification implementations, and error handling.
Interactive Toast Examples
Interactive toast demonstration component showcasing toasts with action buttons, confirmations, retry mechanisms, and user interactions. Features single and multiple action buttons, delete confirmations with cancel options, retry functionality with async operations, and comprehensive user interaction patterns. Perfect for complex user workflows, confirmation dialogs, file operations, and error handling with retry logic.
Loading & Progress Toast Examples
Loading and progress toast demonstration component showcasing different loading states and progress indicators. Features promise-based loading with automatic state handling, incremental progress updates with visual feedback, simple loading-to-success transitions, and download progress simulation with realistic increments. Perfect for async operations, file uploads/downloads, long-running processes, and providing users with clear feedback during operations.
Custom & Rich Content Toast Examples
Custom and rich content toast demonstration component showcasing advanced styling and complex layouts. Features custom themed toasts with branded styling, persistent notifications that don't auto-dismiss, and rich content toasts with custom components, avatars, badges, and embedded actions. Perfect for premium features, social notifications, email previews, system updates, and complex user interactions requiring enhanced visual presentation.
Logos 01
A static logo grid component for showcasing trusted companies and clients. Features customizable company logos with text labels, responsive flex-wrap layout, hover effects, and clean styling. Includes optional title and subtitle sections, empty state handling, and professional grid layout. Perfect for landing pages, about sections, client showcases, and social proof displays requiring clean static logo presentation with modern visual appeal.
Logos 02
A carousel-based logo showcase component for displaying trusted companies and clients. Features shadcn carousel with navigation controls, fade effects on the sides, configurable slides per view, optional autoplay, and responsive design. Includes customizable title and subtitle sections, hover effects, and empty state handling. Perfect for landing pages, client showcases, and social proof sections requiring interactive logo navigation with professional carousel controls and smooth animations.
Logos 03
A testimonial grid component featuring company logos, quotes, ratings, and author information. Features placeholder images for company logos, star ratings, responsive grid layouts (1-3 columns), hover effects, and gradient background. Includes optional average rating display, customizable titles and subtitles, and empty state handling. Perfect for social proof sections, testimonial pages, case studies, and trust-building elements requiring detailed customer feedback with visual company representation.
Logos 04
An animated multi-row logo grid component with placeholder images, badge header, and statistics section. Features staggered animation delays, hover effects, responsive design with mobile-friendly company name hiding, and integrated stats display. Includes customizable badge text and variant, placeholder image support with fallback to initials, overflow handling, and professional Fortune 500 styling. Perfect for landing pages, social proof sections, client showcases, and enterprise credibility displays requiring animated logo presentations with comprehensive statistics.
User Management Table
A comprehensive data table with user management capabilities including sorting, filtering, column visibility toggles, row selection, pagination, and action dropdowns. Built with TanStack Table for performance and flexibility. Features avatar display, status badges, date formatting, and contextual actions. Perfect for admin dashboards, user management systems, and data display applications requiring full CRUD operations.