S
shadcnstudio/shadcn-studio
about-us-page-01Centered header with video/image section and overlapping stats grid card displaying icons, values, and descriptions
account-settings-01Comprehensive account settings interface with five separated sections: PersonalInfo with image upload (1MB limit validation, preview URL generation), country selector with flag icons; EmailPass for email and password changes; ConnectAccount for third-party app integrations; SocialUrl for social media profile links; and DangerZone with account deletion controls
app-integration-01Two-column layout with integration cards featuring tool logos, names, descriptions, and call-to-action for conversion-focused app showcases
application-shell-01Classic sidebar application shell with navigation menu, user profile, and language selector for traditional dashboard layouts.
blog-component-01Three-column blog grid with featured images, titles, descriptions, and read more buttons for journey and destination content
blog-component-15Tabbed blog grid with centered header, scroll area tabs with category filtering (All, Product, Design, Startup Growth), search input with icon, three-column responsive grid of blog cards featuring hover-scale images, calendar icon with dates, primary/10 category badges, line-clamp titles and descriptions, author names, outlined arrow icon buttons with primary hover states
blog-component-17Related posts blog grid with outline trending badge, centered header with "Related Post" heading, three-column responsive grid of blog cards with hover-scale images, calendar icons with dates, primary/10 border-0 category badges, line-clamp-2 titles and descriptions, author links, outlined arrow buttons with primary hover and transition-colors
chart-component-01Comprehensive sales metrics dashboard featuring company profile, key performance indicators (sales trend, discounts, profit, orders), pie chart for revenue goals, and bar chart for sales plan completion with cohort analysis tools.
compare-07Animated AI writing tool comparison section with muted background and rounded container, featuring fade-in heading and subtitle with motion-preset animation, followed by scrollable card containing four-column table with tinted header row displaying Features label, two product columns with icon logos supporting dark/light mode variants, and contextual "What this means for you" column, with numbered feature rows showing text-based side-by-side comparisons and practical recommendations
contact-us-page-01Two-column layout with contact illustration image and contact information grid featuring avatar icons and contact details
cta-section-01Rounded card layout with app download content featuring heading, description, and App Store/Google Play download buttons
cta-section-10Simple primary-colored horizontal CTA card with flex layout, left side featuring heading and muted description text, right side with secondary button containing arrow-right icon, clean three-column justified spacing with responsive column stacking on mobile
cta-section-12Newsletter subscription CTA with muted background card, two-column grid layout with rounded workspace image on left, right side featuring muted nested card with heading about building better products, muted text mentioning 1,000,000+ subscribers, horizontal flex email form with background-colored input field and primary button for subscribing
dashboard-dialog-01A subscription plan selection dialog with pricing options, features comparison, and radio button selection for choosing between different tiers.
dashboard-dialog-02A confirmation dialog for critical actions with clear warning message, action confirmation buttons, and user avatar display for personalization.
dashboard-dialog-21Payment success confirmation dialog with green check avatar, success message, and primary CTA to continue to dashboard.
dashboard-dialog-22Destructive delete confirmation dialog with alert triangle avatar, warning message, optional do not ask again checkbox, and cancel or delete actions.
dashboard-dropdown-01A language selection dropdown with flag icons and language options for internationalization and localization features.
dashboard-dropdown-02A user profile dropdown with avatar display, user information, profile settings, and account actions for user management.
dashboard-footer-01A complete dashboard layout with sidebar, main content area, and footer featuring copyright text with social media icons (Facebook, Instagram, LinkedIn, Twitter) for application branding.
dashboard-header-01Comprehensive dashboard header with navigation, breadcrumbs, user profile, and language dropdown
dashboard-shell-01Comprehensive dashboard layout with sidebar navigation, breadcrumb header, sales metrics charts, statistics cards, transaction tables, and widget components for business analytics and reporting
dashboard-sidebar-01Social media analytics dashboard sidebar featuring Content Performance, Audience Insights, Hashtag Performance, Competitor Analysis, Influencer tracking, Campaign Tracking, Sentiment Tracking, Real Time Monitoring, and Schedule Post & Calendar navigation
empty-state-01Metric empty-state card showing zero API requests with dashed placeholder and helper text.
error-page-01Two-column error page layout with left-side text content (Whoops heading, error message, description) and right-side black background featuring centered astronaut illustration
faq-component-01Simple accordion-style FAQ section with collapsible questions and answers using shadcn/ui accordion component, featuring a clean header and single-column layout for basic Q&A display
faq-component-17Two-column FAQ layout with left content section featuring badge and description, paired with right-side static FAQ cards and "Check All Questions" link button
features-section-01Three-column grid features section with header, description, "See all features" button, and feature cards containing avatar icons, titles, and descriptions
file-upload-01Card form with a "Studio Name" text input, a single file input (file picker), and action buttons to upload or cancel.
footer-component-01Simple three-section footer with logo and brand name, centered navigation links, social media icons, separator line, and copyright text with heart emoji
forgot-password-01Centered card layout with logo header, title, description, and form input for password reset functionality with decorative background shape
form-layout-01Simple single-section personal information form with two-column responsive grid layout featuring first name, last name, mobile, pincode, address, landmark, city, and state inputs with save button
form-layout-02Three-section comprehensive form with three-column layout featuring personal information section with icon inputs and helper text, workspace settings with select dropdown and textarea, notification preferences with checkbox group and radio group for frequency selection
gallery-component-01Gallery section with centered header featuring underlined text highlight, flexible grid layout supporting both single images and 2x2 grid sections for versatile image arrangement
hero-section-01Centered vertical layout hero with navigation header, AI-powered badge in muted container, decorative SVG underline animation on "Effortless" text, call-to-action button, and full-width bottom dish image showcase
hero-section-35Centered blog platform hero with outline badge, subscription form with email input and animated shine button, followed by two-column blog card grid displaying featured posts with images, dates, badges, author info, and hover scale effects on images
hero-section-41Two-column grid layout with left content area featuring heading, description, and shine-effect animated button, plus right auto-play carousel, followed by synchronized triple carousel system displaying food menu items with thumbnail navigation and user testimonial integration
login-page-01Centered card layout with logo header, quick login buttons, and full authentication form featuring email/password inputs, social login options, and remember me functionality
logo-cloud-01Muted background logo cloud with centered card container, underlined text highlight, and flexbox logo grid arrangement with responsive gap spacing and centered alignment
navbar-component-01A sticky navigation header with centered logo and brand name flanked symmetrically by navigation links on both sides. Features a search icon button and responsive mobile dropdown menu, perfect for balanced logo-centric layouts.
onboarding-feed-01Accordion-style onboarding checklist with per-step CTAs, completion state, and navigation.
portfolio-01Portfolio showcase with masonry grid layout featuring project details, client information, and social media links
pricing-component-01Interactive pricing cards with monthly/annual toggle switch and plan comparison features
product-list-01Three-column grid layout with product cards featuring centered images, product names with badges, separator lines, pricing with sale discounts, wishlist checkboxes and shopping cart icons
register-01Centered card layout with logo header, registration form featuring full name, email, password inputs, social signup options, and account linking for comprehensive user onboarding
reset-password-01Centered card layout with logo header, clear reset password messaging, form inputs for current and new passwords, and back to login navigation for secure password recovery
social-proof-01Feature checklist layout with split design showcasing product benefits alongside a complementary image. Perfect for highlighting key features with checkmark icons and descriptive content.
social-proof-07Clean performance metrics grid with centered icons and values. Features a contained layout with consistent card design for displaying key business metrics.
statistics-component-01Logistics and shipping statistics cards displaying Shipped Orders, Damaged Returns, Missed Delivery Slots, and Late Deliveries with percentage change indicators and "than last week" comparison periods
statistics-component-12Financial status indicator cards displaying Net Profit, Operating Expenses, Cash Reserves, and Budget Utilisation with color-coded status badges (within range, exceeding, observe, unknown), contextual range targets, and TrendingUp/TrendingDown/Minus/ShieldAlert icons
team-section-01A clean team showcase featuring a responsive 4-column grid layout with member cards, social media links, and hover effects. Perfect for displaying team members with their photos, names, roles, and social connections.
testimonials-component-01Testimonials section with side content and carousel featuring customer feedback with star ratings and avatars
testimonials-component-18Basic carousel testimonials with badge design, avatar displays, and simple customer feedback structure
timeline-component-05Vertical product changelog timeline with sticky version badges and dates positioned on left sidebar, dual circle progress dots with border styling, continuous vertical connecting line, scroll-to-anchor ID navigation support, responsive layout with hidden sidebar on mobile, modular content rendering system accepting custom ReactNode components, and category badge displays for feature classification
two-factor-authentication-01Centered card layout with logo header, clear two-factor authentication messaging, OTP input field, and authenticator app instructions for secure account verification
verify-email-01Centered card layout with logo header, email verification messaging, activation link instructions, skip option, and resend link for streamlined email confirmation
widget-component-01Total earnings widget with progress tracking, interactive controls, and comprehensive financial overview
widget-component-02Product insights widget with advanced analytics, chart visualization, and comprehensive product data overview