S
shadcnblocks/shadcn-ui-blocks
About 1 - Intro With Story Columnsabout1A short about hero with a large headline, one culture photo, and two titled story columns.
About 10 - Sticky Sidebar Company Profileabout10A two-column about section with sticky sidebar containing avatar and contact link, and main content with bio, philosophy, workspace image, and team list.
About 11 - Creative Agency Portfolioabout11A portfolio-style about section with team photos, process description, logo marquee, awards list, quote overlay image, and motivation sections.
About 12 - Agency Profile with Process Cardsabout12A structured agency about section with labeled sections, process cards with numbered badges, milestone stats, awards list, and testimonial with case study link.
About 13 - Story with Avatar Profileabout13A six-column about section with large story headline, team intro text, avatar profile card, philosophy paragraph, and full-width image.
About 14 - About with Hero Imageabout14A six-column about section with headline, full-width hero image, labeled intro text, avatar profile, and philosophy statement.
About 15 - Tilted Photo Profile Cardabout15A dark two-column about section with a rotated polaroid-style photo card, headline, body text, and a handwritten signature.
About 16 - Why Us Stats Sectionabout16A six-column about section with sticky Why Us label, quote-style headline, supporting text, full-width image, and three-row stats list.
About 17 - Interactive Tab Profileabout17A seven-column profile section with role and timezone info, bio text, interactive tab navigation, and tab-controlled image display.
About 18 - Mission and Drive Sectionsabout18A seven-column about section with mission and drive content blocks, each with label, headline, and supporting text, separated by a two-image row.
About 19 - Image Left Quote Rightabout19A seven-column about section with large bordered image on the left and headline, text, quote attribution with avatar on the right.
About 2 - Stats Grid with Logos and Testimonialabout2A comprehensive about block with centered intro, asymmetric image grid, stats section, logo strip, and benefit cards with testimonial.
About 20 - Founder Profile with Signatureabout20A dark seven-column profile section with role info, two headline paragraphs, a handwritten signature image, and cropped portrait image.
About 21 - Hero Story and Training Cardsabout21A multi-section about block with hero image overlay, story section with milestone image and bullet points, and training cards on muted background.
About 22 - Animated Story with Imagesabout22A two-column about section with Framer Motion animations, vertical image on the left, and title with paragraphs and horizontal image on the right.
About 23 - Split intro with story columns and statsabout23A company about section with a top-aligned label, split intro, full-width photo, two story columns, and a bordered stats grid.
About 24 - Personal Profile with Clients and Awardsabout24A two-column profile section with avatar, roles, bio, location on the left, and client list with project counts and awards list with years on the right.
About 25 - Animated Story with Stats and Avatarsabout25A comprehensive studio about section with Framer Motion animations, large title, partner avatars, hero image, stats row, and philosophy footer with CTA button.
About 26 - Studio Profile with Servicesabout26A studio about section with monospace label, large two-part headline, stats list, three paragraphs, services checklist, stat cards, and full-width image with overlay text.
About 27 - Enterprise About with Team Gridabout27A comprehensive enterprise about section with hero, value proposition stats, team grid with decorative borders, company logo grid, and investor logos.
About 28 - Two-Column About with Staggered Imagesabout28A two-column about section with alternating image and text blocks, featuring staggered image pairs and multi-paragraph text with optional CTA.
About 29 - Mission panel with text columnsabout29A stacked about section with a large headline, image and mission overlay, then a three-column text grid of values.
About 3 - Company Profile with Achievementsabout3A two-column about section with main image, breakout card, logo strip, and achievements stats grid on muted background.
About 30 - Centered intro with photo rowabout30A short about section with a centered headline, supporting paragraph, and an asymmetric three-photo row.
About 31 - Story with Avatar Profileabout31A six-column about section with large story headline, team intro text, avatar profile card, philosophy paragraph, and full-width image.
About 32 - About with Hero Imageabout32A six-column about section with headline, full-width hero image, labeled intro text, avatar profile, and philosophy statement.
About 33 - Mission and Drive Sectionsabout33A seven-column about section with mission and drive content blocks, each with label, headline, and supporting text, separated by a two-image row.
About 34 - Studio split with work CTAabout34A seven-column studio about section with a bordered workshop photo, The Studio heading, supporting copy, a trust byline, and a View our work button.
About 35 - Interactive Tab Profileabout35A seven-column profile section with avatar, role, timezone, bio text, interactive tab navigation, and tab-controlled image display.
About 36 - Photo Mosaic With Story Columnsabout36A mid-page about section with a start-aligned headline, a three-photo mosaic, and two titled text columns.
About 37 - Editorial Intro With Photo Pairabout37An about hero with a two-column headline and paragraph, a pair of culture photos, and an outline call to action.
About 38 - Split Intro With Story Columnsabout38A split about hero with a headline and supporting copy beside two stacked culture photos, two titled story columns, and an outline call to action.
About 39 - Sticky Sidebar Client Listabout39A two-column freelancer about section with a sticky avatar sidebar, bio and approach copy, a workspace photo, and a numbered client list.
About 4 - Vision and Creators with Image Gridabout4A centered about section with six-image grid, two-column vision and creators text blocks, and muted CTA banner.
About 40 - Sticky studio with awardsabout40A two-column studio about section with a sticky brand sidebar, The Studio heading, approach copy, a workspace photo, and a numbered awards list.
About 5 - Developer Platform Storyabout5A developer-focused about section with two-column intro, large image, tech logos, origin story, and milestone cards.
About 6 - Story and Workplace Photo Gridabout6A two-column about section with story text and staggered photo grids showing team and workplace imagery.
About 7 - Product Story with Offset Imagesabout7A narrative about section with offset image layout, product philosophy text, team photos, and careers CTA button.
About 8 - Fintech About with Stats Carouselabout8A fintech-style about section with plus-sign pattern background, stats row, mission narrative, image carousel, and founding team.
About 9 - Developer Profile with Photosabout9A personal profile section with large team photo, role and location info with flag icon, bio text, and secondary workspace image.
Accept Invite 1 - Two-Column Invite with Email Formaccept-invite1A two-column invitation acceptance screen with Google sign-in, email input form, welcome message, and footer links.
Accept Invite 2 - Centered invite card with logoaccept-invite2A compact centered invitation card with organization logo, personalized message, and accept or decline buttons with an expiration notice.
Accept Invite 3 - Split accept invite with verified badgeaccept-invite3A fullscreen split invite screen with workspace branding, stacked member avatars, a verified badge, inviter details, and accept or decline actions.
Accept Invite 4 - Accept invite with workspace accessaccept-invite4A centered invite confirmation card with inviter note, workspace access list, and a join action.
Accordion Form 1 - Formaccordion-accordion-form-1Accordion containing form inputs organized by sections with icons.
Accordion Form 2 - Form with Plus Triggeraccordion-accordion-form-2Accordion form with plus/minus trigger icons and section icons.
Accordion Multi Level 1 - Multi-levelaccordion-accordion-multi-level-1Nested accordion with expandable child items using collapsible.
Accordion Multi Level 2 - Multi-level with Iconaccordion-accordion-multi-level-2Multi-level accordion with icons on parent items.
Accordion Multi Level 3 - Multi-level with Plus Triggeraccordion-accordion-multi-level-3Multi-level accordion with plus/minus triggers on parent items.
Accordion Multi Level 4 - Multi-level with Left Plus Triggeraccordion-accordion-multi-level-4Multi-level accordion with left-positioned plus/minus triggers.
Accordion Standard 1 - Standardaccordion-accordion-standard-1Basic accordion with collapsible items and default chevron trigger.
Accordion Standard 2 - Standard with Left Chevronaccordion-accordion-standard-2Accordion with chevron icon positioned on the left side.
Accordion Standard 3 - Standard with Plus Triggeraccordion-accordion-standard-3Accordion with plus/minus icons instead of chevron trigger.
Accordion Standard 4 - Standard with Left Plus Triggeraccordion-accordion-standard-4Accordion with plus/minus trigger icons positioned on the left.
Accordion Standard 5 - Iconaccordion-accordion-standard-5Accordion with icon displayed next to each item title.
Accordion Standard 6 - Icon with Plus Triggeraccordion-accordion-standard-6Accordion with icons and plus/minus trigger icons.
Accordion Standard 7 - Full Featuredaccordion-accordion-standard-7Accordion with icons, subtitles, and plus/minus triggers.
Accordion Subtitle 1 - Subtitleaccordion-accordion-subtitle-1Accordion items with subtitle text below each title.
Accordion Subtitle 2 - Subtitle with Left Iconaccordion-accordion-subtitle-2Accordion with subtitles and left-positioned icons.
Accordion Subtitle 3 - Subtitle with Plus Triggeraccordion-accordion-subtitle-3Accordion with subtitles and plus/minus trigger icons.
Accordion Subtitle 4 - Icon, Subtitle, and Chevronaccordion-accordion-subtitle-4Accordion with icons, subtitles, and default chevron triggers.
Accordion Tabs 1 - Tabs with Left Plus Triggeraccordion-accordion-tabs-1Accordion styled as tabs with left-positioned plus/minus triggers.
Accordion Tabs 2 - Tabsaccordion-accordion-tabs-2Accordion styled as tabs with default chevron triggers.
Accordion Tabs 3 - Tabs with Plus Triggeraccordion-accordion-tabs-3Accordion styled as tabs with plus/minus trigger icons.
Accordion Tabs 4 - Tabs with Left Chevronaccordion-accordion-tabs-4Accordion styled as tabs with left-positioned chevron triggers.
Address Book 1 - Address book list with edit modes and default selectionaddress-book1This component provides an interactive interface for managing and editing a list of addresses, allowing users to add, edit, and delete addresses with form inputs for various details like name, street, city, and phone number. It includes features such as marking an address as default, categorizing addresses by type (home, work, other), and toggling between display and edit modes.
Address Book 2 - Card grid address book with default selectionaddress-book2The AddressBook2 component is designed to manage a collection of addresses, allowing users to view, edit, add, and delete addresses within a card-based layout. It provides options to define addresses as home or work, and features tools to select a default address for streamlined address management.
Address Book 4 - Checkout address picker with sheetaddress-book4Narrow checkout address picker with selectable radio cards, delivery estimates, and a side sheet for adding or editing a location.
Alert Error 1 - Error with Titlealert-alert-error-1Error alert with title only.
Alert Error 2 - Error with Title and Descriptionalert-alert-error-2Error alert with title and description text.
Alert Error 3 - Error with Title and Actionalert-alert-error-3Error alert with title and action buttons.
Alert Error 4 - Error with Title, Description, and Actionalert-alert-error-4Error alert with title, description, and action buttons.
Alert Error 5 - Error with Everythingalert-alert-error-5Error alert with icon, title, description, and action buttons.
Alert Info 1 - Info with Titlealert-alert-info-1Info alert with title only.
Alert Info 2 - Info with Title and Descriptionalert-alert-info-2Info alert with title and description text.
Alert Info 3 - Info with Title and Actionalert-alert-info-3Info alert with title and action buttons.
Alert Info 4 - Info with Title, Description, and Actionalert-alert-info-4Info alert with title, description, and action buttons.
Alert Info 5 - Info with Everythingalert-alert-info-5Info alert with icon, title, description, and action buttons.
Alert Standard 1 - Standard with Titlealert-alert-standard-1Standard alert with title only.
Alert Standard 2 - Standard with Title and Descriptionalert-alert-standard-2Standard alert with title and description text.
Alert Standard 3 - Standard with Title and Actionalert-alert-standard-3Standard alert with title and action buttons.
Alert Standard 4 - Standard with Title, Description, and Actionalert-alert-standard-4Standard alert with title, description, and action buttons.
Alert Standard 5 - Standard with Everythingalert-alert-standard-5Standard alert with icon, title, description, and action buttons.
Alert Success 1 - Success with Titlealert-alert-success-1Success alert with title only.
Alert Success 2 - Success with Title and Descriptionalert-alert-success-2Success alert with title and description text.
Alert Success 3 - Success with Title and Actionalert-alert-success-3Success alert with title and action buttons.
Alert Success 4 - Success with Title, Description, and Actionalert-alert-success-4Success alert with title, description, and action buttons.
Alert Success 5 - Success with Everythingalert-alert-success-5Success alert with icon, title, description, and action buttons.
Alert Warning 1 - Warning with Titlealert-alert-warning-1Warning alert with title only.
Alert Warning 2 - Warning with Title and Descriptionalert-alert-warning-2Warning alert with title and description text.
Alert Warning 3 - Warning with Title and Actionalert-alert-warning-3Warning alert with title and action buttons.
Alert Warning 4 - Warning with Title, Description, and Actionalert-alert-warning-4Warning alert with title, description, and action buttons.
Alert Warning 5 - Warning with Everythingalert-alert-warning-5Warning alert with icon, title, description, and action buttons.
Alert Dialog Confirmation 1 - Simple Confirmation Dialogalert-dialog-alert-dialog-confirmation-1Alert dialog with confirmation message and cancel/continue actions.
Alert Dialog Confirmation 2 - Confirmation with Iconalert-dialog-alert-dialog-confirmation-2Confirmation dialog with icon and warning message.
Alert Dialog Confirmation 3 - Confirmation with Detailed Descriptionalert-dialog-alert-dialog-confirmation-3Confirmation dialog with detailed bulleted description list.
Alert Dialog Confirmation 4 - Confirmation with Custom Button Labelsalert-dialog-alert-dialog-confirmation-4Confirmation dialog with custom-labeled action buttons.
Alert Dialog Confirmation 5 - Confirmation with Short Contentalert-dialog-alert-dialog-confirmation-5Confirmation dialog with minimal short message.
Alert Dialog Confirmation 6 - Confirmation with Centered Iconalert-dialog-alert-dialog-confirmation-6Confirmation dialog with centered icon in colored circle.
Alert Dialog Custom Actions 1 - Actions with Iconsalert-dialog-alert-dialog-custom-actions-1Alert dialog with icon in action button.
Alert Dialog Custom Actions 2 - Vertical Button Stackalert-dialog-alert-dialog-custom-actions-2Alert dialog with vertically stacked action buttons.
Alert Dialog Custom Actions 3 - Mixed Button Stylesalert-dialog-alert-dialog-custom-actions-3Alert dialog with mixed button styles in footer.
Alert Dialog Custom Actions 4 - Actions with Loading Statealert-dialog-alert-dialog-custom-actions-4Alert dialog with file details and icon in action button.
Alert Dialog Custom Actions 5 - Split Actions Layoutalert-dialog-alert-dialog-custom-actions-5Alert dialog with split action layout and draft button.
Alert Dialog Destructive 1 - Simple Delete Confirmationalert-dialog-alert-dialog-destructive-1Destructive alert dialog for delete confirmation with red action button.
Alert Dialog Destructive 2 - Delete Confirmation with Iconalert-dialog-alert-dialog-destructive-2Destructive delete dialog with trash icon in header.
Alert Dialog Destructive 3 - Destructive with Checkbox Confirmationalert-dialog-alert-dialog-destructive-3Destructive dialog with checkbox confirmation requirement.
Alert Dialog Destructive 4 - Destructive with Consequence Detailsalert-dialog-alert-dialog-destructive-4Destructive dialog with highlighted consequence details list.
Alert Dialog Destructive 5 - Destructive with Custom Styled Buttonsalert-dialog-alert-dialog-destructive-5Destructive dialog with icon in action button.
Alert Dialog Destructive 6 - Destructive with Warning Badgealert-dialog-alert-dialog-destructive-6Destructive dialog with warning badge in header.
Alert Dialog Destructive 7 - Destructive with Item Countalert-dialog-alert-dialog-destructive-7Destructive dialog displaying item count and warning box.
Alert Dialog Form 1 - Single Input Dialogalert-dialog-alert-dialog-form-1Alert dialog with single text input field.
Alert Dialog Form 2 - Multiple Inputs Dialogalert-dialog-alert-dialog-form-2Alert dialog with multiple input fields including textarea.
Alert Dialog Form 3 - Form with Selectalert-dialog-alert-dialog-form-3Alert dialog with input and select dropdown fields.
Alert Dialog Form 4 - Form with Descriptionalert-dialog-alert-dialog-form-4Alert dialog with input field and helper description text.
Alert Dialog Form 5 - Form with Validation Statealert-dialog-alert-dialog-form-5Alert dialog with validation error state and disabled action.
Alert Dialog Form 6 - Form with Radio Groupalert-dialog-alert-dialog-form-6Alert dialog with radio group for format selection.
Alert Dialog Form 7 - Form with Checkboxesalert-dialog-alert-dialog-form-7Alert dialog with checkbox list for notification preferences.
Alert Dialog Informational 1 - Simple Information Alertalert-dialog-alert-dialog-informational-1Informational alert dialog displaying system update notice.
Alert Dialog Informational 2 - Information with Iconalert-dialog-alert-dialog-informational-2Informational dialog with info icon in header.
Alert Dialog Informational 3 - Information with Long Contentalert-dialog-alert-dialog-informational-3Informational dialog with scrollable long content.
Alert Dialog Informational 4 - Information with Action Buttonalert-dialog-alert-dialog-informational-4Informational dialog with cancel and action buttons.
Alert Dialog Informational 5 - Information with Centered Iconalert-dialog-alert-dialog-informational-5Informational dialog with centered icon and keyboard shortcut.
Alert Dialog Informational 6 - Information with Status Badgealert-dialog-alert-dialog-informational-6Informational dialog with status badge in header.
Alert Dialog Informational 7 - Information with Highlighted Contentalert-dialog-alert-dialog-informational-7Informational dialog with highlighted feature cards.
Alert Dialog Success 1 - Simple Success Messagealert-dialog-alert-dialog-success-1Success alert dialog with positive confirmation message.
Alert Dialog Success 2 - Success with Iconalert-dialog-alert-dialog-success-2Success dialog with checkmark icon in header.
Alert Dialog Success 3 - Success with Centered Iconalert-dialog-alert-dialog-success-3Success dialog with centered icon in colored circle.
Alert Dialog Success 4 - Success with Next Stepsalert-dialog-alert-dialog-success-4Success dialog with numbered next steps list.
Alert Dialog Success 5 - Success with Summary Detailsalert-dialog-alert-dialog-success-5Success dialog with summary details in colored box.
Alert Dialog Success 6 - Success with Multiple Actionsalert-dialog-alert-dialog-success-6Success dialog with cancel and action buttons.
Alert Dialog Success 7 - Success with Celebrationalert-dialog-alert-dialog-success-7Success dialog with celebration icon and achievement badge.
Announcement Composition 1 - Full compositionannouncement-announcement-composition-1Themed announcement with tag, title, and link arrow icon in one compound layout.
Announcement Icon 1 - With iconannouncement-announcement-icon-1AnnouncementTitle with a lucide icon inline before the message text.
Announcement Standard 1 - Standard badgeannouncement-announcement-standard-1Basic Announcement badge with plain text and default outline variant.
Announcement Tag 1 - With tagannouncement-announcement-tag-1Announcement with an AnnouncementTag label prefix before the message text.
Announcement Themed 1 - Themed variantannouncement-announcement-themed-1Announcement with the themed prop for foreground-aware styling.
Announcement Title 1 - Tag and titleannouncement-announcement-title-1Announcement combining AnnouncementTag and AnnouncementTitle sub-components.
Application Shell 1 - Sidebar Shell with Breadcrumbsapplication-shell1A full application shell with collapsible sidebar, grouped navigation with submenus, user dropdown in footer, header with breadcrumbs, and placeholder content area.
Application Shell 10 - Support Ticket Shellapplication-shell10A support or helpdesk application shell with ticket sidebar, command palette search, conversation view with message input, and ticket category navigation.
Application Shell 11 - Video Platform Shellapplication-shell11A YouTube-style video platform shell with category sidebar, collapsible subscription sections, search bar in header, and user dropdown with account options.
Application Shell 12 - Two-tier sidebar shell with organization switcherapplication-shell12Two-tier sidebar with collapsible panel, organization switcher, and animated transitions.
Application Shell 13 - Top navigation shell with dropdown menus and mobile sheetapplication-shell13Top navigation bar with dropdown menus, search field, organization switcher, and mobile bottom navigation.
Application Shell 14 - Crypto exchange shell with wallet and token menusapplication-shell14Cryptocurrency exchange interface with wallet menu, token favorites, notifications, and rounded navigation tabs.
Application Shell 2 - Inset Sidebar with Icon Collapseapplication-shell2An application shell with inset collapsible sidebar that collapses to icon-only mode, grouped navigation with submenus, user dropdown footer, and content area.
Application Shell 3 - Top Navigation Bar Shellapplication-shell3An application shell with horizontal top navigation bar featuring dropdown menus, search input, user dropdown, and mobile sheet menu for responsive navigation.
Application Shell 4 - Top Navigation with Tabsapplication-shell4An application shell with horizontal top navigation using tab-style links, search input, user dropdown, and mobile sheet menu for responsive navigation.
Application Shell 5 - Floating Sidebar Shellapplication-shell5An application shell with floating sidebar variant, grouped navigation with collapsible submenus, user dropdown footer, and toggle button in sidebar header.
Application Shell 6 - Module Switcher Sidebar Shellapplication-shell6An application shell with module switcher in sidebar, animated navigation transitions, badge counts on menu items, and drawer for mobile with motion effects.
Application Shell 7 - Messaging App Shellapplication-shell7A messaging-style application shell with channel sidebar, pinned items, user presence indicators, header with breadcrumbs and actions, and drawer for mobile.
Application Shell 8 - Email Client Shellapplication-shell8An email client application shell with folder sidebar, workspace switcher, search input, message list with badges, and user dropdown with notification settings.
Application Shell 9 - IDE-Style File Explorer Shellapplication-shell9A code editor-style application shell with activity bar, file explorer sidebar with collapsible folders, and panel toggle for secondary content area.
Aspect Ratio Standard 1 - 16:9 Aspect Ratio (Widescreen)aspect-ratio-aspect-ratio-standard-1Aspect ratio container with 16:9 widescreen ratio.
Aspect Ratio Standard 2 - 4:3 Aspect Ratio (Traditional)aspect-ratio-aspect-ratio-standard-2Aspect ratio container with 4:3 traditional ratio.
Aspect Ratio Standard 3 - 1:1 Aspect Ratio (Square)aspect-ratio-aspect-ratio-standard-3Aspect ratio container with 1:1 square ratio.
Aspect Ratio Standard 4 - 21:9 Aspect Ratio (Ultrawide)aspect-ratio-aspect-ratio-standard-4Aspect ratio container with 21:9 ultrawide ratio.
Aspect Ratio Standard 5 - 3:2 Aspect Ratio (Photography)aspect-ratio-aspect-ratio-standard-5Aspect ratio container with 3:2 photography ratio.
Aspect Ratio Standard 6 - 9:16 Aspect Ratio (Vertical/Mobile)aspect-ratio-aspect-ratio-standard-6Aspect ratio container with 9:16 vertical mobile ratio.
Aspect Ratio Standard 7 - 2:1 Aspect Ratio (Panoramic)aspect-ratio-aspect-ratio-standard-7Aspect ratio container with 2:1 panoramic ratio.
Autocomplete Auto Highlight - Auto-highlight autocompleteautocomplete-autocomplete-auto-highlightAutocomplete that highlights the first filtered match as you type.
Autocomplete Basic - Basic autocompleteautocomplete-autocomplete-basicBasic shadcn Combobox autocomplete with framework filtering.
Autocomplete City - City autocompleteautocomplete-autocomplete-cityCity autocomplete with clear button and typeahead filtering.
Autocomplete Country - Country autocompleteautocomplete-autocomplete-countryCountry autocomplete with flag icons in each suggestion.
Autocomplete Custom Objects - Autocomplete with custom itemsautocomplete-autocomplete-custom-objectsAutocomplete using custom object items and itemToStringValue.
Autocomplete Default Value - Autocomplete with default valueautocomplete-autocomplete-default-valueAutocomplete pre-filled with a default editor selection.
Autocomplete Disabled - Disabled autocompleteautocomplete-autocomplete-disabledDisabled autocomplete input with a selected value.
Autocomplete Invalid - Invalid autocompleteautocomplete-autocomplete-invalidAutocomplete in an invalid form field with aria-invalid styling.
Autocomplete Language - Language autocompleteautocomplete-autocomplete-languageLanguage autocomplete with language code badges in each suggestion.
Autocomplete Multi Select - Multi-select autocompleteautocomplete-autocomplete-multi-selectMultiple selection autocomplete with removable chips and anchored popup.
Autocomplete Popup Trigger - Popup trigger autocompleteautocomplete-autocomplete-popup-triggerButton-triggered autocomplete with search inside the popup.
Autocomplete Rich Items - Rich item autocompleteautocomplete-autocomplete-rich-itemsAutocomplete with Item title and description in each suggestion.
Autocomplete Timezone Groups - Grouped autocompleteautocomplete-autocomplete-timezone-groupsGrouped timezone autocomplete with regional labels.
Autocomplete With Clear - Autocomplete with clearautocomplete-autocomplete-with-clearAutocomplete with a clear button and default selection.
Autocomplete With Icon Addon - Autocomplete with icon addonautocomplete-autocomplete-with-icon-addonAutocomplete with a leading globe icon in the input group.
Avatar Square 1 - Avataravatar-avatar-square-1Avatar with rounded-lg corners instead of full circle.
Avatar Square 2 - Avatar with Placeholder Initialsavatar-avatar-square-2Square avatar with placeholder initials fallback.
Avatar Square 3 - Avatar with Placeholder Iconavatar-avatar-square-3Square avatar with placeholder icon instead of image.
Avatar Square 4 - Avatar with Online Indicatoravatar-avatar-square-4Square avatar with green online status indicator badge.
Avatar Square 5 - Avatar with Offline Indicatoravatar-avatar-square-5Square avatar with gray offline status indicator badge.
Avatar Square 6 - Avatar with Verification Checkavatar-avatar-square-6Square avatar with blue verification check badge.
Avatar Square 7 - Avatar with Count Indicatoravatar-avatar-square-7Square avatar with red count indicator badge in top-right corner.
Avatar Standard 1 - Avataravatar-avatar-standard-1Basic circular avatar with image and initials fallback.
Avatar Standard 10 - Avatar Extra Largeavatar-avatar-standard-10Extra large circular avatar with size-20 dimensions.
Avatar Standard 11 - Avatar with Borderavatar-avatar-standard-11Circular avatar with primary-colored border.
Avatar Standard 12 - Avatar with Shadowavatar-avatar-standard-12Circular avatar with shadow-lg effect.
Avatar Standard 13 - Avatar with Gradient Fallbackavatar-avatar-standard-13Circular avatar with gradient fallback background.
Avatar Standard 14 - Avatar with Away Statusavatar-avatar-standard-14Circular avatar with yellow away status indicator badge.
Avatar Standard 15 - Avatar with Busy Statusavatar-avatar-standard-15Circular avatar with red busy status indicator badge.
Avatar Standard 16 - Avatar with Do Not Disturbavatar-avatar-standard-16Circular avatar with red do not disturb indicator badge.
Avatar Standard 17 - Avatar with Hover Effectavatar-avatar-standard-17Circular avatar with hover scale and shadow effects.
Avatar Standard 18 - Avatar with Loading Stateavatar-avatar-standard-18Circular avatar with loading spinner overlay.
Avatar Standard 19 - Avatar with Badge Top Leftavatar-avatar-standard-19Circular avatar with red count badge in top-left corner.
Avatar Standard 2 - Avatar with Placeholder Initialsavatar-avatar-standard-2Circular avatar with placeholder initials fallback only.
Avatar Standard 20 - Avatar with Badge Bottom Leftavatar-avatar-standard-20Circular avatar with red count badge in bottom-left corner.
Avatar Standard 21 - Avatar with Colored Borderavatar-avatar-standard-21Circular avatar with blue colored border.
Avatar Standard 22 - Avatar with Multiple Badgesavatar-avatar-standard-22Circular avatar with online indicator and count badge.
Avatar Standard 23 - Avatar with Tooltipavatar-avatar-standard-23Circular avatar wrapped in tooltip component.
Avatar Standard 24 - Avatar with Ring Animationavatar-avatar-standard-24Circular avatar with animated pulsing green ring.
Avatar Standard 25 - Avatar with Custom Colorsavatar-avatar-standard-25Circular avatar with blue custom-colored fallback background.
Avatar Standard 26 - Avatar with Glow Effectavatar-avatar-standard-26Circular avatar with primary-colored glow shadow effect.
Avatar Standard 27 - Avatar with Error Stateavatar-avatar-standard-27Circular avatar with destructive-colored error state fallback.
Avatar Standard 3 - Avatar with Placeholder Iconavatar-avatar-standard-3Circular avatar with placeholder icon instead of image.
Avatar Standard 4 - Avatar with Online Indicatoravatar-avatar-standard-4Circular avatar with green online status indicator badge.
Avatar Standard 5 - Avatar with Offline Indicatoravatar-avatar-standard-5Circular avatar with gray offline status indicator badge.
Avatar Standard 6 - Avatar with Verification Checkavatar-avatar-standard-6Circular avatar with blue verification check badge.
Avatar Standard 7 - Avatar with Count Indicatoravatar-avatar-standard-7Circular avatar with red count indicator badge in top-right corner.
Avatar Standard 8 - Avatar Smallavatar-avatar-standard-8Small circular avatar with size-6 dimensions.
Avatar Standard 9 - Avatar Largeavatar-avatar-standard-9Large circular avatar with size-12 dimensions.
Avatar Group Animated 1 - Animatedavatar-group-avatar-group-animated-1Avatar group with animation on hover.
Avatar Group Border 1 - With Bordersavatar-group-avatar-group-border-1Avatar group with border around each avatar.
Avatar Group Loose 1 - Loose Spacingavatar-group-avatar-group-loose-1Avatar group with loose spacing between avatars.
Avatar Group Loose Border 1 - Loose Spacing with Bordersavatar-group-avatar-group-loose-border-1Avatar group with loose spacing and borders.
Avatar Group Max 1 - With Max Limitavatar-group-avatar-group-max-1Avatar group with max limit showing overflow count.
Avatar Group Standard 1 - Default avatar group with overlapping circular avatarsavatar-group-avatar-group-standard-1Default avatar group with overlapping circular avatars.
Avatar Group Tight 1 - Tight Spacingavatar-group-avatar-group-tight-1Avatar group with tight spacing between avatars.
Avatar Group Tight Border 1 - Tight Spacing with Bordersavatar-group-avatar-group-tight-border-1Avatar group with tight spacing and borders.
Avatar Group Tooltip 1 - With Tooltipsavatar-group-avatar-group-tooltip-1Avatar group with tooltips showing names on hover.
Avatar Stack Animate 1 - Animate on hoveravatar-stack-avatar-stack-animate-1AvatarStack with the animate prop spreading avatars apart on hover.
Avatar Stack Compact 1 - Compact stackavatar-stack-avatar-stack-compact-1Dense avatar stack using a 24px size prop with five participants.
Avatar Stack Composition 1 - Stack with labelavatar-stack-avatar-stack-composition-1AvatarStack paired with team name and member count label text.
Avatar Stack Overflow 1 - Overflow badgeavatar-stack-avatar-stack-overflow-1Avatar stack showing four avatars with a +N overflow count badge.
Avatar Stack Sizes 1 - Size variationsavatar-stack-avatar-stack-sizes-1AvatarStack with small, default, and large size prop values side by side.
Avatar Stack Standard 1 - Standard stackavatar-stack-avatar-stack-standard-1Basic overlapping stack of four shadcn Avatar components inside AvatarStack.
Awards 1 - Awards table with linked rowsawards1A section with a large heading and a full-width table of award name, description, and year, with each name linked externally.
Awards 2 - Sticky label with awards listawards2A two-column layout with a small uppercase label and sticky positioning beside a list of award titles and years separated by hairline borders.
Awards 3 - Awards list with hover accent rowsawards3A titled section with intro text and stacked rows showing a color marker, award title, categories, year, and a sliding accent background on hover.
Awards 4 - Awards table with logos and date subtitleawards4A large display Awards heading paired with a parenthetical date subtitle above a table of logo chips, names, nominations, and years.
Awards 5 - Awards list with pointer-following previewawards5A serif-styled grid with a sticky sidebar label and large award titles where pointer movement drives a scaled preview image for the active row.
Awards 6 - Milestones grid with separator rowsawards6A display-size milestones heading over a labeled grid of milestone title, type, and year with horizontal separators between entries.
Awards 7 - Split accolades list and product spotlightawards7Two columns: intro and an accolade stack with separators on the left, and a product image band plus headline, copy, and three large stats on the right.
Background Pattern 1 - Full-screen radial gradient background patternbackground-pattern1This component generates a full-screen background pattern with a radial gradient effect, applying customizable styles through optional class names. It features a placeholder pattern element and a visually striking top primary radial gradient.
Background Pattern 10 - Full-viewport CSS grid background patternbackground-pattern10This component creates a visually appealing background with a grid pattern using CSS gradients, which is centered and takes up the full width and height of the viewport. It allows for customization through additional class names and serves as a decorative backdrop that can be used in various user interfaces.
Background Pattern 100 - Bottom Blurred Gradient With Noisebackground-pattern100A full-height section with two large bottom-corner radial gradients, heavy blur, desaturated SVG noise on top, and centered pattern placeholder.
Background Pattern 11 - Full-screen diagonal cross grid sectionbackground-pattern11This component renders a full-screen section with a diagonal cross grid background pattern, making it suitable for visually distinct layouts. It accepts a `className` prop for additional styling customization and includes a placeholder for further content integration.
Background Pattern 111 - Left Fade Dot Grid Backgroundbackground-pattern111A full-height centered section whose primary dot grid is masked so the pattern reads strongest toward the upper right and fades leftward, with PatternPlaceholder as sample content.
Background Pattern 112 - Right Fade Dot Grid Backgroundbackground-pattern112A full-height centered section whose primary dot grid is masked so the pattern is strongest toward the upper left and softens toward the right, including PatternPlaceholder as sample content.
Background Pattern 113 - Bottom Corner Dot Grid Backgroundbackground-pattern113A full-height centered section with a primary dot grid masked from the bottom-right corner so the pattern fades toward the opposite side, plus PatternPlaceholder for demo content.
Background Pattern 115 - Center Vignette Dot Grid Backgroundbackground-pattern115A full-height centered section with a primary dot grid vignetted from the middle so the edges fall away, centered PatternPlaceholder, and optional section className.
Background Pattern 116 - Top Band Dot Grid Backgroundbackground-pattern116A full-height centered section with a wide elliptical mask so the primary dot grid is strongest under the top edge and fades downward with a soft multi-stop falloff, plus PatternPlaceholder.
Background Pattern 117 - Bottom Band Dot Grid Backgroundbackground-pattern117A full-height centered section with a primary-tinted dot grid that fades upward from the bottom, using PatternPlaceholder as sample foreground content.
Background Pattern 12 - Diagonal cross grid background pattern with fadesbackground-pattern12This component displays a visually engaging diagonal cross grid background pattern with fade effects, suitable for enhancing the visual appeal of any block. It allows customization through class names and integrates seamlessly with placeholder elements.
Background Pattern 13 - Diagonal crosshatch with side fadebackground-pattern13This component renders a visually engaging background pattern featuring a left fade diagonal cross grid, suitable for enhancing the aesthetic appeal of any interface. It provides flexibility by allowing custom styles through a class name prop, making it easily adaptable to different design needs.
Background Pattern 14 - Diagonal cross grid with top fadebackground-pattern14This component serves as a full-screen background pattern block, featuring a diagonally oriented cross grid with a top fade effect. It allows customization through optional styling via class names and includes a placeholder pattern element.
Background Pattern 15 - Bottom-centered diagonal cross-grid background patternbackground-pattern15This component creates a visually engaging background pattern with diagonal cross grids and a bottom fade effect, enhancing the aesthetic of any interface. It accepts a customizable className prop to adjust styling and integrates a placeholder element for additional content layering.
Background Pattern 16 - Lower-left diagonal cross-grid background patternbackground-pattern16This component creates a visually appealing background pattern using diagonal cross grids and fade effects, ideal for enhancing the aesthetics of any user interface. It allows for custom styling through a `className` prop and incorporates a placeholder for additional pattern customization.
Background Pattern 17 - Lower-right diagonal cross-grid background patternbackground-pattern17This component creates a visually appealing background pattern using a diagonal cross grid with a radial fade effect, set to fill a full-screen height layout. It supports additional customization through optional class names and integrates a placeholder for further content display.
Background Pattern 18 - Center-focused diagonal cross-grid background patternbackground-pattern18This component creates a visually engaging background pattern using diagonal cross grids and a center fade effect, perfect for dynamic and modern UX designs. It supports customizable styles with a `className` prop and integrates a pattern placeholder for further customization.
Background Pattern 19 - Dashed orthogonal grid section background patternbackground-pattern19This component creates a full-screen container featuring a dashed grid background pattern, ideal for visually structuring content in an engaging way. It accepts customizable class names to allow for flexible styling and integration into various design themes.
Background Pattern 2 - Bottom radial gradient section background patternbackground-pattern2This component serves as a customizable background pattern block, featuring a radial gradient design with placeholder support. It allows users to apply additional styling through an optional className prop for seamless integration with existing styles.
Background Pattern 20 - Dashed grid background pattern, upper-left emphasisbackground-pattern20This component creates a full-screen background pattern featuring a right-fade dashed grid effect, offering a distinctive and visually engaging backdrop for various applications. It integrates a customizable placeholder element to enhance functionality, making it ideal for layouts that require an interactive or decorative background feature.
Background Pattern 21 - Dashed grid background pattern, upper-right emphasisbackground-pattern21This component renders a full-screen block with a dashed grid background pattern, featuring a gradient and masking effects for added visual depth. It is ideal for uses requiring an engaging graphical backdrop, and customization via the className prop allows for further stylistic adjustments.
Background Pattern 22 - Dashed grid background pattern, top edge emphasisbackground-pattern22This component creates a visually dynamic background pattern, featuring a dashed grid overlay with a top fade effect and a radial gradient. It serves as a versatile design block for enhancing the visual appeal of a user interface layout.
Background Pattern 23 - Dashed grid with radial gradient maskbackground-pattern23The BackgroundPattern23 component creates a visually engaging block with a customizable background pattern featuring a dashed grid and radial gradient effects. It is ideal for use as a full-screen decorative background in various design projects.
Background Pattern 24 - Dashed grid with corner fadebackground-pattern24This component creates a visually engaging background with a faded dashed grid pattern and supports custom styling through class names. It is ideal for adding a decorative effect to applications, enhancing the visual appeal with its dynamic background design.
Background Pattern 25 - Dashed grid faded from bottom leftbackground-pattern25This component generates a visually appealing background pattern with a bottom-left fade dashed grid effect, suitable for enhancing the design of user interfaces. It allows customization through the `className` prop and utilizes a placeholder for additional content placement.
Background Pattern 26 - Dashed grid faded toward centerbackground-pattern26This component creates a visually appealing background pattern using intersecting linear and radial gradients, ideal for adding texture and depth to any layout. It also allows the integration of additional features or content by utilizing a placeholder element.
Background Pattern 27 - Radial glow from top centerbackground-pattern27This component serves as a flexible background block that fills the entire viewport with a gradient and a placeholder pattern. It allows for customization through an optional className prop, enabling users to incorporate unique styling or additional functionality.
Background Pattern 28 - Center spotlight radial backgroundbackground-pattern28This component, called BackgroundPattern28, is designed to display a customizable full-screen background pattern with a radial gradient effect that centers at a spotlight. It also includes a placeholder for additional pattern components, which can be styled with additional class names via props.
Background Pattern 29 - Top radial glow backgroundbackground-pattern29This component renders a full-screen background pattern with a top radial glow effect, designed to enhance the visual appeal of any interface. It allows customization through additional class names and includes a placeholder for pattern elements.
Background Pattern 3 - Full-screen linear grid backgroundbackground-pattern3This component creates a full-screen flex container with a customizable linear grid background pattern suitable for visually enhancing layouts. It integrates a placeholder for overlay patterns, allowing developers to easily adapt or extend its visual design features.
Background Pattern 30 - Dual radial gradient backgroundbackground-pattern30This component renders a full-screen background pattern with radial gradients, designed to enhance visual appeal. It provides a placeholder for additional pattern content, allowing for customizable styling through optional class names.
Background Pattern 31 - Circuit board grid backgroundbackground-pattern31This component renders a full-screen background featuring a circuit board pattern using CSS gradients, ideal for creating a visually engaging backdrop. It includes the ability to integrate additional styles through a customizable className property and incorporates a pattern placeholder for potential content.
Background Pattern 32 - Circuit board grid with top-left corner fadebackground-pattern32This component displays a visually appealing background pattern with a right-side fade resembling a circuit board, suitable for enhancing the aesthetics of a user interface. It also supports customizable styles through additional class names and includes a placeholder for additional content.
Background Pattern 33 - Circuit board grid with top-right corner fadebackground-pattern33This component is designed to create a visually engaging background with a circuit board pattern, featuring a left fade effect. It allows for customizable class names to adapt its styling according to specific needs.
Background Pattern 34 - Circuit board grid faded from topbackground-pattern34This component, named BackgroundPattern34, creates a visually appealing background pattern with a top fade circuit board effect suitable for full-screen displays. It utilizes linear gradients and radial masks to achieve its stylish look, and it accepts an optional className prop for additional styling.
Background Pattern 35 - Circuit board grid faded from bottombackground-pattern35This component is designed to display a full-screen background with a circuit board pattern, creating a visually engaging backdrop for other content. It includes customizable class names to allow for tailored styling and integration within different projects.
Background Pattern 36 - Circuit board grid with bottom-left corner fadebackground-pattern36A component that creates a visually interesting background pattern using a combination of linear gradients and radial masks, designed to mimic a circuit board appearance. Ideal for adding dynamic visual flair to a full-page layout while allowing custom styling through class name overrides.
Background Pattern 37 - Circuit board grid with bottom-right corner fadebackground-pattern37This component is designed to showcase a full-screen background with a visually engaging circuit board pattern, featuring gradient lines and an elliptical mask effect. It can be used as a backdrop for various user interface elements, enhancing the visual appeal of the application while allowing custom class styling through props.
Background Pattern 38 - Circuit board grid faded toward edgesbackground-pattern38This component creates a visually engaging background pattern with a center-fade circuit board design, ideal for adding dynamic aesthetics to full-screen sections. It allows customization through a `className` prop, enabling users to style the pattern to fit various themes and layouts.
Background Pattern 39 - Grid and dot section backgroundbackground-pattern39The BackgroundPattern39 component creates a visually appealing section with a dynamic white grid and dots background, perfect for enhancing the aesthetics of a user interface. It allows for customization through additional class names and integrates seamlessly with other components by serving as a decorative and functional backdrop.
Background Pattern 4 - Full-screen grid background with corner fadebackground-pattern4This component creates a full-screen background with a diagonal fade grid pattern using CSS gradients and masking techniques. It allows for additional styling through an optional className prop and includes a placeholder for pattern customization.
Background Pattern 40 - Grid and dot background with top-left corner fadebackground-pattern40This component serves as a versatile background pattern featuring a combination of linear and radial gradients, creating a grid with dots effect. It is designed to seamlessly integrate into your project with customizable styles through additional class names.
Background Pattern 5 - Large-cell grid section background with top-right radial fadebackground-pattern5This component creates a full-screen background pattern with a diagonal fade grid effect, ideal for enhancing the visual appeal of a user interface. It utilizes a linear gradient and radial mask to achieve the design, allowing for customization through the `className` prop.
Background Pattern 6 - Square-tiled grid background with top fadebackground-pattern6This component renders a full-screen background pattern with a top fade grid effect, providing a visually appealing design element. It allows for custom styling through an optional className prop, offering flexibility in integration with other components.
Background Pattern 7 - Grid backdrop with radial center fadebackground-pattern7This component creates a visually dynamic background with a grid pattern and a radial fade effect, allowing users to apply customizable styles through the `className` prop. It is ideal for enhancing the aesthetic appeal of an interface where a patterned backdrop is desired.
Background Pattern 8 - Full-viewport grid background with bottom-left fadebackground-pattern8This component, named BackgroundPattern8, is designed to create a visually appealing full-screen background with a fade grid pattern effect. It includes a customizable className prop for flexible styling and incorporates a radial gradient mask to enhance the design.
Background Pattern 9 - Grid background pattern with bottom-right radial fadebackground-pattern9This component, BackgroundPattern9, creates a visually appealing background with a grid pattern and a radial fade effect in the bottom right corner, which serves as a decorative element. It allows for customizable styling through an optional className prop, ensuring integration with different design systems.
Background Pattern 95 - Multi-Corner Radial Glow Backgroundbackground-pattern95A full-height section with four chart-tinted radial glows on the page background plus a high-frequency conic noise overlay in blend mode, centered pattern placeholder slot.
Background Pattern 96 - Corner Gradient Stack With SVG Noisebackground-pattern96A min-height screen section with stacked corner radial gradients from chart colors and a full-bleed SVG fractal noise layer at reduced opacity in overlay blend.
Background Pattern 97 - Blurred Mesh Glow Backgroundbackground-pattern97A full-height canvas with several large blurred radial gradients forming a mesh of chart colors, plus SVG fractal noise in overlay for grain, centered placeholder for content.
Background Pattern 98 - Bottom Glow Gradient Backgroundbackground-pattern98A viewport-tall section with three stacked bottom-anchored radial glows in chart colors, heavy blur, SVG noise overlay, and centered pattern placeholder.
Background Pattern 99 - Duo Corner Gradient Backgroundbackground-pattern99A min-height screen backdrop with two large blurred radial gradients from opposite corners using chart colors, SVG noise overlay, and centered pattern placeholder.
Badge Destructive 1 - Badge with Textbadge-badge-destructive-1Destructive badge with text label.
Badge Destructive 2 - Badge with Linkbadge-badge-destructive-2Destructive badge with link.
Badge Destructive 3 - Badge with Icon on Leftbadge-badge-destructive-3Destructive badge with leading icon.
Badge Destructive 4 - Badge with Icon on Rightbadge-badge-destructive-4Destructive badge with trailing icon.
Badge Destructive 5 - Circular Badge with Countbadge-badge-destructive-5Destructive circular badge with count.
Badge Outline 1 - Badge with Textbadge-badge-outline-1Outline badge with text label.
Badge Outline 2 - Badge with Linkbadge-badge-outline-2Outline badge with link.
Badge Outline 3 - Badge with Icon on Leftbadge-badge-outline-3Outline badge with leading icon.
Badge Outline 4 - Badge with Icon on Rightbadge-badge-outline-4Outline badge with trailing icon.
Badge Outline 5 - Circular Badge with Countbadge-badge-outline-5Outline circular badge with count.
Badge Secondary 1 - Badge with Textbadge-badge-secondary-1Secondary badge with text label.
Badge Secondary 2 - Badge with Linkbadge-badge-secondary-2Secondary badge with link.
Badge Secondary 3 - Badge with Icon on Leftbadge-badge-secondary-3Secondary badge with leading icon.
Badge Secondary 4 - Badge with Icon on Rightbadge-badge-secondary-4Secondary badge with trailing icon.
Badge Secondary 5 - Circular Badge with Countbadge-badge-secondary-5Secondary circular badge with count.
Badge Standard 1 - Badge with Textbadge-badge-standard-1Default badge with text label.
Badge Standard 2 - Badge with Linkbadge-badge-standard-2Default badge containing a clickable link.
Badge Standard 3 - Badge with Icon on Leftbadge-badge-standard-3Default badge with icon positioned on the left.
Badge Standard 4 - Badge with Icon on Rightbadge-badge-standard-4Default badge with icon positioned on the right.
Badge Standard 5 - Circular Badge with Countbadge-badge-standard-5Default circular badge displaying a numeric count.
Banner Colors 1 - Warning stylingbanner-banner-colors-1Banner with warning background and foreground color overrides.
Banner Controlled 1 - Controlled visibilitybanner-banner-controlled-1Banner visibility controlled with visible and onClose state.
Banner Inset 1 - Inset bannerbanner-banner-inset-1Rounded inset banner for placement inside cards or panels.
Banner Standard 1 - Dismissible announcementbanner-banner-standard-1Banner with icon, title, action, and close control.
Banner 1 - Full-width dismissible announcement barbanner1A thin top bar with centered title, muted supporting text, an inline external link, and a ghost icon button that hides the banner.
Banner 10 - Dismissible muted release announcementbanner10A muted full-width bar with bold release title, supporting copy, and a ghost icon button that dismisses the banner.
Banner 11 - Primary bar with soft radial and CTAbanner11A primary full-width banner with soft radial highlight, promotional copy, and a rounded secondary call-to-action button.
Banner 13 - Countdown offer bar with outline CTAbanner13A bordered announcement bar with a live ticking countdown pill, muted offer copy, and an outline claim button with arrow.
Banner 14 - Floating status card with dismissbanner14A bordered status card with operational indicator, dashboard link, and a ghost dismiss action that hides the banner.
Banner 15 - New badge announcement link barbanner15A slim bordered strip with sparkle icon, new badge, muted description, and an inline explore link with hover arrow motion.
Banner 16 - Inverted dark pro upgrade barbanner16An inverted full-width upgrade bar with mono eyebrow, product pitch, soft primary glow, and a secondary unlock button.
Banner 17 - Email subscribe announcement barbanner17A card-surface banner with a short prompt, rounded email field, and subscribe button that swaps to a confirmation message.
Banner 18 - Promo code copy bannerbanner18A full-width promo strip with a tag icon, discount message, dashed mono code chip that copies on click, and a redeem button.
Banner 19 - New badge banner with avatarsbanner19A card-surface banner with a sparkle icon, New badge, announcement line, overlapping avatars, and a see-what's-new link.
Banner 2 - Container announcement bar with dismissbanner2A muted banner inside the site container with inline title, description, link, and ghost close icon that removes the bar when clicked.
Banner 20 - Muted upgrade bannerbanner20A muted full-width upgrade strip with a short title, supporting line, and a compact upgrade button aligned to the end.
Banner 21 - Scrolling marquee bannerbanner21A bordered horizontal marquee of short feature phrases separated by thin vertical dividers that loop continuously.
Banner 22 - Brand bar with navigation linksbanner22A slim brand bar with logo mark, product name, tagline, browse link, and a primary get-access link with arrow.
Banner 23 - Maintenance warning bannerbanner23A dismissible maintenance warning strip with a chart-toned alert icon, schedule details, and a close control.
Banner 24 - Progress unlock bannerbanner24A card-surface progress banner with a package icon, remaining-count message, fraction readout, and primary progress bar.
Banner 25 - Centered pill changelog bannerbanner25A centered floating pill with a status dot, release message, and changelog link that nudges the arrow on hover.
Banner 26 - Webinar announcement bannerbanner26A full-width webinar bar with a calendar date pill, title and session meta, plus an outline reserve button.
Banner 27 - Mobile app download bannerbanner27A full-width mobile promo bar with device icon, title and supporting line, plus App Store and Google Play links.
Banner 3 - Primary promo banner with shop buttonbanner3A solid primary strip with title and description beside a secondary shop-button link and icon, plus dismiss controls that move between mobile and desktop.
Banner 4 - Primary bar banner with dismissbanner4Full-width primary banner with title, supporting line, and dismiss icon; stacks on small screens and aligns on one row on wider viewports.
Banner 5 - Floating card banner with linkbanner5Absolutely positioned rounded banner with title, muted description, outline link button, and dismiss control that reflows from column to row on wider viewports.
Banner 6 - Pill banner with overlapping avatarsbanner6Rounded floating banner with overlapping avatars, bold social-proof line, and a circular dismiss button beside the copy.
Banner 7 - Full-width banner with separator linkbanner7Dismissible full-width strip with message, vertical divider, learn-more link with arrow on desktop, and ghost close control.
Banner 9 - Primary announcement bar with catalog linkbanner9A full-width primary strip with centered announcement copy and an underlined inline link that opens the catalog.
Bento Tile Countup 1 - Count-up gauge tilebento-tile-bento-tile-countup-1Animated bento tile with radial gauge segments, beam lines, and count-up percentage display.
Bento Tile Bento10 Tile 1 - Ultra-Visual Grid Systembento-tile-bento10-tile1Isolated ultra-visual grid system tile with scroll-triggered entrance motion.
Bento Tile Bento10 Tile 2 - Customizable Dashboardsbento-tile-bento10-tile2Isolated customizable dashboards tile with scroll-triggered entrance motion.
Bento Tile Bento10 Tile 3 - Answer any question with SQLbento-tile-bento10-tile3Isolated answer any question with sql tile with scroll-triggered entrance motion.
Bento Tile Bento10 Tile 4 - Start collaborating togetherbento-tile-bento10-tile4Isolated start collaborating together tile with scroll-triggered entrance motion.
Bento Tile Bento11 Tile 1 - Smart & intuitive UI that boosts user flowbento-tile-bento11-tile1Isolated smart & intuitive ui that boosts user flow tile with scroll-triggered entrance motion.
Bento Tile Bento11 Tile 2 - Clean layout that adapts to devicebento-tile-bento11-tile2Isolated clean layout that adapts to device tile with animated count-up metrics.
Bento Tile Bento11 Tile 3 - Lightning-fast performancebento-tile-bento11-tile3Isolated lightning-fast performance tile with scroll-triggered entrance motion.
Bento Tile Bento11 Tile 4 - Minimal visual distractionbento-tile-bento11-tile4Isolated minimal visual distraction tile with scroll-triggered entrance motion.
Bento Tile Bento11 Tile 5 - Built-in flexibility for custombento-tile-bento11-tile5Isolated built-in flexibility for custom tile with scroll-triggered entrance motion.
Bento Tile Bento12 Tile 1 - Drag-and-drop layout controlbento-tile-bento12-tile1Isolated drag-and-drop layout control tile with scroll-triggered entrance motion.
Bento Tile Bento12 Tile 2 - Designed for both SaaSbento-tile-bento12-tile2Isolated designed for both saas tile with scroll-triggered entrance motion.
Bento Tile Bento12 Tile 3 - Supports custom illustrationsbento-tile-bento12-tile3Isolated supports custom illustrations tile with scroll-triggered entrance motion.
Bento Tile Bento12 Tile 4 - Inverted caption bento with icon flow diagram tile 4bento-tile-bento12-tile4Isolated inverted caption bento with icon flow diagram tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento13 Tile 1 - Professional tone without cryptobento-tile-bento13-tile1Isolated professional tone without crypto tile with scroll-triggered entrance motion.
Bento Tile Bento13 Tile 2 - Focused content blocks for better conversionbento-tile-bento13-tile2Isolated focused content blocks for better conversion tile with scroll-triggered entrance motion.
Bento Tile Bento13 Tile 3 - Scannable content layout for quick decisionsbento-tile-bento13-tile3Isolated scannable content layout for quick decisions tile with scroll-triggered entrance motion.
Bento Tile Bento13 Tile 4 - Smooth spacing & typographybento-tile-bento13-tile4Isolated smooth spacing & typography tile with scroll-triggered entrance motion.
Bento Tile Bento14 Tile 1 - Realistic Human-Like Voicesbento-tile-bento14-tile1Isolated realistic human-like voices tile with scroll-triggered entrance motion.
Bento Tile Bento14 Tile 2 - Multiple Language Supportbento-tile-bento14-tile2Isolated multiple language support tile with scroll-triggered entrance motion.
Bento Tile Bento14 Tile 3 - Voice Customization & Tuningbento-tile-bento14-tile3Isolated voice customization & tuning tile with scroll-triggered entrance motion.
Bento Tile Bento14 Tile 4 - Instant Voice Generationbento-tile-bento14-tile4Isolated instant voice generation tile with scroll-triggered entrance motion.
Bento Tile Bento15 Tile 1 - Emotion-Based Voice Deliverybento-tile-bento15-tile1Isolated emotion-based voice delivery tile with animated count-up metrics.
Bento Tile Bento15 Tile 2 - Script-to-Speech Automationbento-tile-bento15-tile2Isolated script-to-speech automation tile with scroll-triggered entrance motion.
Bento Tile Bento15 Tile 3 - Multi-Format Audio Exportbento-tile-bento15-tile3Isolated multi-format audio export tile with scroll-triggered entrance motion.
Bento Tile Bento16 Tile 1 - Character & Personality Voicesbento-tile-bento16-tile1Isolated character & personality voices tile with scroll-triggered entrance motion.
Bento Tile Bento16 Tile 2 - Voice Cloning Supportbento-tile-bento16-tile2Isolated voice cloning support tile with scroll-triggered entrance motion.
Bento Tile Bento16 Tile 3 - AI Script Enhancerbento-tile-bento16-tile3Isolated ai script enhancer tile with animated count-up metrics.
Bento Tile Bento16 Tile 4 - Team Workspace Collaborationbento-tile-bento16-tile4Isolated team workspace collaboration tile with scroll-triggered entrance motion.
Bento Tile Bento17 Tile 1 - Voice Preview Comparisonbento-tile-bento17-tile1Isolated voice preview comparison tile with scroll-triggered entrance motion.
Bento Tile Bento17 Tile 2 - Brand Voice Librarybento-tile-bento17-tile2Isolated brand voice library tile with animated count-up metrics.
Bento Tile Bento17 Tile 3 - Multilingual Voice Adaptationbento-tile-bento17-tile3Isolated multilingual voice adaptation tile with scroll-triggered entrance motion.
Bento Tile Bento17 Tile 4 - Emotion-Based Voice Controlbento-tile-bento17-tile4Isolated emotion-based voice control tile with scroll-triggered entrance motion.
Bento Tile Bento18 Tile 1 - AI-powered data insightsbento-tile-bento18-tile1Isolated ai-powered data insights tile with scroll-triggered entrance motion.
Bento Tile Bento18 Tile 2 - Automated workflow processingbento-tile-bento18-tile2Isolated automated workflow processing tile with animated count-up metrics.
Bento Tile Bento18 Tile 3 - Predictive analytics forecastingbento-tile-bento18-tile3Isolated predictive analytics forecasting tile with scroll-triggered entrance motion.
Bento Tile Bento18 Tile 4 - Real-time performance monitoringbento-tile-bento18-tile4Isolated real-time performance monitoring tile with scroll-triggered entrance motion.
Bento Tile Bento19 Tile 1 - Predictive performancebento-tile-bento19-tile1Isolated predictive performance tile with framer-motion transitions.
Bento Tile Bento19 Tile 2 - Automated task optimizationbento-tile-bento19-tile2Isolated automated task optimization tile with container-query typography scaling.
Bento Tile Bento19 Tile 3 - Smart decision supportbento-tile-bento19-tile3Isolated smart decision support tile with scroll-triggered entrance motion.
Bento Tile Bento19 Tile 4 - Intelligent data analysisbento-tile-bento19-tile4Isolated intelligent data analysis tile with scroll-triggered entrance motion.
Bento Tile Bento19 Tile 5 - Adaptive AI learning systembento-tile-bento19-tile5Isolated adaptive ai learning system tile with scroll-triggered entrance motion.
Bento Tile Bento19 Tile 6 - Anomaly detection alertsbento-tile-bento19-tile6Isolated anomaly detection alerts tile with framer-motion transitions.
Bento Tile Bento2 Tile 1 - Stats overview bar chartbento-tile-bento2-tile1Isolated stats overview bar chart tile with scroll-triggered entrance motion.
Bento Tile Bento2 Tile 2 - Automated progress reportsbento-tile-bento2-tile2Isolated automated progress reports tile with scroll-triggered entrance motion.
Bento Tile Bento2 Tile 3 - Task and deadline managementbento-tile-bento2-tile3Isolated task and deadline management tile with looping beam lines along SVG paths.
Bento Tile Bento2 Tile 4 - Centralized project trackingbento-tile-bento2-tile4Isolated centralized project tracking tile with scroll-triggered entrance motion.
Bento Tile Bento20 Tile 1 - Intelligent data analysisbento-tile-bento20-tile1Isolated intelligent data analysis tile with scroll-triggered entrance motion.
Bento Tile Bento20 Tile 2 - Intelligent data analysisbento-tile-bento20-tile2Isolated intelligent data analysis tile with scroll-triggered entrance motion.
Bento Tile Bento20 Tile 3 - Predictive performancebento-tile-bento20-tile3Isolated predictive performance tile with scroll-triggered entrance motion.
Bento Tile Bento21 Tile 1 - High Conversion CTA Blocksbento-tile-bento21-tile1Isolated high conversion cta blocks tile with scroll-triggered entrance motion.
Bento Tile Bento21 Tile 2 - Compliant data managementbento-tile-bento21-tile2Isolated compliant data management tile with scroll-triggered entrance motion.
Bento Tile Bento21 Tile 3 - Real-time data monitoringbento-tile-bento21-tile3Isolated real-time data monitoring tile with framer-motion transitions.
Bento Tile Bento21 Tile 4 - Make more profit with alqenbento-tile-bento21-tile4Isolated make more profit with alqen tile with scroll-triggered entrance motion.
Bento Tile Bento21 Tile 5 - Leverage the Power of Aibento-tile-bento21-tile5Isolated leverage the power of ai tile with scroll-triggered entrance motion.
Bento Tile Bento22 Tile 1 - Intelligent Data Insightsbento-tile-bento22-tile1Isolated intelligent data insights tile with scroll-triggered entrance motion.
Bento Tile Bento22 Tile 2 - Intelligent Data Insightsbento-tile-bento22-tile2Isolated intelligent data insights tile with scroll-triggered entrance motion.
Bento Tile Bento22 Tile 3 - Predictive Analyticsbento-tile-bento22-tile3Isolated predictive analytics tile with animated count-up metrics.
Bento Tile Bento22 Tile 4 - Automated Task Managementbento-tile-bento22-tile4Isolated automated task management tile with animated count-up metrics.
Bento Tile Bento22 Tile 5 - Personalized Recommendationsbento-tile-bento22-tile5Isolated personalized recommendations tile with scroll-triggered entrance motion.
Bento Tile Bento23 Tile 1 - Context-Aware AI Responsesbento-tile-bento23-tile1Isolated context-aware ai responses tile with scroll-triggered entrance motion.
Bento Tile Bento23 Tile 2 - Smart Resource Allocationbento-tile-bento23-tile2Isolated smart resource allocation tile with scroll-triggered entrance motion.
Bento Tile Bento23 Tile 3 - Smart Resource Allocationbento-tile-bento23-tile3Isolated smart resource allocation tile with scroll-triggered entrance motion.
Bento Tile Bento23 Tile 4 - Dark alternating bento with flipped captions tile 4bento-tile-bento23-tile4Isolated dark alternating bento with flipped captions tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento24 Tile 1 - Cross-Platform Intelligence Syncbento-tile-bento24-tile1Isolated cross-platform intelligence sync tile with scroll-triggered entrance motion.
Bento Tile Bento24 Tile 2 - Automated Trend Detectionbento-tile-bento24-tile2Isolated automated trend detection tile with scroll-triggered entrance motion.
Bento Tile Bento24 Tile 3 - AI-Powered Decision Enginebento-tile-bento24-tile3Isolated ai-powered decision engine tile with scroll-triggered entrance motion.
Bento Tile Bento24 Tile 4 - Instant Data Visualizationbento-tile-bento24-tile4Isolated instant data visualization tile with scroll-triggered entrance motion.
Bento Tile Bento25 Tile 1 - Data-Driven Strategy Supportbento-tile-bento25-tile1Isolated data-driven strategy support tile with scroll-triggered entrance motion.
Bento Tile Bento25 Tile 2 - Data-Driven Strategy Supportbento-tile-bento25-tile2Isolated data-driven strategy support tile with scroll-triggered entrance motion.
Bento Tile Bento25 Tile 3 - Instant Performance Benchmarkingbento-tile-bento25-tile3Isolated instant performance benchmarking tile with scroll-triggered entrance motion.
Bento Tile Bento25 Tile 4 - Personalized Recommendationsbento-tile-bento25-tile4Isolated personalized recommendations tile with scroll-triggered entrance motion.
Bento Tile Bento26 Tile 1 - Modular Block Layoutbento-tile-bento26-tile1Isolated modular block layout tile with animated count-up metrics.
Bento Tile Bento26 Tile 2 - Drag-and-Drop Stylingbento-tile-bento26-tile2Isolated drag-and-drop styling tile with animated count-up metrics.
Bento Tile Bento26 Tile 3 - Responsive Auto-Fitbento-tile-bento26-tile3Isolated responsive auto-fit tile with animated count-up metrics.
Bento Tile Bento26 Tile 4 - Smart Adaptive Sizingbento-tile-bento26-tile4Isolated smart adaptive sizing tile with scroll-triggered entrance motion.
Bento Tile Bento27 Tile 1 - Ultra-Visual Grid Systembento-tile-bento27-tile1Isolated ultra-visual grid system tile with scroll-triggered entrance motion.
Bento Tile Bento27 Tile 3 - High Conversion CTA Blocksbento-tile-bento27-tile3Isolated high conversion cta blocks tile with scroll-triggered entrance motion.
Bento Tile Bento28 Tile 1 - Performance Optimized Assetsbento-tile-bento28-tile1Isolated performance optimized assets tile with animated count-up metrics.
Bento Tile Bento28 Tile 2 - Real-Time Preview Editingbento-tile-bento28-tile2Isolated real-time preview editing tile with scroll-triggered entrance motion.
Bento Tile Bento28 Tile 3 - Multi-Content Attachment Supportbento-tile-bento28-tile3Isolated multi-content attachment support tile with scroll-triggered entrance motion.
Bento Tile Bento28 Tile 4 - Brand Adaptable Typographybento-tile-bento28-tile4Isolated brand adaptable typography tile with scroll-triggered entrance motion.
Bento Tile Bento29 Tile 1 - Modular grid-based UI blocksbento-tile-bento29-tile1Isolated modular grid-based ui blocks tile with scroll-triggered entrance motion.
Bento Tile Bento29 Tile 3 - Auto-responsive scaling screensbento-tile-bento29-tile3Isolated auto-responsive scaling screens tile with scroll-triggered entrance motion.
Bento Tile Bento29 Tile 4 - Pre-styled visual variants for fast setupbento-tile-bento29-tile4Isolated pre-styled visual variants for fast setup tile with scroll-triggered entrance motion.
Bento Tile Bento3 Tile 1 - Four-tile value proposition bento tile 1bento-tile-bento3-tile1Isolated four-tile value proposition bento tile 1 tile with animated count-up metrics.
Bento Tile Bento3 Tile 2 - Four-tile value proposition bento tile 2bento-tile-bento3-tile2Isolated four-tile value proposition bento tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento3 Tile 3 - Four-tile value proposition bento tile 3bento-tile-bento3-tile3Isolated four-tile value proposition bento tile 3 tile with framer-motion transitions.
Bento Tile Bento3 Tile 4 - Four-tile value proposition bento tile 4bento-tile-bento3-tile4Isolated four-tile value proposition bento tile 4 tile with looping beam lines along SVG paths.
Bento Tile Bento30 Tile 1 - Video consultationsbento-tile-bento30-tile1Isolated video consultations tile with animated count-up metrics.
Bento Tile Bento30 Tile 2 - Video consultationsbento-tile-bento30-tile2Isolated video consultations tile with framer-motion transitions.
Bento Tile Bento30 Tile 4 - Health monitoringbento-tile-bento30-tile4Isolated health monitoring tile with scroll-triggered entrance motion.
Bento Tile Bento30 Tile 5 - Healthcare bento with stat counters tile 5bento-tile-bento30-tile5Isolated healthcare bento with stat counters tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento31 Tile 1 - Appointment schedulingbento-tile-bento31-tile1Isolated appointment scheduling tile with scroll-triggered entrance motion.
Bento Tile Bento31 Tile 2 - Healthbento-tile-bento31-tile2Isolated health tile with scroll-triggered entrance motion.
Bento Tile Bento31 Tile 3 - Healthbento-tile-bento31-tile3Isolated health tile with scroll-triggered entrance motion.
Bento Tile Bento31 Tile 4 - Healthbento-tile-bento31-tile4Isolated health tile with scroll-triggered entrance motion.
Bento Tile Bento31 Tile 5 - Healthcare bento with report tiles tile 5bento-tile-bento31-tile5Isolated healthcare bento with report tiles tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento32 Tile 1 - Captionless product bento mosaic tile 1bento-tile-bento32-tile1Isolated captionless product bento mosaic tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento32 Tile 2 - Captionless product bento mosaic tile 2bento-tile-bento32-tile2Isolated captionless product bento mosaic tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento32 Tile 3 - Captionless product bento mosaic tile 3bento-tile-bento32-tile3Isolated captionless product bento mosaic tile 3 tile with animated count-up metrics.
Bento Tile Bento32 Tile 4 - Captionless product bento mosaic tile 4bento-tile-bento32-tile4Isolated captionless product bento mosaic tile 4 tile with framer-motion transitions.
Bento Tile Bento33 Tile 1 - Complex pricing and promo bento tile 1bento-tile-bento33-tile1Isolated complex pricing and promo bento tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento33 Tile 2 - Complex pricing and promo bento tile 2bento-tile-bento33-tile2Isolated complex pricing and promo bento tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento33 Tile 3 - Complex pricing and promo bento tile 3bento-tile-bento33-tile3Isolated complex pricing and promo bento tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento33 Tile 4 - Complex pricing and promo bento tile 4bento-tile-bento33-tile4Isolated complex pricing and promo bento tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento33 Tile 5 - Complex pricing and promo bento tile 5bento-tile-bento33-tile5Isolated complex pricing and promo bento tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento33 Tile 6 - Complex pricing and promo bento tile 6bento-tile-bento33-tile6Isolated complex pricing and promo bento tile 6 tile with scroll-triggered entrance motion.
Bento Tile Bento33 Tile 7 - Complex pricing and promo bento tile 7bento-tile-bento33-tile7Isolated complex pricing and promo bento tile 7 tile with animated count-up metrics.
Bento Tile Bento33 Tile 8 - Complex pricing and promo bento tile 8bento-tile-bento33-tile8Isolated complex pricing and promo bento tile 8 tile with scroll-triggered entrance motion.
Bento Tile Bento33 Tile 9 - Complex pricing and promo bento tile 9bento-tile-bento33-tile9Isolated complex pricing and promo bento tile 9 tile with scroll-triggered entrance motion.
Bento Tile Bento34 Tile 1 - Automated background checksbento-tile-bento34-tile1Isolated automated background checks tile with scroll-triggered entrance motion.
Bento Tile Bento34 Tile 2 - Voice & text forensicsbento-tile-bento34-tile2Isolated voice & text forensics tile with scroll-triggered entrance motion.
Bento Tile Bento34 Tile 3 - AI-Driven legal assistancebento-tile-bento34-tile3Isolated ai-driven legal assistance tile with framer-motion transitions.
Bento Tile Bento34 Tile 4 - AI-Driven legal assistancebento-tile-bento34-tile4Isolated ai-driven legal assistance tile with scroll-triggered entrance motion.
Bento Tile Bento34 Tile 5 - Cybercrime & fraud detectionbento-tile-bento34-tile5Isolated cybercrime & fraud detection tile with scroll-triggered entrance motion.
Bento Tile Bento34 Tile 6 - Investigation services bento collage tile 6bento-tile-bento34-tile6Isolated investigation services bento collage tile 6 tile with container-query typography scaling.
Bento Tile Bento34 Tile 7 - Investigation services bento collage tile 7bento-tile-bento34-tile7Isolated investigation services bento collage tile 7 tile with scroll-triggered entrance motion.
Bento Tile Bento35 Tile 1 - Color usebento-tile-bento35-tile1Isolated color use tile with scroll-triggered entrance motion.
Bento Tile Bento35 Tile 2 - Color usebento-tile-bento35-tile2Isolated color use tile with scroll-triggered entrance motion.
Bento Tile Bento35 Tile 4 - Color usebento-tile-bento35-tile4Isolated color use tile with scroll-triggered entrance motion.
Bento Tile Bento35 Tile 5 - Color usebento-tile-bento35-tile5Isolated color use tile with scroll-triggered entrance motion.
Bento Tile Bento35 Tile 6 - Color usebento-tile-bento35-tile6Isolated color use tile with scroll-triggered entrance motion.
Bento Tile Bento35 Tile 7 - Dark headphone product bento tile 7bento-tile-bento35-tile7Isolated dark headphone product bento tile 7 tile with scroll-triggered entrance motion.
Bento Tile Bento36 Tile 1 - Dark editorial product bento tile 1bento-tile-bento36-tile1Isolated dark editorial product bento tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento36 Tile 2 - Dark editorial product bento tile 2bento-tile-bento36-tile2Isolated dark editorial product bento tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento36 Tile 3 - Dark editorial product bento tile 3bento-tile-bento36-tile3Isolated dark editorial product bento tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento36 Tile 4 - Dark editorial product bento tile 4bento-tile-bento36-tile4Isolated dark editorial product bento tile 4 tile with container-query typography scaling.
Bento Tile Bento36 Tile 5 - Dark editorial product bento tile 5bento-tile-bento36-tile5Isolated dark editorial product bento tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento36 Tile 6 - Dark editorial product bento tile 6bento-tile-bento36-tile6Isolated dark editorial product bento tile 6 tile with scroll-triggered entrance motion.
Bento Tile Bento36 Tile 7 - Dark editorial product bento tile 7bento-tile-bento36-tile7Isolated dark editorial product bento tile 7 tile with scroll-triggered entrance motion.
Bento Tile Bento37 Tile 1 - Dark split showcase bento tile 1bento-tile-bento37-tile1Isolated dark split showcase bento tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento37 Tile 2 - Dark split showcase bento tile 2bento-tile-bento37-tile2Isolated dark split showcase bento tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento37 Tile 3 - Dark split showcase bento tile 3bento-tile-bento37-tile3Isolated dark split showcase bento tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento37 Tile 4 - Dark split showcase bento tile 4bento-tile-bento37-tile4Isolated dark split showcase bento tile 4 tile with background imagery.
Bento Tile Bento37 Tile 5 - Dark split showcase bento tile 5bento-tile-bento37-tile5Isolated dark split showcase bento tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento38 Tile 1 - Editorial fashion bento collage tile 1bento-tile-bento38-tile1Isolated editorial fashion bento collage tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento38 Tile 2 - Editorial fashion bento collage tile 2bento-tile-bento38-tile2Isolated editorial fashion bento collage tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento38 Tile 3 - Editorial fashion bento collage tile 3bento-tile-bento38-tile3Isolated editorial fashion bento collage tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento38 Tile 4 - Editorial fashion bento collage tile 4bento-tile-bento38-tile4Isolated editorial fashion bento collage tile 4 tile with background imagery.
Bento Tile Bento38 Tile 5 - Editorial fashion bento collage tile 5bento-tile-bento38-tile5Isolated editorial fashion bento collage tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento38 Tile 6 - Editorial fashion bento collage tile 6bento-tile-bento38-tile6Isolated editorial fashion bento collage tile 6 tile with scroll-triggered entrance motion.
Bento Tile Bento39 Tile 2 - Analytics dashboard bento with charts tile 2bento-tile-bento39-tile2Isolated analytics dashboard bento with charts tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento39 Tile 4 - Analytics dashboard bento with charts tile 4bento-tile-bento39-tile4Isolated analytics dashboard bento with charts tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento39 Tile 6 - Analytics dashboard bento with charts tile 6bento-tile-bento39-tile6Isolated analytics dashboard bento with charts tile 6 tile with animated count-up metrics.
Bento Tile Bento39 Tile 7 - Analytics dashboard bento with charts tile 7bento-tile-bento39-tile7Isolated analytics dashboard bento with charts tile 7 tile with animated count-up metrics.
Bento Tile Bento39 Tile 8 - Analytics dashboard bento with charts tile 8bento-tile-bento39-tile8Isolated analytics dashboard bento with charts tile 8 tile with scroll-triggered entrance motion.
Bento Tile Bento4 Tile 1 - Intelligent data analysisbento-tile-bento4-tile1Isolated intelligent data analysis tile with looping beam lines along SVG paths.
Bento Tile Bento4 Tile 2 - Smart decision recommendationsbento-tile-bento4-tile2Isolated smart decision recommendations tile with a scrubbing playhead across chart bars.
Bento Tile Bento40 Tile 1 - AI voice bento with keyboard and auth tile 1bento-tile-bento40-tile1Isolated ai voice bento with keyboard and auth tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento40 Tile 2 - AI voice bento with keyboard and auth tile 2bento-tile-bento40-tile2Isolated ai voice bento with keyboard and auth tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento40 Tile 3 - AI voice bento with keyboard and auth tile 3bento-tile-bento40-tile3Isolated ai voice bento with keyboard and auth tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento40 Tile 4 - AI voice bento with keyboard and auth tile 4bento-tile-bento40-tile4Isolated ai voice bento with keyboard and auth tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento40 Tile 5 - AI voice bento with keyboard and auth tile 5bento-tile-bento40-tile5Isolated ai voice bento with keyboard and auth tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento41 Tile 1 - Developer productivity bento with sidebar CTA tile 1bento-tile-bento41-tile1Isolated developer productivity bento with sidebar cta tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento41 Tile 2 - Developer productivity bento with sidebar CTA tile 2bento-tile-bento41-tile2Isolated developer productivity bento with sidebar cta tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento41 Tile 3 - Developer productivity bento with sidebar CTA tile 3bento-tile-bento41-tile3Isolated developer productivity bento with sidebar cta tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento41 Tile 4 - Developer productivity bento with sidebar CTA tile 4bento-tile-bento41-tile4Isolated developer productivity bento with sidebar cta tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento41 Tile 5 - Developer productivity bento with sidebar CTA tile 5bento-tile-bento41-tile5Isolated developer productivity bento with sidebar cta tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento42 Tile 1 - Task management feature bento grid tile 1bento-tile-bento42-tile1Isolated task management feature bento grid tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento42 Tile 2 - Task management feature bento grid tile 2bento-tile-bento42-tile2Isolated task management feature bento grid tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento42 Tile 3 - Task management feature bento grid tile 3bento-tile-bento42-tile3Isolated task management feature bento grid tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento42 Tile 4 - Task management feature bento grid tile 4bento-tile-bento42-tile4Isolated task management feature bento grid tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento43 Tile 1 - AI platform bento with integration hub tile 1bento-tile-bento43-tile1Isolated ai platform bento with integration hub tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento43 Tile 2 - AI platform bento with integration hub tile 2bento-tile-bento43-tile2Isolated ai platform bento with integration hub tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento43 Tile 3 - AI platform bento with integration hub tile 3bento-tile-bento43-tile3Isolated ai platform bento with integration hub tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento43 Tile 4 - AI platform bento with integration hub tile 4bento-tile-bento43-tile4Isolated ai platform bento with integration hub tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento44 Tile 1 - Mobile collaboration bento with world map tile 1bento-tile-bento44-tile1Isolated mobile collaboration bento with world map tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento44 Tile 2 - Labeled AI feature bento grid tile 2bento-tile-bento44-tile2Isolated labeled ai feature bento grid tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento44 Tile 3 - Mobile collaboration bento with world map tile 3bento-tile-bento44-tile3Isolated mobile collaboration bento with world map tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento44 Tile 4 - Mobile collaboration bento with world map tile 4bento-tile-bento44-tile4Isolated mobile collaboration bento with world map tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento45 Tile 1 - SaaS fintech bento with trading widget tile 1bento-tile-bento45-tile1Isolated saas fintech bento with trading widget tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento45 Tile 2 - SaaS fintech bento with trading widget tile 2bento-tile-bento45-tile2Isolated saas fintech bento with trading widget tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento45 Tile 3 - SaaS fintech bento with trading widget tile 3bento-tile-bento45-tile3Isolated saas fintech bento with trading widget tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento45 Tile 4 - SaaS fintech bento with trading widget tile 4bento-tile-bento45-tile4Isolated saas fintech bento with trading widget tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento45 Tile 5 - SaaS fintech bento with trading widget tile 5bento-tile-bento45-tile5Isolated saas fintech bento with trading widget tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento46 Tile 1 - AI chat and data pipeline bento tile 1bento-tile-bento46-tile1Isolated ai chat and data pipeline bento tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento46 Tile 2 - AI chat and data pipeline bento tile 2bento-tile-bento46-tile2Isolated ai chat and data pipeline bento tile 2 tile with framer-motion transitions.
Bento Tile Bento46 Tile 3 - AI chat and data pipeline bento tile 3bento-tile-bento46-tile3Isolated ai chat and data pipeline bento tile 3 tile with container-query typography scaling.
Bento Tile Bento46 Tile 4 - AI chat and data pipeline bento tile 4bento-tile-bento46-tile4Isolated ai chat and data pipeline bento tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento48 Tile 1 - Light feature bento with UI screenshots tile 1bento-tile-bento48-tile1Isolated light feature bento with ui screenshots tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento48 Tile 2 - Light feature bento with UI screenshots tile 2bento-tile-bento48-tile2Isolated light feature bento with ui screenshots tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento48 Tile 3 - Light feature bento with UI screenshots tile 3bento-tile-bento48-tile3Isolated light feature bento with ui screenshots tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento48 Tile 4 - Light feature bento with UI screenshots tile 4bento-tile-bento48-tile4Isolated light feature bento with ui screenshots tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento49 Tile 1 - AI analytics bento with radial chart tile 1bento-tile-bento49-tile1Isolated ai analytics bento with radial chart tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento49 Tile 2 - AI analytics bento with radial chart tile 2bento-tile-bento49-tile2Isolated ai analytics bento with radial chart tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento49 Tile 3 - AI analytics bento with radial chart tile 3bento-tile-bento49-tile3Isolated ai analytics bento with radial chart tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento5 Tile 1 - Healthcare feature bento grid tile 1bento-tile-bento5-tile1Isolated healthcare feature bento grid tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento5 Tile 2 - Healthcare feature bento grid tile 2bento-tile-bento5-tile2Isolated healthcare feature bento grid tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento5 Tile 3 - Healthcare feature bento grid tile 3bento-tile-bento5-tile3Isolated healthcare feature bento grid tile 3 tile with background imagery.
Bento Tile Bento5 Tile 4 - Healthcare feature bento grid tile 4bento-tile-bento5-tile4Isolated healthcare feature bento grid tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento5 Tile 5 - Healthcare feature bento grid tile 5bento-tile-bento5-tile5Isolated healthcare feature bento grid tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento50 Tile 1 - Asymmetric light marketing bento tile 1bento-tile-bento50-tile1Isolated asymmetric light marketing bento tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento50 Tile 2 - Asymmetric light marketing bento tile 2bento-tile-bento50-tile2Isolated asymmetric light marketing bento tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento50 Tile 3 - Asymmetric light marketing bento tile 3bento-tile-bento50-tile3Isolated asymmetric light marketing bento tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento50 Tile 4 - Asymmetric light marketing bento tile 4bento-tile-bento50-tile4Isolated asymmetric light marketing bento tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento51 Tile 1 - Six-card analytics feature bento tile 1bento-tile-bento51-tile1Isolated six-card analytics feature bento tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento51 Tile 2 - Six-card analytics feature bento tile 2bento-tile-bento51-tile2Isolated six-card analytics feature bento tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento51 Tile 3 - Six-card analytics feature bento tile 3bento-tile-bento51-tile3Isolated six-card analytics feature bento tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento51 Tile 4 - Six-card analytics feature bento tile 4bento-tile-bento51-tile4Isolated six-card analytics feature bento tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento51 Tile 5 - Six-card analytics feature bento tile 5bento-tile-bento51-tile5Isolated six-card analytics feature bento tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento51 Tile 6 - Six-card analytics feature bento tile 6bento-tile-bento51-tile6Isolated six-card analytics feature bento tile 6 tile with scroll-triggered entrance motion.
Bento Tile Bento52 Tile 1 - Compact dark feature bento tile 1bento-tile-bento52-tile1Isolated compact dark feature bento tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento52 Tile 2 - Compact dark feature bento tile 2bento-tile-bento52-tile2Isolated compact dark feature bento tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento52 Tile 3 - Compact dark feature bento tile 3bento-tile-bento52-tile3Isolated compact dark feature bento tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento52 Tile 4 - Compact dark feature bento tile 4bento-tile-bento52-tile4Isolated compact dark feature bento tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento52 Tile 5 - Compact dark feature bento tile 5bento-tile-bento52-tile5Isolated compact dark feature bento tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento53 Tile 1 - Web3 developer bento with marquees tile 1bento-tile-bento53-tile1Isolated web3 developer bento with marquees tile 1 tile with framer-motion transitions.
Bento Tile Bento53 Tile 2 - Web3 developer bento with marquees tile 2bento-tile-bento53-tile2Isolated web3 developer bento with marquees tile 2 tile with framer-motion transitions.
Bento Tile Bento53 Tile 3 - Web3 developer bento with marquees tile 3bento-tile-bento53-tile3Isolated web3 developer bento with marquees tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento53 Tile 4 - Web3 developer bento with marquees tile 4bento-tile-bento53-tile4Isolated web3 developer bento with marquees tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento53 Tile 5 - Web3 developer bento with marquees tile 5bento-tile-bento53-tile5Isolated web3 developer bento with marquees tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento54 Tile 1 - Enterprise finance bento with timeline tile 1bento-tile-bento54-tile1Isolated enterprise finance bento with timeline tile 1 tile with scroll-triggered entrance motion.
Bento Tile Bento54 Tile 2 - Enterprise finance bento with timeline tile 2bento-tile-bento54-tile2Isolated enterprise finance bento with timeline tile 2 tile with scroll-triggered entrance motion.
Bento Tile Bento54 Tile 3 - Enterprise finance bento with timeline tile 3bento-tile-bento54-tile3Isolated enterprise finance bento with timeline tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento54 Tile 4 - Enterprise finance bento with timeline tile 4bento-tile-bento54-tile4Isolated enterprise finance bento with timeline tile 4 tile with scroll-triggered entrance motion.
Bento Tile Bento54 Tile 5 - Enterprise finance bento with timeline tile 5bento-tile-bento54-tile5Isolated enterprise finance bento with timeline tile 5 tile with scroll-triggered entrance motion.
Bento Tile Bento6 Tile 1 - Scalable enterprise toolsbento-tile-bento6-tile1Isolated scalable enterprise tools tile with scroll-triggered entrance motion.
Bento Tile Bento6 Tile 2 - Real-time data analyticsbento-tile-bento6-tile2Isolated real-time data analytics tile with scroll-triggered entrance motion.
Bento Tile Bento6 Tile 3 - AI-driven business intelligencebento-tile-bento6-tile3Isolated ai-driven business intelligence tile with scroll-triggered entrance motion.
Bento Tile Bento6 Tile 4 - Financial and project managementbento-tile-bento6-tile4Isolated financial and project management tile with scroll-triggered entrance motion.
Bento Tile Bento7 Tile 1 - Build and documentbento-tile-bento7-tile1Isolated build and document tile with scroll-triggered entrance motion.
Bento Tile Bento7 Tile 2 - Build and documentbento-tile-bento7-tile2Isolated build and document tile with scroll-triggered entrance motion.
Bento Tile Bento7 Tile 3 - Light bento with AI chat and model picker tile 3bento-tile-bento7-tile3Isolated light bento with ai chat and model picker tile 3 tile with scroll-triggered entrance motion.
Bento Tile Bento8 Tile 1 - Build and documentbento-tile-bento8-tile1Isolated build and document tile with scroll-triggered entrance motion.
Bento Tile Bento8 Tile 3 - Decision Recommendationsbento-tile-bento8-tile3Isolated decision recommendations tile with animated count-up metrics.
Bento Tile Bento9 Tile 1 - Text-based chatbotbento-tile-bento9-tile1Isolated text-based chatbot tile with scroll-triggered entrance motion.
Bento Tile Bento9 Tile 2 - End-to-end encryptionbento-tile-bento9-tile2Isolated end-to-end encryption tile with animated count-up metrics.
Bento Tile Bento9 Tile 4 - Context-aware suggestionsbento-tile-bento9-tile4Isolated context-aware suggestions tile with scroll-triggered entrance motion.
Bento Tile Bento9 Tile 5 - Simple command processingbento-tile-bento9-tile5Isolated simple command processing tile with scroll-triggered entrance motion.
Bento 10 - Analytics bento with wave chart and layered cardsbento10Two-by-two feature bento with avatar goal card, animated timing bar chart, overlapping dashboard imagery, and a collaboration widget panel.
Bento 11 - Asymmetric six-column health tech bentobento11Five-tile bento on a six-column grid combining cover photography, animated bar charts, and compact UI widget illustrations with varied aspect ratios.
Bento 12 - Inverted caption bento with icon flow diagrambento12Two-by-two bento placing headings above each tile visual, with grid-background icon flows, document UI mocks, and branded illustration panels.
Bento 13 - Borderless eight-column mosaic with menu UIbento13Asymmetric eight-column bento with caption-below layout, mixing a document menu sidebar, wide dashboard panels, and compact icon illustrations on grid backgrounds.
Bento 14 - Dark voice AI bento with waveform animationbento14Four-tile dark bento for voice generation features with animated sound-wave fills, language selection UI, voice tuning controls, and instant generation preview.
Bento 15 - Dark voice studio bento with emotion controlsbento15Three-tile dark bento with emotion-based voice delivery UI, script-to-speech automation panel, and a full-width multi-format audio export preview.
Bento 16 - Dark voice platform bento with team workspacebento16Four-tile dark bento mixing two cover-image panels with script-enhancer and team-workspace UI mocks in an eight-column checkerboard grid.
Bento 17 - Dark bento with voice preview comparisonbento17Four-tile dark bento with a voice-preview image, brand-profile UI with count-up stats, multilingual model rows, and emotion tone picker controls.
Bento 18 - Light four-tile bento with mixed aspect ratiosbento18Two-column bento with caption-below tiles mixing scroll-reveal photography and one animated predictive-analytics UI panel in a wide panoramic row.
Bento 19 - Three-column masonry bento with integration pillsbento19Six-card masonry bento in three staggered columns with integration logo pills, animated charts, and compact AI feature UI illustrations in bordered cards.
Bento 2 - Team collaboration bento with animated statsbento2Asymmetric two-column bento with count-up income stats, bar chart SVG, network beam diagram, and staggered project cards.
Bento 20 - Hero split bento with recommendation engine featurebento20Three-tile bento leading with a split text-and-image hero card for recommendation intelligence, plus a wide data-analysis image and a budget-widget performance panel.
Bento 21 - Light health bento with animated tilesbento21Neutral five-tile bento with animated waveform panel, AI model marquee, three webp visuals, and caption rows about health monitoring and compliance.
Bento 22 - Dark analytics bento with photo tilesbento22Black five-tile bento with dashed borders, two cover-image headers, and three animated dashboard cells for predictive analytics, task management, and recommendations.
Bento 23 - Dark alternating bento with flipped captionsbento23Black four-tile two-by-two bento where two cards place copy above the visual and two place it below, pairing webp panels with AI workflow captions.
Bento 24 - Dark staggered two-column bentobento24Black four-tile bento in offset left and right stacks with alternating wide and tall aspect panels for sync, trends, decisions, and data visualization.
Bento 25 - Dark wide-narrow bento mosaicbento25Black four-tile bento on an eight-five column rhythm with wide automation and dashboard headers above webp panels plus narrower benchmarking cells.
Bento 26 - Light feature bento with icon captionsbento26White two-by-two bento with animated UI previews above icon-labeled headlines on modular layouts, drag-and-drop styling, responsive auto-fit, and adaptive sizing.
Bento 27 - Light feature bento with mixed caption orderbento27White four-tile bento alternating headline placement with animated previews for theme switching, grid alignment, micro-interactions, and CTA emphasis blocks.
Bento 28 - Light performance bento with icon rowsbento28White two-by-two bento pairing animated UI previews with icon headlines on optimized assets, real-time editing, multi-content attachments, and brand typography.
Bento 29 - Light asymmetric feature bento gridbento29White four-tile bento on a nine-seven column split with wide and narrow animated previews plus icon captions for modular grids, drag control, and responsive scaling.
Bento 3 - Four-tile value proposition bentobento3Two-column bento with count-up gauge, chart imagery, QR scanner animation, and hub network beams behind split headlines.
Bento 30 - Healthcare bento with stat countersbento30Muted healthcare bento stacking satisfaction percentage counters, framed UI panels, video consultation and health monitoring cards with HIPAA-focused copy.
Bento 31 - Healthcare bento with report tilesbento31Healora-themed bento mixing report generation and appointment scheduling cards, an indigo patient-stories panel with heart-rate animation, and timeline widgets.
Bento 32 - Captionless product bento mosaicbento32Four-tile visual-only bento with gradient app-download CTA, automated savings mockup, and two square product panels on mixed pastel tile backgrounds.
Bento 33 - Complex pricing and promo bentobento33Dense nine-cell bento on slate gray with upgrade discount pricing, animated barcode, mixed UI widgets, and a tall sidebar column of stacked panels.
Bento 34 - Investigation services bento collagebento34Seven-tile legal-tech bento with background-check and forensics headers, AI legal assistance cards, cybercrime detection visuals, and stacked evidence panels.
Bento 35 - Dark headphone product bentobento35Three-column dark bento for wireless audio with orange hero panels, lime waveform tiles, product photography, and a stacked color-swatch reference card.
Bento 36 - Dark editorial product bentobento36Multi-row dark bento with amber hero typography over product photography, plus a mosaic of smaller branded panels in mixed aspect ratios.
Bento 37 - Dark split showcase bentobento37Asymmetric dark bento with a tall left image column carrying outlined marquee text and a right stack of product photography and UI accent panels.
Bento 38 - Editorial fashion bento collagebento38Two-column dark bento with tall portrait tile, stacked FASHIONS typography, color bands, and scroll-animated fashion imagery.
Bento 39 - Analytics dashboard bento with chartsbento39Multi-row gray-background bento mixing QR imagery, revenue bar chart, candlestick animation, gradient ring stat, and discount barcode card.
Bento 4 - Dark analytics bento with playhead chartbento4Black-background two-by-two bento mixing beam network SVG, static imagery, and an orange playhead scrubbing a bar chart.
Bento 40 - AI voice bento with keyboard and authbento40Two-row black bento with voice feature cards, animated language keyboard, customization mockups, and fingerprint authentication panel.
Bento 41 - Developer productivity bento with sidebar CTAbento41Asymmetric black bento with productivity headline, product screenshot, automation workflow UI, social analytics chart, and right-column CTA panel.
Bento 42 - Task management feature bento gridbento42Four equal dark cards in a two-by-two grid, each pairing a feature headline with an animated product UI mockup for assignment, prioritization, progress, and cleanup.
Bento 43 - AI platform bento with integration hubbento43Asymmetric black bento with integration flow diagram, privacy messaging, counting performance stat, and floating globe illustration.
Bento 44 - Mobile collaboration bento with world mapbento44Three-row black bento with animated world map, collaboration card, integration icon row, and wide mobile mockup with CTA.
Bento 45 - SaaS fintech bento with trading widgetbento45Asymmetric black bento mixing design-process timeline, API documentation visuals, stat counters, and a buy-sell trading panel with CTA.
Bento 46 - AI chat and data pipeline bentobento46Two-column black bento with AI chat mockup, scrolling integration marquee, reporting screenshot, and animated data connection paths.
Bento 47 - Labeled AI feature bento gridbento47Multi-span dark bento where each card pairs a headline with dashboard mockups, share UI, integration diagrams, and collaboration visuals.
Bento 48 - Light feature bento with UI screenshotsbento48White-background two-by-two bento with layered dashboard images, voice assistant mockup, and animated certificate cards.
Bento 49 - AI analytics bento with radial chartbento49Wide hero card with recommendation engine and radial chart above a two-column row of bar dashboard and share timer widgets.
Bento 5 - Healthcare feature bento gridbento5Five-tile healthcare bento with animated health bars, scheduling imagery, interactive weight curve, wellness photo, and diagnostics visual.
Bento 50 - Asymmetric light marketing bentobento50Eight-column white bento mixing product screenshots, AI onboarding flow panels, and a gradient payment notification card.
Bento 51 - Six-card analytics feature bentobento51Three-column light bento with revenue chart, AI learning graph, skeleton editor, screenshot, document stack, and anomaly heatmap tiles.
Bento 52 - Compact dark feature bentobento52Tight two-row dark bento with voice waveform, performance chart, sales bars, auto-cycling progress tracker, and Kanban card stack.
Bento 53 - Web3 developer bento with marqueesbento53Dark bento with scrolling service pill marquees, team invitation network, Solidity code block, crypto token ring, and tag cloud.
Bento 54 - Enterprise finance bento with timelinebento54Four-column dark bento with newsletter counter, Gantt timeline, avatar collaboration rings, accounting panels, and animated world map.
Bento 6 - Dark enterprise bento with animated SVG tilesbento6Black-background six-column bento with four dashed-border tiles mixing animated SVG diagrams and scroll-reveal product imagery.
Bento 7 - Light bento with AI chat and model pickerbento7Neutral three-row bento pairing two feature cards with UI mini-mocks and a full-width model-selector panel with integration logos.
Bento 8 - Two-by-two bento with workflow and budget UIbento8Four-card bento alternating animated document-flow and budget widgets with two photographic image tiles and scroll-triggered scale animations.
Bento 9 - Dark chatbot bento with conversation tilesbento9Five-tile black bento for chatbot features with animated message bubbles, encryption UI, voice imagery, and context-aware suggestion chips.
Blog 1 - Latest posts grid with filtersblog1Large section heading, shadcn/ui Select filters, and a responsive grid of linked cards showing images, excerpts, and outline category badges.
Blog 11 - Blog posts with sticky introblog11Muted split layout with sticky intro column showing icon, Blog Posts heading, category links, and a two-column grid of tiles whose photos reveal on hover.
Blog 12 - Blog cards with read timesblog12Centered outline badge intro, three bordered article cards with media, excerpts, author avatars, read-time badges, and an outline view-all button.
Blog 13 - Article grid with category overlaysblog13Centered Articles header with view-all link and a three-column grid of posts showing imagery, floating category badges, titles, calendar dates, and read-more links.
Blog 14 - Featured article with popular postsblog14Centered section heading and subtitle, two-column featured article with media and badge, then a Popular Posts row of three compact stories with categories.
Blog 16 - Blog row with team branding and category pillsblog16Blog list rows with team logo and name, date, linked headline, pill-shaped category links, Separator dividers, and an outline icon button on large screens.
Blog 17 - Blog listing with sidebar category filtersblog17Centered header with Badge and intro copy, then ghost Buttons filter categories beside a stacked feed of linked articles with Separator breaks between items.
Blog 19 - Related articles grid with outline actionblog19Related articles heading beside a small outline Button, above a responsive grid of linked article stacks showing category, title, summary, and date.
Blog 21 - Blog carousel with card slides and controlsblog21Horizontal carousel of bordered image cards with topic and date badges, prev or next icon Buttons, gradient section backdrop, and a centered outline View All Articles control.
Blog 22 - Featured article with secondary topic stripblog22Light section with heading row, outline Read More button, large featured image and headline with Avatar author row, plus a second column of square thumbnails beside topic blurbs.
Blog 23 - Stacked blog cards with centered headerblog23Narrow centered column with Badge, heading, description, then full-width stacked posts as image-led Cards with label, author, date, title link, summary, and outline view-all Button.
Blog 24 - Horizontal blog cards with thumbnailsblog24Centered Badge-led header over a max-width feed where each post Card pairs a fixed-width thumbnail link with label, author, date, title, summary, and Read more row.
Blog 26 - Magazine blog split with oversized wordmarkblog26Large Blog wordmark beside tagline and bordered author chip, then two columns with AspectRatio image and lead story stack opposite a Latest list of linked titles with author and date rows.
Blog 27 - Filtered blog grid with spotlight bandblog27Top band with dotted muted background, Breadcrumb, headline copy, and spotlight Card, then All Blogs with horizontal RadioGroup filters, three-column Card grid, and Load More pagination.
Blog 28 - Tech blog grid with expanded lead tileblog28Centered page title above a responsive grid where the first article spans extra rows and columns with image, metadata row, headline, and excerpt while smaller tiles show image, metadata, and title only.
Blog 29 - Blog list with tags and link controlblog29A blog index with a page title, stacked post rows showing date, title, excerpt, tag badges, and a circular arrow button, with separators between entries.
Blog 3 - Blog grid with labeled postsblog3A blog section with a page header and a responsive grid of labeled posts with images, summaries, and author lines.
Blog 30 - Blog rows with square art and read linkblog30A blog section with a bold page heading and repeating two-column rows pairing a square image with title, uppercase date, excerpt, and a ghost Read control with arrow.
Blog 31 - Animated blog grid with featured postblog31This component dynamically displays a collection of blog posts with interactive animations and includes a prominent header for an engaging introduction. It allows users to explore various blog entries, each with an image, title, description, and optional timestamp, enhancing user interaction and ease of access to content.
Blog 32 - Two-column blog card gridblog32A blog listing with a section heading and responsive two-column grid of linked posts with images, category labels, and publish dates.
Blog 33 - Compact four-column blog cardsblog33A centered blog grid of eight compact cards in four columns, each with a category badge, rounded thumbnail, title, summary, and read time.
Blog 34 - Four-column bordered blog cardsblog34A centered heading above a four-column grid of bordered cards with rounded thumbnails, category badges, author lines, and read links.
Blog 35 - Alternating blog rows with dividersblog35Centered section intro over full-width rows that alternate image-left and image-right layouts, separated by horizontal dividers with badge metadata and read links.
Blog 36 - Blog rows with metadata and thumbnailsblog36Badge-led intro above a feed where each row pairs metadata, copy, a square thumbnail, and a continue-reading link in a horizontal layout.
Blog 37 - Filtered blog rows with category sidebarblog37Two-column split with sticky category buttons in a left sidebar and a right feed of horizontal thumbnail rows that update when visitors change the active filter.
Blog 38 - Featured hero with three cardsblog38Section heading with outline action, split featured story with wide image and copy, then a three-column row of linked cards with category badges and metadata.
Blog 39 - Magazine layout with mini post stackblog39Uppercase section label above a two-column magazine split with a large left feature and a right stack of thumbnail mini posts separated by dividers.
Blog 4 - Blog grid with avatars and mobile view-allblog4A blog grid with section heading, intro line, card links showing images, category badges, author avatars, and a full-width view-all button on small screens only.
Blog 40 - Single featured blog post rowblog40Featured article in a two-column row with cover image beside category badge, headline, excerpt, author metadata, and read link inside one linked bordered card.
Blog 41 - Three-card horizontal blog carouselblog41Section heading with left/right arrow controls above a horizontal Shadcn UI Carousel that shows three bordered blog cards at a time on desktop.
Blog 42 - Full-bleed blog carousel with dot indicatorsblog42Section intro in a container above a full-bleed horizontal carousel of bordered story cards with cover image, category badge, headline, excerpt, date, and clickable dot pagination.
Blog 43 - Split blog section with side carouselblog43Two-column layout with sticky intro copy, outline tagline, primary CTA, arrow controls on the left, and a linked blog card carousel on the right.
Blog 44 - Timeline blog feed with date markersblog44Vertical timeline feed with a left rail, category labels, linked titles, and excerpt lines for each post.
Blog 45 - Minimal text-only blog indexblog45Text-only blog index with bordered row dividers, right-aligned dates, and linked titles that underline on hover.
Blog 46 - Newsletter header with photo gridblog46Newsletter signup header with email field and subscribe button above a two-column grid of linked photo cards with category, date, title, and excerpt.
Blog 47 - Three-column team blog cardsblog47Section label, heading, and all-posts link above a three-column grid of linked cards with cover images, categories, excerpts, dates, and read times.
Blog 48 - Divided latest-articles listblog48Uppercase label and heading above a stacked list of linked posts with category, title, read time, date, and a trailing arrow.
Blog 49 - Featured post with stacked side cardsblog49Heading above a wide featured article card beside two stacked side cards, each with cover image, category, title, date, and read time.
Blog 5 - Large blog grid with nine postsblog5A blog grid with the same card pattern as compact listings but mapping many posts, each with cover, badge, title, summary, avatar byline, and a mobile-only view-all button.
Blog 50 - Magazine bento with mixed card spansblog50Magazine heading above a three-column bento of large photo cards and compact text cards with category badges, dates, and hover arrows.
Blog 51 - Filterable article card gridblog51Category filter buttons above a three-column grid of photo cards with excerpts, dates, and read times, plus an empty state and all-articles link.
Blog 52 - Editorial hero with compact post gridblog52Wide featured story with author byline and read time above a four-column grid of compact photo cards with category, title, date, and read time.
Blog 53 - Muted featured story with three cardsblog53Muted-background section with a wide featured article and a three-column row of supporting photo cards, plus an all-posts link.
Blog 54 - Two-column cards with author bylinesblog54Two-column grid of linked article cards with cover images, excerpts, author avatars with roles, and read times.
Blog 55 - Alternating image and copy rowsblog55Divided two-column rows that alternate cover image side, with category, title, excerpt, date, read time, and a read link.
Blog 56 - Newsletter panel with latest postsblog56Two-column layout with an email subscribe card beside a divided list of latest posts showing category, title, read time, and date.
Blog 57 - Year-grouped writing archiveblog57Archive heading with article counts grouped by year, each year listing linked titles, categories, short dates, and a trailing arrow.
Blog 6 - Blog grid with byline-first cardsblog6A blog grid with page title, subtitle, card links that lead with author and date, then title and summary, plus a mobile-only view-all button.
Blog 60 - Photo cards with hover overlay actionsblog60Three-column photo cards with a category overlay, hover arrow, excerpt, author name, read time, and date.
Blog 62 - Split featured story with bylineblog62Two-column featured story with a cover image and category badge beside a long title, two supporting paragraphs, author byline, and read button.
Blog 63 - Resource cards for guides videos and docsblog63Three-column resource grid with type chips, titles, descriptions, author avatars, and read times, plus a browse-all action.
Blog 67 - Featured split with supporting gridblog67Featured split story with cover, badge, excerpt, author, and read action above a four-column grid of supporting posts with authors.
Blog 7 - Centered blog cards with read-more linksblog7A centered blog section with secondary badge, large heading, supporting copy, and a responsive grid of image-top cards with linked titles, summaries, and read-more rows.
Blog 8 - Offset blog rows with tagsblog8A blog section with centered heading and description, then wide stacked rows pairing uppercase tag lines and copy with a bordered image, each with read-more links.
Blogpost 1 - Centered article with alert and tableblogpost1A single-post layout with centered title, subtitle, author row with avatar and site link, hero media, and prose body including headings, alert, table, and figures.
Blogpost 10 - Narrow article with reading progress barblogpost10A capped-width reading column with a fixed top progress indicator tied to scroll position, category label, and compact prose sections.
Blogpost 11 - Split hero with quote pull blockblogpost11A two-column blog hero pairing a full-height image panel with title, author row, separator, and a bordered pull-quote figure without motion effects.
Blogpost 12 - Centered minimal article with drop capblogpost12A centered title band above a capped prose column where the first paragraph opens with a large decorative initial letter and short section headings.
Blogpost 13 - Two-column article with sticky related linksblogpost13A wide article column beside a sticky aside listing categorized related reading links with hover states and external arrow icons.
Blogpost 2 - Article with sticky sidebarblogpost2A two-column blog article with a sticky narrow column for back navigation, display title, and avatar byline beside a main column with hero image and full prose.
Blogpost 3 - Article layout with sticky nav and promo columnblogpost3A long-form article block with a centered masthead, main column with prose sections, alerts and tables, sticky in-page navigation, and a bordered call-to-action aside on large screens.
Blogpost 4 - Article with breadcrumbs, share rail, and back to topblogpost4A blog article with breadcrumbs, intro blurb, sectioned prose with alerts and tables, sticky section list, circular social share buttons, and a back-to-top control.
Blogpost 5 - Article with bold headline and offset section railblogpost5A blog post layout with breadcrumbs, oversized headline, hero image, sectioned body with alerts and tables, and a narrow rail for on-page links and share buttons.
Blogpost 6 - Article with chapter list and patterned heroblogpost6A blog article with dotted hero background, centered title and share row, sticky chapter list, long-form prose with images, and repeated author card.
Blogpost 7 - Blog post layout with animated headerblogpost7This component displays a blog post layout with animated transitions for various elements such as the title, author information, and descriptions. It features an image, a publication date, content descriptions, and an author's avatar with details, making it suitable for showcasing articles or stories.
Blogpost 8 - Article with sidebar table of contentsblogpost8A centered article header with hero image, prose body, and a sticky right sidebar listing numbered section links with scroll-aware active states.
Blogpost 9 - Article with author bio and share rowblogpost9A single-column article with read time and date, hero image, prose sections, a labeled share button row, and a bordered author biography card at the bottom.
Book A Demo 1 - Demo booking form with benefits and logosbook-a-demo1This component is designed to facilitate user engagement by providing a form for booking a demo, along with showcasing key benefits and a carousel of company logos. It features input fields for user information and preferences, a select dropdown for source discovery, and incorporates motion effects for enhanced visual presentation.
Book A Demo 2 - Demo booking with animated testimonialsbook-a-demo2This component is a demonstration booking block that includes a contact form, a section for animated testimonials, and a footer highlighting trusted partners or clients. The contact form allows users to enter personal details and company information, while the testimonials section uses animations to display user feedback from various organizations.
Book A Demo 3 - Demo booking form with testimonial cardsbook-a-demo3The component combines a demo booking form with testimonial display functionality, aimed at facilitating user interaction through form inputs such as name, email, location, and more. It features customizable properties for headings, descriptions, and testimonials, making it suitable for user feedback and engagement with multiple selection options.
Border Button Basic - With animated borderborder-button-border-button-basicButton with animated border highlight effect.
Border Button Corner 1 - Corner Lborder-button-border-button-corner-1Classic L-shaped bracket on each corner.
Border Button Corner 2 - Corner Plusborder-button-border-button-corner-2Plus symbol centered in each corner accent.
Border Button Corner 3 - Corner Squareborder-button-border-button-corner-3Small square frame inset in each corner.
Border Button Corner 4 - Corner Doubleborder-button-border-button-corner-4Parallel double-line L brackets anchored on the corner, extending outward.
Border Button Corner 5 - Corner Dotborder-button-border-button-corner-5Filled dot centered on the corner with short arms extending outward.
Border Button Moving 1 - Moving Spinborder-button-border-button-moving-1Full rainbow conic gradient rotating continuously around the button border.
Border Button Moving 10 - Moving Pingborder-button-border-button-moving-10Expanding ripple rings pulsing outward from the border.
Border Button Moving 11 - Moving Dual Beamborder-button-border-button-moving-11Two gradient beams chasing opposite sides.
Border Button Moving 12 - Moving Waveborder-button-border-button-moving-12Color wave rotating through the border gradient.
Border Button Moving 2 - Moving Beamborder-button-border-button-moving-2A single bright gradient beam chasing quickly around the border.
Border Button Moving 3 - Moving Pulseborder-button-border-button-moving-3Gradient border ring that breathes with a pulsing scale and opacity.
Border Button Moving 4 - Moving Shimmerborder-button-border-button-moving-4Diagonal light sweep sliding across the border surface.
Border Button Moving 5 - Moving Dashborder-button-border-button-moving-5Gradient dashed stroke marching continuously around the perimeter.
Border Button Moving 6 - Moving Hover Spinborder-button-border-button-moving-6Static muted border at rest; full spin animation activates on hover.
Border Button Moving 7 - Moving Reverseborder-button-border-button-moving-7Counter-clockwise rotating gradient border.
Border Button Moving 8 - Moving Meteorborder-button-border-button-moving-8Wide comet tail sweeping slowly around the border.
Border Button Moving 9 - Moving Glowborder-button-border-button-moving-9Soft blurred gradient halo breathing around the edge.
Border Button Trace 1 - Trace Drawborder-button-border-button-trace-1TraceButton with full SVG border draw on hover — draw effect.
Border Button Trace 2 - Trace Loopborder-button-border-button-trace-2TraceButton with SVG border that draws then keeps marching on hover — loop effect.
Border Button Trace 3 - Trace Dualborder-button-border-button-trace-3TraceButton with two SVG strokes meeting from opposite corners on hover — dual effect.
Border Button Trace 4 - Trace Dashborder-button-border-button-trace-4TraceButton with dashed SVG border draw on hover — dash effect.
Border Button Trace 5 - Trace Glowborder-button-border-button-trace-5TraceButton with blurred SVG border glow on draw hover — glow effect.
Border Button Trace 6 - Trace Partialborder-button-border-button-trace-6TraceButton with top and right SVG border edges drawing on hover — partial effect.
Breadcrumb Home Icon 1 - Breadcrumb with Ellipsisbreadcrumb-breadcrumb-home-icon-1Breadcrumb with home icon and ellipsis for collapsed items.
Breadcrumb Home Icon 2 - Breadcrumb with Dropdownbreadcrumb-breadcrumb-home-icon-2Breadcrumb with home icon and dropdown menu.
Breadcrumb Home Icon 3 - Breadcrumb with Iconsbreadcrumb-breadcrumb-home-icon-3Breadcrumb with home icon and icons for each item.
Breadcrumb Home Icon 4 - Breadcrumb with Borderbreadcrumb-breadcrumb-home-icon-4Breadcrumb with home icon wrapped in bordered container.
Breadcrumb Home Icon 5 - Breadcrumb with Bullet Separatorbreadcrumb-breadcrumb-home-icon-5Breadcrumb with home icon and bullet separators.
Breadcrumb Home Icon 6 - Breadcrumb with Slash Separatorbreadcrumb-breadcrumb-home-icon-6Breadcrumb with home icon and slash separators.
Breadcrumb Home Icon 7 - Breadcrumb with Selectbreadcrumb-breadcrumb-home-icon-7Breadcrumb with home icon and select dropdown.
Breadcrumb Standard 1 - Breadcrumb with Ellipsisbreadcrumb-breadcrumb-standard-1Breadcrumb navigation with ellipsis for collapsed items.
Breadcrumb Standard 2 - Breadcrumb with Dropdownbreadcrumb-breadcrumb-standard-2Breadcrumb with dropdown menu for intermediate items.
Breadcrumb Standard 3 - Breadcrumb with Iconsbreadcrumb-breadcrumb-standard-3Breadcrumb with icons next to each navigation item.
Breadcrumb Standard 4 - Breadcrumb with Borderbreadcrumb-breadcrumb-standard-4Breadcrumb wrapped in bordered container.
Breadcrumb Standard 5 - Breadcrumb with Bullet Separatorbreadcrumb-breadcrumb-standard-5Breadcrumb with bullet point separators.
Breadcrumb Standard 6 - Breadcrumb with Slash Separatorbreadcrumb-breadcrumb-standard-6Breadcrumb with slash icon separators.
Breadcrumb Standard 7 - Breadcrumb with Selectbreadcrumb-breadcrumb-standard-7Breadcrumb with select dropdown for navigation.
Button Async 1 - Default asyncbutton-button-async-1Button with loading spinner that transitions to a success checkmark.
Button Async 2 - Async with errorbutton-button-async-2Secondary async button that shows an error state with X icon after failure.
Button Async 3 - Async with progressbutton-button-async-3Async button with a determinate progress bar that fills during loading.
Button Async 4 - Async with iconbutton-button-async-4Async button with a leading icon that swaps to spinner then success.
Button Async 5 - Outline asyncbutton-button-async-5Outline variant async button with loading and success feedback.
Button Destructive 1 - Destructive button with textbutton-button-destructive-1Destructive variant button for dangerous actions.
Button Destructive 2 - Destructive button with left iconbutton-button-destructive-2Destructive button with leading icon.
Button Destructive 3 - Destructive button with right iconbutton-button-destructive-3Destructive button with trailing icon.
Button Destructive 4 - Destructive button roundedbutton-button-destructive-4Destructive button with rounded-full corners.
Button Destructive 5 - Destructive button loadingbutton-button-destructive-5Destructive button with loading spinner and disabled state.
Button Destructive 6 - Destructive button with countbutton-button-destructive-6Destructive button with count badge indicator.
Button Destructive 7 - Destructive button with kbdbutton-button-destructive-7Destructive button with keyboard shortcut indicator.
Button Ghost 1 - Ghost button with textbutton-button-ghost-1Ghost variant button with text label.
Button Ghost 2 - Ghost button with left iconbutton-button-ghost-2Ghost button with leading icon.
Button Ghost 3 - Ghost button with right iconbutton-button-ghost-3Ghost button with trailing icon.
Button Ghost 4 - Ghost button roundedbutton-button-ghost-4Ghost button with rounded-full styling.
Button Ghost 5 - Ghost button loadingbutton-button-ghost-5Ghost button with loading spinner and disabled state.
Button Ghost 6 - Ghost button with countbutton-button-ghost-6Ghost button with count badge indicator.
Button Ghost 7 - Ghost button with kbdbutton-button-ghost-7Ghost button with keyboard shortcut indicator.
Button Glow 1 - Glow primarybutton-button-glow-1Button with an ambient glow shadow that intensifies on hover.
Button Glow 2 - Glow outlinebutton-button-glow-2Outline button with a subtle glow that appears on hover.
Button Glow 3 - Glow secondarybutton-button-glow-3Secondary variant button with a subtle ambient glow on hover.
Button Glow Aurora 1 - Aurora primarybutton-button-glow-aurora-1Button with a flowing multi-color aurora gradient background.
Button Glow Aurora 2 - Aurora outlinebutton-button-glow-aurora-2Outline button with an animated aurora gradient border.
Button Glow Aurora 4 - Aurora secondarybutton-button-glow-aurora-4AuroraButton with secondary variant.
Button Glow Gleam 1 - Gleam primarybutton-button-glow-gleam-1Button with a fast, narrow light gleam that sweeps across periodically.
Button Glow Gleam 2 - Gleam secondarybutton-button-glow-gleam-2Secondary variant with a bright periodic gleam sweep.
Button Glow Gleam 3 - Gleam outlinebutton-button-glow-gleam-3GleamButton with outline variant.
Button Glow Pinlight 1 - Pinlight primarybutton-button-glow-pinlight-1Button with a radial pinlight that follows the cursor on hover.
Button Glow Pinlight 2 - Pinlight outlinebutton-button-glow-pinlight-2Outline variant with cursor-following radial pinlight on hover.
Button Glow Pinlight 4 - Pinlight secondarybutton-button-glow-pinlight-4PinlightButton with secondary variant.
Button Glow Shimmer 1 - Shimmer primarybutton-button-glow-shimmer-1Button with a continuous shimmer sweep animation across its surface.
Button Glow Shimmer 2 - Shimmer secondarybutton-button-glow-shimmer-2Secondary variant shimmer button with a neutral rotating border glow.
Button Glow Shimmer 3 - Shimmer outlinebutton-button-glow-shimmer-3Outline variant shimmer button with an indigo rotating border glow.
Button Glow Shine 1 - Shine primarybutton-button-glow-shine-1Button with a diagonal light band that sweeps across the surface.
Button Glow Shine 2 - Shine secondarybutton-button-glow-shine-2Secondary variant with a bright diagonal shine sweep.
Button Glow Shine 3 - Shine outlinebutton-button-glow-shine-3Outline variant with a diagonal light band sweep.
Button Icon Destructive 1 - Destructive icon buttonbutton-button-icon-destructive-1Destructive icon-only button with aria-label.
Button Icon Destructive 2 - Destructive rounded icon buttonbutton-button-icon-destructive-2Destructive icon button with rounded-full styling.
Button Icon Destructive 3 - Destructive loading icon buttonbutton-button-icon-destructive-3Destructive icon button with loading spinner and disabled state.
Button Icon Destructive 4 - Destructive disabled icon buttonbutton-button-icon-destructive-4Disabled destructive icon button.
Button Icon Destructive 5 - Destructive icon button with countbutton-button-icon-destructive-5Destructive icon button with notification count badge.
Button Icon Ghost 1 - Ghost icon buttonbutton-button-icon-ghost-1Ghost icon-only button with aria-label.
Button Icon Ghost 2 - Ghost rounded icon buttonbutton-button-icon-ghost-2Ghost icon button with rounded-full styling.
Button Icon Ghost 3 - Ghost loading icon buttonbutton-button-icon-ghost-3Ghost icon button with loading spinner and disabled state.
Button Icon Ghost 4 - Ghost disabled icon buttonbutton-button-icon-ghost-4Disabled ghost icon button.
Button Icon Ghost 5 - Ghost icon button with countbutton-button-icon-ghost-5Ghost icon button with notification count badge.
Button Icon Outline 1 - Outline icon buttonbutton-button-icon-outline-1Outline icon-only button with aria-label.
Button Icon Outline 2 - Outline rounded icon buttonbutton-button-icon-outline-2Outline icon button with rounded-full styling.
Button Icon Outline 3 - Outline loading icon buttonbutton-button-icon-outline-3Outline icon button with loading spinner and disabled state.
Button Icon Outline 4 - Outline disabled icon buttonbutton-button-icon-outline-4Disabled outline icon button.
Button Icon Outline 5 - Outline icon button with countbutton-button-icon-outline-5Outline icon button with notification count badge.
Button Icon Secondary 1 - Secondary icon buttonbutton-button-icon-secondary-1Secondary icon-only button with aria-label.
Button Icon Secondary 2 - Secondary rounded icon buttonbutton-button-icon-secondary-2Secondary icon button with rounded-full styling.
Button Icon Secondary 3 - Secondary loading icon buttonbutton-button-icon-secondary-3Secondary icon button with loading spinner and disabled state.
Button Icon Secondary 4 - Secondary disabled icon buttonbutton-button-icon-secondary-4Disabled secondary icon button.
Button Icon Secondary 5 - Secondary icon button with countbutton-button-icon-secondary-5Secondary icon button with notification count badge.
Button Icon Sizes 1 - Outline icon button sizesbutton-button-icon-sizes-1Outline icon buttons at extra-small, small, default, and large icon sizes.
Button Icon Standard 1 - Default icon buttonbutton-button-icon-standard-1Default icon-only button with aria-label.
Button Icon Standard 2 - Default rounded icon buttonbutton-button-icon-standard-2Default icon button with rounded-full styling.
Button Icon Standard 3 - Default loading icon buttonbutton-button-icon-standard-3Default icon button with loading spinner and disabled state.
Button Icon Standard 4 - Default disabled icon buttonbutton-button-icon-standard-4Disabled default icon button.
Button Icon Standard 5 - Default icon button with countbutton-button-icon-standard-5Default icon button with notification count badge.
Button Link 1 - Link button with textbutton-button-link-1Link variant button styled as text link.
Button Link 2 - Link button with left iconbutton-button-link-2Link button with leading icon.
Button Link 3 - Link button with right iconbutton-button-link-3Link button with trailing icon.
Button Link 4 - Link button roundedbutton-button-link-4Link button with rounded-full corners.
Button Link 5 - Link button loadingbutton-button-link-5Link button with loading spinner and disabled state.
Button Link 6 - Link button with countbutton-button-link-6Link button with count badge indicator.
Button Link 7 - Link button with kbdbutton-button-link-7Link button with keyboard shortcut indicator.
Button Morph Expand 1 - Default expand buttonbutton-button-morph-expand-1Icon-only button that expands to a pill with label on hover.
Button Morph Expand 2 - Outline expand buttonbutton-button-morph-expand-2Outline expand button that reveals label on hover from icon-only state.
Button Morph Fold 1 - Default fold buttonbutton-button-morph-fold-1Button with a fold reveal hover effect and inverted text color.
Button Morph Fold 2 - Outline fold buttonbutton-button-morph-fold-2Outline variant with fold hover reveal on a neutral background.
Button Morph Fold 3 - Ghost fold buttonbutton-button-morph-fold-3Ghost variant with subtle accent fold on hover.
Button Morph Morph 1 - Default morph buttonbutton-button-morph-morph-1Button that morphs to a circular spinner while loading.
Button Morph Morph 2 - Secondary morph buttonbutton-button-morph-morph-2Secondary variant morph button with icon and async loading state.
Button Outline 1 - Outline button with textbutton-button-outline-1Outline variant button with text label.
Button Outline 2 - Outline button with left iconbutton-button-outline-2Outline button with leading icon.
Button Outline 3 - Outline button with right iconbutton-button-outline-3Outline button with trailing icon.
Button Outline 4 - Outline button roundedbutton-button-outline-4Outline button with rounded-full corners.
Button Outline 5 - Outline button loadingbutton-button-outline-5Outline button with loading spinner and disabled state.
Button Outline 6 - Outline button with countbutton-button-outline-6Outline button with count badge indicator.
Button Outline 7 - Outline button with kbdbutton-button-outline-7Outline button with keyboard shortcut indicator.
Button Secondary 1 - Secondary button with textbutton-button-secondary-1Secondary variant button with text label.
Button Secondary 2 - Secondary button with left iconbutton-button-secondary-2Secondary button with leading icon.
Button Secondary 3 - Secondary button with right iconbutton-button-secondary-3Secondary button with trailing icon.
Button Secondary 4 - Secondary button roundedbutton-button-secondary-4Secondary button with rounded-full corners.
Button Secondary 5 - Secondary button loadingbutton-button-secondary-5Secondary button with loading spinner and disabled state.
Button Secondary 6 - Secondary button with countbutton-button-secondary-6Secondary button with count badge indicator.
Button Secondary 7 - Secondary button with kbdbutton-button-secondary-7Secondary button with keyboard shortcut indicator.
Button Sizes 1 - Outline button text sizesbutton-button-sizes-1Outline buttons at extra-small, small, default, and large text sizes.
Button Sizes 2 - Default button text sizesbutton-button-sizes-2Default variant buttons at xs, sm, default, and lg sizes.
Button Sizes 3 - Ghost button text sizesbutton-button-sizes-3Ghost buttons at xs, sm, default, and lg sizes.
Button Sizes 4 - Destructive button text sizesbutton-button-sizes-4Destructive buttons at xs, sm, default, and lg sizes.
Button Standard 1 - Default button with textbutton-button-standard-1Default button with text label.
Button Standard 2 - Default button with left iconbutton-button-standard-2Default button with leading icon.
Button Standard 3 - Default button with right iconbutton-button-standard-3Default button with trailing icon.
Button Standard 4 - Default button roundedbutton-button-standard-4Default button with rounded-full corners.
Button Standard 5 - Default button loadingbutton-button-standard-5Default button with loading spinner and disabled state.
Button Standard 6 - Default button with countbutton-button-standard-6Default button with count badge indicator.
Button Standard 7 - Default button with kbdbutton-button-standard-7Default button with keyboard shortcut indicator.
Button Text Effect Arrow 1 - Arrow shift primarybutton-button-text-effect-arrow-1Primary button with a trailing arrow that shifts right on hover.
Button Text Effect Arrow 2 - Arrow shift outlinebutton-button-text-effect-arrow-2Outline button with a trailing arrow that shifts right on hover.
Button Text Effect Arrow 3 - Arrow shift secondarybutton-button-text-effect-arrow-3Secondary button with a trailing arrow that shifts right on hover.
Button Text Effect Slide Left 1 - Slide left primarybutton-button-text-effect-slide-left-1Primary slide left button with hover text swap.
Button Text Effect Slide Left 2 - Slide left outlinebutton-button-text-effect-slide-left-2Outline slide left button with hover text swap.
Button Text Effect Slide Left 3 - Slide left secondarybutton-button-text-effect-slide-left-3Secondary slide left button with hover text swap.
Button Text Effect Slide Right 1 - Slide right primarybutton-button-text-effect-slide-right-1Primary slide right button with hover text swap.
Button Text Effect Slide Right 2 - Slide right outlinebutton-button-text-effect-slide-right-2Outline slide right button with hover text swap.
Button Text Effect Slide Right 3 - Slide right secondarybutton-button-text-effect-slide-right-3Secondary slide right button with hover text swap.
Button Text Effect Slide Up 1 - Slide up primarybutton-button-text-effect-slide-up-1Primary slide up button with hover text swap.
Button Text Effect Slide Up 2 - Slide up outlinebutton-button-text-effect-slide-up-2Outline slide up button with hover text swap.
Button Text Effect Slide Up 3 - Slide up secondarybutton-button-text-effect-slide-up-3Secondary slide up button with hover text swap.
Button Text Marquee 1 - Button Marquee Primarybutton-button-text-marquee-1Scrolling marquee text inside button — default variant, plays on hover.
Button Text Marquee 2 - Button Marquee Outlinebutton-button-text-marquee-2Scrolling marquee text inside button — outline variant, plays on hover.
Button Text Marquee 3 - Button Marquee Secondarybutton-button-text-marquee-3Scrolling marquee text inside button — secondary variant, plays on hover.
Button Text Marquee 4 - Button Marquee Primary Autobutton-button-text-marquee-4Scrolling marquee text inside button — default variant, auto-play loop.
Button Text Marquee 5 - Button Marquee Outline Autobutton-button-text-marquee-5Scrolling marquee text inside button — outline variant, auto-play loop.
Button Text Marquee 6 - Button Marquee Secondary Autobutton-button-text-marquee-6Scrolling marquee text inside button — secondary variant, auto-play loop.
Button Text Typewriter 1 - Typewriter Hello worldbutton-button-text-typewriter-1Typewriter text effect on hover — default variant.
Button Text Typewriter 2 - Typewriter Get startedbutton-button-text-typewriter-2Typewriter text effect on hover — outline variant.
Button Text Typewriter 3 - Typewriter Click mebutton-button-text-typewriter-3Typewriter text effect on hover — secondary variant.
Button Text Typewriter 4 - Typewriter Explore nowbutton-button-text-typewriter-4Typewriter text effect on load — default variant.
Button Text Typewriter 5 - Typewriter Learn morebutton-button-text-typewriter-5Typewriter text effect on load — outline variant.
Button Text Typewriter 6 - Typewriter Try it freebutton-button-text-typewriter-6Typewriter text effect on load — secondary variant.
Button Group Actions 1 - Social Actionsbutton-group-button-group-actions-1Social Actions buttons grouped with optional icon-only variants.
Button Group Actions 2 - File Operationsbutton-group-button-group-actions-2File Operations buttons grouped with optional icon-only variants.
Button Group Actions 3 - Bulk Actionsbutton-group-button-group-actions-3Bulk Actions buttons grouped with optional icon-only variants.
Button Group Actions 4 - Comment Actionsbutton-group-button-group-actions-4Comment Actions buttons grouped with optional icon-only variants.
Button Group Advanced 1 - Split Button with Dropdownbutton-group-button-group-advanced-1Split button with primary action and dropdown menu.
Button Group Advanced 2 - Button Group with Selectbutton-group-button-group-advanced-2Button group combining Select prefix with text suffix.
Button Group Advanced 3 - Stepper Button Groupbutton-group-button-group-advanced-3Stepper button group with increment and decrement controls.
Button Group Advanced 4 - Rich Text Toolbarbutton-group-button-group-advanced-4Rich text formatting toolbar built as button groups.
Button Group Badges 1 - Notifications Buttonbutton-group-button-group-badges-1Action buttons with inline badge counts.
Button Group Badges 2 - Like with Countbutton-group-button-group-badges-2Action buttons with inline badge counts.
Button Group Badges 3 - Cart Buttonbutton-group-button-group-badges-3Action buttons with inline badge counts.
Button Group Badges 4 - Messages and Followersbutton-group-button-group-badges-4Action buttons with inline badge counts.
Button Group Display 1 - Chart Controlsbutton-group-button-group-display-1Chart Controls controls grouped as a connected button strip.
Button Group Display 2 - Map Controlsbutton-group-button-group-display-2Map Controls controls grouped as a connected button strip.
Button Group Display 3 - Timeline Controlsbutton-group-button-group-display-3Timeline Controls controls grouped as a connected button strip.
Button Group Display 4 - Density Controlsbutton-group-button-group-display-4Density Controls controls grouped as a connected button strip.
Button Group Forms 1 - Date Selectorbutton-group-button-group-forms-1Date Selector as a toggle-style button group for form input.
Button Group Forms 2 - Priority Selectorbutton-group-button-group-forms-2Priority Selector as a toggle-style button group for form input.
Button Group Forms 3 - Status Selectorbutton-group-button-group-forms-3Status Selector as a toggle-style button group for form input.
Button Group Forms 4 - Quantity Pickerbutton-group-button-group-forms-4Quantity Picker as a toggle-style button group for form input.
Button Group Interactive 1 - View Switcherbutton-group-button-group-interactive-1View Switcher with active state toggling between grouped buttons.
Button Group Interactive 2 - Sort Controlsbutton-group-button-group-interactive-2Sort Controls with active state toggling between grouped buttons.
Button Group Interactive 3 - Filter Chipsbutton-group-button-group-interactive-3Filter Chips with active state toggling between grouped buttons.
Button Group Interactive 4 - Segmented Controlbutton-group-button-group-interactive-4Segmented Control with active state toggling between grouped buttons.
Button Group Media 1 - Player Controlsbutton-group-button-group-media-1Player Controls grouped for media playback or zoom controls.
Button Group Media 2 - Volume Controlsbutton-group-button-group-media-2Volume Controls grouped for media playback or zoom controls.
Button Group Media 3 - Zoom Controlsbutton-group-button-group-media-3Zoom Controls grouped for media playback or zoom controls.
Button Group Media 4 - Playback Speedbutton-group-button-group-media-4Playback Speed grouped for media playback or zoom controls.
Button Group Navigation 1 - Paginationbutton-group-button-group-navigation-1Pagination with connected prev, next, and step buttons.
Button Group Navigation 2 - Carousel Controlsbutton-group-button-group-navigation-2Carousel Controls with connected prev, next, and step buttons.
Button Group Navigation 3 - Wizard Stepsbutton-group-button-group-navigation-3Wizard Steps with connected prev, next, and step buttons.
Button Group Patterns 1 - Overflow Menubutton-group-button-group-patterns-1Primary actions in a group with overflow dropdown menu.
Button Group Patterns 2 - Contextual Toolbarbutton-group-button-group-patterns-2Contextual Toolbar pattern with grouped toolbar actions.
Button Group Patterns 3 - Loading Statesbutton-group-button-group-patterns-3Loading States pattern with grouped toolbar actions.
Button Group Patterns 4 - Keyboard Shortcutsbutton-group-button-group-patterns-4Keyboard Shortcuts pattern with grouped toolbar actions.
Button Group Standard 1 - Basic Button Groupbutton-group-button-group-standard-1Horizontal button groups at default, small, and large sizes.
Button Group Standard 2 - Vertical Button Groupbutton-group-button-group-standard-2Vertical button group with stacked outline buttons.
Button Group Standard 3 - Button Group Variantsbutton-group-button-group-standard-3Button groups showing outline, secondary, and destructive variants.
Button Group Standard 4 - Nested Button Groupsbutton-group-button-group-standard-4Nested button groups at multiple sizes.
Calendar Dialog 1 - Calendar with Range in Dialogcalendar-calendar-dialog-1Calendar in a dialog with date range selection.
Calendar Dialog 2 - Calendar with Month and Year Selector in Dialogcalendar-calendar-dialog-2Calendar in a dialog with disabled dates.
Calendar Dialog 3 - Calendar as Appointment Picker in Dialogcalendar-calendar-dialog-3Calendar in a dialog as appointment picker.
Calendar Dialog 4 - Calendar with Date and Time in Dialogcalendar-calendar-dialog-4Calendar in a dialog with date and time input.
Calendar Dialog 5 - Calendar with Natural Language in Dialogcalendar-calendar-dialog-5Calendar in a dialog with natural language shortcuts.
Calendar Dialog 6 - Calendar with Disabled Dates in Dialogcalendar-calendar-dialog-6Calendar in a dialog with disabled dates.
Calendar Dialog 7 - Calendar with Multiple Day Selection in Dialogcalendar-calendar-dialog-7Calendar in a dialog with multiple day selection.
Calendar Dialog 8 - Calendar with Custom Select Day Style in Dialogcalendar-calendar-dialog-8Calendar in a dialog with custom day modifiers.
Calendar Standard 1 - Calendar with Rangecalendar-calendar-standard-1Calendar with date range selection.
Calendar Standard 2 - Calendar with Month and Year Selectorcalendar-calendar-standard-2Calendar with disabled dates.
Calendar Standard 3 - Calendar as Appointment Pickercalendar-calendar-standard-3Calendar as appointment picker.
Calendar Standard 4 - Calendar with Date and Timecalendar-calendar-standard-4Calendar with date and time input.
Calendar Standard 5 - Calendar with Natural Languagecalendar-calendar-standard-5Calendar with natural language shortcuts.
Calendar Standard 6 - Calendar with Disabled Datescalendar-calendar-standard-6Calendar with disabled dates.
Calendar Standard 7 - Calendar with Multiple Day Selectioncalendar-calendar-standard-7Calendar with multiple day selection.
Calendar Standard 8 - Calendar with Custom Select Day Stylecalendar-calendar-standard-8Calendar with custom day modifiers.
Card Standard 1 - Standard Cardcard-card-standard-1Standard Card using shadcn Card with header, content, and footer.
Card Standard 2 - Login Cardcard-card-standard-2Login Card using shadcn Card with form inputs.
Card Standard 3 - Meeting Notes Cardcard-card-standard-3Meeting Notes Card using shadcn Card with avatar stack footer.
Card Standard 4 - Image Cardcard-card-standard-4Image Card using shadcn Card with image and metadata.
Careers 1 - Careers list grouped by departmentcareers1A careers section with a page heading, supporting copy, and repeating department blocks where each role is a row with title, location, and arrow link animation.
Careers 10 - Sticky culture column with job rowscareers10Two-column careers section with a sticky benefits intro beside a muted box of divided role rows, department badges, locations, and view-role actions.
Careers 11 - Featured opening with supporting rolescareers11Careers section that leads with one large featured role card, then a two-column grid of compact supporting listings.
Careers 12 - Department tabs over a job card gridcareers12Careers listings with department tabs that filter a three-column card grid without collapsing the section height.
Careers 2 - Job openings grid with dashed framecareers2A careers band with outline badge, title, fallback hiring note, and rows of jobs showing type, city, remote label, and an apply button on a dashed grid background.
Careers 3 - Categorized job openings with badgescareers3A careers block that prints category badges, then stacked job links with titles, one-line descriptions, map-prefixed locations, and trailing arrows.
Careers 4 - Simple careers heading with category sectionscareers4A minimal careers section with configurable heading and grouped job rows showing title, location, and arrow link per opening.
Careers 5 - Centered careers title with full-width job stackcareers5A careers section with centered page title and a single-column list of roles showing title link, description, location icon row, and salary text.
Careers 6 - Careers page with stats header and job cardscareers6A careers block with centered hero copy, quick stats row, and detailed job cards listing department, location, schedule, compensation, experience, and apply actions.
Careers 7 - Grouped careers listings with row actionscareers7Careers section with an intro, category subheads, and rows for role title, location, and an outline button linking to each listing.
Careers 8 - Filterable open positions by departmentcareers8Department select filters a list of categories; each block shows a large category title and a responsive grid of cards with role name, location, and link target.
Careers 9 - Careers openings grid with general application linkcareers9Gradient-backed section with centered intro, separator-divided rows of department badge, role, location, trailing arrow, and footer copy linking to unsolicited applications.
Carousel Standard 1 - Standard Carouselcarousel-carousel-standard-1Standard Carousel using shadcn Carousel with arrow controls.
Carousel Standard 2 - Carousel with Thumbnailscarousel-carousel-standard-2Carousel with Thumbnails using shadcn Carousel with thumbnail navigation.
Carousel Standard 3 - Product Showcase Carouselcarousel-carousel-standard-3Product Showcase Carousel using shadcn Carousel for product cards.
Carousel Standard 4 - Hero Carouselcarousel-carousel-standard-4Hero Carousel using shadcn Carousel for hero slides.
Case Studies 1 - Case study grid with hover image cardscase-studies1This component showcases a set of visually engaging case study cards, each with interactive hover effects, designed to highlight how various solutions can enhance business growth and performance. Users can explore different case studies through dynamic imagery, logos, and descriptive text, providing insights into how these offerings can benefit their operations.
Case Studies 10 - Masked two-up landscape case study carouselcase-studies10Two landscape case study cards visible at once with soft edge fade masks hinting at more content, advancing one card at a time.
Case Studies 11 - Three-column case study grid with centered headingcase-studies11Static three-column grid of case study cards with portrait imagery, company logos, and titles beneath a centered section heading.
Case Studies 12 - Two-by-two case study grid with landscape cardscase-studies12A static 2×2 grid of landscape case study cards with logos, titles, descriptions, and read-more links over full-bleed imagery.
Case Studies 13 - Case study metric cardscase-studies13Four case-study cards with cover images, large outcome metrics, and short client stories.
Case Studies 2 - Case studies with quotes and metricscase-studies2This component displays case studies highlighting user testimonials and key performance metrics such as satisfaction rates and ROI improvement. It features visual and text elements including user quotes, images, and company logos to illustrate the impact and effectiveness of a product or service.
Case Studies 3 - Featured case study with supporting gridcase-studies3This component displays a curated selection of case studies, featuring a prominent highlighted case study alongside additional entries. It supports customizable data input for logos, companies, tags, titles, and links, allowing users to explore detailed case study content with engaging visuals and interactive elements.
Case Studies 4 - Case study spotlight with stats and CTAcase-studies4This component displays a case study block highlighting significant improvements and achievements, featuring key statistics, an author profile, and a summary. It includes a call-to-action button that guides users to read the full story, making it useful for showcasing success stories or customer testimonials.
Case Studies 5 - Case study carousel with testimonialscase-studies5This component is a carousel block that showcases a series of testimonials with accompanying logos and images. It allows users to navigate through different slides, displaying dynamic content and animations for an engaging user experience.
Case Studies 6 - Masked case study carousel with logo cardscase-studies6A horizontal carousel of case study cards with edge fade masks, company logos, titles over full-bleed imagery, and dot pagination.
Case Studies 8 - Three-up case study carousel stepping one at a timecase-studies8Case study carousel showing three portrait cards at once on medium screens, advancing one card per step with dot pagination and no edge masks.
Case Studies 9 - Two-up landscape case study carouselcase-studies9Case study carousel showing two landscape cards side by side, advancing one card at a time with logos, titles, descriptions, and read-more links.
Case Study 1 - Long-form case study with metrics and sidebarcase-study1This component displays a detailed case study highlighting improvements in system reliability through AI monitoring, featuring key metrics, narrative sections, and visual elements. It also includes breadcrumbs for navigation, alerts for important notes, and buttons for user interactions such as contacting or learning more.
Case Study 3 - Case study with section navigation and avatarscase-study3This component presents a detailed case study layout, including sections for introduction, problem statement, approach, and outcomes, with navigable headings to guide users through different sections of content. It includes features such as breadcrumbs for navigation, avatar integration for showcasing contributors, and social media sharing options, providing a comprehensive storytelling tool with dynamic content interaction.
Case Study 8 - Case study article with company sidebarcase-study8The component "CaseStudy8" is designed to present a detailed narrative with accompanying visuals, including an image and structured text sections for titles, paragraphs, and lists. It also incorporates an informational sidebar that displays company-related details such as logo, size, location, and website, offering users comprehensive content and context in one cohesive block.
Changelog 1 - Changelog with sticky version and date railchangelog1Stacked release entries pair a narrow sticky column of version badge and date with titles, descriptions, optional bullet lists, images, and external learn-more links.
Changelog 2 - Changelog hero with email capture and timelinechangelog2Centered page title with NEW badge, supporting blurb, inline email field and submit control, plus a dashed vertical timeline of posts with images, headlines, and linked prose.
Changelog 3 - Two-column changelog posts with category dotschangelog3Each update pairs a sticky date with colored category labels, prose heading and body with inline links, a bordered image, and horizontal separators between articles.
Changelog 4 - Changelog feed with social strip and scroll progress linechangelog4Large changelog title, muted social follow bar, optional vertical timeline that fills with scroll, and two rich posts with hero images, avatars, dates, and nested headings and lists.
Changelog 5 - Changelog with sticky date navigation and author footerschangelog5Muted intro band with subscribe links, then a wide layout with sticky date links, vertical separator, and stacked posts showing imagery, category dots, rich prose, avatars, and bylines.
Changelog 6 - Changelog entries with full release overlay and icon actionschangelog6Bordered page frame lists releases with dates, oversized titles, clickable hero art, excerpts, stacked contributor avatars, and icon buttons for expand, copy, and external open beside rich overlay content.
Changelog 8 - Changelog with on-this-page sidebar and smooth jumpschangelog8Desktop sidebar lists each release title with version and date, scroll state highlights the active item, and the main column shows badge, date, copy, optional bulleted insets, and hover-zoom imagery.
Chart Card 1 - Area Chart Cardchart-card1A card containing an area chart with gradient fill, grid lines, and interactive tooltips.
Chart Card 10 - Stacked Bar Chartchart-card10A vertical stacked bar chart card showing multiple data series as segments within each bar.
Chart Card 11 - 100% Stacked Bar Chartchart-card11A horizontal 100% stacked bar chart showing proportional breakdown across categories.
Chart Card 12 - Stacked Bar with No Y-Axischart-card12A minimal stacked bar chart with category labels only, no Y-axis for a cleaner look.
Chart Card 13 - Positive/Negative Bar Chartchart-card13A bar chart with values above and below zero, using different colors for positive and negative values.
Chart Card 14 - Range Area Chartchart-card14An area chart showing a min/max range band with an average line overlay.
Chart Card 15 - Waterfall Chartchart-card15A waterfall chart showing how an initial value changes through a series of increases and decreases to reach a final total.
Chart Card 16 - Radial Progress Chartchart-card16A circular progress ring showing percentage completion toward a goal with centered value display.
Chart Card 17 - Semi-Circle Gaugechart-card17A speedometer-style half-circle gauge with needle indicator and colored performance zones.
Chart Card 18 - Multi-Ring Progresschart-card18Concentric progress rings showing multiple metrics simultaneously, inspired by fitness activity trackers.
Chart Card 19 - Radial Bar Chartchart-card19A circular bar chart with concentric bars of varying lengths representing different categories.
Chart Card 2 - Area Chart with Time Selectorchart-card2An area chart card with tabs to switch between 7-day, 30-day, and 90-day time periods.
Chart Card 20 - Radar Chartchart-card20A radar/spider chart showing multiple dimensions as a polygon shape for multi-attribute comparison.
Chart Card 21 - Funnel Chartchart-card21A funnel visualization showing progressive conversion through stages with decreasing bar widths.
Chart Card 22 - Treemap Chartchart-card22A treemap visualization showing hierarchical data as nested rectangles sized by value.
Chart Card 23 - Scatter Plotchart-card23A scatter plot showing correlation between two variables as positioned dots.
Chart Card 24 - Bubble Chartchart-card24A bubble chart with variable-sized dots encoding three dimensions of data plus color for grouping.
Chart Card 25 - Chart with Target Linechart-card25An area chart with a horizontal reference line showing a target or benchmark value.
Chart Card 26 - Bullet Chartchart-card26A bullet chart showing actual value against a target with colored performance ranges in the background.
Chart Card 27 - Chart with Threshold Zoneschart-card27An area chart with colored background zones indicating normal, warning, and critical threshold ranges.
Chart Card 3 - Bar Chart Cardchart-card3A card containing a vertical bar chart with rounded tops and interactive tooltips.
Chart Card 4 - Horizontal Bar Chart Cardchart-card4A card containing a horizontal bar chart with category labels on the left and values extending right.
Chart Card 5 - Donut Chart with Legendchart-card5A donut chart card with center stat display and a legend list showing category breakdowns.
Chart Card 6 - Multi-Line Comparison Chartchart-card6A line chart card comparing two data series with a legend, using solid and dashed lines.
Chart Card 7 - Chart Card with Footer Statschart-card7An area chart card with a footer showing trend indicator and summary text.
Chart Card 8 - Grouped Bar Chart Cardchart-card8A grouped bar chart card comparing two data series side by side with a legend.
Chart Card 9 - Stacked Area Chartchart-card9A stacked area chart card showing multiple data series layered to display composition over time.
Chart Area Axes - An area chart with axeschart-chart-area-axesAn area chart with axes using shadcn ChartContainer and Recharts.
Chart Area Default - A simple area chartchart-chart-area-defaultA simple area chart using shadcn ChartContainer and Recharts.
Chart Area Gradient - An area chart with gradient fillchart-chart-area-gradientAn area chart with gradient fill using shadcn ChartContainer and Recharts.
Chart Area Icons - An area chart with iconschart-chart-area-iconsAn area chart with icons using shadcn ChartContainer and Recharts.
Chart Area Interactive - An interactive area chartchart-chart-area-interactiveAn interactive area chart using shadcn ChartContainer and Recharts.
Chart Area Legend - An area chart with a legendchart-chart-area-legendAn area chart with a legend using shadcn ChartContainer and Recharts.
Chart Area Linear - A linear area chartchart-chart-area-linearA linear area chart using shadcn ChartContainer and Recharts.
Chart Area Stacked - A stacked area chartchart-chart-area-stackedA stacked area chart using shadcn ChartContainer and Recharts.
Chart Area Stacked Expand - A stacked area chart with expand stackingchart-chart-area-stacked-expandA stacked area chart with expand stacking using shadcn ChartContainer and Recharts.
Chart Area Step - A step area chartchart-chart-area-stepA step area chart using shadcn ChartContainer and Recharts.
Chart Bar Active - A bar chart with an active barchart-chart-bar-activeA bar chart with an active bar using shadcn ChartContainer and Recharts.
Chart Bar Default - A bar chartchart-chart-bar-defaultA bar chart using shadcn ChartContainer and Recharts.
Chart Bar Horizontal - A horizontal bar chartchart-chart-bar-horizontalA horizontal bar chart using shadcn ChartContainer and Recharts.
Chart Bar Interactive - An interactive bar chartchart-chart-bar-interactiveAn interactive bar chart using shadcn ChartContainer and Recharts.
Chart Bar Label - A bar chart with a labelchart-chart-bar-labelA bar chart with a label using shadcn ChartContainer and Recharts.
Chart Bar Label Custom - A bar chart with a custom labelchart-chart-bar-label-customA bar chart with a custom label using shadcn ChartContainer and Recharts.
Chart Bar Mixed - A mixed bar chartchart-chart-bar-mixedA mixed bar chart using shadcn ChartContainer and Recharts.
Chart Bar Multiple - A multiple bar chartchart-chart-bar-multipleA multiple bar chart using shadcn ChartContainer and Recharts.
Chart Bar Negative - A bar chart with negative valueschart-chart-bar-negativeA bar chart with negative values using shadcn ChartContainer and Recharts.
Chart Bar Stacked - A stacked bar chart with a legendchart-chart-bar-stackedA stacked bar chart with a legend using shadcn ChartContainer and Recharts.
Chart Line Default - A line chartchart-chart-line-defaultA line chart using shadcn ChartContainer and Recharts.
Chart Line Dots - A line chart with dotschart-chart-line-dotsA line chart with dots using shadcn ChartContainer and Recharts.
Chart Line Dots Colors - A line chart with dots and colorschart-chart-line-dots-colorsA line chart with dots and colors using shadcn ChartContainer and Recharts.
Chart Line Dots Custom - A line chart with custom dotschart-chart-line-dots-customA line chart with custom dots using shadcn ChartContainer and Recharts.
Chart Line Interactive - An interactive line chartchart-chart-line-interactiveAn interactive line chart using shadcn ChartContainer and Recharts.
Chart Line Label - A line chart with a labelchart-chart-line-labelA line chart with a label using shadcn ChartContainer and Recharts.
Chart Line Label Custom - A line chart with a custom labelchart-chart-line-label-customA line chart with a custom label using shadcn ChartContainer and Recharts.
Chart Line Linear - A linear line chartchart-chart-line-linearA linear line chart using shadcn ChartContainer and Recharts.
Chart Line Multiple - A multiple line chartchart-chart-line-multipleA multiple line chart using shadcn ChartContainer and Recharts.
Chart Line Step - A line chart with stepchart-chart-line-stepA line chart with step using shadcn ChartContainer and Recharts.
Chart Pie Donut - A donut chartchart-chart-pie-donutA donut chart using shadcn ChartContainer and Recharts.
Chart Pie Donut Active - A donut chart with an active sectorchart-chart-pie-donut-activeA donut chart with an active sector using shadcn ChartContainer and Recharts.
Chart Pie Donut Text - A donut chart with textchart-chart-pie-donut-textA donut chart with text using shadcn ChartContainer and Recharts.
Chart Pie Interactive - An interactive pie chartchart-chart-pie-interactiveAn interactive pie chart using shadcn ChartContainer and Recharts.
Chart Pie Label - A pie chart with a labelchart-chart-pie-labelA pie chart with a label using shadcn ChartContainer and Recharts.
Chart Pie Label Custom - A pie chart with a custom labelchart-chart-pie-label-customA pie chart with a custom label using shadcn ChartContainer and Recharts.
Chart Pie Label List - A pie chart with a label listchart-chart-pie-label-listA pie chart with a label list using shadcn ChartContainer and Recharts.
Chart Pie Legend - A pie chart with a legendchart-chart-pie-legendA pie chart with a legend using shadcn ChartContainer and Recharts.
Chart Pie Separator None - A pie chart with no separatorchart-chart-pie-separator-noneA pie chart with no separator using shadcn ChartContainer and Recharts.
Chart Pie Simple - A simple pie chartchart-chart-pie-simpleA simple pie chart using shadcn ChartContainer and Recharts.
Chart Pie Stacked - A pie chart with stacked sectionschart-chart-pie-stackedA pie chart with stacked sections using shadcn ChartContainer and Recharts.
Chart Radar Default - A radar chartchart-chart-radar-defaultA radar chart using shadcn ChartContainer and Recharts.
Chart Radar Dots - A radar chart with dotschart-chart-radar-dotsA radar chart with dots using shadcn ChartContainer and Recharts.
Chart Radar Grid Circle - A radar chart with a grid and circlechart-chart-radar-grid-circleA radar chart with a grid and circle using shadcn ChartContainer and Recharts.
Chart Radar Grid Circle Fill - A radar chart with a grid and circle fillchart-chart-radar-grid-circle-fillA radar chart with a grid and circle fill using shadcn ChartContainer and Recharts.
Chart Radar Grid Circle No Lines - A radar chart with a grid and circle fill (no lines)chart-chart-radar-grid-circle-no-linesA radar chart with a grid and circle fill (no lines) using shadcn ChartContainer and Recharts.
Chart Radar Grid Custom - A radar chart with a custom gridchart-chart-radar-grid-customA radar chart with a custom grid using shadcn ChartContainer and Recharts.
Chart Radar Grid Fill - A radar chart with a grid filledchart-chart-radar-grid-fillA radar chart with a grid filled using shadcn ChartContainer and Recharts.
Chart Radar Grid None - A radar chart with no gridchart-chart-radar-grid-noneA radar chart with no grid using shadcn ChartContainer and Recharts.
Chart Radar Icons - A radar chart with iconschart-chart-radar-iconsA radar chart with icons using shadcn ChartContainer and Recharts.
Chart Radar Label Custom - A radar chart with a custom labelchart-chart-radar-label-customA radar chart with a custom label using shadcn ChartContainer and Recharts.
Chart Radar Legend - A radar chart with a legendchart-chart-radar-legendA radar chart with a legend using shadcn ChartContainer and Recharts.
Chart Radar Lines Only - A radar chart with lines onlychart-chart-radar-lines-onlyA radar chart with lines only using shadcn ChartContainer and Recharts.
Chart Radar Multiple - A radar chart with multiple datachart-chart-radar-multipleA radar chart with multiple data using shadcn ChartContainer and Recharts.
Chart Radar Radius - A radar chart with a radius axischart-chart-radar-radiusA radar chart with a radius axis using shadcn ChartContainer and Recharts.
Chart Radial Grid - A radial chart with a gridchart-chart-radial-gridA radial chart with a grid using shadcn ChartContainer and Recharts.
Chart Radial Label - A radial chart with a labelchart-chart-radial-labelA radial chart with a label using shadcn ChartContainer and Recharts.
Chart Radial Shape - A radial chart with a custom shapechart-chart-radial-shapeA radial chart with a custom shape using shadcn ChartContainer and Recharts.
Chart Radial Simple - A radial chartchart-chart-radial-simpleA radial chart using shadcn ChartContainer and Recharts.
Chart Radial Stacked - A radial chart with stacked sectionschart-chart-radial-stackedA radial chart with stacked sections using shadcn ChartContainer and Recharts.
Chart Radial Text - A radial chart with textchart-chart-radial-textA radial chart with text using shadcn ChartContainer and Recharts.
Chart Tooltip Advanced - Tooltip - Advancedchart-chart-tooltip-advancedTooltip - Advanced pattern using the shadcn component with its key configuration options.
Chart Tooltip Default - Tooltip - Defaultchart-chart-tooltip-defaultTooltip - Default pattern using the shadcn component with its key configuration options.
Chart Tooltip Formatter - Tooltip - Formatterchart-chart-tooltip-formatterTooltip - Formatter pattern using the shadcn component with its key configuration options.
Chart Tooltip Icons - Tooltip - Iconschart-chart-tooltip-iconsTooltip - Icons pattern using the shadcn component with its key configuration options.
Chart Tooltip Indicator Line - Tooltip - Line Indicatorchart-chart-tooltip-indicator-lineTooltip - Line Indicator pattern using the shadcn component with its key configuration options.
Chart Tooltip Indicator None - Tooltip - No Indicatorchart-chart-tooltip-indicator-noneTooltip - No Indicator pattern using the shadcn component with its key configuration options.
Chart Tooltip Label Custom - Tooltip - Custom Labelchart-chart-tooltip-label-customTooltip - Custom Label pattern using the shadcn component with its key configuration options.
Chart Tooltip Label Formatter - Tooltip - Label Formatterchart-chart-tooltip-label-formatterTooltip - Label Formatter pattern using the shadcn component with its key configuration options.
Chart Tooltip Label None - Tooltip - No Labelchart-chart-tooltip-label-noneTooltip - No Label pattern using the shadcn component with its key configuration options.
Chart Group 1 - Two Charts Side by Sidechart-group1A two-column layout with an area chart and bar chart displayed side by side.
Chart Group 10 - Infrastructure Monitoring Viewchart-group10A DevOps-style view with request volume chart and service health status panel.
Chart Group 11 - Revenue Chart with Date Range Pickerchart-group11A card with a working date range picker that filters chart data and updates summary statistics.
Chart Group 12 - Full Dashboard with Date Controlschart-group12A complete dashboard layout with preset date buttons, custom date range picker, stats row, and multiple chart cards that all respond to date selection.
Chart Group 13 - Analytics Bento with Preset Calendarchart-group13An analytics dashboard with a combined preset/calendar picker, stat cards with sparklines, and a large chart row showing revenue and user correlation.
Chart Group 14 - Full Analytics Bento Dashboardchart-group14A comprehensive analytics bento dashboard with select dropdown presets, date range picker, stat cards with icons and badges, charts, top pages list, and active users section.
Chart Group 15 - Business Analytics Bento with Navigationchart-group15A sophisticated analytics dashboard with date range navigation arrows, compare toggle, export menu, switchable chart views, and multiple visualization types in a bento grid.
Chart Group 2 - Main Chart with Detail Chartschart-group2A layout with one large primary chart spanning full width and two smaller detail charts below.
Chart Group 3 - Main Chart with Weekly Trendschart-group3A main chart showing monthly trends with sparkline cards zooming into the last 7 days of key metrics.
Chart Group 4 - Simple Tab Chart Viewchart-group4A single card with tabs to switch between different chart visualizations of related metrics.
Chart Group 5 - Year over Year Comparisonchart-group5A comparison layout with a dual-line chart and summary card showing year-over-year growth.
Chart Group 6 - Donut and Bar Chart Pairchart-group6A two-column layout with a donut chart showing device breakdown and a horizontal bar chart showing browser usage.
Chart Group 7 - Stats Row with Chart Belowchart-group7A section with a four-stat row above a full-width area chart.
Chart Group 8 - Bento Grid with Mixed Chartschart-group8A bento-style grid with four different chart types arranged in varying sizes.
Chart Group 9 - Dropdown Chart Viewchart-group9A card with a dropdown selector to switch between three different chart views showing various metrics.
Checkbox Standard 1 - Simple Checkboxcheckbox-checkbox-standard-1Single labeled checkbox for binary opt-in.
Checkbox Standard 11 - With Descriptioncheckbox-checkbox-standard-11Checkbox with supporting description text below the label.
Checkbox Standard 12 - With Subtitle and Descriptioncheckbox-checkbox-standard-12Checkbox with subtitle and description for detailed opt-in.
Checkbox Standard 13 - Nested Listcheckbox-checkbox-standard-13Nested checkbox list with parent and child options.
Checkbox Standard 2 - Indeterminate Checkboxcheckbox-checkbox-standard-2Parent checkbox in indeterminate state for partial selection.
Checkbox Standard 3 - With Subtitlecheckbox-checkbox-standard-3Checkbox with a subtitle label above the control.
Checkbox Standard 4 - Disabled Checkboxcheckbox-checkbox-standard-4Checkbox in disabled state that cannot be toggled.
Checkbox Standard 5 - Todo Style Checkboxcheckbox-checkbox-standard-5Todo-style checkbox with completed strikethrough state.
Checkbox Standard 6 - Custom Indicator Checkboxcheckbox-checkbox-standard-6Checkbox with a custom check indicator component.
Checkbox Standard 7 - Horizontal List Checkboxcheckbox-checkbox-standard-7Multiple checkboxes arranged in a horizontal row.
Checkbox Standard 8 - Vertical List Checkboxcheckbox-checkbox-standard-8Multiple checkboxes stacked in a vertical list.
Checkbox Standard 9 - Right-Aligned Checkboxcheckbox-checkbox-standard-9Checkbox aligned to the right with label on the left.
Checkout 1 - Accordion checkout with cart and payment stepscheckout1This component is a checkout block that facilitates online purchasing by managing cart items and payment details. It features forms for user information, address, shipping methods, and payment options, integrating an accordion layout for a step-by-step process.
Checkout 10 - Checkout with cart summary and saved payment methodscheckout10This component facilitates an interactive checkout process, allowing users to input personal details, select shipping options, and choose a saved payment method from a list. It features sections for displaying the product list, summary of charges, and detailed payment and shipping data entry fields, offering a comprehensive solution for handling checkout functionality in applications.
Checkout 12 - Multi-step checkout with progress and order reviewcheckout12This component provides a multi-step checkout process including contact, shipping, payment, and review steps, allowing users to manage order details and progress through the purchase journey. Features include interactive form handling, step navigation, product listing, and a detailed order summary to enhance the user shopping experience.
Checkout 2 - Two-column checkout with cart and address formscheckout2This component facilitates a comprehensive e-commerce checkout process, allowing users to input contact information, shipping address, choose a shipping method, and select a payment method. It includes an order summary where users can view, modify quantities, and remove items from their shopping cart before finalizing their purchase.
Checkout 3 - Checkout with collapsible cart and accordion sectionscheckout3This component facilitates a comprehensive checkout process, integrating functionalities for managing cart items, collecting contact and address details, and selecting payment and shipping methods. Designed with a flexible schema validation, it supports multiple payment options including credit card and PayPal, and features collapsible sections to streamline the user experience.
Checkout 4 - Cart review beside payment method selectioncheckout4This component serves as a comprehensive checkout block that handles both shopping cart management and payment processing. Users can manage item quantities, view total prices, and choose from multiple payment methods, including credit card and PayPal, while ensuring form validation using Zod and React Hook Form.
Checkout 5 - Order summary with promo and payment methodscheckout5The component provides a detailed checkout form that includes order summary, email input, card payment details, and promo code application, using react-hook-form and zod for validation. It allows users to input billing information, apply a coupon code, and choose payment methods like card or Apple Pay.
Checkout 8 - Accordion checkout with cart, addresses, and paymentcheckout8This component is a comprehensive checkout form that facilitates the entire purchase process, including cart overview, address entry, and payment methods. It leverages the `react-hook-form` library for form handling and supports multiple payment options such as credit card, PayPal, and bank transfers.
Choicebox Composition 1 - Billing plan selectorchoicebox-choicebox-composition-1Full billing selector with titles, subtitles, and descriptions.
Choicebox Descriptions 1 - Options with descriptionschoicebox-choicebox-descriptions-1Choicebox items with title and description text.
Choicebox Standard 1 - Radio card optionschoicebox-choicebox-standard-1Two card-style radio options with default selection.
Choicebox Subtitle 1 - Title and subtitlechoicebox-choicebox-subtitle-1Choicebox items with a title and muted subtitle.
Choicebox Three 1 - Three plan optionschoicebox-choicebox-three-1Three selectable plan cards in a vertical stack.
Code Block Composition 1 - Header compositioncode-block-code-block-composition-1Code block with filename label and copy button in the header.
Code Block Copy 1 - Copy buttoncode-block-code-block-copy-1Code block header with a copy-to-clipboard button.
Code Block Line Numbers 1 - Line numberscode-block-code-block-line-numbers-1Code block with lineNumbers enabled on the active snippet.
Code Block Multi File 1 - Multi-file selectcode-block-code-block-multi-file-1Multiple files with a header select to switch between snippets.
Code Block No Highlight 1 - No highlightingcode-block-code-block-no-highlight-1Plain code display with syntaxHighlighting set to false.
Code Block Standard 1 - Standard snippetcode-block-code-block-standard-1Single TypeScript code snippet with syntax highlighting.
Code Example 1 - Tabbed database query examples in multiple languagescode-example1This component serves as a versatile code example block that allows users to explore and copy multi-language database query examples, such as JavaScript, Python, Go, and Ruby, with integration for ORMs and raw SQL. It features tabbed navigation to switch between languages, a copy button for ease of use, and displays relevant file names for each example.
Code Example 11 - Database Examples by Stackcode-example11A centered hero explaining database connectivity, language pickers with logos, framework tabs or a mobile select, sample Postgres-oriented snippets per stack, copy control, and a documentation link.
Code Example 14 - File Ops Accordion and Codecode-example14A file-management hero with dotted radial backdrop, dual CTAs, accordion rows for create, update, and delete flows, and a synced TypeScript example in a scrollable code block with copy.
Code Example 16 - Analytics Snippet Modescode-example16A centered analytics pitch with eyebrow, headline, supporting copy, primary CTA, and a code panel that switches among server, client hook, and React UI examples via tabs or a compact selector.
Code Example 2 - HTTP request examples with language tabs and copycode-example2This component provides a visual interface for displaying code examples of HTTP requests in multiple programming languages, including JavaScript, Python, and Go. It features a code block with selectable files, language switching options, and a button for copying code, making it ideal for educational or documentation purposes.
Code Example 3 - Theme switching hook example with interactive codecode-example3This component showcases the use of custom hooks to manage and toggle themes within a React application. It includes interactive code blocks and provides a clear implementation example, demonstrating how to integrate theme switching with a button and visual indicators.
Code Example 4 - File tree with selectable code previewcode-example4This component provides an intuitive interface for exploring a file structure with a tree view and examining the content of selected files in a code block. Ideal for users looking to navigate through and interact with code examples effectively, it facilitates seamless file browsing and code inspection within a component library.
Code Example 5 - API integration snippets with protocol and language tabscode-example5This component provides a code explorer, allowing users to interactively select and view code examples for different API integrations including REST, GraphQL, and WebSocket. It features language switching tabs, displays code snippets with syntax highlighting, and offers a copy-to-clipboard functionality.
Code Example 6 - Selectable Hook Snippetscode-example6A marketing section with a headline, three selectable snippet cards for debounce, local storage, and fetch hooks, a syntax-highlighted code block with copy control, and an outline CTA.
Collapsible Card 1 - Card Collapsiblecollapsible-collapsible-card-1Card Collapsible using shadcn Collapsible in a card container.
Collapsible Card 2 - Card with Icon Headercollapsible-collapsible-card-2Card with Icon Header using shadcn Collapsible in a card container.
Collapsible Card 3 - Nested Card Contentcollapsible-collapsible-card-3Nested Card Content using shadcn Collapsible in a card container.
Collapsible Card 4 - Card with Badgecollapsible-collapsible-card-4Card with Badge using shadcn Collapsible in a card container.
Collapsible Card 5 - Subtle Card Collapsiblecollapsible-collapsible-card-5Subtle Card Collapsible using shadcn Collapsible in a card container.
Collapsible Faq 1 - FAQ Itemcollapsible-collapsible-faq-1FAQ Item using shadcn Collapsible for FAQ layout.
Collapsible Faq 2 - FAQ with Iconcollapsible-collapsible-faq-2FAQ with Icon using shadcn Collapsible for FAQ layout.
Collapsible Faq 3 - FAQ Card Stylecollapsible-collapsible-faq-3FAQ Card Style using shadcn Collapsible for FAQ layout.
Collapsible Faq 4 - Numbered FAQcollapsible-collapsible-faq-4Numbered FAQ using shadcn Collapsible for FAQ layout.
Collapsible Faq 5 - FAQ with Badgecollapsible-collapsible-faq-5FAQ with Badge using shadcn Collapsible for FAQ layout.
Collapsible Outline 1 - Outlined Collapsiblecollapsible-collapsible-outline-1Outlined Collapsible using shadcn Collapsible.
Collapsible Outline 2 - Warning Outlinecollapsible-collapsible-outline-2Warning Outline using shadcn Collapsible.
Collapsible Outline 3 - Info Box Outlinecollapsible-collapsible-outline-3Info Box Outline using shadcn Collapsible.
Collapsible Outline 4 - Dashed Outlinecollapsible-collapsible-outline-4Dashed Outline using shadcn Collapsible.
Collapsible Sidebar 1 - Nested Sidebar Itemscollapsible-collapsible-sidebar-1Nested Sidebar Items using shadcn Collapsible for sidebar navigation.
Collapsible Sidebar 2 - Settings Menucollapsible-collapsible-sidebar-2Settings Menu using shadcn Collapsible for sidebar navigation.
Collapsible Sidebar 3 - Sidebar with Countscollapsible-collapsible-sidebar-3Sidebar with Counts using shadcn Collapsible for sidebar navigation.
Collapsible Sidebar 4 - Minimal Sidebar Groupcollapsible-collapsible-sidebar-4Minimal Sidebar Group using shadcn Collapsible for sidebar navigation.
Collapsible Standard 1 - Simple Collapsiblecollapsible-collapsible-standard-1Simple Collapsible using shadcn Collapsible.
Collapsible Standard 2 - Inline Trigger Collapsiblecollapsible-collapsible-standard-2Inline Trigger Collapsible using shadcn Collapsible.
Collapsible Standard 3 - Collapsible with Iconcollapsible-collapsible-standard-3Collapsible with Icon using shadcn Collapsible.
Collapsible Standard 4 - Text-only Collapsiblecollapsible-collapsible-standard-4Text-only Collapsible using shadcn Collapsible.
Collapsible Standard 5 - Controlled Collapsiblecollapsible-collapsible-standard-5Controlled Collapsible using shadcn Collapsible.
Color Picker Alpha 1 - With alpha and eyedroppercolor-picker-color-picker-alpha-1Color picker including alpha slider and eye dropper control.
Color Picker Compact 1 - Compact selectioncolor-picker-color-picker-compact-1Compact color picker showing only the selection area and hue slider.
Color Picker Controlled 1 - Controlled swatchcolor-picker-color-picker-controlled-1Controlled color picker that updates a live swatch from onChange.
Color Picker Standard 1 - Basic color pickercolor-picker-color-picker-standard-1Color picker with selection area, hue slider, and format fields.
Combobox Custom Actions 1 - Create New Option Inlinecombobox-combobox-custom-actions-1Create New Option Inline combobox using shadcn Command and Popover.
Combobox Custom Actions 2 - With Footer Actionscombobox-combobox-custom-actions-2With Footer Actions combobox using shadcn Command and Popover.
Combobox Custom Actions 3 - Recent Selections Sectioncombobox-combobox-custom-actions-3Recent Selections Section combobox using shadcn Command and Popover.
Combobox Custom Actions 4 - Async/Dynamic Searchcombobox-combobox-custom-actions-4Async/Dynamic Search combobox using shadcn Command and Popover.
Combobox Custom Actions 5 - With Quick Filterscombobox-combobox-custom-actions-5With Quick Filters combobox using shadcn Command and Popover.
Combobox Custom Actions 6 - Keyboard Shortcuts Displayedcombobox-combobox-custom-actions-6Keyboard Shortcuts Displayed combobox using shadcn Command and Popover.
Combobox Custom Actions 7 - Clear/Reset Buttoncombobox-combobox-custom-actions-7Clear/Reset Button combobox using shadcn Command and Popover.
Combobox Grouped 1 - Multiple Groups with Labelscombobox-combobox-grouped-1Multiple Groups with Labels combobox using shadcn Command and Popover.
Combobox Grouped 2 - Categories with Separatorscombobox-combobox-grouped-2Categories with Separators combobox using shadcn Command and Popover.
Combobox Grouped 3 - Nested/Hierarchical Groupscombobox-combobox-grouped-3Nested/Hierarchical Groups combobox using shadcn Command and Popover.
Combobox Grouped 4 - Groups with Item Countscombobox-combobox-grouped-4Groups with Item Counts combobox using shadcn Command and Popover.
Combobox Grouped 5 - Collapsible Groupscombobox-combobox-grouped-5Collapsible Groups combobox using shadcn Command and Popover.
Combobox Grouped 6 - Recent vs All Itemscombobox-combobox-grouped-6Recent vs All Items combobox using shadcn Command and Popover.
Combobox Grouped 7 - Favorites + All Itemscombobox-combobox-grouped-7Favorites + All Items combobox using shadcn Command and Popover.
Combobox Multi Select 1 - Multiple Items with Badgescombobox-combobox-multi-select-1Multiple Items with Badges combobox using shadcn Command and Popover with multi-select.
Combobox Multi Select 2 - With Select All Optioncombobox-combobox-multi-select-2With Select All Option combobox using shadcn Command and Popover with multi-select.
Combobox Multi Select 3 - With Item Count in Triggercombobox-combobox-multi-select-3With Item Count in Trigger combobox using shadcn Command and Popover with multi-select.
Combobox Multi Select 4 - With Checkboxes Visiblecombobox-combobox-multi-select-4With Checkboxes Visible combobox using shadcn Command and Popover with multi-select.
Combobox Multi Select 5 - With Clear All Functionalitycombobox-combobox-multi-select-5With Clear All Functionality combobox using shadcn Command and Popover with multi-select.
Combobox Multi Select 6 - With Max Selections Limitcombobox-combobox-multi-select-6With Max Selections Limit combobox using shadcn Command and Popover with multi-select.
Combobox Multi Select 7 - Selected Items List Belowcombobox-combobox-multi-select-7Selected Items List Below combobox using shadcn Command and Popover with multi-select.
Combobox Rich Content 1 - Items with Avatarscombobox-combobox-rich-content-1Items with Avatars combobox using shadcn Command and Popover.
Combobox Rich Content 2 - Items with Descriptionscombobox-combobox-rich-content-2Items with Descriptions combobox using shadcn Command and Popover.
Combobox Rich Content 3 - Items with Status Indicatorscombobox-combobox-rich-content-3Items with Status Indicators combobox using shadcn Command and Popover.
Combobox Rich Content 4 - Items with Metadatacombobox-combobox-rich-content-4Items with Metadata combobox using shadcn Command and Popover.
Combobox Rich Content 5 - Items with Icons and Descriptionscombobox-combobox-rich-content-5Items with Icons and Descriptions combobox using shadcn Command and Popover.
Combobox Rich Content 6 - Color-Coded Itemscombobox-combobox-rich-content-6Color-Coded Items combobox using shadcn Command and Popover.
Combobox Rich Content 7 - Items with Action Buttonscombobox-combobox-rich-content-7Items with Action Buttons combobox using shadcn Command and Popover.
Combobox Standard 1 - Simple Single Selectcombobox-combobox-standard-1Simple Single Select combobox using shadcn Command and Popover.
Combobox Standard 2 - With Default Selected Valuecombobox-combobox-standard-2With Default Selected Value combobox using shadcn Command and Popover.
Combobox Standard 3 - With Item Iconscombobox-combobox-standard-3With Item Icons combobox using shadcn Command and Popover.
Combobox Standard 4 - Small Size Variantcombobox-combobox-standard-4Small Size Variant combobox using shadcn Command and Popover.
Combobox Standard 5 - Large Size Variantcombobox-combobox-standard-5Large Size Variant combobox using shadcn Command and Popover.
Combobox Standard 6 - Disabled Statecombobox-combobox-standard-6Disabled State combobox using shadcn Command and Popover.
Combobox Standard 7 - Full Width Variantcombobox-combobox-standard-7Full Width Variant combobox using shadcn Command and Popover.
Combobox With States 1 - Loading Statecombobox-combobox-with-states-1Loading State combobox using shadcn Command and Popover.
Combobox With States 2 - Error State with Retrycombobox-combobox-with-states-2Error State with Retry combobox using shadcn Command and Popover.
Combobox With States 3 - Empty State with Actioncombobox-combobox-with-states-3Empty State with Action combobox using shadcn Command and Popover.
Combobox With States 4 - No Results Variationcombobox-combobox-with-states-4No Results Variation combobox using shadcn Command and Popover.
Combobox With States 5 - With Validation Feedbackcombobox-combobox-with-states-5With Validation Feedback combobox using shadcn Command and Popover.
Combobox With States 6 - With Disabled Itemscombobox-combobox-with-states-6With Disabled Items combobox using shadcn Command and Popover.
Combobox With States 7 - Read-Only/View Modecombobox-combobox-with-states-7Read-Only/View Mode combobox using shadcn Command and Popover.
Command Dialog 1 - Simple Command Dialogcommand-command-dialog-1Simple Command Dialog using shadcn Command in a dialog.
Command Dialog 2 - Command Dialog with Icons and Shortcutscommand-command-dialog-2Command Dialog with Icons and Shortcuts using shadcn Command in a dialog.
Command Dialog 3 - Command Dialog with Separatorscommand-command-dialog-3Command Dialog with Separators using shadcn Command in a dialog.
Command Dialog 4 - Command Dialog with Badgescommand-command-dialog-4Command Dialog with Badges using shadcn Command in a dialog.
Command Dialog 5 - Command Dialog with Descriptionscommand-command-dialog-5Command Dialog with Descriptions using shadcn Command in a dialog.
Command Dialog 6 - Command Dialog Actions Menucommand-command-dialog-6Command Dialog Actions Menu using shadcn Command in a dialog.
Command Dialog 7 - Command Dialog with Status Indicatorscommand-command-dialog-7Command Dialog with Status Indicators using shadcn Command in a dialog.
Command Popover 1 - Simple Command Popovercommand-command-popover-1Simple Command Popover using shadcn Command in a popover.
Command Popover 2 - Command Popover with Icons and Shortcutscommand-command-popover-2Command Popover with Icons and Shortcuts using shadcn Command in a popover.
Command Popover 3 - Command Popover with Separatorscommand-command-popover-3Command Popover with Separators using shadcn Command in a popover.
Command Popover 4 - Command Popover with Badgescommand-command-popover-4Command Popover with Badges using shadcn Command in a popover.
Command Popover 5 - Command Popover with Descriptionscommand-command-popover-5Command Popover with Descriptions using shadcn Command in a popover.
Command Popover 6 - Command Popover Actions Menucommand-command-popover-6Command Popover Actions Menu using shadcn Command in a popover.
Command Popover 7 - Command Popover with Status Indicatorscommand-command-popover-7Command Popover with Status Indicators using shadcn Command in a popover.
Command Standard 1 - Simple Command Menucommand-command-standard-1Simple Command Menu using shadcn Command.
Command Standard 2 - Command with Icons and Shortcutscommand-command-standard-2Command with Icons and Shortcuts using shadcn Command.
Command Standard 3 - Command with Separatorscommand-command-standard-3Command with Separators using shadcn Command.
Command Standard 4 - Command with Badgescommand-command-standard-4Command with Badges using shadcn Command.
Command Standard 5 - Command with Descriptionscommand-command-standard-5Command with Descriptions using shadcn Command.
Command Standard 6 - Command Actions Menucommand-command-standard-6Command Actions Menu using shadcn Command.
Command Standard 7 - Command with Status Indicatorscommand-command-standard-7Command with Status Indicators using shadcn Command.
Community 1 - Centered invite with logo and outline social buttonscommunity1A centered community section with a small logo, a two-line headline with a muted second line, and outline icon buttons for X, GitHub, and Discord.
Community 2 - Community links in a responsive four-card gridcommunity2A heading and supporting sentence above a responsive grid of bordered cards for Twitter, LinkedIn, GitHub, and Discord, each with an icon, title, description, and hover arrow cue.
Community 3 - Community badge with three large platform cardscommunity3A badge-labeled community header, supporting line with emphasized words, and three shadcn/ui cards for Twitter, GitHub, and Discord with oversized icons and short blurbs.
Community 4 - Dark gradient tiles for four social destinationscommunity4A centered title and subtitle above four full-height cards for Facebook, YouTube, X, and Instagram with radial dark backgrounds, dot texture, tinted icons, and chevron link rows.
Community 5 - GitHub spotlight card with stats and compact social linkscommunity5A GitHub community badge and intro above a wide card showing org logo, repo link, description, star, fork, and contributor stats over a grid pattern, plus small bordered Discord, X, and LinkedIn tiles.
Community 6 - Six-way community grid with dotted icon ringscommunity6A bold centered headline and subcopy above six shadcn/ui cards for Twitter, GitHub, Discord, LinkedIn, Slack, and Bluesky, each with a dotted circular icon frame, title, and short description.
Community 7 - Social channels with URLs, status dots, and follower countscommunity7A centered heading and intro line above a three-column grid of panels for six networks, each showing the icon, title, full URL, online or offline label, and formatted follower numbers.
Companies Create 1 - Sectioned Company Formcompanies-create1A multi-section company creation form with categorized fields for basic info, location, social links, metrics, and additional details using combobox and tag inputs.
Companies Create 2 - Company List with Sheet Formcompanies-create2A company database view with table listing and slide-out sheet form for creating new entries with combobox and tag selection inputs.
Companies Create 3 - Company List with Dialog Formcompanies-create3A company table view with dialog modal form for creating new entries featuring combobox team selection and multi-select category tags.
Companies Create 4 - Simple Company Dialog Formcompanies-create4A dialog-based company creation form with logo upload, contact fields with icons, and streamlined input layout for quick data entry.
Companies Create 5 - Grid Layout Company Dialogcompanies-create5A dialog-based company creation form with grid layout, logo upload with preview, and essential contact fields for streamlined data entry.
Companies Detail 1 - Company Table with Detail Sheetcompanies-detail1A company list table with clickable rows that open a slide-out sheet displaying detailed company information with icons and category badges.
Companies Detail 2 - Company Table with Extended Detailcompanies-detail2A company list table with clickable rows opening a detail sheet showing comprehensive company information including mission, tech stack, and funding details.
Companies List 1 - Advanced Company Data Tablecompanies-list1A feature-rich company data table with TanStack Table, sortable columns, row selection, column filtering, and filter popover for industry and funding filters.
Companies List 2 - Company Table with Column Visibilitycompanies-list2A data table with TanStack Table featuring sortable columns, row selection, search filtering, column visibility toggle, and add company button.
Compare Products 1 - Side-by-side product comparison with specs and cartcompare-products1This component allows users to compare multiple products side-by-side by displaying their specifications and key features in a tabular format. It includes interactive elements such as badges, pricing details, product ratings, and an option to directly add items to the cart.
Compare Products 2 - Product comparison table with images and pricingcompare-products2This component, "CompareProducts2," is designed for comparing multiple products with specific characteristics and specifications presented in a tabular format. It allows users to view product images, prices, ratings, and additional product details, facilitating easy comparison and decision-making.
Compare Products 3 - Product comparison with add, remove, and cart actionscompare-products3This component allows users to compare up to four products by showcasing details such as price, rating, reviews, and key highlights. Features include the ability to add or remove products for comparison and a call-to-action button to add selected products to the cart.
Compare Products 4 - Resizable before-and-after comparison with detail listcompare-products4This component provides an interactive side-by-side comparison of before-and-after images with adjustable panels, allowing users to visually analyze changes or transformations. It also includes a descriptive list section, offering detailed comparisons and insights for each product or item featured.
Compare Products 6 - Before-and-after comparison with captions and CTAcompare-products6This component allows users to visually compare "before" and "after" images with captions and descriptive text, using a resizable image panel interface. It includes a call-to-action button to direct users to additional information or actions related to the content displayed.
Compare 1 - Tinted three-column feature comparison with logoscompare1A Compare heading above a wide three-column matrix labeling each row, two competitor logos in green- and red-tinted headers, and cell values with optional check or X icons for later rows.
Compare 10 - Legacy pain points versus modern tool benefitscompare10A centered headline and short thesis, then a split layout with a muted Legacy Features list marked by X icons and shadcn/ui separators beside a bordered New Features column that pairs emoji icons with concise value statements.
Compare 2 - Dual product checklists with narrative follow-upscompare2A muted page-width section with a large centered title and thesis, two columns comparing Product A and Product B with shadcn/ui separators and icon lists, then two explanatory headings with long-form copy about suitability and differences.
Compare 3 - Three-column product comparison with logos and CTAcompare3A centered outline badge and headline introduce a three-column competitor grid with logos, feature row icons, green and red status markers, one secondary Soon badge row, and a full-width trial button beneath the matrix.
Compare 4 - Cloud vs on-site metrics rows with hover and CTAcompare4A muted section stacks a bold headline over Traditional versus Cloud Native metric rows with large figures and captions, small footer disclaimers keyed with symbols, and a pill Get Started button with trailing arrow icon.
Compare 5 - Side-by-side image cards with centered OR pillcompare5A centered Old versus New title and intro lead two tall photo cards with bottom gradient scrims, stacked white text, outline buttons, and a circular OR chip centered on the gutter between cards.
Compare 6 - Tab-assisted three-model feature comparison tablecompare6A bordered comparison table lists six storage attributes against SSD, Cloud Storage, and NAS with tinted circular status icons in each cell, sticky headers, and tabs on narrow widths that reveal one model column at a time.
Compare 7 - Compact three-column comparison table with tooltipscompare7Centered title and muted intro frame a bordered feature table whose middle column carries a muted fill for the primary stack, dotted underlines on selective secondary cells opening explanatory tooltips.
Compare 8 - Icon-led framework checklist with dual status columnscompare8Headline plus muted subtitle crown divided rows pairing Lucide icons, labels, blurbs, and dual status columns rendered as green checks, amber partial marks, red crosses, or neutral dash placeholders inside a rounded sheet.
Compare 9 - Three-model metric table with analysis deck belowcompare9Vendor logos headline three model columns of metrics with tinted best and worst cells, icon cues, coordinated column hover washes, monospace technical analysis cards, and a summary strip beneath the grid.
Comparison Content 1 - UI mockup comparisoncomparison-comparison-content-1Comparison of two non-image UI panels instead of photos.
Comparison Handle 1 - Labeled handlecomparison-comparison-handle-1Comparison handle with custom Before and After labels.
Comparison Hover 1 - Hover modecomparison-comparison-hover-1Comparison slider that reveals the after image on hover.
Comparison Standard 1 - Drag before and aftercomparison-comparison-standard-1Image comparison slider in drag mode with a default handle.
Compliance 1 - Two-column compliance narrative with stacked detail cardscompliance1Outline live-status badge, large balanced heading, supporting copy, paired grayscale certification marks, and three bordered stacked stories each pairing title paragraph text with anchored corner badge illustration.
Compliance 2 - Compliance feature grid with expert linkcompliance2This component, "Compliance2," is designed to showcase various compliance and risk management features with detailed descriptions, titles, and corresponding images. It includes a call-to-action link for users to consult with a compliance expert and access a tailored readiness checklist for standards like GDPR and HIPAA.
Compliance 3 - Security practices and certification badgescompliance3This component highlights essential security features and certifications, focusing on data protection and regulatory compliance for user assurance. It includes detailed sections for end-to-end encryption, regular audits, and compliance reporting, as well as visual representations of certifications like ISO 27001 and GDPR.
Compliance 4 - Split security overview and certification cardscompliance4This component provides a comprehensive compliance and security overview, showcasing key features such as data protection, access management, real-time monitoring, and global compliance. It includes visual elements for certifications like ISO 27001, SOC 2 Type II, GDPR, and CCPA, allowing users to verify and download related reports quickly.
Compliance 5 - Centered enterprise compliance headline and badge gridcompliance5Bold centered headline, muted enterprise subline, responsive two-through-four-column certification logos, closed by a large primary button coupling label copy with outward arrow glyph.
Compliance 6 - Compliance hero with certification lattice and three pillarscompliance6Narrow accent bar plus uppercase compliance label introduce oversized headline beside a bordered four-cell SVG lattice expanding at medium widths over a striped header atop three Lucide-led benefit columns below.
Compliance 7 - Cloud platform features and compliance badgescompliance7The Compliance7 component is a customizable block showcasing key features and certifications related to cloud infrastructure, emphasizing security and performance. It includes detailed descriptions of features and displays certification status badges, making it ideal for highlighting compliance and technical capabilities.
Compliance 8 - Certification logos with documentation buttoncompliance8This component highlights an organization's adherence to top compliance standards by displaying certifications like ISO 27001, GDPR, CCPA, and AICPA SOC. It features a button linking to detailed compliance documentation, facilitating easy access to information on data security and regulatory compliance.
Compliance 9 - Trust metrics with framework status cardscompliance9Three trust metric tiles above a split layout with sticky intro copy and paired CTAs beside linked framework rows showing certification logos, status badges, and descriptions.
Contact 1 - Demo booking with social proofcontact1A two-column demo booking section with overlapping avatars, benefit checks, a logo strip, and a detailed form including country, company size, and referral source selects.
Contact 10 - Gradient header with social linkscontact10A centered contact block with warm gradient, office and email lines, social icons, a faded dashed divider, and an inquiry form with optional company fields.
Contact 11 - Two-column layout with social linkscontact11A split contact section with address, labeled emails, and social icons on one side, an inquiry form on the other, and a vertical rule between them on wide layouts.
Contact 14 - Card with avatar and quick formcontact14A muted rounded card with a framed avatar, labeled contact lines, and a short two-field form plus button for callback-style requests.
Contact 16 - Dark theme with underline inputscontact16A dark two-column contact section with very large headline copy, muted supporting text, icon-backed phone and email links, and underline-only fields plus a ghost submit.
Contact 17 - Lead form with social proofcontact17A muted two-column lead section with process checks, an eight-logo grid, a bordered white form with budget select and legal microcopy, plus footer pointers for FAQ and resources.
Contact 18 - Support features with decorative cornerscontact18A two-column contact block with bracket ornaments on the headline, icon rows for support promises, a prominent mail link, and a muted rounded form.
Contact 19 - Split screen with full-height imagecontact19A dramatic split contact section with oversized type, muted copy, a ghost CTA, large phone and email links on one side, and a tall edge-to-edge photo column.
Contact 2 - Two-column layout with contact linkscontact2A split contact section with headline, intro, and icon links on one side and a validated message form with subject line inside a muted rounded panel.
Contact 20 - Borderless grid formcontact20A portfolio-leaning contact block with uppercase micro-labels, address and bold email in the header band, and a three-column grid of underline fields plus service select.
Contact 21 - Team message with underline formcontact21A two-column contact section with a team statement, avatar and byline on the left, and minimal underline-style name, email, and message fields with a squared submit control on the right.
Contact 22 - Multi-location map contactcontact22A two-column contact section with a selectable location list, embedded map, compact office card with phone and email, and a short validated name, email, and message form.
Contact 23 - Store locatorcontact23A store locator with zip search, a scrollable list of cards for address, hours, phone, and actions, and a wide map column that follows the selected store.
Contact 24 - Global offices gridcontact24A four-card grid of regional offices with map stills, gradient overlays, city typography, icon rows for address and contact lines, and full-width outline map links.
Contact 25 - FAQ with contact formcontact25A two-column support section with a single-open FAQ accordion on the left and name, email, and message fields in a rounded muted panel on the right.
Contact 28 - Multi-step contact formcontact28A three-step intake on a muted full-height canvas with a vertical progress column, per-step validation, white card fields, and a prominent success confirmation after submission.
Contact 29 - Service selection contactcontact29A muted full-height flow that starts with selectable service cards carrying large round icons and short blurbs, then opens a split headline and white card form.
Contact 3 - Contact directory with global officescontact3A long contact hub with centered CTAs and reassurance copy, four icon-led department tiles, and five office cards grouped with colored rectangular flag cues.
Contact 30 - Full-height hero contactcontact30A viewport-tall contact region on muted fill with oversized headline typography, circular white icon badges for channels, and a lifted white message card.
Contact 31 - Split card contactcontact31A rounded outer shell on muted canvas pairing a tall architectural photograph with headline, explanation, and name, email, optional company, and message fields.
Contact 32 - Split contact with full-height imagecontact32A two-column contact layout with tall photography and dark overlay text on one side, plus a form with mail and phone links on the other.
Contact 33 - Two-column contact with rounded photocontact33A section with headline, subject select, and message field opposite a tall rounded image, implemented with Shadcn UI fields and select.
Contact 34 - Asymmetric contact with overlay details cardcontact34A wide rounded photo with a floating email, phone, and address card sits beside a narrower column form with tagline and headline.
Contact 35 - Centered form over background imagecontact35A height-based section uses a full-bleed photo and dark scrim behind a centered rounded card for name, email, optional phone, and message.
Contact 4 - Department cards with fading map carouselcontact4A lead-in introduces three bordered department cards above a carousel that crossfades map slides, each with a summary card and link.
Contact 5 - Centered contact formcontact5A minimal centered stack collects first and last name, email, phone, and message with validation feedback and a full-width submit.
Contact 6 - Contact channels, form, and office hourscontact6Stacked channel cards and a message form with terms control sit above a separator, then office hours and contact facts in a two-part panel.
Contact 7 - Grid of contact method cardscontact7A heading and short description lead into four rounded muted cards for email, office, phone, and live chat, each with icon, copy, and link.
Contact 8 - Split media with framed contact cardscontact8A bold centered title sits above a two-column row with tall imagery and stacked white cards on an accent frame listing emails and two offices.
Contact 9 - Form beside contact method gridcontact9An outlined badge and large heading introduce a split layout with a terms-gated form on one side and icon-led channel summaries on the other.
Content 1 - Long-form story with sticky section outlinecontent1Narrative article layout with a sticky in-page outline, scroll-based active section highlighting, and rich body content including images, lists, tables, and callouts.
Content 2 - Content hub explainer with type gridcontent2Two-column layout that lists content types in a grid with icons, adds how-to panels for creating and managing items, and surfaces tips in an inline alert.
Content 3 - Deep guide with breadcrumbs and topic railcontent3Knowledge-style page with breadcrumbs, headline actions, a topic sidebar, and long article body with figures, a data table, and an inline alert, plus section-aware navigation.
Content 4 - Long article with outline and author rowcontent4Editorial layout with breadcrumbs, author metadata, scroll-aware table of contents, inline imagery, and a control to return to the top of the page.
Context Menu Canvas 1 - Layer Arrange Menucontext-menu-context-menu-canvas-1Layer Arrange Menu using shadcn ContextMenu.
Context Menu Canvas 2 - Align and Distribute Menucontext-menu-context-menu-canvas-2Align and Distribute Menu using shadcn ContextMenu with submenus.
Context Menu Canvas 3 - Group and Lock Menucontext-menu-context-menu-canvas-3Group and Lock Menu using shadcn ContextMenu.
Context Menu Canvas 4 - Layer Management Menucontext-menu-context-menu-canvas-4Layer Management Menu using shadcn ContextMenu.
Context Menu Canvas 5 - Transform Menucontext-menu-context-menu-canvas-5Transform Menu using shadcn ContextMenu with submenus.
Context Menu File 1 - File Operations Menucontext-menu-context-menu-file-1File Operations Menu using shadcn ContextMenu.
Context Menu File 2 - Copy and Move Menucontext-menu-context-menu-file-2Copy and Move Menu using shadcn ContextMenu.
Context Menu File 3 - Archive and Compress Menucontext-menu-context-menu-file-3Archive and Compress Menu using shadcn ContextMenu with submenus.
Context Menu File 4 - Share and Export Menucontext-menu-context-menu-file-4Share and Export Menu using shadcn ContextMenu with submenus.
Context Menu File 5 - File Properties Menucontext-menu-context-menu-file-5File Properties Menu using shadcn ContextMenu.
Context Menu Standard 1 - Simple Context Menucontext-menu-context-menu-standard-1Simple Context Menu using shadcn ContextMenu.
Context Menu Standard 2 - Context Menu with Icons and Shortcutscontext-menu-context-menu-standard-2Context Menu with Icons and Shortcuts using shadcn ContextMenu.
Context Menu Standard 3 - Context Menu with Separatorscontext-menu-context-menu-standard-3Context Menu with Separators using shadcn ContextMenu.
Context Menu Standard 4 - Context Menu with Labelscontext-menu-context-menu-standard-4Context Menu with Labels using shadcn ContextMenu.
Context Menu Standard 5 - Context Menu with Checkboxescontext-menu-context-menu-standard-5Context Menu with Checkboxes using shadcn ContextMenu.
Context Menu Standard 6 - Context Menu with Radio Itemscontext-menu-context-menu-standard-6Context Menu with Radio Items using shadcn ContextMenu.
Context Menu Standard 7 - Context Menu with Submenuscontext-menu-context-menu-standard-7Context Menu with Submenus using shadcn ContextMenu with submenus.
Context Menu Table 1 - Table Sort Menucontext-menu-context-menu-table-1Table Sort Menu using shadcn ContextMenu.
Context Menu Table 2 - Table Filter Menucontext-menu-context-menu-table-2Table Filter Menu using shadcn ContextMenu with submenus.
Context Menu Table 3 - Table Export Menucontext-menu-context-menu-table-3Table Export Menu using shadcn ContextMenu with submenus.
Context Menu Table 4 - Table Row Operations Menucontext-menu-context-menu-table-4Table Row Operations Menu using shadcn ContextMenu.
Context Menu Table 5 - Table Column Operations Menucontext-menu-context-menu-table-5Table Column Operations Menu using shadcn ContextMenu.
Context Menu Text 1 - Text Editing Menucontext-menu-context-menu-text-1Text Editing Menu using shadcn ContextMenu.
Context Menu Text 2 - Text Formatting Menucontext-menu-context-menu-text-2Text Formatting Menu using shadcn ContextMenu.
Context Menu Text 3 - Text Alignment Menucontext-menu-context-menu-text-3Text Alignment Menu using shadcn ContextMenu with submenus.
Context Menu Text 4 - Spell Check Menucontext-menu-context-menu-text-4Spell Check Menu using shadcn ContextMenu.
Context Menu Text 5 - Font and Style Menucontext-menu-context-menu-text-5Font and Style Menu using shadcn ContextMenu with submenus.
Contribution Graph Colors 1 - Custom level colorscontribution-graph-contribution-graph-colors-1Contribution graph blocks styled with custom data-level colors.
Contribution Graph Minimal 1 - Calendar onlycontribution-graph-contribution-graph-minimal-1Minimal contribution graph without footer count or legend.
Contribution Graph Sizes 1 - Larger blockscontribution-graph-contribution-graph-sizes-1Contribution graph with larger block size and margin.
Contribution Graph Standard 1 - Full-year contribution graphcontribution-graph-contribution-graph-standard-1GitHub-style full-year contribution calendar in a compact rectangle.
Cookie Banner 1 - Simple bottom cookie barcookie-banner1A fixed bottom cookie bar with short consent copy plus reject and accept actions.
Cookie Banner 10 - Bottom left card that expands to customizecookie-banner10An advanced bottom-left cookie card that expands upward to show category switches.
Cookie Banner 11 - Bottom left card that opens a dialogcookie-banner11An advanced bottom-left cookie card that opens a customize dialog with category switches.
Cookie Banner 12 - Bottom right card that expands to customizecookie-banner12An advanced bottom-right cookie card that expands upward to show category switches.
Cookie Banner 13 - Bottom right card that opens a dialogcookie-banner13An advanced bottom-right cookie card that opens a customize dialog with category switches.
Cookie Banner 14 - Mega bottom bar with switch listcookie-banner14A full-width bottom cookie panel with category switches visible by default plus bulk actions.
Cookie Banner 15 - Mega bottom bar with category cardscookie-banner15A full-width bottom cookie panel with a grid of category cards and switches already visible.
Cookie Banner 16 - Mega bottom bar with split summarycookie-banner16A wide bottom cookie panel with summary copy on one side and visible category switches on the other.
Cookie Banner 17 - Simple cookie consent dialogcookie-banner17A centered popup cookie dialog with consent copy and reject plus accept actions.
Cookie Banner 18 - Medium cookie dialog with detailscookie-banner18A centered cookie dialog that reveals category switches when customize is opened.
Cookie Banner 19 - Advanced cookie dialog with categoriescookie-banner19A centered advanced cookie dialog with category switches visible on load plus bulk actions.
Cookie Banner 2 - Bottom cookie bar with privacy linkcookie-banner2A fixed bottom cookie bar with title, supporting text, a privacy link, and reject plus accept actions.
Cookie Banner 3 - Bottom cookie bar with iconcookie-banner3A fixed bottom cookie bar with a cookie icon, consent copy, and reject plus accept actions.
Cookie Banner 4 - Bottom left cookie cardcookie-banner4A simple bottom-left floating cookie card with consent copy and reject plus accept actions.
Cookie Banner 5 - Bottom left cookie card with dismisscookie-banner5A bottom-left cookie card with dismiss control, consent copy, and a single accept action.
Cookie Banner 6 - Bottom right cookie cardcookie-banner6A simple bottom-right floating cookie card with consent copy and reject plus accept actions.
Cookie Banner 7 - Bottom right cookie card with linkcookie-banner7A bottom-right cookie card with a privacy link and reject plus accept actions.
Cookie Banner 8 - Bottom bar that slides up to customizecookie-banner8An advanced bottom cookie bar that slides up to reveal category switches when customize is opened.
Cookie Banner 9 - Bottom bar that opens a customize dialogcookie-banner9An advanced bottom cookie bar that opens a centered dialog with category switches when customize is selected.
Counter 1 - Counter buttoncounter-counter-1Animated counter with plus/minus buttons and sliding number transition.
Counter 2 - Counter with initial valuecounter-counter-2Counter button starting at 5 with custom min/max bounds.
Counter 3 - Counter outlinecounter-counter-3Counter button with outline/secondary styling.
Counter 4 - Counter secondarycounter-counter-4Counter button with outline/secondary styling.
Counter 5 - Counter pillcounter-counter-5Counter button with outline/secondary styling.
Counter 6 - Counter shadowcounter-counter-6Counter button with outline/secondary styling.
Counter 7 - Counter dashedcounter-counter-7Counter button with outline/secondary styling.
Counter 8 - Counter mutedcounter-counter-8Counter button with outline/secondary styling.
Counter Like 1 - Like countercounter-counter-like-1Heart toggle button with animated count and color change.
Counter Like 2 - Like counter outlinecounter-counter-like-2Like toggle counter with outline/secondary styling.
Counter Like 3 - Like counter secondarycounter-counter-like-3Like toggle counter with outline/secondary styling.
Credit Card Back 1 - Card backcredit-card-credit-card-back-1Credit card back with magnetic stripe, expiry, and CVV fields.
Credit Card Chip 1 - With chipcredit-card-credit-card-chip-1Credit card front with EMV chip detail and provider logo.
Credit Card Composition 1 - Full compositioncredit-card-credit-card-composition-1Complete card front with chip, number, name, expiry, and provider logo.
Credit Card Flip 1 - Flip on hovercredit-card-credit-card-flip-1Credit card that flips on hover to reveal front and back faces.
Credit Card Mastercard 1 - Mastercard brandcredit-card-credit-card-mastercard-1Front-facing card styled for Mastercard with provider branding.
Credit Card Standard 1 - Standard visacredit-card-credit-card-standard-1Front-facing Visa card with card number and provider logo.
Cta 1 - Card CTA with icon heading and trailing arrowcta1Bordered card with text and media columns, small icon badge beside the title, body copy, a single primary action with a trailing arrow, and a rectangular image on the opposite side.
Cta 10 - Banded call-to-action with dual buttonscta10Contained CTA band with headline, supporting text, and optional primary and secondary actions aligned inline on larger breakpoints and stacked when space is tight.
Cta 11 - Bordered CTA with icon label and single actioncta11Card-style split with an image column, inline icon beside the heading, supporting copy, and one text link-style primary action with a trailing arrow icon.
Cta 12 - Centered accent CTA with stacked actionscta12Full-width accent panel with centered headline, supporting copy, and optional primary and secondary buttons that stack on narrow viewports and align in a row when space allows.
Cta 13 - Left-aligned accent CTA with dual buttonscta13Accent panel call-to-action with left-aligned headline and body, optional primary and secondary buttons, and the same stacked-to-row button behavior as other simple CTAs.
Cta 14 - Contained image CTA with gradient overlaycta14A call to action with a background image inside a rounded container, a vertical gradient overlay for contrast, centered headline and description, and a single secondary button.
Cta 15 - Split CTA with gradient panel and photocta15Split CTA with optional byline, gradient-backed text, paired buttons, and a rounded photo with soft shadow and blur, stacking on narrow viewports.
Cta 16 - Contained image CTA with flat overlaycta16A call to action with a background image inside a rounded container, a uniform dark overlay, centered headline and description, and a single secondary button.
Cta 17 - Centered call to action with circle patterncta17A centered call-to-action band with bordered framing, concentric SVG circle backdrop, headline, supporting copy, and two large buttons.
Cta 18 - Split call to action with angled imagerycta18A horizontal card with text and paired link buttons opposite layered, rotated placeholder art plus a framed main image with corner padding.
Cta 19 - Call to action with resource links columncta19A wide card pairing badge, headline, body, and dual buttons with a separated column of two large icon link rows for deeper resources.
Cta 20 - Minimal call to action with line separatorscta20A compact centered strip with a small label above a large primary button framed by horizontal separator lines on both sides.
Cta 21 - Contained image CTA with text shadowcta21A call to action with a background image inside a rounded container, subtle text shadow for contrast instead of an overlay, centered headline and description, and a primary button.
Cta 22 - App download panel with newsletter asidecta22A wide dark promo tile with platform download buttons and phone imagery beside a muted newsletter form inside a three-column grid on large screens.
Cta 23 - Newsletter band with badge and benefit rowcta23A muted full-width newsletter strip with mail badge, headline, supporting line, inline email submit control, and wrapped checked benefit phrases.
Cta 26 - Photo banner call to action with link cardscta26A bordered photo banner with radial overlay, centered headline and supporting copy, paired buttons, and two bordered follow-up cards with icons.
Cta 28 - Dark enterprise split with layered photoscta28A dark rounded panel with oversized serif headline, supporting line, two-column icon feature grid, wide button, and offset stacked photography on extra-wide layouts.
Cta 3 - Call to action with link cardscta3A bordered two-column strip with headline, supporting copy, paired buttons, and two clickable icon rows styled as lightweight cards.
Cta 30 - Overlapping avatars team call to actioncta30A centered stack of overlapping circular avatars, large headline with supporting paragraph, rounded primary button, and handwritten-style caption with scribble graphic.
Cta 31 - Centered call to action with logo arccta31A centered call to action with a gradient headline, supporting line, large button and arrow icon, and integration logos in circular frames arranged in two mirrored arcs behind side-fading gradient bands.
Cta 32 - Two-column call to action with pattern panel and icon linkscta32A split CTA with a patterned primary column and a secondary column of two icon-led link rows with titles and descriptions, separated by a divider like Cta19.
Cta 34 - Call to action with top border separatorcta34A centered call to action with a heading, description, and two buttons, separated from content above by a thin top border and open spacing.
Cta 35 - Call to action with left border stripecta35A left-aligned call to action with a thick primary-colored vertical stripe, heading, description, and buttons inside padded content.
Cta 36 - Inline split call to actioncta36A horizontal split call to action with heading and description on one side and paired buttons on the other, closed by a bottom border.
Cta 37 - Bordered grid split call to actioncta37A bordered card call to action on a CSS grid with a wide text column and a narrow column of full-width stacked buttons.
Cta 38 - Inverted card call to actioncta38A centered call to action in a rounded card that fills with the foreground token, inverted type, and paired primary and outline buttons.
Cta 39 - Dashed outline card call to actioncta39A centered call to action inside a dashed rounded border with transparent fill, stacking heading, description, and buttons.
Cta 4 - Muted card with feature checklistcta4A two-column call to action inside a rounded muted shadcn/ui panel with heading, description, primary link button with arrow icon, and a checklist column using check icons.
Cta 40 - Gradient split pricing call to actioncta40A two-column call to action on a wide primary gradient card with a faint plus pattern, headline and dual desktop buttons on one side, and price block, checklist, and stacked mobile actions on the other.
Cta 41 - Full-width dotted panel call to actioncta41A bordered full-width call to action centered on a repeating dot texture, large headline, supporting copy, and two large primary and outline buttons.
Cta 42 - Contained image CTA with radial vignettecta42A call to action with a background image inside a rounded container, a radial vignette overlay that spotlights centered copy, and a primary button with a trailing arrow icon.
Cta 43 - Full-width image CTA with gradient overlaycta43An edge-to-edge call to action with a background image, vertical gradient overlay for contrast, centered headline and description, and a single secondary button.
Cta 44 - Full-width image CTA with flat overlaycta44An edge-to-edge call to action with a background image, uniform dark overlay, centered headline and description, and a single secondary button.
Cta 45 - Full-width image CTA with text shadowcta45An edge-to-edge call to action with a background image, subtle text shadow for contrast instead of an overlay, centered copy, and a primary button.
Cta 46 - Full-width image CTA with radial vignettecta46An edge-to-edge call to action with a background image, radial vignette overlay that spotlights centered copy, and a primary button with a trailing arrow icon.
Cta 5 - Call to action with side imagecta5A two-column CTA in a muted rounded panel with a wide photo, headline, supporting paragraph, and one primary button as a link.
Cta 6 - Call to action with stacked panelscta6A wide accent band with a text stack and three overlapping, rotated rectangles; heading, body, and a single Get Started button are fixed in source.
Cta 7 - Features checklist call to actioncta7An accent card with optional uppercase tagline, up to four checkmarked bullets in a responsive grid, and a large primary button aligned to the corner on wide screens.
Dashboard 1 - Revenue Dashboarddashboard1A full-page shadcn/ui SaaS revenue and user dashboard with collapsible sidebar, MRR and growth KPIs, MRR-by-plan chart, year-over-year revenue, ARPU and DAU trends, and users-by-plan mix.
Dashboard 10 - Multi-Page Dashboard with Navigationdashboard10A shadcn/ui multi-page dashboard with top navigation dropdowns, scatter chart, stacked bar charts, activity feed, and paginated orders table with responsive sheet navigation.
Dashboard 11 - Analytics Dashboard with Cohort Heatmapdashboard11A Shadcn UI analytics dashboard with animated bar chart, proportional bubble chart, cohort retention heatmap, and area chart with spring-animated reference line.
Dashboard 12 - Global Analytics with World Mapdashboard12A shadcn/ui global analytics dashboard featuring animated bar chart, proportional bubble chart, dotted world map visualization, and recent orders list.
Dashboard 13 - Real-Time Sessions & Latency Analyticsdashboard13A shadcn/ui realtime analytics dashboard with a large MapLibre map via mapcn markers, live KPI counters, streaming event feed, active sessions by country with flags, and p95 latency by country for top markets.
Dashboard 14 - Hotel Dashboard with Bookings Paneldashboard14A Shadcn UI hospitality dashboard with bidirectional occupancy chart, revenue bar chart with glow effect, arrivals table, and a bookings panel with date strip navigator.
Dashboard 15 - Hotel Dashboard with Revenue Widgetsdashboard15A shadcn/ui hospitality dashboard with duotone gradient occupancy chart, segmented room capacity bar, conic gradient donut, and revenue overview widget with channel breakdown.
Dashboard 16 - Hotel Dashboard with Mini Calendardashboard16A Shadcn UI hospitality dashboard combining sales analytics, revenue comparison, and booking management with a mini month calendar grid and tabbed booking lists.
Dashboard 17 - Hotel Dashboard with Booking Calendardashboard17A shadcn/ui hospitality dashboard with sales pipeline charts, revenue comparison, orders table, and an advanced booking calendar with date markers for arrivals, in-house, and departures.
Dashboard 18 - Hotel Operations Dashboarddashboard18A Shadcn UI front desk operations dashboard with shift strip, quick action buttons, square-cell booking chart, color-coded availability calendar, and sortable arrivals table.
Dashboard 2 - Revenue Dashboard with Transactionsdashboard2A shadcn/ui finance dashboard with revenue and cost charts, period tabs, and a transactions table with multi-filter dropdowns for status, date, and payment method.
Dashboard 3 - Revenue Dashboard with Sparklinesdashboard3A Shadcn UI dashboard with stat cards featuring embedded sparklines, revenue bar chart, transactions table, and scrollable activity feed.
Dashboard 4 - Ecommerce Dashboard with Sales and Ordersdashboard4A shadcn/ui e-commerce dashboard focused on orders and gross sales. Collapsible sidebar, sales KPIs and charts, sales by product category, recent orders with category column and filtering.
Dashboard 5 - Ecommerce Dashboard with Transactionsdashboard5A Shadcn UI ecommerce dashboard with area chart, pie charts for order status and sales categories, transactions table, and scrollable activity feed.
Dashboard 6 - Operations Dashboard with Fulfillmentdashboard6A shadcn/ui operations dashboard with summary stats, multi-series category performance chart with period tabs, and segmented progress bars for order fulfillment tracking.
Dashboard 7 - Orders Dashboard with Performance Chartdashboard7A Shadcn UI order management dashboard with stat cards, multi-series category performance chart, and paginated orders table with URL-synced status filtering.
Dashboard 8 - Sales Dashboarddashboard8A shadcn/ui accounting dashboard with collapsible sidebar, layered financial stat cards, paired revenue and pipeline charts, radar and heatmap analytics, and a searchable sortable invoices table.
Dashboard 9 - Sales Dashboarddashboard9A shadcn/ui overview dashboard with sidebar shell, header showing a date range label and filter actions, accounting stat cards, pipeline and revenue charts, orders table, and fulfillment progress list.
Data Table Advanced 1 - Expandable sub-rowsdata-table-data-table-advanced-1TanStack Table with expandable parent rows revealing nested task sub-rows.
Data Table Advanced 2 - Numeric paginationdata-table-data-table-advanced-2TanStack Table with numbered page buttons instead of only prev/next.
Data Table Advanced 3 - Resizable columnsdata-table-data-table-advanced-3TanStack Table with drag handles to resize column widths interactively.
Data Table Advanced 4 - Data table with actionsdata-table-data-table-advanced-4TanStack Table with a per-row actions menu for edit, copy, and delete.
Data Table Standard 1 - Basic data table with checkboxesdata-table-data-table-standard-1TanStack Table with row selection checkboxes, sortable columns, and selection count.
Data Table Standard 2 - Data table with filtersdata-table-data-table-standard-2TanStack Table with text filter on email and faceted status filter dropdown.
Data Table Standard 3 - Data table with column visibilitydata-table-data-table-standard-3TanStack Table with a dropdown to toggle which columns are visible.
Data Table Standard 4 - Paginated data tabledata-table-data-table-standard-4TanStack Table with page size control and previous/next pagination.
Data Table 1 - Basic Data Tabledata-table1A basic data table section with sortable columns, currency formatting, and availability badges. Built with TanStack Table for sorting functionality.
Data Table 10 - Hideable Columns Data Tabledata-table10A data table section with sortable columns, global search, column visibility toggle dropdown, and full pagination controls. Built with TanStack Table.
Data Table 11 - Row Selection Data Tabledata-table11A data table section with row checkboxes, floating action bar for bulk operations, global search, column visibility toggle, and full pagination. Built with TanStack Table.
Data Table 12 - Faceted Filter Data Tabledata-table12A data table section with global search, faceted filter popovers for order and payment status, column visibility toggle, and full pagination. Built with TanStack Table.
Data Table 13 - Tabbed Filter Data Tabledata-table13A data table section with tabbed status filters showing counts, global search input, and full pagination. Built with TanStack Table.
Data Table 14 - Multi-Filter Data Tabledata-table14A data table section with tabbed order status filters, button-style payment status filters, global search, and full pagination. Built with TanStack Table.
Data Table 15 - Pinned Columns Data Tabledata-table15A data table section with pinned columns on left and right, sortable headers, row selection, and row action dropdown menus. Built with TanStack Table.
Data Table 16 - Expandable Rows Data Tabledata-table16A data table section with expandable rows revealing detailed order information, sortable columns, row selection, and action menus. Built with TanStack Table.
Data Table 17 - Draggable Rows Data Tabledata-table17A data table section with drag-and-drop row reordering, sortable columns, row selection, and availability badges. Built with DnD Kit and TanStack Table.
Data Table 18 - Draggable Columns Data Tabledata-table18A data table section with drag-and-drop column reordering, sortable headers, and availability badges. Built with DnD Kit and TanStack Table.
Data Table 19 - Column Menu Data Tabledata-table19A data table section with draggable columns, column header dropdown menus for sorting and hiding, and availability badges. Built with DnD Kit and TanStack Table.
Data Table 2 - Bordered Data Tabledata-table2A data table section with visible cell borders, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
Data Table 20 - Resizable Columns Data Tabledata-table20A data table section with resizable columns via drag handles, sortable headers, and availability badges. Built with TanStack Table.
Data Table 21 - Column Management Data Tabledata-table21A data table section with column header menus for sorting, pinning, moving, and hiding columns, plus availability badges. Built with TanStack Table.
Data Table 22 - Nested Sub-Table Data Tabledata-table22A data table section with expandable rows containing nested sub-tables of order items, customer avatars, status badges, and row actions. Built with TanStack Table.
Data Table 23 - Grouped Rows Data Tabledata-table23A data table section with rows grouped by employment type, displaying group headers for full-time, contract, internship, and part-time categories. Built with TanStack Table.
Data Table 24 - Date-Grouped Transactions Tabledata-table24A data table section with transactions grouped by date, hidden column headers, and currency-formatted amounts. Built with TanStack Table.
Data Table 25 - Invoice Line Items Tabledata-table25A data table section displaying invoice line items with product, SKU, quantity, unit price, and total columns, plus summary rows for subtotal, tax, and grand total. Built with TanStack Table.
Data Table 26 - Transaction Table with Scroll Controlsdata-table26A data table section for financial transactions with sticky columns, horizontal scroll navigation buttons, sortable headers, row selection, and status badges. Built with TanStack Table.
Data Table 27 - Virtualized Data Tabledata-table27A virtualized data table section for large datasets with efficient row rendering, sortable columns, row selection, pinned columns, and row action menus. Built with TanStack Table and TanStack Virtual.
Data Table 28 - Cell Selection Data Tabledata-table28A virtualized data table section with multi-cell selection, keyboard navigation, CSV copy to clipboard, sortable columns, and pinned columns. Built with TanStack Table and TanStack Virtual.
Data Table 29 - Editable Cells Data Tabledata-table29A virtualized data table section with inline cell editing via double-click, right-click context menus, sortable columns, and multiple input types. Built with TanStack Table and TanStack Virtual.
Data Table 3 - Striped Data Tabledata-table3A data table section with zebra-striped rows, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
Data Table 30 - Search Highlight Data Tabledata-table30A virtualized data table section with in-table search highlighting, result navigation, sortable columns, and pinned columns. Built with TanStack Table and TanStack Virtual.
Data Table 31 - CRUD Data Tabledata-table31A virtualized data table section with add, edit, and delete row functionality, sticky footer for new rows, inline editing, and sortable columns. Built with TanStack Table and TanStack Virtual.
Data Table 32 - Multi-Sort Data Tabledata-table32A virtualized data table section with multi-column sorting via popover controls, sort priority management, row selection, and pinned columns. Built with TanStack Table and TanStack Virtual.
Data Table 4 - Responsive Scrollable Data Tabledata-table4A data table section with horizontal scrolling, sortable columns, custom cell styling, and a mobile swipe hint. Built with TanStack Table.
Data Table 5 - Sticky Header Data Tabledata-table5A fixed-height data table with sticky header, vertical and horizontal scrolling, sortable columns, and availability badges. Built with TanStack Table.
Data Table 6 - Paginated Data Tabledata-table6A data table section with sortable columns, minimal pagination controls showing previous/next buttons and row count. Built with TanStack Table.
Data Table 7 - Full Pagination Data Tabledata-table7A data table section with sortable columns, full pagination controls including page size selector, page jumps, and row count. Built with TanStack Table.
Data Table 8 - Single Column Filter Data Tabledata-table8A data table section with sortable columns, single-column text filter input, and full pagination controls. Built with TanStack Table.
Data Table 9 - Global Filter Data Tabledata-table9A data table section with sortable columns, global search input that filters all columns, and full pagination controls. Built with TanStack Table.
Date Picker Standard 1 - Date picker with rangedate-picker-date-picker-standard-1Popover calendar for selecting a start and end date range in one control.
Date Picker Standard 2 - Date picker with month and year selectordate-picker-date-picker-standard-2Calendar with dropdowns to jump month and year without paging month by month.
Date Picker Standard 3 - Date picker as appointment pickerdate-picker-date-picker-standard-3Side-by-side calendar and time slot list for choosing an appointment datetime.
Date Picker Standard 4 - Date picker with date and timedate-picker-date-picker-standard-4Calendar plus hour and minute scroll areas for a full datetime selection.
Date Picker Standard 5 - Date picker with natural languagedate-picker-date-picker-standard-5Calendar with shortcut buttons for Today, Tomorrow, and relative day labels.
Date Picker Standard 6 - Date picker with disabled datesdate-picker-date-picker-standard-6Calendar that disables weekends or other dates via disabled matcher props.
Date Picker Standard 7 - Date picker with multiple day selectiondate-picker-date-picker-standard-7Calendar in multiple selection mode for choosing several non-contiguous days.
Date Picker Standard 8 - Date picker with custom select day styledate-picker-date-picker-standard-8Calendar with custom modifiers styling selected or special days differently.
Deals 1 - Exclusive deals sheet with gift triggerdeals1A sheet panel opened from a gift icon trigger, listing promotional deals with alternating image and text rows, titles, descriptions, and shop CTAs.
Deals 2 - Stepped bundle builder with discount tiersdeals2A three-step tabbed bundle flow with product cards, a sticky progress summary, tiered discount goals, and an add-all-to-cart sidebar.
Deals 3 - Bottom collapsible newsletter discount bannerdeals3A bottom sheet promo bar that expands from a compact trigger to show a newsletter signup offer, description, subscribe CTA, and terms link.
Deals 6 - Side-tab deal picker with expert hover cardsdeals6A fixed side tab opens a dialog of radio-selected skincare deals with hover expert advice, bundle previews, and an add-to-cart form.
Deals 7 - Bottom-left offers bell with anchored dialogdeals7A fixed bell trigger with offer count opens a dialog anchored above it, listing home decor promos with thumbnail rows and short copy.
Deck Controlled 1 - Controlled indexdeck-deck-controlled-1Deck with controlled current index and external next button.
Deck Fan 1 - Fanned cards stackdeck-deck-fan-1Peeking deck fanned left and right so the stack reads as interactive.
Deck Peek 1 - Peeking card stackdeck-deck-peek-1Stacked deck with a clear peek of the cards underneath.
Deck Stack 1 - Deeper stackdeck-deck-stack-1Deck with a larger visible stack size behind the top card.
Deck Standard 1 - Swipe card deckdeck-deck-standard-1Swipeable card stack with empty state after the last card.
Deck Swipe 1 - Track swipe directiondeck-deck-swipe-1Deck that records left and right swipe decisions.
Dialog Standard 1 - Standard dialogdialog-dialog-standard-1Basic shadcn Dialog with trigger, header, share link field, and footer actions.
Dialog Standard 10 - Signup formdialog-dialog-standard-10Dialog containing name, email, and password fields for account registration.
Dialog Standard 11 - Signin formdialog-dialog-standard-11Dialog with email, password, and sign-in action for returning users.
Dialog Standard 12 - Invite team membersdialog-dialog-standard-12Dialog to enter email addresses and send team invitations from a workspace.
Dialog Standard 13 - Card detailsdialog-dialog-standard-13Dialog form for card number, expiry, and CVC entry in a payment flow.
Dialog Standard 14 - Checkoutdialog-dialog-standard-14Dialog summarizing order items, totals, and confirm purchase actions.
Dialog Standard 15 - Plan selectiondialog-dialog-standard-15Dialog comparing subscription plans with select or upgrade actions.
Dialog Standard 16 - Edit profiledialog-dialog-standard-16Dialog with avatar, name, and bio fields for quick profile updates.
Dialog Standard 17 - Onboardingdialog-dialog-standard-17Multi-step onboarding dialog walking through welcome and setup tasks.
Dialog Standard 2 - Scrollable dialogdialog-dialog-standard-2Dialog with a tall scrollable body region for content longer than the viewport.
Dialog Standard 3 - Scrollable dialog with sticky headerdialog-dialog-standard-3Scrollable dialog body with a header bar that stays visible while content scrolls.
Dialog Standard 4 - Terms and conditionsdialog-dialog-standard-4Dialog presenting scrollable legal text with accept and decline footer actions.
Dialog Standard 5 - Delete confirmationdialog-dialog-standard-5Destructive confirmation dialog requiring typed phrase before delete proceeds.
Dialog Standard 6 - Newsletter signupdialog-dialog-standard-6Dialog with email field and subscribe action for capturing newsletter signups.
Dialog Standard 7 - Feedbackdialog-dialog-standard-7Dialog with textarea and rating-style feedback submission for product input.
Dialog Standard 8 - Ratingdialog-dialog-standard-8Dialog letting users pick a star or numeric rating before submitting.
Dialog Standard 9 - OTP codedialog-dialog-standard-9Dialog with segmented one-time password inputs and verify action.
Dialog Stack Clickable 1 - Clickable prior layersdialog-stack-dialog-stack-clickable-1Dialog stack that lets users click earlier layers to go back.
Dialog Stack Controlled 1 - Controlled open statedialog-stack-dialog-stack-controlled-1Dialog stack open state controlled by parent React state.
Dialog Stack Nested 1 - Three-step flowdialog-stack-dialog-stack-nested-1Three stacked dialog panels for a longer setup sequence.
Dialog Stack Standard 1 - Two-step dialog stackdialog-stack-dialog-stack-standard-1Stacked dialogs with next and previous navigation.
Download 1 - App store download cardsdownload1A muted section with a centered headline and blurb, then three cards for desktop, iOS, and Android with icons, platform copy, a download button, and store badge images.
Download 10 - Desktop, mobile, and browser downloadsdownload10A center hero headline and supporting paragraph lead into three bordered columns for desktop buttons, mobile store badges in a grid, and compact outline buttons labeled with browser icons.
Download 11 - Windows downloads with preview framedownload11A split layout places Windows copy, MSI and EXE buttons, a Microsoft Store link, and compatibility notes beside a rounded dashboard image framed with Magic UI border beam animation.
Download 13 - Centered Windows download with winget copydownload13Centered desktop download with logo tile, Windows CTA, copyable winget command with feedback, architecture chips, and a link to other install methods.
Download 14 - Split desktop download with OS tabs and formatsdownload14Split desktop download with version metadata and resource links beside OS tabs, an installer format select, and a companion app callout.
Download 15 - Centered Windows primary with macOS and iOS linksdownload15Centered logo and headline with a primary Windows download button, then macOS and iOS secondary links under an also-available heading.
Download 17 - Version accordion with platform package listsdownload17Product header with auto-detected download CTA above accordion version rows that expand into macOS, Windows, and Linux package lists.
Download 18 - Product download with searchable integrationsdownload18Centered product pitch with primary and preview downloads, a checked feature list, and a searchable scrollable integrations panel.
Download 19 - Three-column OS downloads with requirementsdownload19Three bordered OS columns for Mac, Windows, and Linux with dual download buttons, minimum requirements, plus release archive and beta links.
Download 2 - Minimal three-column downloadsdownload2A softer muted backdrop with a centered title and intro, then three equal columns for desktop, iOS, and Android with large round icons, short copy, and badges or a download button.
Download 20 - Mobile download promo with QR and phone framedownload20Split mobile download promo with badge, headline, CTA, QR scan card, and an iPhone mockup showing the app UI.
Download 21 - Sales app download with features and phone calloutsdownload21Split sales-app download with a three-feature grid, star rating, store badges, iPhone mockup, and floating insight callout cards.
Download 22 - Split mobile download columnsdownload22A bold headline with two muted panels for iOS and Android, each with store badges, short copy, layered placeholders, and a phone mockup.
Download 3 - Single-file desktop download carddownload3A narrow centered column with logo, title, and intro, then a card showing version, size, checklisted requirements, primary and outline actions, trial line, and a trust line below.
Download 4 - Split download card with feature iconsdownload4A secondary badge and centered headline introduce a large card that pairs a feature list with rotating icons against a bordered download column showing version, size, and stacked buttons.
Download 5 - Multi-OS download with snippetsdownload5A product tile and dated title head a grid of Linux snippets, macOS architecture tabs with download rows, a Windows waitlist button, separators, and legal copy.
Download 6 - Versioned download grid with platform cardsdownload6Lists software versions vertically, badges the newest release, and links each OS variant inside a responsive two-column grid of bordered hover cards ending in a download icon.
Download 7 - App store promotion with phone mockupsdownload7Centered marketing band with outline badge, bold balanced headline, App Store and Google Play image links, and three phone frames that resize and reorder across breakpoints.
Download 8 - Centered download hub with platform matrixdownload8Client download section with a square glare-framed product visual, large product title, primary auto-detect button, last-updated line, and a bordered two-column table of platform rows with small outline actions.
Download 9 - Split software pitch with platform availability stripdownload9A two-column software block with headline, muted intro, checkmarked feature lines, paired Buy and Download buttons, a bordered product image, then a labeled icon row for many platforms and browsers.
Drawer Bottom 1 - Simple bottom drawerdrawer-drawer-bottom-1Vaul bottom Drawer with trigger button and short content panel.
Drawer Bottom 2 - Bottom drawer with formdrawer-drawer-bottom-2Bottom drawer containing labeled inputs and submit for a compact form.
Drawer Bottom 3 - Scrollable bottom drawerdrawer-drawer-bottom-3Bottom drawer with scrollable body for longer lists or copy.
Drawer Bottom 4 - Bottom drawer with snap pointsdrawer-drawer-bottom-4Vaul drawer with multiple snap heights the user can drag between.
Drawer Bottom 5 - Nested bottom drawersdrawer-drawer-bottom-5Stacked bottom drawers opening a second sheet from the first.
Drawer Bottom 6 - Bottom drawer without scale backgrounddrawer-drawer-bottom-6Bottom drawer that does not scale the page behind when open.
Drawer Bottom 7 - Bottom drawer event detailsdrawer-drawer-bottom-7Bottom sheet showing event title, time, location, and RSVP actions.
Drawer Left 1 - Simple left drawerdrawer-drawer-left-1Left-side drawer sliding in for supplementary content or actions.
Drawer Left 2 - Left drawer navigation menudrawer-drawer-left-2Left drawer with vertical nav links replacing a collapsed sidebar.
Drawer Left 3 - Left drawer with nested itemsdrawer-drawer-left-3Left navigation drawer with expandable sections for nested routes.
Drawer Left 4 - Left drawer with searchdrawer-drawer-left-4Left drawer combining search input with filtered navigation results.
Drawer Left 5 - Left drawer file explorerdrawer-drawer-left-5Left drawer listing folders and files in an explorer-style tree.
Drawer Right 1 - Simple right drawerdrawer-drawer-right-1Right-side drawer for detail panels opened from the main layout.
Drawer Right 2 - Right drawer filter paneldrawer-drawer-right-2Right drawer with filter controls for lists, tables, or search results.
Drawer Right 3 - Right drawer settings paneldrawer-drawer-right-3Right drawer hosting grouped settings fields and save actions.
Drawer Right 4 - Right drawer shopping cartdrawer-drawer-right-4Right drawer listing cart line items, quantities, and checkout CTA.
Drawer Right 5 - Right drawer notificationsdrawer-drawer-right-5Right drawer feed of notification items with read and dismiss actions.
Drawer Top 1 - Simple top drawerdrawer-drawer-top-1Top-edge drawer sliding down for banners or brief messages.
Drawer Top 2 - Top drawer search bardrawer-drawer-top-2Top drawer expanding into a full-width search field and results area.
Drawer Top 3 - Top drawer notification bannerdrawer-drawer-top-3Top sheet styled as a dismissible system or promo notification.
Drawer Top 4 - Top drawer quick actionsdrawer-drawer-top-4Top drawer grid of shortcut actions for frequent tasks.
Drawer Top 5 - Top drawer command bardrawer-drawer-top-5Top drawer with command palette style search and actionable items.
Dropdown Menu Actions 1 - File actions dropdowndropdown-menu-dropdown-menu-actions-1File row menu with open, rename, duplicate, and delete actions.
Dropdown Menu Actions 2 - Table row actionsdropdown-menu-dropdown-menu-actions-2Per-row overflow menu for view, edit, and archive on table records.
Dropdown Menu Actions 3 - Card actions with nested sharedropdown-menu-dropdown-menu-actions-3Card header menu with nested share submenu for social targets.
Dropdown Menu Actions 4 - Batch actions dropdowndropdown-menu-dropdown-menu-actions-4Toolbar menu applying actions to all currently selected rows.
Dropdown Menu Actions 5 - Quick actions menudropdown-menu-dropdown-menu-actions-5Compact overflow of frequent create and upload shortcuts.
Dropdown Menu Editor 1 - Text formatting dropdowndropdown-menu-dropdown-menu-editor-1Editor toolbar menu for bold, italic, underline, and link formatting.
Dropdown Menu Editor 2 - Block type selectordropdown-menu-dropdown-menu-editor-2Menu to change block type between paragraph, heading, and list.
Dropdown Menu Editor 3 - Insert options dropdowndropdown-menu-dropdown-menu-editor-3Menu to insert image, table, code block, or divider into content.
Dropdown Menu Editor 4 - Heading selectordropdown-menu-dropdown-menu-editor-4Dropdown choosing heading level H1 through H4 for the current block.
Dropdown Menu Editor 5 - Alignment optionsdropdown-menu-dropdown-menu-editor-5Menu setting text alignment left, center, right, or justify.
Dropdown Menu Profile 1 - Profile dropdown with avatardropdown-menu-dropdown-menu-profile-1Avatar trigger opening account links, settings, and sign out.
Dropdown Menu Profile 2 - Profile dropdown with statusdropdown-menu-dropdown-menu-profile-2Profile menu including online, away, and busy presence status radios.
Dropdown Menu Profile 3 - Account settings dropdowndropdown-menu-dropdown-menu-profile-3Menu linking to security, notifications, and billing settings pages.
Dropdown Menu Profile 4 - Multi-account switcherdropdown-menu-dropdown-menu-profile-4Profile menu listing workspaces or accounts with switch action.
Dropdown Menu Profile 5 - Profile with preferencesdropdown-menu-dropdown-menu-profile-5Profile menu mixing links with inline theme or density toggles.
Dropdown Menu Settings 1 - Theme selectordropdown-menu-dropdown-menu-settings-1Settings menu radio group for light, dark, and system theme.
Dropdown Menu Settings 2 - Language selectordropdown-menu-dropdown-menu-settings-2Menu listing locales with radio selection for interface language.
Dropdown Menu Settings 3 - Preferences dropdowndropdown-menu-dropdown-menu-settings-3Menu with checkbox toggles for notifications, sounds, and compact mode.
Dropdown Menu Settings 4 - Notification settingsdropdown-menu-dropdown-menu-settings-4Menu toggling email, push, and in-app notification channels.
Dropdown Menu Settings 5 - View optionsdropdown-menu-dropdown-menu-settings-5Menu controlling list density, column visibility, or layout mode.
Dropdown Menu Standard 1 - Simple dropdown with iconsdropdown-menu-dropdown-menu-standard-1Radix DropdownMenu with icon-leading items and separator groups.
Dropdown Menu Standard 2 - Dropdown with groups and labelsdropdown-menu-dropdown-menu-standard-2DropdownMenu with labeled sections grouping related menu items.
Dropdown Menu Standard 3 - Dropdown with shortcutsdropdown-menu-dropdown-menu-standard-3Menu items showing keyboard shortcut hints on the trailing side.
Dropdown Menu Standard 4 - Dropdown with checkboxesdropdown-menu-dropdown-menu-standard-4DropdownMenuCheckboxItem entries toggling column or filter visibility.
Dropdown Menu Standard 5 - Dropdown with radio itemsdropdown-menu-dropdown-menu-standard-5DropdownMenuRadioGroup enforcing a single selected option among items.
Dropdown Menu Standard 6 - Nested dropdowndropdown-menu-dropdown-menu-standard-6DropdownMenuSub opening a secondary menu for related child actions.
Dropdown Menu Standard 7 - Mixed features dropdowndropdown-menu-dropdown-menu-standard-7Dropdown combining icons, shortcuts, checkboxes, and nested submenus.
Dropdown Menu Support 1 - Support dropdowndropdown-menu-dropdown-menu-support-1Help menu with documentation, contact support, and status links.
Dropdown Menu Support 2 - Help menudropdown-menu-dropdown-menu-support-2Menu with keyboard shortcuts, tours, and FAQ entries.
Dropdown Menu Support 3 - Resources menudropdown-menu-dropdown-menu-support-3Menu linking to blog, changelog, API docs, and downloads.
Dropzone Images 1 - Images onlydropzone-dropzone-images-1Dropzone restricted to image file types.
Dropzone Multiple 1 - Multiple file uploaddropzone-dropzone-multiple-1Dropzone accepting more than one file at a time.
Dropzone Preview 1 - Uploaded file contentdropzone-dropzone-preview-1Dropzone showing content state after a file is selected.
Dropzone Size Limit 1 - Maximum file sizedropzone-dropzone-size-limit-1Dropzone with a maxSize constraint and caption.
Dropzone Standard 1 - Single file uploaddropzone-dropzone-standard-1Basic dropzone for uploading one file.
Ecommerce Footer 1 - Ecommerce footer with newsletter, language selector, and contact rowecommerce-footer1This component serves as a comprehensive footer block featuring a newsletter subscription form, a multilingual section for various language selections, and contact information including social media links. It includes customizable sections for footer links, enabling users to provide important information such as policies and collections, enhancing navigation and connectivity options for the user.
Ecommerce Footer 18 - Accordion ecommerce footer with newsletter form and contact blocksecommerce-footer18This component is designed for creating a customizable footer section with multiple sections such as contact information, social media links, shop categories, and support resources, organized in an accordion layout to enhance user interaction. It includes a newsletter subscription form, language selection, payment method icons, and a logo display, providing comprehensive footer functionality for user engagement and navigation.
Ecommerce Footer 19 - Ecommerce footer with support info row, accordion links, and brand panelecommerce-footer19This component provides a comprehensive footer block for digital platforms, featuring sections for a newsletter subscription, contact information, and footer navigation links. It includes integrated social media links and payment method icons, offering a versatile foundation for enhancing user engagement and site navigation.
Ecommerce Footer 2 - Accordion ecommerce footer with newsletter strip and social iconsecommerce-footer2This component is a footer block designed for webpage applications, featuring sections for newsletter subscriptions, navigational footer links, and social media icons. It includes form validation using a schema to ensure proper email input and utilizes an accordion layout for organized display of various informational links.
Ecommerce Footer 20 - Accordion ecommerce footer with brand story panel and payment iconsecommerce-footer20This component is a versatile and interactive footer block designed to enhance user engagement through features like a newsletter subscription form and social media links. It organizes helpful site links, payment methods, and additional footer information, making it a comprehensive footer solution for any web application.
Ecommerce Footer 9 - Ecommerce footer with store list, link columns, app badges, and paymentsecommerce-footer9This component serves as a detailed footer block that includes sections for store locations, company information, social media, app promotion, and payment methods. It features links to various store addresses, provides company policies and help topics, showcases social media icons, encourages app downloads, and displays supported payment options.
Ecommerce Hero 1 - Carousel With Paired Product Cardsecommerce-hero1An autoplay carousel on a primary-colored panel where each slide shows two columns with tall scene photos, overlaid product cards, and section titles beneath.
Ecommerce Hero 2 - Split Panel Image and Video Heroecommerce-hero2A two-row mobile, two-column desktop hero where each panel is full-bleed media with a dark scrim, either a headline and CTA or an inline product card with sale pricing.
Ecommerce Hero 3 - Background Hero With Product Carouselecommerce-hero3A rounded full-width hero with a dimmed background photo, left column copy and primary CTA, and right column autoplay carousel of product cards with quick view and prices.
Ecommerce Hero 6 - Split Hero With Product Carouselecommerce-hero6A three-column desktop layout with a large photo hero and CTA in two columns and a vertical autoplay product carousel in the third, with optional collection labels and quick actions on each card.
Ecommerce Hero 7 - Full Bleed Carousel With Product Detailecommerce-hero7A full-viewport autoplay carousel where each slide pairs full-bleed image or video with headline, copy, CTA, and a rich product card with gallery, badges, rating, and price.
Ecommerce Hero 8 - Dual Carousel Collection Heroecommerce-hero8A full-viewport autoplay hero with large background slides and serif headline copy, plus a linked thumbnail carousel of featured products that stays in sync with the main track.
Ecommerce Navbar 1 - Mega Menu Storefront Navbarecommerce-navbar1A full ecommerce header with logo, search, cart, and user actions, mega menus with image columns and featured tiles, currency or locale select, and a mobile sheet with contact row and social links.
Ecommerce Navbar 2 - Layered Dropdown Store Navbarecommerce-navbar2An ecommerce header with primary nav, search, cart with badge, wishlist and account entry, nested dropdowns and mega panels on desktop, and an accordion-based mobile sheet with grouped help and account links.
Editor Bubble 1 - Selection bubble menueditor-editor-bubble-1Format selected text with a floating bubble menu.
Editor Code 1 - Code blocks & inline codeeditor-editor-code-1Syntax-highlighted code blocks with inline code marks.
Editor Limit 1 - Character limiteditor-editor-limit-1Rich text field with a character limit and live counter.
Editor Lists 1 - Task, bullet & ordered listseditor-editor-lists-1Checklist, unordered, and numbered lists in one editor.
Editor Slash 1 - Slash commands & floating menueditor-editor-slash-1Insert blocks with slash commands or the empty-line floating menu.
Editor Standard 1 - Rich text editoreditor-editor-standard-1Full TipTap editor with slash commands, bubble menu, floating menu, and tables.
Editor Table 1 - Editable data tableeditor-editor-table-1Rich-text table with row, column, and cell management menus.
Editor Toolbar 1 - Fixed formatting toolbareditor-editor-toolbar-1Always-visible toolbar for block types and inline formatting.
Emoji Picker Basic - Emoji picker basicemoji-picker-emoji-picker-basicshadcnblocks EmojiPicker in a popover opened from an icon button.
Emoji Picker Custom Trigger - Emoji picker with custom triggeremoji-picker-emoji-picker-custom-triggerEmojiPicker opened from a custom-styled trigger instead of the default button.
Emoji Picker Different Variants - Emoji picker with different button variantsemoji-picker-emoji-picker-different-variantsMultiple triggers showing emoji picker on outline, ghost, and secondary buttons.
Emoji Picker In Form - Emoji picker in formemoji-picker-emoji-picker-in-formMessage textarea with adjacent emoji picker appending symbols on select.
Emoji Picker Text Trigger - Emoji picker with text triggeremoji-picker-emoji-picker-text-triggerText or link-style trigger opening the emoji popover.
Emoji Picker With Display - Emoji picker with displayemoji-picker-emoji-picker-with-displayPicker plus preview area showing the currently selected emoji.
Empty Actions 1 - Empty with single actionempty-empty-actions-1EmptyContent with one primary Button call to action.
Empty Actions 2 - Empty with multiple actionsempty-empty-actions-2Empty state offering primary and secondary buttons side by side.
Empty Actions 3 - Empty with link actionempty-empty-actions-3Empty state using a link-styled action instead of a solid button.
Empty Actions 4 - Empty with input actionempty-empty-actions-4Empty state combining Input with submit to capture first value inline.
Empty Actions 5 - Empty with stacked actionsempty-empty-actions-5Vertical stack of multiple buttons in EmptyContent.
Empty Data 1 - Empty tableempty-empty-data-1Table icon empty state prompting users to add their first record.
Empty Data 2 - Empty chartempty-empty-data-2Chart empty state explaining insufficient data for a graph.
Empty Data 3 - No notificationsempty-empty-data-3Inbox-style empty for zero notifications with calm messaging.
Empty Data 4 - No messagesempty-empty-data-4Conversation empty state for an inbox with no threads yet.
Empty Data 5 - No filesempty-empty-data-5File browser empty prompting upload or create folder.
Empty Search 1 - No search resultsempty-empty-search-1Empty state after search returns zero matches for the query.
Empty Search 2 - No filter resultsempty-empty-search-2Empty when active filters exclude all items though data exists.
Empty Search 3 - No matches foundempty-empty-search-3Generic zero-match empty for typeahead or live search lists.
Empty Search 4 - Try different keywordsempty-empty-search-4Search empty suggesting alternate keywords or broader terms.
Empty Search 5 - Clear filters suggestionempty-empty-search-5Search and filter empty with explicit clear all filters action.
Empty Standard 1 - Simple empty stateempty-empty-standard-1shadcn Empty with title only and no secondary actions.
Empty Standard 2 - Empty with descriptionempty-empty-standard-2Empty state with title plus supporting description text.
Empty Standard 3 - Empty with long descriptionempty-empty-standard-3Empty component carrying a longer explanatory paragraph.
Empty Standard 4 - Empty with large iconempty-empty-standard-4EmptyMedia icon variant sized prominently above the title.
Empty Standard 5 - Empty with multiple paragraphsempty-empty-standard-5EmptyDescription split into two paragraphs for structured guidance.
Empty Standard 6 - Empty without iconempty-empty-standard-6Text-only empty state omitting EmptyMedia entirely.
Empty Standard 7 - Empty with link in descriptionempty-empty-standard-7EmptyDescription containing an inline link to docs or setup.
Experience 1 - Work history rows with CV downloadexperience1Portfolio experience list with oversized section heading, trailing ghost CV link with download icon, and each role showing period, title and body copy, plus company label beside a square logo mark.
Experience 2 - Sticky intro with timeline columnexperience2Uses a wide grid split so a sticky left column holds display title with tenure superscript, supporting copy, and a rounded secondary contact button, while the right column lists employers, titles, and muted descriptions with pill date tags.
Experience 3 - Numbered experience list with resume controlexperience3Section opens with eyebrow label, large Experience title, intro paragraph, rounded download resume button with icon accent, last-updated note, then a table-like list with headers and reverse-indexed role titles tied to periods.
Experience 5 - Serif work experience with company logosexperience5Editorial work history with a large serif section title followed by repeating two-column roles that pair logo plus title with meta lines and body copy on the left against period and employer on the right.
Faq 1 - Centered accordion FAQ blockfaq1Narrow container FAQ heading above a collapsible accordion list where each question triggers expansion and answers render in muted body color for readability.
Faq 10 - Bordered FAQ band with labeled headerfaq10FAQ section framed by horizontal and vertical borders, starting with outline badge containing a question-mark icon and FAQ label, then large title, muted intro referencing the FAQ anchor, accordion items with bordered cards, and capped by matching border bands.
Faq 11 - Split FAQ with intro and category accordionsfaq11Two-column layout with introductory copy on one side and category headings on the other, each followed by an accordion of related questions.
Faq 12 - FAQ with category sidebar and scroll syncfaq12Categorized accordion FAQs with a sidebar that jumps to each group and highlights the active category as the main column scrolls.
Faq 14 - Centered FAQ with category accordion cardsfaq14Centered heading and subtitle above stacked Card sections; each card holds a category accordion on a soft patterned backdrop.
Faq 15 - Two-column icon grid with centered titlefaq15Centered section title above a responsive two-column grid of Lucide icons paired with headings and body copy; defaults use pet-adoption themed sample text.
Faq 16 - Centered narrow accordion FAQfaq16Narrow centered column with section title and accordion list where each question expands to show its answer text.
Faq 17 - Profile and contact column beside accordion FAQfaq17Wide grid with profile header, contact prompt, outbound contact link, and a primary column of accordion FAQ items for long-form answers.
Faq 18 - FAQ with tabbed categories and accordion answersfaq18This component provides a structured FAQ section using accordions organized under tabbed categories to help users find answers to common questions efficiently. It features customizable badges, titles, descriptions, and multiple categories, ideal for enhancing user experience with easily accessible information.
Faq 19 - FAQ with category list and accordion answersfaq19This component serves as a dynamic FAQ block, allowing users to navigate different categories of frequently asked questions through a tabbed interface. It features expandable accordion items for each question, offering a straightforward way to provide detailed answers and enhance user understanding.
Faq 2 - Single-column FAQ with bordered rowsfaq2A FAQ section with a heading and stacked question-and-answer rows separated by hairline borders, using plain typography without accordions.
Faq 20 - Categorized FAQ with Two-Column Layoutfaq20A two-column FAQ section with heading and contact link on the left, and categorized accordion questions on the right.
Faq 21 - Icon card FAQ gridfaq21Three-column FAQ card grid with topic labels, Lucide icons, always-visible answers, and a dashed support row.
Faq 23 - Inverted glass accordion FAQfaq23Inverted FAQ section with a centered headline and a frosted accordion panel over a soft primary glow.
Faq 25 - Compact one-liner FAQ rowsfaq25Numbered FAQ table of one-line questions and answers with topic tags, a support email, and a docs button.
Faq 26 - Editorial serif accordion FAQfaq26Serif accordion FAQ with a volume label, section ornament, long-form answers, and a printed colophon.
Faq 27 - Two-column FAQ cell gridfaq27Left-aligned FAQ intro above a two-column grid of always-visible question and answer cells divided by hairline gaps.
Faq 28 - Searchable accordion FAQfaq28Centered accordion FAQ with a live search field, filtered results, an empty state, and a running question count.
Faq 29 - Numbered inverted accordion FAQfaq29Inverted FAQ accordion with oversized index numbers beside each question and a trailing support line.
Faq 3 - Centered accordion FAQfaq3Centered section heading and intro paragraph above a single-column accordion of expandable questions and answers.
Faq 4 - Accordion FAQ with badge and support linkfaq4Accordion FAQ introduced by a small badge, with separators between items and a trailing link to contact support when answers are not enough.
Faq 5 - Numbered FAQ list with badge headerfaq5FAQ block with badge, title, intro copy, and a vertical list of numbered questions each paired with an answer paragraph.
Faq 6 - Numbered FAQ grid with badge headerfaq6Two-column FAQ section with a badge, headline and intro, and numbered rows that pair each question with a muted answer.
Faq 7 - Split FAQ with accordion and support CTAfaq7Two-column FAQ with a stacked headline, support blurb with inline link, outline button, and a shadcn Accordion list for questions and answers.
Faq 8 - Categorized FAQ accordions for two topicsfaq8Stacked FAQ bands with separate General and Billing sections, each showing a category label beside a full-width accordion on wide layouts.
Faq 9 - FAQ with card-style accordion itemsfaq9Bold FAQ heading above an accordion whose items use rounded muted panels instead of plain divider lines between questions.
Feature 1 - Two-column feature with square image and buttonfeature1Split feature section with a large heading, optional description, an outline call-to-action, and a square bordered product image in the second column.
Feature 10 - Icon feature columns with dashed bordersfeature10Small section label, bold heading, and up to four Lucide-backed feature tiles with dashed side borders on medium screens and circular accent icon wells.
Feature 101 - Bento capability grid with icons and imagesfeature101Centered header above a mixed-span bento grid of muted cards with Lucide icons, short copy, and hover-lift imagery on wide tiles.
Feature 102 - Numbered three-step timeline with side imagesfeature102Centered launch headline and intro, then three horizontal steps with circled numbers, vertical line connectors, text, and paired rounded images.
Feature 103 - Linked capability cards with badge headerfeature103Outlined badge and title over a responsive grid of bordered link cards with headings, blurbs, and circular arrow icons that highlight on hover.
Feature 104 - Three-column icon highlights with center imagefeature104Medal badge and centered copy introduce six bordered icon rows split into two side columns with a tall placeholder image between on wide layouts.
Feature 105 - Icon tabs with swapped imagesfeature105Centered intro with outline badge, headline, and supporting copy, plus many icon-labeled tabs on a line-style tab list; each selection shows a bordered aspect-video image.
Feature 106 - Tabs on desktop, accordion on mobilefeature106Four feature entries switch between a single-column accordion on small screens and a three-column split with vertical tabs plus detail pane on large screens, each with icon, excerpt, title, body, and image.
Feature 107 - Integration grid with linked cardsfeature107Responsive grid combining a two-column intro (outline badge, headline, paragraph) with six bordered link cards that each show a logo tile, pill-shaped Visit Website control, title, and short description.
Feature 108 - Tabbed two-column feature panelsfeature108Centered outline badge, display heading, and intro line feed a three-option tab row; each panel sits on muted rounded chrome as a two-column split with inner badge, large title, paragraph, primary button, and image.
Feature 109 - Split copy with framed photo overlayfeature109Two-column layout with outline badge, large heading, muted paragraph, and primary button opposite a rounded photo that carries a gradient wash, avatar chip, headline, and chevron text link on top.
Feature 11 - Split image with dotted list and outline buttonfeature11Two-column section with a square bordered image beside a large heading, muted paragraph, optional outline button with chevron, and a vertical list marked by small primary dots (up to six items).
Feature 110 - Bento grid with badges and avatar carouselfeature110Centered outline badge and headline introduce a two-column bento grid mixing outline icon badges, text cards, star rating social proof, outline tags, text links, and an auto-scrolling avatar carousel with edge fades.
Feature 111 - Centered pitch with dual muted columnsfeature111Outline badge, headline, paragraph, and capability link up top, then two equal muted columns each with outline badge, heading, supporting copy, chevron link, and a dark placeholder image with rounded top corners.
Feature 112 - Three-up image cards under centered introfeature112Centered heading, optional muted description, optional text link with chevron, then three bordered cards with top-weighted images and stacked titles plus body copy (props-driven defaults emphasize shipping-ready blocks).
Feature 113 - Icon tabs with muted split panelsfeature113Outline badge and short hero copy introduce three tabs (labels such as Speed and Flexible) whose panels repeat a two-column split with inner badge, large heading, paragraph, icon-bearing primary button, and rounded placeholder image inside muted rounded framing.
Feature 114 - Split feature section with vertical carouselsfeature114A two-column feature area with overlapping avatars, a headline and CTA, two numeric highlights, and side-by-side vertical carousels that auto-scroll feature cards with Lucide icons.
Feature 115 - Centered feature grid with outline badgefeature115A centered intro with outline badge, heading, and supporting line above a responsive grid of up to six image cards using muted card surfaces and aspect-ratio photography.
Feature 116 - Image bento with gradient hover overlaysfeature116A centered title and subtitle introduce a bento grid of linked image tiles with bottom gradient scrims, Lucide labels, and chevron-linked prompts on wide layouts.
Feature 117 - Three image feature columns with overlay cardsfeature117A centered heading and line of supporting copy sit above three wide image columns that use gradient scrims, Lucide-forward chips, and chevron links sourced from shared feature card content.
Feature 118 - Workflow feature stack with stats and contact rowfeature118A muted section with a centered intro, a split card row pairing a report highlight and checklist beside media, followed by a stat band and a simple contact prompt with chat link.
Feature 119 - Numbered steps with outline badge and wide imagefeature119An outline badge and large heading introduce three numbered rows with mono index badges, then a full-width rounded media strip for supporting context.
Feature 12 - Feature carousel with progress railfeature12A centered outline badge and section title sit above a shadcn carousel of feature cards, with a thin progress bar tied to scroll position and previous and next controls.
Feature 120 - Split proof header with stat stripfeature120A two-column hero-style row pairs headline, paragraph, paired avatars with titles, primary CTA, and a large rounded visual, then a separator and four headline stats in a grid.
Feature 121 - Interactive grid squares with expanding copyfeature121An interactive bordered grid of square tiles where uppercase labels anchor each cell, hover scales a circular Lucide icon, and a click toggles in-place descriptions.
Feature 122 - Bento grid with central CTA panelfeature122A responsive bento arranges five compact feature tiles around a larger accent panel that combines headline, primary button, and a wide rounded illustration for the main call to action.
Feature 123 - Intro column beside gradient-linked featuresfeature123A two-column marketing section with headline and supporting copy on one side and stacked feature rows on the other, each paired with a vertical gradient accent strip.
Feature 124 - Checklist and CTA beside patterned image columnfeature124A split layout with heading, body copy, checked benefit lines, and a button on one side and a framed image on the other over geometric patterns and soft gradients.
Feature 125 - Feature checklist beside masked illustration panelfeature125A dual-column block with headline, paragraph, checkmarked lines, and a button opposite a large image framed by masks, gradients, and texture overlays.
Feature 126 - Accordion feature list with swapping imageryfeature126A marketing section using accordion rows for titles and copy while a paired image updates to match the expanded item.
Feature 127 - Bento grid of utility tiles with icon headersfeature127A headline section followed by an asymmetric grid of cards mixing icons, titles, short copy, and faded background imagery or mini graphics.
Feature 128 - Centered icon grid with short blurbsfeature128A section title and subtitle above a responsive grid of items, each with an icon in a rounded frame and concise supporting text.
Feature 129 - Tabbed integration spotlight with imageryfeature129A titled section with tabs that switch integration stories, each pairing short copy, a learn-more link, and illustrative imagery.
Feature 13 - Two-column feature cards with linked titles and imageryfeature13A heading and optional intro above a two-column grid of cards that combine labels, linked titles, descriptions, and bottom-anchored images per feature.
Feature 130 - Three-column integration narrative with imageryfeature130A wide band divided into three parallel stories, each mixing an icon, title, paragraph, and supporting image about integrations or platform themes.
Feature 131 - Accordion copy column with paired focal imagefeature131A section framed by eyebrow text and headline where accordion rows expand narrative detail beside an image area tied to the active item.
Feature 132 - Centered heading with four linked image cardsfeature132A feature card list with a single centered title and a horizontal row of four links, each with a cover image, short title, and muted supporting line.
Feature 133 - Asymmetric bento with tall visual columnfeature133A wide feature layout with a primary card that pairs copy with a square image, plus two stacked cards for secondary points, using icons and bordered surfaces.
Feature 134 - Outline badge and mosaic of linked tilesfeature134A centered outline badge and heading introduce a responsive grid of bordered, clickable tiles mixing single- and double-width spans, each with text, a circular arrow control, and an image.
Feature 135 - Sticky intro column beside stacked feature cardsfeature135A two-column feature section with an outline label, heading, intro copy, and check-style highlight list opposite a vertical stack of bordered cards that pair icons with titles and descriptions.
Feature 136 - Metrics, narrative, and triad of benefit cardsfeature136A two-column hero-style slice pairs an outline KPI strip and copy with a large rounded image, then adds a three-up row of small bordered cards with icons and supporting text.
Feature 137 - Image-forward value cards and icon rowsfeature137A section that leads with a large heading, then a two-column grid of image-topped value cards, followed by full-width rows that alternate muted backgrounds while pairing icons with titles and descriptions.
Feature 138 - Three alternating split rows with learn linksfeature138A section framed by a title and subtitle, then three muted rounded rows that each pair a half-width image with copy, a thin divider, supporting text, and a text link with trailing arrow.
Feature 139 - Bordered spotlight card with four detail columnsfeature139A large bordered card holds a two-column top band with optional outline badge, heading, paragraph, and hero image, plus a lower responsive grid of up to four titled blurbs.
Feature 14 - Two stacked feature splits with numbered mediafeature14Two bordered grids each pair a text column containing a title, intro copy, and checkmarked bullets with a large image carrying a small numbered corner badge, stacked inside an outer framed container.
Feature 140 - Full-bleed carousel of text-and-image slidesfeature140A carousel section where each slide is a muted rounded panel with a headline and paragraph beside a large landscape image, controlled by prominent previous and next buttons anchored near the lower corners.
Feature 141 - Centered headline with framed image and testimonialfeature141A centered feature band with primary heading and muted subheading, nine-cell bordered frame around a central image, plus a sidebar with outline badge, hairline divider, quotation, and attribution.
Feature 142 - Mesh-framed image with checklist sidebarfeature142A two-column band pairing a taller mesh grid that wraps label text and image on a soft gradient, beside a headline, outline badge, rule, and up to four chevron-leading list rows.
Feature 143 - Checklist column opposite framed spotlightfeature143A mirrored mesh-moat pattern with text first: eyebrow headline, outlined badge, rule, capped chevron checklist, opposite a bordered nine-cell pastel frame enclosing a centered image.
Feature 144 - Stacked asymmetric cards beneath centered introfeature144A centered section title pair followed by three shadcn cards: top row pairs headline plus outline badge beside an image strip, bottom row lays two mirrored image-first cards side by side on wide layouts.
Feature 145 - Accordion chooser beside synchronized imageryfeature145A centered hero band with tinted span styling, muted body paragraph, rounded outline CTA, then split row where accordion items drive swapping desktop imagery masked over dotted texture while mobile nests an image preview inside expansions.
Feature 146 - Dashed-accent bento with dual headlinesfeature146A feature section opening with split headline column and supporting paragraph, then a bordered bento stack of two upper image-text rows and a lower row blending copy with wide photo, corner dash brackets, and cross markers.
Feature 147 - Integration matrix with split hero textfeature147Marketing feature band pairing a two-line headline block and supporting paragraph with a responsive three-column grid of shadcn cards showing logo tiles, titles, and muted descriptions for six integrations.
Feature 148 - Utility grid with primary action under introfeature148Centered heading, muted description, large primary shadcn button, then responsive one-to-three column card grid of up to six items each with top image, title, and supporting copy on borderless cards.
Feature 149 - Split widening panels over shared photo backdropfeature149Full-bleed rounded photo under two vertical halves separated by desktop-only notched spacer; each panel layers gradient veil, translucent outline pill, oversized white headline and paragraph, widening on wide-screen hover via animated width transition.
Feature 15 - Centered intro with paired icon tilesfeature15A feature band with optional eyebrow label, large centered heading, muted description, and a capped four-item two-column grid of accent-backed tiles each with circular icon well, title, and supporting text.
Feature 150 - Two-column CRM panels with hover imageryfeature150A two-panel CRM feature layout with headline and supporting copy, full-card photos that fade in on hover, and pill-shaped outline buttons with external arrows.
Feature 152 - Centered headline with staggered icon badgesfeature152Centered intro with eyebrow badge, headline, body text, and integrations link above staggered rows of small square icons paired with monospace badges, over concentric decorative rings.
Feature 153 - Integration carousel with detail linesfeature153A Shadcn UI carousel of integration slides, each with artwork, title, body copy, and short labeled detail lines, controlled with previous and next actions.
Feature 154 - Dual marquee rows of workflow badgesfeature154Full-width section with centered workflow headline, dual opposing marquees of Lucide-backed badges, soft gradient, and layered wave treatment behind the motion.
Feature 156 - Tabbed feature panel with large previewfeature156A tabbed marketing layout from Shadcn UI where selecting a tab swaps a large illustrative image and caption, with a subtle grid and radial wash behind the media.
Feature 157 - Services overview with paired image columnsfeature157Services-style band with eyebrow label, large title, and two parallel columns that each combine an image frame, headline, and supporting paragraph with a text link.
Feature 158 - Three-column feature highlights with footer CTAfeature158Three equal feature columns with imagery, headings, blurbs, and a shared footer button wired with Shadcn UI, centered titles, and roomy vertical spacing.
Feature 159 - Four-up integration icons with trailing linkfeature159Compact four-column row of icons with titles and short descriptions, finishing with inline text inviting visitors to browse the full integration catalog.
Feature 16 - Three pillar cards with outlined iconsfeature16Three equal cards with tinted backgrounds, outlined circular icons, bold pillar labels, and supporting copy for concise value statements on basic access.
Feature 160 - Grid tabs with swapping hero artworkfeature160Tabs laid out as a dense grid trigger icon, title, and blurb stacks while revealing a dominant image panel wired through shadcn/ui tab primitives for four milestones.
Feature 161 - Bordered grid with logos railfeature161Two-pane grid wrapped in muted hairlines and corner ticks, pairing bold headline plus paired Shadcn UI buttons with a horizontal trio of monochrome logos bordered by divider rails.
Feature 162 - Bento feature stack with rounded mediafeature162A feature section with a top row of lead copy beside a large image inside one bordered panel, and a lower two-cell row pairing stacked text and media with a second full-bleed image.
Feature 163 - Four-cell marketing grid with spanning columnsfeature163Four bordered feature cells on a responsive grid that use three- and two-column spans on large screens, each pairing a bold line and body copy with a corner-rounded image.
Feature 164 - Tabbed square media beside headline and CTAfeature164Two-column feature strip with tabs driving square rounded images and pill triggers on one side, and a large heading, supporting paragraph, and Learn more button on the other.
Feature 166 - Centered intro over four-panel feature matrixfeature166Centered title and muted intro precede a bordered two-by-two matrix of four prop-driven features, each with heading, description, and image in alternating three-fifths and two-fifths column widths.
Feature 167 - Vertical feature tabs with gradient active rulefeature167Outline badge, large balanced headline, and intro precede a split layout where stacked tab triggers with icons and copy face a tall image region that cross-fades between three productivity topics.
Feature 168 - Three-up feature rail with framed media wellsfeature168Bordered rail around a hero band with outline badge, very large heading, and muted intro, then a three-column grid of feature cells split by one-pixel gaps with images padded inside muted wells.
Feature 169 - Line tabs over wide bordered screenshotsfeature169Outline badge, headline, and supporting copy introduce a three-trigger tab strip with circular icon chips and gradient active rules, each selection revealing a wide rounded image with a light border.
Feature 17 - Six-up icon grid with centered introfeature17Optional secondary badge and large centered heading introduce up to six icon-led features in two columns, each with accent circle, title, and muted body, plus an optional large primary link button.
Feature 170 - Icon values strip with text linkfeature170Outline heart badge, large heading, muted description, and an underlined primary text link with arrow precede a responsive grid capped at three icon-led feature rows.
Feature 171 - Dashed rails linking horizontal feature cardsfeature171Muted section with dashed horizontal rule and centered mono label, two-column heading and intro, and one Card containing three image-forward tiles separated by dashed vertical or horizontal dividers and arrow links.
Feature 172 - Two-row grid with dashed dividersfeature172A centered headline anchors a stacked layout: two feature columns above, three below, separated by dashed rules with inset screenshots or multi-logo clusters.
Feature 173 - Three metric panels with humorous statsfeature173A two-column header leads into three oversized stat cards showing values, cheeky metric labels with outline icons, soft vertical gradients, muted footnote, and responsive grid tightening.
Feature 174 - Muted bento grid with soft image fadesfeature174Centered section title over a five-tile bento on a muted field; each shadcn Card blends inline title and description with a screenshot that fades at one or more edges.
Feature 175 - Vertical tabs with large preview panefeature175Intro row then a bordered region: vertical tab triggers with icons and blurbs swap a three-column-wide panel showing headline, body, and full-width preview image.
Feature 176 - Two-pane analytics vignette with chartfeature176Layered dotted grid backdrop frames two columns of shadcn cards: evaluation story with badges, progress, skeletons, and outline actions beside a stacked bar chart and three KPI tiles.
Feature 18 - Icon-led feature cards up to sixfeature18Left-aligned headline over a responsive grid (up to three columns on large screens) of bordered cards, each showing a custom icon, title, muted body, and optional Learn more affordance.
Feature 180 - With and without comparison columnsfeature180Centered pitch with outline badge and intro copy, then two parallel columns listing pain points versus wins, each row pairing an outline icon with a short line and contrasting surface treatment.
Feature 181 - Four numbered columns with timed badgesfeature181Left header and pill-shaped primary action above four vertical tracks, each oversized faded step numeral, feature title and copy, outline badge pairing clock icon with a duration label.
Feature 182 - Three image tiles with dual actionsfeature182Centered heading and paired primary and outline buttons lead into three equal cards: landscape image, title, muted description, and small bordered icon tile.
Feature 183 - Device-stage hero with overlay cards and statsfeature183Rounded muted stage with faint line grid anchors a centered phone mock flanked by floating product cards plus selects, followed by three large typographic KPI summaries laid out horizontally on wide screens.
Feature 184 - Tabbed features with image and stacked triggersfeature184A centered heading leads into a two-column area where a large image tracks the active tab and vertical tab triggers show icons, titles, and short copy, with paired primary and outline buttons below.
Feature 186 - Feature tabs with patterned background and mobile dotsfeature186A feature-tabs section with a tiled pattern backdrop, horizontal tab triggers, a wide content panel that shows an icon, title, body copy, and image, plus ghost dot buttons on small screens for picking a tab.
Feature 187 - Three-step process with connector linefeature187A feature-timeline section with a large title and intro, then three columns on wide screens where numbered circular markers and titles pair with descriptions, linked by a horizontal or vertical connector line.
Feature 188 - Bordered resource rows with thumbnailsfeature188A centered section title introduces a rounded bordered stack of linked rows; each row pairs a circular arrow affordance, title and description, and a landscape thumbnail on wide layouts.
Feature 189 - Split feature list with layered imagesfeature189A two-column feature section pairs a collage of three tilted overlapping images on one side with a headline, three stacked feature blurbs, and a secondary CTA with trailing arrow on the other.
Feature 19 - Centered tabs with slide detail and checklistfeature19A centered intro leads into horizontal shadcn tabs; each pane is a two-column layout with headline, body copy, two-column checklist with check icons, outline CTA, and a rounded image that orders first on mobile.
Feature 190 - Dense feature grid with square thumbnailsfeature190A centered heading and intro sit above a responsive grid of compact Card rows pairing a linked square thumbnail with title and short description, plus a secondary button centered beneath the grid.
Feature 191 - Feature grid with step badges on accentfeature191An accented feature section with outline badge and headline, then three cards each showing a mono step label, title, body copy, and a bordered image.
Feature 192 - Accordion features with desktop image syncfeature192Inside a rounded gradient-framed panel, an accordion lists feature titles and long descriptions; a large image beside it on medium and up reflects the open item, with the image inlined under each item on small screens.
Feature 193 - Asymmetric bento cards with mixed layoutsfeature193A mono eyebrow heads a five-column-aware grid of shadcn Cards where titles, multi-paragraph descriptions, and images appear in different arrangements, with large blurred gradient orbs and a faint plus pattern behind the section.
Feature 194 - Icon feature cards with learn-more buttonsfeature194A centered mono label, heading, and supporting line introduce a grid of up to four shadcn Cards showing an icon, short description, and full-width outline learn-more link with chevron affordance.
Feature 197 - Feature accordion with paired image panelfeature197A two-column section built around an accordion that switches feature copy and updates the large preview image beside the list.
Feature 198 - Three icon cards on staggered rowsfeature198Three feature cards with icons, titles, and blurbs sit in an offset grid so the row heights vary for a slightly asymmetric scan path.
Feature 199 - Scroll-linked feature list with sticky mediafeature199A wide text column lists feature entries while a separate column shows a large image that tracks which row is active as the user scrolls or hovers.
Feature 2 - Split feature row with image and dual actionsfeature2A two-column block with one column for media and the other for a heading, supporting paragraph, and paired primary and secondary buttons.
Feature 20 - Utility grid with header and learn-more linkfeature20A section header with a title and inline text link sits above introductory copy in two columns and a responsive grid of image-backed utility cards.
Feature 200 - Three gradient panels with icon feature listsfeature200Three equal-width columns each carry a tinted gradient panel, an icon, a title, and a vertical checklist of short sub-points for side-by-side comparison.
Feature 202 - Bento grid of image-backed solution tilesfeature202A centered heading introduces a mosaic grid of cards with photos, icons, headings, and blurbs; one wide tile spans two columns in the pattern.
Feature 203 - Four feature cards with checklist rowsfeature203Four cards in a two-column grid each show an icon, title, description, and a checklist with small separators between rows.
Feature 204 - Split visuals with icon-tagged lines and CTAfeature204One column shows a large image or collage while the other stacks a heading, icon-labeled benefit lines, supporting copy, and one primary button.
Feature 205 - Tabbed feature panel with stats over imageryfeature205Pill tabs switch between themes; each state shows body copy beside or over photography with numeric stat callouts tied to that theme.
Feature 206 - Centered header with bento image and text tilesfeature206A centered outline badge, headline, and intro lead into a bento grid that alternates square photos with rounded text panels, scaling from two columns on medium screens to four on extra-large.
Feature 207 - Numbered three-step workflow with separatorsfeature207A vertical workflow with a small overline, headline, and three numbered steps separated by lines; each step uses a two-column row on medium screens and up for title and body text.
Feature 209 - Split gallery with thumbnails and cross-fade previewfeature209A bordered split section with headline, clickable thumbnail strip, outline button, and a tall main image that cross-fades on selection, sitting over a subtle repeating pattern on the media side.
Feature 21 - Two-column grid of utility cardsfeature21Intro row with icon label, separator, split heading and paragraph, then two columns of Shadcn UI cards mixing plain text blocks, image-led cards, icons, outline badges, and one dashed coming-soon card.
Feature 210 - Icon-led feature links in a responsive gridfeature210Split header with label, icon, headline, and supporting paragraph over a grid of link rows that pair Lucide icons, titles, blurbs, and chevrons with a muted hover tray from small screens up.
Feature 211 - Rounded tab strip with variant media layoutsfeature211Muted rounded panel holds pill-style tabs in a horizontal scroller, then pairs serif headlines, primary icon tiles, summaries, and optional primary buttons with image layouts that change per tab.
Feature 213 - Vertical tabs with sixteen-by-nine imageryfeature213Centered headline introduces a tabs block where triggers stack vertically with bold titles and muted summaries, and each panel shows a wide image locked to a sixteen-by-nine aspect ratio frame.
Feature 214 - AI headline with video-on-hover carouselfeature214Centered serif title and subcopy lead into a shadcn/ui carousel of tall muted cards; each card shows a muted video that plays on hover, a corner icon chip, title, description, and link.
Feature 215 - Centered headline carousel with aspect-ratio video cardsfeature215Bold centered heading and muted intro precede a carousel of cards where each slide wraps a sixteen-by-nine muted video, overlapping icon badge, title, summary, and shared prev or next controls centered below.
Feature215a - Responsive video cards in a centered gridfeature215aIntro copy leads into a responsive card grid where each linked tile mixes title, summary, muted hover-to-play video, and an icon cue.
Feature215b - Stacked rows with side-by-side video and copyfeature215bCentered intro leads into full-width rows where each pairs a video thumbnail with icon, title, summary, and a small outline action.
Feature 216 - Icon tabs with large photo and round step controlsfeature216Tabbed showcase with shadcn/ui where six tinted icon triggers swap a wide photo and caption plus round secondary controls anchored at mid-image height.
Feature 217 - Accessibility story with hero image and icon columnsfeature217Full-bleed photo header with headline, paragraph, and framed image lifts into a calm three-column row of stacked icons, titles, and WCAG-aware blurbs below.
Feature217a - Centered hero band over three accessibility columnsfeature217aContrast-heavy photo backdrop centers headline, paragraph, and a framed illustration slot, followed by keyboard, screen reader, and color contrast talking points arranged in thirds.
Feature217b - Frosted accessibility tiles on photo backdropfeature217bShared headline introduces three bordered glass tiles with white type and translucent fills over the same futuristic photo backdrop as related blocks.
Feature 218 - Split upgrade column with soft-fade photo edgefeature218Top-level headline spans the section, then a roughly one-third text column with long-form copy and an outline action faces a wide square photo whose right side dissolves into the background.
Feature 219 - Patterned feature columns with three image layoutsfeature219Three extra-tall cards each pair headline, summary, faint texture, oversized index motif, and a distinct layered or offset image arrangement with optional icon companion.
Feature 22 - Checklist header with three outline showcase cardsfeature22Headline pairs with two checkmark columns, then three bordered cards show imagery, outline badges, dashed dividers, nested check rows, and read-more links.
Feature 220 - Split stats column with muted autoplay videofeature220Dotted muted backdrop holds a two-column layout pairing headline, supporting copy, primary CTA, three inline statistics, and a rounded autoplaying muted clip opposite.
Feature220a - Centered section with video and statsfeature220aCentered intro with badge, stacked headline with a primary accent line, supporting copy, large CTA, full-width muted video in a rounded frame, and three statistics in a card on a dotted background.
Feature220b - Stats row with split video and copyfeature220bThree headline statistics in a centered row above a two-column grid with a muted video on one side and a headline, paragraph, and CTA on the other over a dotted background.
Feature 221 - Feature grid with badges and gradient dotsfeature221Header row with left-aligned headline, supporting copy, and a pill CTA leads into a responsive two-column card grid where each tile has a badge, body text, gradient dot, and a rounded Learn More control.
Feature 222 - Image-forward cards with stat pairsfeature222Responsive grid of linked cards filled with photography, white titles, paired metric labels, and a small outlined Learn more control driven from a repeatable feature list.
Feature 224 - Carousel of photo cards with dual iconsfeature224Centered section title above a horizontal carousel of tall photo cards, each with stacked Lucide icons in a floating pill, eyebrow label text, title, and narrative copy about AI in nature.
Feature 225 - Selectable AI capability tiles with preview panelfeature225Centered headline and muted lead-in introduce a tab-driven layout where a responsive grid of clickable cards shows icons and blurbs, and the active selection reveals a wide preview image below.
Feature 227 - Split copy with checklist and photofeature227Two-column layout with a large headline, paragraph, and a two-column checklist using circular check icons on one side, and a bordered square photograph with corner gradient fades on the other.
Feature 228 - Smart home story with icon grid and galleryfeature228Muted two-column section pairs a large stacked headline, intro copy, and a small icon-led benefit grid with a collage of rounded product photos inside framed phone-style shells.
Feature 229 - Three pillars with icon headers and checklistsfeature229Wide headline introduces three equal columns for Security, Integration and APIs, and Support and Resources, each with a rounded icon tile, title, and checklist lines marked by small check icons.
Feature 23 - Centered header with three image cardsfeature23Centered optional outline badge, headline, and supporting line lead into a three-column grid of bordered image tiles with titles, muted descriptions, and text links labeled Learn more with chevron icons.
Feature 230 - Wide hero image with split headline and iconsfeature230A marketing feature band with a full-width image strip, eyebrow divider, oversized headline plus supporting paragraph, and four Lucide-backed feature tiles in a responsive grid.
Feature 231 - Numbered feature cards with split headlinefeature231A two-column feature section with a stacked multi-line headline, short intro, paired Shadcn buttons, and four numbered cards in a responsive grid.
Feature 234 - Centered headline with fanned image cardsfeature234A centered feature hero with oversized title, horizontal row of tilted image cards that respond to hover, supporting line, and two pill-shaped CTAs built on Shadcn buttons.
Feature 235 - Split promo with flicker tiles and shine borderfeature235A two-column promotional feature with dashed ghost CTAs on the left and a bordered preview panel on the right, combining ShineBorder framing, staggered flicker animations on thumbnails, and Shadcn buttons.
Feature 236 - Bracket-framed headline with ping indicatorfeature236A vertically stacked promo built with ShineBorder framing, Motion width reveal, layered headline area, subtitle, paired Shadcn buttons, and a green ping dot beside status copy.
Feature 237 - System capability cards with dense metricsfeature237A titled grid of linkable capability cards showing status chips, monospace KPI pairs, CPU or memory summaries, deployment metadata, trend coloring, and Lucide ornament, built without extra Shadcn surface components.
Feature 238 - Giant headline with layered browser cardsfeature238A centered marketing feature with eyebrow icon label, towering headline, muted intro, signup button beside text demo link with chevron drift, and three stacked faux browser cards animated with Motion.
Feature 239 - Split feature with dotted frame and image tilefeature239A bordered inset layout pairing outline badge headline body and outlined button opposite a dotted-frame media tile with dated overlay headline gradient wash and chevron teaser link.
Feature 24 - Compact promo row with headline split and banner imagefeature24A slim feature strip with icon label row, learn-more link, separator, split headline and body columns, and a wide rounded banner image on Shadcn layout utilities.
Feature 240 - Services carousel with image hover revealfeature240A Services heading over a looping Shadcn carousel of tall dotted-frame image cards with date lines, titles, copy, peeking slides on wide layouts, and prev or next controls.
Feature 241 - Team features grid with icon cardsfeature241A feature grid with a section heading and two columns of cards, each with an icon, title, short description, and hover motion.
Feature 242 - Testimonial carousel with slide controlsfeature242A testimonial carousel built on Shadcn UI carousel controls, with portrait images, quoted copy, attribution, and prev or next navigation plus a current-slide indicator.
Feature 243 - Vertical step timeline with cardsfeature243A vertical process timeline with a section heading and a connected column of cards, each step pairing an icon, title, and description.
Feature 244 - Feature carousel with dotted card framesfeature244A horizontal carousel of feature cards with imagery, titles, and body copy, each card inset inside a dotted outline frame and paired with carousel navigation.
Feature 245 - Two-column feature list with center imagefeature245A symmetric two-column layout of eight short feature lines with decorative slash marks and staged entrance motion, centered on a single elevated image card.
Feature 246 - Email signup panel with benefit checklistfeature246A conversion-focused column with a bold headline, checklist of four benefits with icons, email field and submit button, plus a supporting illustration or image panel.
Feature 247 - Centered scroll-driven text revealfeature247A narrow centered column where body copy reveals word by word tied to scroll position, with an optional title and configurable max width.
Feature 248 - Full-width dark panel with text revealfeature248An extra-wide centered section on a dark background where headline and supporting lines reveal by scroll, with type that scales up on large viewports.
Feature 249 - Aurora headline with scroll-scaled media cardfeature249A stacked section with gradient-styled headline text, supporting copy, and a scroll-driven card that scales and shifts above a large image or preview.
Feature 25 - Three feature bands with checkmark gridsfeature25A long-form feature section with a small badge, headline, then three separated bands of copy, each with a title and a four-column grid of checkmarked items.
Feature 250 - Animated network illustration with linked CPU nodesfeature250A feature section with a heading, body copy, and an illustration of CPU nodes linked by animated beams that stacks or widens with the viewport.
Feature 251 - Four feature cards with globe and animated beamsfeature251A feature grid of four cards with icons and copy, a globe visualization, and animated beams that link the cards in a responsive layout.
Feature 252 - Ripple panel with dashed border and primary CTAfeature252A contained feature band with a headline, supporting line, and button inside a rounded frame, plus a bottom-up ripple animation behind the content.
Feature 253 - Split feature with globe and animated arrow buttonfeature253A two-column feature with heading, body, and CTA beside a globe graphic; the button icon rotates on hover for extra motion.
Feature 254 - Orbiting avatar rings with center headline and CTAfeature254A hero-style feature with concentric rings of orbiting images around a center message and button that sells a developer community theme.
Feature 255 - Top contributors list with header actionsfeature255A contributor leaderboard with avatars, names, roles, short bios, and a header row that includes a secondary link-style control to see more entries.
Feature 256 - Developer tools grid and guides with spotlight cardsfeature256Two stacked bands: a responsive grid of tool cards with logos and spotlight hover, then a guides list with titles and descriptions in one or two columns.
Feature 257 - Curated tool catalog with tiered card sizesfeature257A showcase of tools grouped by category, with larger hero tiles for highlighted items and a denser grid for the rest, plus spotlight-style hover feedback.
Feature 26 - Six-up icon grid with section badgefeature26A feature overview with an optional badge, heading, and six icon-led items in a responsive grid up to three columns, each with title and copy.
Feature 261 - Marketing bento with stats, media, and avatarsfeature261A bento-style feature grid mixing photo panels, stat callouts, pricing snippets, and avatar clusters to summarize product strengths in one mosaic.
Feature 266 - Feature cards with image tooltips and staggered motionfeature266A small label and heading introduce up to six cards in a responsive grid, each pairing a thumbnail, title, description, and a shadcn/ui tooltip that enlarges the image on hover.
Feature 267 - Split feature with subscribe field and 3D marqueefeature267A two-column marketing slice pairs a kicker with icon, large heading, muted paragraph, and pill email field with a subscribe button beside a continuous 3D image marquee.
Feature 268 - Split feature with checklist and tilted 3D cardfeature268A wide column holds a headline, muted description, optional outline button, and checkmark list while a tilted 3D card presents promo copy, a hero image, and a ghost text action.
Feature 269 - Benefit grid beside tilted visual cardfeature269A centered-then-left headline, horizontal divider labeled Features, and two-column checklist of up to twelve items sit beside a tilted 3D card with stacked promo copy and a hero image.
Feature 27 - Overview band with two-up media and full-width rowfeature27An outline badge tops a centered heading and paragraph, followed by a two-up grid of bordered images with captions and a full-width media row spanning both columns below.
Feature 270 - Three tilted panels with alternating image stacksfeature270A heading and muted intro lead into three tall link panels that flip image and text order per item, each using perspective tilt and animated hover markers.
Feature 271 - Full-height feature list on aurora backdropfeature271A viewport-tall aurora animation sits behind a centered shadcn/ui badge, display heading, labeled divider, and two-column checklist of twelve short feature titles with badge icons.
Feature 272 - Dark three-step row with arrows and beamsfeature272A dark, centered how-to band introduces a kicker, large title, and paragraph above three bordered cells with arrow chips between them over animated background beams.
Feature 274 - Metrics grid with canvas hover revealsfeature274A centered heading and supporting paragraph introduce four tall stat tiles; hovering a tile plays a canvas particle field and swaps large numbers for paired labels like success rate or active users.
Feature 275 - Three canvas cards with step reveal copyfeature275Centered title and intro text sit above three rounded tiles that show large step numerals at rest and, on hover, canvas animation with titles, descriptions, and radial shading.
Feature 276 - Feature grid with shared hover highlightfeature276A centered feature section with label, headline, intro, and up to six icon cards in a responsive grid where hover animates a shared muted highlight behind the active card.
Feature 277 - Four-column feature cards with read morefeature277A centered feature section with label, headline, intro, and up to four cards with icons, body text, and Read More buttons; hover adds a tinted rounded backdrop per card.
Feature 278 - Full-height muted grid without subheadfeature278A tall muted section with a centered headline and up to six icon cards in a responsive grid; each card shows a colored rounded fill on hover and no separate section intro line.
Feature 28 - Two-column image pairs with learn more linksfeature28Two equal stacks of framed aspect-ratio images, headings, supporting text, optional badges, and Learn more links with chevrons, arranged side by side on large screens.
Feature 280 - Checklist and testimonial card stackfeature280A split row pairs a large heading, labeled feature checklist with check icons, and a horizontally divided list against a stacked deck of testimonial cards with inline emphasized phrases.
Feature 281 - Centered testimonial stack with read morefeature281A testimonials section with pill label, large title, animated stacked quote cards showing avatars and company marks, emphasized phrases in copy, and a ghost Read More link below.
Feature 282 - Security story beside interactive encrypt cardfeature282A two-column section with a primary-bordered panel housing an interactive hover-to-encrypt style card and captions opposite long security copy and a short dot-led bullet list.
Feature 283 - Centered CTA with draggable photo orbitfeature283A tall centered headline, supporting paragraph, and primary button with six photos absolutely positioned around the copy; images are draggable, animate into view on scroll, and blur or scale on hover focus.
Feature 284 - Bento image grid with proximity glowfeature284A responsive bento grid of image-led cards with badge labels, optional help icons, titles, and descriptions; cards span mixed widths and rows and pick up a soft glow as pointers approach.
Feature 285 - Brand column beside dual vertical image marqueesfeature285A rounded split panel: brand link and wordmark, headline, supporting text, and member button opposite two vertical marquees of photos; hovering one image blurs the rest.
Feature 286 - Product collection cards with glowing starsfeature286A marketing feature section with a heading and intro copy, three cards that show collection titles and prices with add-to-cart actions, glowing star backgrounds, and a trailing view-all control.
Feature 287 - Glowing star cards in a responsive gridfeature287A feature band with a title and up to four cards on a glowing star background, each with a heading and body copy, plus a secondary button beneath the grid.
Feature 288 - Centered copy with inline link previewsfeature288A single-column feature section whose paragraph embeds clickable link previews for common stack tools, centered heading and body built with registry link-preview styling.
Feature 289 - Split headline and link-preview stack listfeature289A two-column marketing feature with a large heading on one side and a vertical list of stack entries rendered as link previews with trailing arrow cues on the other.
Feature 29 - Bento-style grid of images and copyfeature29A marketing feature grid that mixes image tiles and text blocks with separators, pairing visuals with headings, supporting paragraphs, and inline links.
Feature 292 - Hiring band with pointer highlight and signup columnfeature292A two-column marketing band with a hiring pill, headline using pointer-follow highlight, supporting copy, email field and button, and a full-height side image.
Feature 293 - Full-viewport subscribe panel with sparklesfeature293A tall subscribe section with headline, short paragraph, email field and button on a gradient-backed canvas animated with drifting sparkles across the viewport.
Feature 294 - Five-up icon grid on sparkle fieldfeature294A marketing feature grid presenting five labeled points with icons and blurbs across up to three columns over an animated sparkle backdrop powered by the sparkles registry block.
Feature 295 - Filtered project grid with categories and rolesfeature295A project browser with category badges, a role selector, a show-all toggle, and a responsive one-to-three column grid of project cards with key metrics.
Feature 297 - Three image columns with numbered overlaysfeature297Three side-by-side image panels each carry a numeric label, headline, supporting text, and a subtle hover zoom on the photography.
Feature 299 - System pillars list with centered copy and browser mockupfeature299This component provides a comprehensive visualization of a system's architecture, detailing key features such as data hubs, contributor networks, and authorization processes, enhanced by icon representations for each element. It helps users understand connections and dependencies within the infrastructure, with an illustrative browser mockup for contextual reference.
Feature 3 - Icon-led feature cards with footer imageryfeature3Up to six shadcn/ui cards in one responsive grid, each with header icon, title, body copy, and a bottom image slot.
Feature 30 - Two framed images beside a copy columnfeature30A three-column marketing strip pairing two rounded images with one text column holding a headline and supporting paragraphs.
Feature 31 - Centered introduction with alternating image and text pairsfeature31Intro headline and paragraph over a staggered pairing of imagery and explanatory blocks each ending with inline text links.
Feature 312 - Story block with hero image and four-up stat cardsfeature312This component, Feature312, is designed to showcase impactful digital solutions, highlighting key statistics such as projects launched and client retention rates through visually appealing cards. It includes customizable headings, subheadings, descriptions, an image, and minor brand logos, making it suitable for highlighting accomplishments and client engagement metrics.
Feature 313 - Step card row with play-trigger video dialogfeature313This component features a visually engaging card grid and an interactive video section, allowing users to explore various topics through dynamic media content. It supports image and video displays, with animations and user-interactive elements for enhanced user experience.
Feature 314 - Studio grid with compact cards and large feature tilefeature314This component displays a dynamic gallery featuring a combination of multiple small cards and a prominent larger card, perfect for showcasing content with distinct headings, images, and descriptions. Equipped with interactive features, it includes motion effects on hover and the flexibility to integrate call-to-action buttons, making it suitable for both informative displays and promotional purposes.
Feature 322 - Scroll-driven feature cards with stats, imagery, and testimonialfeature322This component, named `Feature322`, highlights several features and includes a testimonial, all enhanced with animations using "framer-motion" to create an engaging user experience. It consists of interactive feature cards that display dynamic content such as titles, subtitles, statistics, and visuals, along with an animated scroll progress indicator and a testimonial section to offer a comprehensive overview.
Feature 323 - Vertical feature stack with expand-on-select cards and controlsfeature323This component enables users to browse a collection of features, displaying an animated card layout that reveals detailed information upon selection. It includes navigational controls for both desktop and mobile views, allowing users to easily switch between different items.
Feature 33 - Hero imagery above three linked feature columnsfeature33Upper stack of title, subtitle, and wide imagery over a trio of evenly matched columns each with headline, snippet, and text link.
Feature 34 - Bento grid mixing stats, logos, and photographyfeature34Headline and subhead over an irregular tiled grid pairing metric callouts with photography, badges, logos, and short supporting copy.
Feature 342 - Three-Column Feature Cards with Dashed Dividersfeature342A features section with a dashed line tagline, two-column header, and three feature cards in a horizontal layout separated by vertical dashed lines.
Feature 343 - Bento Grid Features with Dashed Dividersfeature343A bento-style features section with a centered heading and two rows of feature cards separated by dashed lines, featuring images and icon grids.
Feature 344 - Split Feature With Left Imagefeature344A two-column feature section with a large heading, supporting copy, and a two-column checklist beside a bordered image with gradient fades, image leading on wide screens.
Feature 345 - Split Feature With Right Imagefeature345A two-column feature section with the image on the right on medium screens and up, plus headline, body, outline button, and a checklist with circular check icons.
Feature 346 - Checklist Feature With Left Pattern Mediafeature346A split feature with a bold heading, checklist, and outline button opposite a tall media frame with cross-pattern mask, radial fade, and edge scrims; the media column leads on wide screens.
Feature 347 - Checklist Feature With Offset Left Mediafeature347A split feature matching the checklist plus outline button pattern, with a softer cross-pattern field and stronger edge vignettes on the media side; wide layouts place media on the left.
Feature 348 - Serif Promo Feature With Left Imagefeature348A large serif headline above a two-column grid with the wide image on the left and narrow copy plus primary button on the right, including an aspect-ratio photo and edge gradient on the image.
Feature 349 - Centered Feature Cardsfeature349A centered heading and description above a three-column grid of bordered cards, each with a square icon badge, title, and description.
Feature 35 - Large grid headline beside three arrow linksfeature35Oversized spanning headline beside three narrower columns each with title, body text, and chevron-accented outbound links.
Feature 350 - Centered Four Column Feature Gridfeature350A centered label, heading, and description above a four-column grid of minimal icon stacks with circular badges.
Feature 351 - Left Aligned Four Column Featuresfeature351A left-aligned heading with badge and description above a four-column grid of compact feature items with bordered icon badges.
Feature 352 - Left Aligned Two Column Feature Cardsfeature352A left-aligned label, heading, and description above a two-column grid of large bordered cards with circular icon badges.
Feature 353 - Centered Heading Four Column Accent Cardsfeature353A centered heading above a four-column grid of muted accent cards with circular icon badges, titles, and descriptions.
Feature 354 - Grid Integrated Heading With Icon Cardsfeature354A heading and description embedded as the first cell in a four-column grid alongside three bordered icon cards with square badges.
Feature 355 - Centered Feature Link Cardsfeature355A centered intro with label, heading, and description above a six-item three-column grid of bordered link cards with hover state and per-item CTA.
Feature 356 - Left Aligned Three Column Accent Cardsfeature356A left-aligned badge, heading, and description above a three-column grid of muted accent cards with circular icon badges.
Feature 357 - Centered Large Icon Feature Rowfeature357A centered heading and description above a three-column row of features with large thin-stroke standalone icons.
Feature 358 - No Intro Three Column Bordered Cardsfeature358A three-column grid of bordered feature cards with bordered square icon badges, no section heading or intro.
Feature 359 - Centered Two Column Accent Feature Cardsfeature359A centered heading and description above a two-column grid of horizontal muted accent cards with circular icon badges beside text.
Feature 36 - Case study grid with featured cardfeature36A bento-style feature grid with one wide highlighted case study card and five smaller cards, each with a title, optional badge on the lead card, and a continue-reading link.
Feature 360 - Left Aligned Divided Feature Gridfeature360A left-aligned label, heading, and description separated by a horizontal rule from a three-column grid of icon-title-description rows.
Feature 361 - Centered Four Column Inline Icon Featuresfeature361A centered heading and description above a four-column grid where each item has a small tinted icon badge inline with the title.
Feature 362 - Split Layout With Three Column Feature Gridfeature362A sticky left column with badge, heading, and description beside a two-thirds-width three-column grid of six bordered icon cards.
Feature 363 - Centered Feature Cards With Button CTAfeature363A centered heading and description above a three-column grid of bordered cards, each with a circular icon badge and a ghost button link.
Feature 364 - Minimal Four-Column Icon Gridfeature364A four-column grid of icon tiles with titles and descriptions, no section heading or borders.
Feature 365 - Minimal Three-Column Icon Gridfeature365A three-column grid of icon tiles with circular badges, titles, and descriptions, no section heading or borders.
Feature 366 - Minimal Inline Icon Gridfeature366A six-item inline icon grid with icons beside text, no section heading or borders.
Feature 367 - Minimal Centered Four-Column Gridfeature367A four-column centered icon grid with circular badges, no section heading or borders.
Feature 368 - Minimal Centered Three-Column Gridfeature368A three-column centered icon grid with circular badges, no section heading or borders.
Feature 369 - Minimal Naked Icon Gridfeature369A six-item centered grid with bare icons and no icon backgrounds, section heading, or borders.
Feature 37 - Asymmetric bento grid with image tilesfeature37A wide marketing grid of four image-led tiles on a five-column track, with variable column spans, rounded panels, and accent-tinted backgrounds behind each image and text stack.
Feature 370 - Wide feature carousel with tabsfeature370A full-width feature section with a sixteen-by-nine image carousel driven by a row of selectable tabs below, each pairing an icon, title, and short description.
Feature 371 - Bento Stat Grid With Imagefeature371A muted bento section with a wide image, indented narrative text, and a two-by-two stat grid with numbers, labels, one descriptive cell, and logo marks, with no top section label or headline.
Feature 372 - Checklist Feature With Right Pattern Mediafeature372A split feature with a bold heading, checklist, and outline button on the left, and a tall media frame with cross-pattern mask, radial fade, and edge scrims on the right on wide screens.
Feature 373 - Split Feature Bleeding Image Leading Leftfeature373A sibling of feature87 with the same headings, icon list, and outline CTA on a narrow column, opposite a muted two-column-wide tray where a bordered four-by-three image bleeds off the outer left edge under a directional shadow toward the copy.
Feature 374 - Editorial split feature with side railfeature374A two-column feature section with optional label, stacked headline with accent line, numbered list, outline button-style CTA, and a portrait image in a framed tile with a diagonal fade toward the copy column.
Feature 375 - Split feature with contained leading imagefeature375A two-column feature with photography leading on large screens, checklist-style lines, outline CTA, and a centered bordered landscape image on a muted tray with a soft radial glow and restrained shadow.
Feature 376 - Centered feature overview with icon gridfeature376A centered heading and intro, a muted bordered tray carrying a sixteen-by-nine landscape image with a soft glow, then three icon-led detail cards in a responsive row.
Feature 377 - Editorial split with leading portrait imagefeature377A two-column editorial feature with the portrait image leading on wide layouts, optional label, stacked headline with accent line, numbered list, outline CTA, and a diagonal mask fade from the bottom-right of the frame toward the copy column.
Feature 378 - Minimal split with leading masked imagefeature378A compact two-column feature with four icon-led title rows, short body copy, outline CTA, rounded image tile, horizontal mask mirrored so fade faces the trailing copy column; image leads on wide layouts.
Feature 379 - Three-Column Feature Cards With Inline Iconsfeature379A feature section with a centered heading above a three-column grid of image cards, each with a compact icon beside the title and a short description.
Feature 38 - Minimal split feature with masked imagefeature38A tight two-column feature with four icon-plus-title rows (no dividers), short body copy, outline CTA, and a rounded bordered image that shares a left-to-right fade with the photo toward the copy column.
Feature 380 - Simple Feature cards with carousel on smaller screensfeature380A feature section matching feature39's large-screen grid but swapping to a carousel below large breakpoints with full-width slides on phones and two cards on tablet; prev and next sit beside the headline on those widths. Desktop keeps the three-column grid without carousel arrows.
Feature 381 - Six feature cards in an all-breakpoints carouselfeature381Like Feature380 card styling but six items and one carousel everywhere with prev and next beside the headline; one slide on phones, two from tablet widths up, three visible from large screens up, rounded-md outline buttons.
Feature 382 - Split copy and photo collagefeature382Editorial copy with checklist and CTAs beside a four-cell photo collage.
Feature 385 - Zigzag editorial photo rowsfeature385Alternating full-bleed image and copy rows for an editorial photo series.
Feature 39 - Simple 3 column feature cards with imagesfeature39A feature section with a heading and three image cards in a responsive grid, each with a title and description.
Feature 4 - Collaboration feature with cards and quotefeature4A marketing section with a section title, a primary card pairing body copy with a large image, and a second row that splits a smaller card against a testimonial-style quote panel.
Feature 41 - Split heading with four city addressesfeature41Section heading beside a two-by-two grid of city names and mailing lines, each prefaced by a small tinted marker on a responsive split row.
Feature 42 - Values heading spanning a three-column gridfeature42Large heading occupies a double-tall cell on the left while four value titles and body paragraphs fill the remaining cells of a three-column grid.
Feature 43 - Icon reasons with centered call to actionfeature43Centered section title above six circular icon tiles in a responsive three-column grid, with a large primary button centered beneath the set.
Feature 44 - Integration cards with square logosfeature44Section title and intro line above a responsive card list where each item shows a square mark, integration name, and short supporting copy in one to three columns.
Feature 5 - Two feature cards in a bento gridfeature5One wide card spans two columns beside a taller narrow card on large layouts; both combine an icon, title, paragraph, and square image inside bordered panels.
Feature 50 - Centered pitch with three linked tilesfeature50Centered headline, deck copy, and outline button lead into three muted link tiles that mix eyebrow labels, titles, supporting text, imagery, and learn-more actions in an uneven grid.
Feature 51 - Stacked icon tabs with feature imageryfeature51Three tab triggers with circular icon wells, headings, and blurbs swap a large feature image; triggers stack vertically on small screens and align in a row from medium widths up.
Feature 52 - Six icon tabs with wide previewfeature52Six compact tab triggers with primary-tinted icons sit above a large landscape image that updates as each product pillar is selected.
Feature 53 - Numbered logo matrix with hairline gridfeature53Two-column table tightens into four columns on wider screens with one-pixel dividers, mono index labels paired with titles, and centered wordmarks per cell.
Feature 54 - Five feature tabs with subfeature columnsfeature54Centered section title above five text tabs that swap a wide bordered image and, on medium-plus widths, a three-column row of subfeature titles and descriptions, with dot controls on small screens.
Feature 55 - Centered feature with headline and outline buttonfeature55A centered single-column feature with a large heading, supporting paragraph, and outline button for a simple, focused call to action.
Feature 56 - Lead feature panel with three supporting cardsfeature56A bento-style feature section with one wide accent panel and image, then three smaller bordered cards in a row, each pairing copy with an image.
Feature 57 - Feature list synced to a carouselfeature57A marketing feature block with outline badge, headline, and intro copy, then a selectable feature list beside a bordered carousel with dot indicators and a bottom gradient overlay on slides.
Feature 58 - Editorial feature with framed media and icon checklistfeature58A single-column feature with optional badge and label, stacked headline with optional secondary line, one primary CTA, a full-width four-by-three framed image, then up to four icon-and-text rows in two columns.
Feature 59 - Wide lead card with tall sidebar bentofeature59A two-column bento grid with a full-width lead card on accent, one tall feature card beside two standard cards, each pairing label, copy, and rounded images.
Feature 6 - Split feature with checklist and square imagefeature6A two-column feature with heading, body, up to four checkmarked bullets with primary-colored icons, and a square bordered image, driven by the shared single-focus content pattern.
Feature 60 - Image-left split with stacked body copyfeature60A two-column feature from the single-focus pack with a square bordered image on the first side and a heading plus one or two muted paragraphs on the other.
Feature 61 - Image-right split with stacked body copyfeature61A mirrored two-column single-focus feature with a square bordered image on one side and a heading with one or two muted paragraphs on the other, reversed on large screens.
Feature 62 - Three alternating image-and-text rowsfeature62A vertical stack of three feature rows, each a two-column split on large screens with four-by-three bordered images and headline plus muted copy, alternating which side carries the image.
Feature 63 - Centered heading with six image cardsfeature63A card-list feature with centered title and optional description above a responsive grid of up to six items, each with a four-by-three image, bold title, and supporting text on accent.
Feature 64 - Coming soon band with asymmetric pairfeature64Outlined coming soon badge with centered heading and supporting copy above a seven-column desktop grid that splits into one wide and one narrow card, each holding an image and short feature text.
Feature 65 - Four expandable columns with color railsfeature65A four-up row of category strips, each with a vertical color bar, bold title, icon, and body that expands on small screens or stays open on large screens, with outline badges listing deliverable-style tags.
Feature 66 - Two image tiles with gradient caption bandfeature66Leading heading above a responsive two-column grid of wide image links; each tile zooms slightly on hover, shows a gradient foot, and overlays a logo mark with a bold line of title text.
Feature 67 - Split intro with six bordered icon cardsfeature67Narrow intro column carries the section heading and optional description beside a responsive grid of up to six items, each a bordered accent card with an icon tile, title, and supporting text.
Feature 68 - Icon grid framed below section introfeature68Heading and muted intro paragraph crown a bordered card tray where six icons sit in a responsively widening grid from one through two then three columns, each with title and snippet.
Feature 69 - Carousel on the right with synced accordionsfeature69Two-column layout with a tall rounded image carousel on one side and stacked selectable rows on the other; clicking a row scrolls the carousel and reveals body copy plus a text link, keeping imagery and narratives aligned.
Feature 7 - Checklist beside square bordered imagefeature7Two-column layout with a square cover image bordered and rounded beside a column that stacks a prominent heading, supporting paragraph, and checklist rows punctuated by inline check glyphs.
Feature 70 - Carousel on the left with synced accordionsfeature70Same selectable rows and carousel pairing as sibling blocks, ordered so imagery leads horizontally on wider layouts while list selection continues to steer which slide displays.
Feature 71 - Centered header over metrics and image linksfeature71Upper band centers a small uppercase label, large title, supporting copy, and paired icon buttons; below, a mixed grid alternates wide linked photo tiles with logo captions and solid metric cells across up to four columns.
Feature 72 - Narrow header with bordered feature cardsfeature72Narrow-width heading band with optional copy and link-style primary action sits above up to four bordered cards in a responsive grid; each card links an image topper to a title stack and muted body text below.
Feature 73 - Image card grid with optional header linkfeature73A section heading with optional link-style button introduces three image-led feature cards in a responsive grid: one column on small screens, two from medium breakpoints, three on large screens.
Feature 74 - Split intro with two large feature panelsfeature74Intro block with title, supporting copy, and a Book a demo text link with animated arrow, followed by two full-width rows that pair wide images with titles and descriptions inside bordered rounded panels.
Feature 75 - Text column beside three linked feature tilesfeature75Two-column layout with intro heading and paragraph on the left, and three full-width linked tiles on the right, each with uppercase label, description, and a pill-shaped Learn more control with arrow.
Feature 76 - Bordered icon row with up to four columnsfeature76Large section heading above a horizontal band divided into up to four columns, each with an icon tile overlapping a top border, a title, and muted body copy, with vertical guide lines on wide layouts.
Feature 77 - Two-up feature grid with corner dotsfeature77Centered page-heading introduces a two-column grid of linked feature cells, each with a square illustration, title, and muted description, wrapped in borders with small primary dots at the corners.
Feature 78 - Tabbed feature showcase with Book a demo linkfeature78Tab controls switch among three features; each state shows a large rounded image beside a title and description, with a Book a demo link and animated arrow in the header area.
Feature 79 - Featured media card with compact link rowsfeature79Centered kicker, title, and intro copy lead into a two-column layout: one large image card with text block and arrow, beside a stack of three horizontal title rows each ending in a circular arrow control.
Feature 8 - Centered heading with two framework cardsfeature8Outline badge and centered headline introduce two equal cards; each hides a Learn more outline control on large screens until hover, shows an icon action on mobile, and ends with a framework wordmark row.
Feature 80 - Square image beside text and dual action linksfeature80Flex row pairs a square rounded image with a text column containing label, large headline, body, Learn more link with arrow, and two bordered link tiles, one with overlapping avatars and one with a spot illustration.
Feature 81 - Image grid with darken overlays and Read morefeature81Centered kicker, title, and body copy sit above a responsive grid of linked image tiles that darken on hover, show optional inverted wordmarks, and end each tile with Read more text and an arrow.
Feature 82 - Integration grid with top headline row and separatorfeature82Four-column integration showcase with a header row containing heading, description, and button above a separator.
Feature 83 - Two-column feature cards with badge and dot gridfeature83Split layout pairing a badge, heading, and description on one side with three bordered feature cards over a radial dot-grid background.
Feature 85 - Hero statement with bordered grid of icon featuresfeature85Bordered container with a large centered headline, image, and tagline above a six-item icon feature grid separated by single-pixel dividers.
Feature 86 - Split headline feature with image trayfeature86A three-column feature with split heading, icon rows, outline CTA, and a bordered four-by-three image in a muted panel.
Feature 87 - Feature panel with icon list and bleeding imagefeature87Three-column layout pairing a heading, icon feature list, and button on the left with a large cropped image spanning two columns on the right.
Feature 89 - Feature section with dot grid and imagefeature89A single-focus feature with label, headline, desktop image, and a three-column row of icon cards with titles and descriptions.
Feature 9 - Three-column bento with cards and center imagefeature9Centered heading and badge above a row of two text cards flanking a middle image, each card with a badge, body text, and button.
Feature 90 - Integration hero with overlapping logo circlesfeature90Centered headline, description, and button above a row of overlapping circular logo avatars with a count link beneath.
Feature 91 - Dual audience feature comparisonfeature91A two-column comparison for team leads and developers with arrow links and three icon benefit rows in each bordered panel.
Feature 92 - Integrations and social connections stripfeature92A feature band with dual headlines, three tool integration columns with logos, and a row of social platform labels with icons.
Feature 93 - Avatar group with three-column icon featuresfeature93Staggered avatar cluster and bold heading centered above a three-column grid of icon features with titles and descriptions.
Feature 94 - Feature card grid with paired logos and header rowfeature94Header row with a multi-line heading and outline button above a four-column grid of muted cards, each with paired logo images, a title, and text.
Feature 95 - Numbered step tabs with image content panelfeature95Badge and heading introduce a four-step tabbed interface with numbered triggers and a large image panel that updates per tab.
Feature 97 - Centered heading with two-by-two icon feature gridfeature97Centered heading, paragraph, and two buttons above a two-column, two-row grid of icon features with titles and descriptions.
Feature 98 - Split header with image overlay card gridfeature98Five-column header row with heading, description, and buttons above a separator and three image cards with text overlays and arrow icons.
Feature 99 - Numbered step guide with left status indicatorfeature99Horizontal layout with a status dot and label on the left and a three-column numbered step grid with left borders on the right.
Feedback 1 - Star rating feedback sheetfeedback1Side sheet survey that collects a star rating, conditional topic checkboxes, and optional comments to improve the website experience.
Feedback 2 - Multi-step feedback surveyfeedback2Sheet-based multi-step survey carousel with progress, satisfaction radios, aspect ratings, and alerts guiding shoppers through post-purchase feedback.
Feedback 3 - Compact feedback dialogfeedback3Dialog feedback form with star rating, category select, and comment field for quick post-visit opinions.
Feedback 4 - Drawer experience rating formfeedback4Bottom drawer that gathers star ratings, topic checkboxes, optional contact fields, and tooltips explaining each feedback criterion.
Feedback 5 - Shopping experience rating sheetfeedback5Sheet survey rating browsing ease and product findability with stars, checkboxes, tooltips, and structured shopping-experience questions.
Feedback 6 - Emoji slider satisfaction dialogfeedback6Minimal dialog that maps a slider to emoji satisfaction levels from very poor to excellent for a fast shopping-experience rating.
Feedback 7 - Detailed feedback dialog with categoriesfeedback7Dialog feedback flow with star rating, category select, conditional follow-up fields, and comment input for structured store feedback.
Field Advanced 1 - Simple sliderfield-field-advanced-1Field with Slider control and FieldLabel for numeric range input.
Field Advanced 2 - Range sliderfield-field-advanced-2Slider configured for dual-thumb min and max range selection.
Field Advanced 3 - Choice cardsfield-field-advanced-3RadioGroup options rendered as selectable card-style Field blocks.
Field Advanced 4 - Fieldset with legendfield-field-advanced-4FieldSet grouping related fields under a shared FieldLegend label.
Field Advanced 5 - Field group with separatorfield-field-advanced-5FieldGroup sections divided by Separator between field clusters.
Field Advanced 6 - Complex multi-field formfield-field-advanced-6FieldGroup combining inputs, selects, toggles, and textareas together.
Field Advanced 7 - Mixed field types with separatorsfield-field-advanced-7Multi-section form with separators between mixed control types.
Field Basic Inputs 1 - Simple input with labelfield-field-basic-inputs-1shadcn Field with FieldLabel paired to a single Input control.
Field Basic Inputs 2 - Input with description belowfield-field-basic-inputs-2Field with FieldDescription placed under the Input for helper text.
Field Basic Inputs 3 - Input with description abovefield-field-basic-inputs-3FieldDescription rendered above the Input before the control.
Field Basic Inputs 4 - Multiple inputs in groupfield-field-basic-inputs-4FieldGroup wrapping several labeled Input fields in one stack.
Field Basic Inputs 5 - Horizontal layout inputfield-field-basic-inputs-5Field with orientation horizontal so label and Input sit on one row.
Field Layouts 1 - Vertical layout (default)field-field-layouts-1Default vertical Field stacking label, control, and description.
Field Layouts 2 - Horizontal layoutfield-field-layouts-2Field orientation horizontal pairing label beside the control.
Field Layouts 3 - Responsive layoutfield-field-layouts-3Fields that switch between vertical and horizontal at breakpoints.
Field Layouts 4 - Grid layoutfield-field-layouts-4FieldGroup arranged in a multi-column grid for related inputs.
Field Layouts 5 - Nested fieldsfield-field-layouts-5Field components nested inside FieldContent for structured sub-fields.
Field Layouts 6 - Mixed orientationsfield-field-layouts-6Single form mixing vertical and horizontal Field orientation values.
Field Selects 1 - Simple selectfield-field-selects-1Field wrapping shadcn Select with FieldLabel for a single choice.
Field Selects 2 - Select with descriptionfield-field-selects-2Select field including FieldDescription explaining the choice impact.
Field Selects 3 - Select with groupsfield-field-selects-3SelectContent using SelectGroup and SelectLabel for categorized options.
Field Selects 4 - Multiple selectsfield-field-selects-4FieldGroup with several independent Select fields in one form section.
Field Selects 5 - Select with helper text abovefield-field-selects-5FieldDescription above Select explaining options before opening the menu.
Field Selects 6 - Select in horizontal layoutfield-field-selects-6Horizontal Field with label beside Select on one row.
Field Selects 7 - Select with default valuefield-field-selects-7Select with defaultValue or value preset on Field mount.
Field Text Areas 1 - Simple textareafield-field-text-areas-1Field with FieldLabel and shadcn Textarea for multi-line text.
Field Text Areas 2 - Textarea with descriptionfield-field-text-areas-2Textarea field with FieldDescription for length or content guidance.
Field Text Areas 3 - Textarea with character countfield-field-text-areas-3Textarea paired with live character count feedback near the field.
Field Text Areas 4 - Textarea with helper text abovefield-field-text-areas-4FieldDescription above Textarea with instructions before typing.
Field Text Areas 5 - Multiple textareas - different sizesfield-field-text-areas-5FieldGroup with several Textarea fields using varied row heights.
Field Text Areas 6 - Textarea with detailed instructionsfield-field-text-areas-6Textarea with extended FieldDescription covering format and examples.
Field Toggles 1 - Simple checkboxfield-field-toggles-1Field wrapping Checkbox with FieldLabel for a single boolean choice.
Field Toggles 2 - Multiple checkboxesfield-field-toggles-2FieldGroup with several Checkbox fields for multi-select preferences.
Field Toggles 3 - Radio buttonsfield-field-toggles-3FieldSet with RadioGroup and RadioGroupItem for exclusive choices.
Field Toggles 4 - Radio with descriptionsfield-field-toggles-4Radio options each showing FieldTitle and FieldDescription in FieldContent.
Field Toggles 5 - Simple switchfield-field-toggles-5Field with Switch and FieldLabel for an on-off setting.
Field Toggles 6 - Switch with descriptionfield-field-toggles-6Switch field adding FieldDescription for what the toggle controls.
Field Toggles 7 - Checkbox with descriptionfield-field-toggles-7Checkbox field with FieldDescription explaining the opt-in or option.
Field Mapping 1 - CSV Field Mapping Dialogfield-mapping1A data import interface with empty table state, file browse trigger, and dialog for mapping source columns to target fields with combobox selectors and data preview.
Field Merging 1 - User Record Merge Dialogfield-merging1A user table with row selection and merge dialog for combining duplicate records by selecting field values from each source to create a unified entry.
File Upload Dropzone 1 - Basic Dropzonefile-upload-file-upload-dropzone-1Drag and drop file upload zone with visual feedback and file list.
File Upload Dropzone 2 - Dropzone with Inline Triggerfile-upload-file-upload-dropzone-2Dropzone with inline trigger button integrated within dropzone area.
File Upload Dropzone 3 - Compact Dropzonefile-upload-file-upload-dropzone-3Compact dropzone layout with horizontal arrangement for space efficiency.
File Upload Dropzone 4 - Image Dropzonefile-upload-file-upload-dropzone-4Image-specific dropzone with primary color styling and file type restrictions.
File Upload Dropzone 5 - Document Dropzonefile-upload-file-upload-dropzone-5Document-focused dropzone with styling optimized for document file uploads.
File Upload Dropzone 6 - Large Dropzonefile-upload-file-upload-dropzone-6Large dropzone with expanded height and prominent visual design.
File Upload Form 1 - React Hook Form Integrationfile-upload-file-upload-form-1File upload integrated with React Hook Form and Zod validation for form handling.
File Upload Form 2 - Contact Form with Attachmentsfile-upload-file-upload-form-2Contact form with file upload attachment field integrated into a complete form layout.
File Upload Form 3 - Required File Uploadfile-upload-file-upload-form-3File upload field marked as required with validation error display in form context.
File Upload Form 4 - Multiple File Upload Fieldsfile-upload-file-upload-form-4Form with multiple file upload fields allowing different file types for different purposes.
File Upload List 1 - Vertical File Listfile-upload-file-upload-list-1File upload with vertical file list layout displaying files in a vertical stack.
File Upload List 2 - Horizontal File Listfile-upload-file-upload-list-2File upload with horizontal file list layout displaying files in a horizontal row.
File Upload List 3 - Compact File Listfile-upload-file-upload-list-3File upload with compact file list layout using smaller spacing and reduced padding.
File Upload List 4 - File List with Actionsfile-upload-file-upload-list-4File upload with file list displaying additional action buttons for preview and download.
File Upload List 5 - File List with Clear Allfile-upload-file-upload-list-5File upload with file list and clear all button to remove all files at once.
File Upload Preview 1 - Image Thumbnailsfile-upload-file-upload-preview-1File upload with image thumbnail previews showing visual previews of uploaded images.
File Upload Preview 2 - Grid Preview Layoutfile-upload-file-upload-preview-2File upload with grid layout preview showing multiple image thumbnails in a grid arrangement.
File Upload Preview 3 - Large Preview Modalfile-upload-file-upload-preview-3File upload with large preview modal showing detailed file preview with metadata.
File Upload Preview 4 - File Type Iconsfile-upload-file-upload-preview-4File upload showing file type icons for different file types instead of image previews.
File Upload Preview 5 - Horizontal Scroll Previewfile-upload-file-upload-preview-5File upload with horizontal scrolling preview layout for browsing multiple image thumbnails.
File Upload Progress 1 - Linear Progressfile-upload-file-upload-progress-1File upload with linear progress bar showing upload progress for each file.
File Upload Progress 2 - Circular Progressfile-upload-file-upload-progress-2File upload with circular progress indicator overlay on file preview thumbnails.
File Upload Progress 3 - Fill Progressfile-upload-file-upload-progress-3File upload with fill progress variant showing bottom-to-top progress animation.
File Upload Progress 4 - Progress with Percentagefile-upload-file-upload-progress-4File upload with progress percentage label and custom progress bar display.
File Upload Progress 5 - Upload Status Indicatorfile-upload-file-upload-progress-5File upload with status indicators showing spinner during upload and success or error states.
File Upload Special 1 - Avatar Uploadfile-upload-file-upload-special-1Avatar upload component with click-to-upload functionality and hover overlay effect.
File Upload Special 2 - Chat Input with Attachmentsfile-upload-file-upload-special-2Chat input component with file attachment functionality integrated into message input.
File Upload Special 3 - Cover Image Uploadfile-upload-file-upload-special-3Cover image upload with aspect ratio preview and remove functionality.
File Upload Special 4 - Document Upload Cardfile-upload-file-upload-special-4Document upload card component with card layout and document-specific styling.
File Upload Special 5 - Avatar with Menufile-upload-file-upload-special-5Avatar upload with dropdown menu for upload and remove actions.
File Upload Special 6 - Gallery Image Addfile-upload-file-upload-special-6Gallery image upload with grid layout and add button for multiple image selection.
File Upload Special 7 - Direct Upload with Statusfile-upload-file-upload-special-7Direct upload with automatic upload progress and status indicators showing success or error states.
File Upload Special 8 - Profile with Cover and Avatarfile-upload-file-upload-special-8Profile component with both cover image and avatar upload functionality in a single layout.
File Upload Standard 1 - Simple Button Triggerfile-upload-file-upload-standard-1File upload with button trigger for single file selection.
File Upload Standard 2 - File Upload with Labelfile-upload-file-upload-standard-2File upload component with label and file list display.
File Upload Standard 3 - Single File Uploadfile-upload-file-upload-standard-3File upload restricted to single file selection only.
File Upload Standard 4 - Multiple Files with Clear Allfile-upload-file-upload-standard-4Multiple file upload with clear all button to remove all files.
File Upload Standard 5 - Disabled Statefile-upload-file-upload-standard-5File upload component in disabled state showing non-interactive button.
File Upload Validation 1 - Images Onlyfile-upload-file-upload-validation-1File upload restricted to image files only with validation error notifications.
File Upload Validation 2 - PDF Documents Onlyfile-upload-file-upload-validation-2File upload restricted to PDF documents only with file type validation.
File Upload Validation 3 - File Size Limitfile-upload-file-upload-validation-3File upload with strict file size limit of 1MB and size validation error messages.
File Upload Validation 4 - Max 2 Filesfile-upload-file-upload-validation-4File upload with maximum file count limit of 2 files and rejection notifications.
File Upload Validation 5 - Custom Validationfile-upload-file-upload-validation-5File upload with custom validation rules including filename restrictions and size limits.
File Upload Validation 6 - Video Files Onlyfile-upload-file-upload-validation-6File upload restricted to video files only with support for multiple video formats.
Footer 1 - Footer with logo, link columns, app download buttons, and social iconsfooter1Multi-section footer with a logo, tagline, app store buttons, three navigation columns, social media icons, and copyright text.
Footer 10 - Minimal footer with brand image and live clockfooter10Stripped-back footer displaying a full-width brand image, a live-updating London time readout, copyright, and a contact email.
Footer 11 - Footer with logo, link columns, social icons, and giant brand imagefooter11Footer featuring a logo with title, three link columns, social icons, and a full-width oversized brand image at the bottom.
Footer 12 - Centered footer with inline links, social links, and giant brand imagefooter12Centered footer with a single row of navigation and social links, a legal link line, and a full-width brand image below.
Footer 13 - Dark CTA footer with trial banner, newsletter, link columns, and social iconsfooter13Full-width primary-colored footer with a trial CTA panel, newsletter signup, four navigation columns, and social media icons.
Footer 14 - Footer with logo, newsletter, three link columns, and social iconsfooter14Two-part footer with a logo, description, and newsletter form on the left, three navigation columns on the right, and social icons with copyright below.
Footer 15 - Footer with logo, social icons, status badge, link columns, and country flagfooter15Spacious footer with a logo, description, social icons, a green status badge, navigation columns, copyright, and a country flag indicator.
Footer 16 - Dark footer with accordion navigation, social buttons, and brand watermarkfooter16Dark-themed footer with a logo, social icon buttons, column navigation that collapses to accordions on mobile, and a faded brand watermark image.
Footer 17 - Mega footer with dropdowns, drawers, theme toggle, and status indicatorfooter17Feature-rich footer with three navigation columns, a social column, dropdown and drawer sub-menus, a theme toggle, and a system status button.
Footer 18 - Footer with social icons, cookie drawer, language picker, privacy dialog, and link columnsfooter18Interactive footer with social icons, a cookie settings drawer, a language dropdown, a privacy dialog, four navigation columns, and copyright.
Footer 19 - Mega footer with two navigation tiers, social icons, and highlighted sectionfooter19Dark-themed mega footer with a logo, social icons, a four-column primary navigation grid, and a rounded muted panel holding guides and tools links.
Footer 2 - Footer with logo, tagline, link columns, and legal rowfooter2Standard footer with a logo, short description, up to four navigation link columns, copyright text, and underlined legal links.
Footer 21 - Footer with icon-labeled link columns, logo, tagline, and social buttonsfooter21Five-column footer with three icon-topped navigation sections, a logo with tagline and ghost social buttons, and copyright text.
Footer 23 - Footer with logo, link columns, and animated globefooter23Footer with a separator, a logo with description, three navigation columns, and an animated 3D globe rendered at the bottom.
Footer 24 - Contact footer with bold heading, email, social links, phone, and nav gridfooter24Designer footer with a large brand heading inside a muted card, contact sections for email, social, and phone, plus a navigation link grid below.
Footer 25 - Footer with background image, profile card, link columns, and contact detailsfooter25Footer overlaying a full-bleed background photo with a shadowed card containing a profile avatar, CTA button, navigation columns, and contact info.
Footer 27 - Animated CTA footer with social links and separatorfooter27Framer Motion animated footer with a large heading, descriptive text, a CTA button, social links with arrow icons, and a copyright row.
Footer 28 - Newsletter footer with status badgefooter28A footer with logo, tagline, three link columns, GitHub star count, social icons, newsletter form, and an online status badge.
Footer 29 - Newsletter footer with theme togglefooter29A multi-column footer with newsletter signup, four link groups, social icons, copyright, status badge, and a light, dark, and system theme toggle.
Footer 3 - Footer with logo, link columns, social icons, and newsletter formfooter3Footer combining a logo with text, navigation columns, circular social media icons, an email subscription form, and legal links.
Footer 30 - Designer footer with giant brand name, contact info, navigation, and social linksfooter30Two-tier footer with phone and email on the left, navigation and social columns on the right, a viewport-scaled brand name, and a dark legal bar.
Footer 31 - Dark footer with headline, newsletter form, navigation, social links, and animated logofooter31Dark-themed footer with a large heading, email contact, two link columns, a newsletter subscription form, location text, legal links, and an animated SVG logo.
Footer 32 - Centered footer with call to actionfooter32A centered footer with a preheading, large headline, supporting copy, call-to-action button, social links, and a support email.
Footer 37 - Mega footer with newsletter and contactfooter37A mega footer with a top call to action, brand logo, navigation and social links, newsletter form, phone, email, location, and legal links.
Footer 4 - Footer with logo, social icons, link columns, newsletter, and legal linksfooter4Multi-section footer pairing a responsive logo and social icons with navigation columns, a large newsletter signup area, and legal links.
Footer 49 - Mega footer with accordion linksfooter49A mega footer with logo, social buttons, tagline, avatar call to action, expandable accordion menus, copyright, and contact plus legal links.
Footer 5 - Footer with link columns, social icons, and mobile app linksfooter5Four-column footer with navigation sections, a "Follow us" row of social icons, mobile app platform buttons, and centered copyright.
Footer 50 - CTA Footer with Large Brand Typographyfooter50A footer with centered CTA section, navigation links, social links, and a large gradient brand wordmark at the bottom.
Footer 51 - Boxed Columns Footer With Pattern Barfooter51A footer with logo, description, social links, three link columns, and a legal row inside a bordered container, with a diagonal stripe pattern on the bottom bar.
Footer 52 - Muted Grid Footer With Contrasting Barfooter52A marketing footer on a full-width muted background with a logo column, four link columns, and a full-width bottom bar for copyright and legal links on a slightly darker band.
Footer 53 - Muted Split Footer With Social And Contrasting Barfooter53A footer on a full-width muted background with branding, description, and social icons on the left, three link columns on the right, and a darker full-width strip for copyright and legal links.
Footer 54 - Centered Container Width Footerfooter54A centered marketing footer at container width with logo, description, social icons, four link columns, and a top-bordered row for copyright and legal links, without footer background fills.
Footer 55 - Footer With Text Social Linksfooter55A grid footer like the standard marketing pattern, with social destinations shown as labeled text links and small icons in the bottom bar beside copyright and legal links.
Footer 56 - Footer With Address And Contact Columnfooter56A marketing footer grid with logo, address lines, phone, email, and social icons in the brand column, plus four link columns and a legal strip.
Footer 57 - Inverted Footer Navigation Firstfooter57A footer that leads with four link columns, then a lower band with logo, social icons, and copyright separated by a top border.
Footer 58 - Footer With Section Title Iconsfooter58A standard grid footer where each navigation column title includes a small lucide icon beside the heading for quick visual grouping.
Footer 59 - Compact Single Row Footer Barfooter59A short vertical padding footer with logo, a single menu of inline links and social icons on one row, then copyright with legal links to its right on a second row.
Footer 6 - Compact footer with logo, description, and two link columnsfooter6Minimal footer placing a logo icon with title and description on the left, two navigation link columns on the right, and a legal row at the bottom.
Footer 60 - Compact Footer Bar Without Legal Rowfooter60A slim single-row footer with logo, one menu of inline links, and social icons; no copyright or legal line by default.
Footer 61 - Compact Footer Single Wrap Row With Inline Metafooter61A slim footer with logo, one menu, social icons, and optional copyright and legal links in one wrapping row, with a trailing meta cluster on large screens.
Footer 62 - Compact Logo And Menu Footerfooter62A minimal slim footer with a center-aligned logo on top, then one menu of links and optional social icons below.
Footer 7 - Footer with logo, description, social icons, link columns, and legal rowfooter7Two-row footer with a logo, description, and social icons on the left, three navigation columns on the right, and a bordered legal row beneath.
Footer 8 - Footer with logo, social icons, link columns, and newsletterfooter8Grid footer with a logo, description, and social icons in one column, two navigation link columns, and a newsletter signup section.
Footer 9 - Footer with call-to-action, pricing card, link columns, and social buttonsfooter9CTA footer on a muted background with a headline, action buttons, a free-tier pricing card, five link columns, and social pill buttons.
Forgot Password 1 - Centered forgot password cardforgot-password1Full-screen recovery form with a logo, email field, send-link button, and a back-to-login control.
Forgot Password 2 - Split forgot password with imageforgot-password2Two-column recovery screen with a left-aligned email form and a full-height photograph on large screens.
Forgot Password 3 - Minimal inline forgot passwordforgot-password3Centered recovery screen with a large heading and an email field sharing a row with the send button.
Forgot Password 4 - Muted panel forgot passwordforgot-password4Recovery form inside a large muted panel with a labeled email field and a support note under the back link.
Form Advanced 1 - Form with selectform-form-advanced-1react-hook-form Controller wrapping shadcn Select with zod enum.
Form Advanced 2 - Form with textareaform-form-advanced-2Controller-managed Textarea with zod string min and max rules.
Form Advanced 3 - Form with checkboxform-form-advanced-3Boolean Checkbox Controller with zod boolean or literal true required.
Form Advanced 4 - Form with radio buttonsform-form-advanced-4RadioGroup Controller for exclusive choice validated by zod enum.
Form Advanced 5 - Form with switchform-form-advanced-5Switch Controller toggling boolean zod field on settings save.
Form Advanced 6 - Form with multiple selectsform-form-advanced-6Several Select Controllers each with own zod key in one form.
Form Advanced 7 - Form with mixed controlsform-form-advanced-7Single schema form mixing Input, Select, Switch, Checkbox, and Textarea.
Form Basic Forms 1 - Simple text input formform-form-basic-forms-1react-hook-form with zod schema validating a single text Input field.
Form Basic Forms 2 - Email input formform-form-basic-forms-2Form with email type Input and zod email validation on submit.
Form Basic Forms 3 - Password input formform-form-basic-forms-3Password Input field with zod rules inside a submit form.
Form Basic Forms 4 - Number input formform-form-basic-forms-4Form using number type Input with zod numeric validation.
Form Basic Forms 5 - URL input formform-form-basic-forms-5URL Input with zod url validation in a one-field form.
Form Basic Forms 6 - Phone input formform-form-basic-forms-6Tel Input form with zod pattern or length validation for phone numbers.
Form Basic Forms 7 - Search input formform-form-basic-forms-7Search type Input form submitting query string via react-hook-form.
Form Layouts 1 - Vertical layout (default)form-form-layouts-1Default stacked FieldGroup layout for all form fields.
Form Layouts 2 - Horizontal layoutform-form-layouts-2Form fields using horizontal Field orientation across the row.
Form Layouts 3 - Grid layout (2 columns)form-form-layouts-3Two-column grid of form fields with react-hook-form Controllers.
Form Layouts 4 - Responsive layoutform-form-layouts-4Form grid or orientation that adapts between mobile stack and desktop rows.
Form Layouts 5 - Inline formform-form-layouts-5Compact horizontal form with Input and submit Button on one line.
Form Layouts 6 - Compact formform-form-layouts-6Tight vertical spacing form for dense settings or side panels.
Form Layouts 7 - Spacious form with sectionsform-form-layouts-7Form divided into spaced sections with legends or separators.
Form Multi Field 1 - Two field formform-form-multi-field-1react-hook-form with zod object schema for two Input fields.
Form Multi Field 2 - Three field formform-form-multi-field-2Three controlled fields sharing one zod schema and submit handler.
Form Multi Field 3 - Four field profile formform-form-multi-field-3Profile-oriented form with four fields such as name, username, email, and bio.
Form Multi Field 4 - Mixed input types formform-form-multi-field-4Form combining Input, Select, Checkbox, and Textarea Controllers.
Form Multi Field 5 - Form with optional fieldsform-form-multi-field-5zod schema marking some fields optional alongside required ones.
Form Multi Field 6 - Form with field groupsform-form-multi-field-6Multiple FieldSet or FieldGroup sections in one react-hook-form.
Form Multi Field 7 - Long form with many fieldsform-form-multi-field-7Extended form with numerous Controllers and comprehensive zod schema.
Form Patterns 1 - Login formform-form-patterns-1Email and password fields with submit for sign-in flow.
Form Patterns 2 - Signup formform-form-patterns-2Registration form with name, email, password, and confirm fields.
Form Patterns 3 - Profile edit formform-form-patterns-3Editable profile fields with defaults from react-hook-form defaultValues.
Form Patterns 4 - Contact formform-form-patterns-4Name, email, subject, and message fields for contact submissions.
Form Patterns 5 - Settings formform-form-patterns-5Settings panel form with toggles, selects, and text preferences.
Form Patterns 6 - Checkout formform-form-patterns-6Checkout slice with contact, address, and payment-related fields.
Form Patterns 7 - Search filter formform-form-patterns-7Filter form with query Input and Select facets submitting together.
Form Validation 1 - Required field validationform-form-validation-1zod min length required rules with FieldError on empty submit.
Form Validation 2 - Min/max length validationform-form-validation-2zod string min and max length with messages on Textarea or Input.
Form Validation 3 - Email validationform-form-validation-3zod email check on Input with invalid address FieldError message.
Form Validation 4 - Password strength validationform-form-validation-4zod regex or refine rules enforcing password complexity requirements.
Form Validation 5 - Conditional validationform-form-validation-5zod superRefine or refine rules depending on another field value.
Form Validation 6 - Custom validation messagesform-form-validation-6zod schema with tailored message strings per rule on each field.
Form Validation 7 - Real-time validationform-form-validation-7react-hook-form mode onChange or onBlur for live FieldError updates.
Form Star Rating Controlled 1 - Controlled valueform-star-rating-form-star-rating-controlled-1Form star rating driven by value and onValueChange state.
Form Star Rating Disabled 1 - Disabled stateform-star-rating-form-star-rating-disabled-1Form star rating locked with a preselected value.
Form Star Rating Form 1 - Form integrationform-star-rating-form-star-rating-form-1Form star rating with react-hook-form Controller and validation.
Form Star Rating Icons 1 - Sentiment iconsform-star-rating-form-star-rating-icons-1Discrete icon buttons for a five-point sentiment scale.
Form Star Rating Labeled 1 - With field labelform-star-rating-form-star-rating-labeled-1Form star rating paired with a Label and empty helper text.
Form Star Rating Sizes 1 - Size variantsform-star-rating-form-star-rating-sizes-1Form star rating in sm, default, and lg icon sizes.
Form Star Rating Standard 1 - Default starsform-star-rating-form-star-rating-standard-1Cumulative five-star form rating with selected label.
Gallery 1 - Expanding case study cardsgallery1Three-item gallery row where hovering expands the active card to reveal its image, logo, badges, and title while the others shrink.
Gallery 10 - Testimonial carousel with side textgallery10Split-layout gallery carousel pairing a heading and navigation buttons on the left with scrollable testimonial cards on the right, plus a progress bar.
Gallery 11 - Image card carousel with overlay labelsgallery11Drag-free carousel of tall image cards with prev/next arrows in the header, each card showing a rounded overlay label with title, description, and an arrow icon.
Gallery 12 - Feature cards carousel with centered headinggallery12Centered heading and subtext above a multi-column carousel of feature cards, each with a 3:4 image, title, and description, navigable via round arrow buttons.
Gallery 13 - Split carousel with detail panelgallery13Two-column carousel where the left panel shows a title, description, and prev/next controls for the active slide while the right panel displays the corresponding image.
Gallery 14 - Carousel with expanding dot navigationgallery14Two-column carousel with a headline on the left and 4:5 image cards on the right, plus a row of dots that expand to show the active slide title.
Gallery 15 - Product carousel with hover image swapgallery15Horizontal carousel of linked product cards featuring a 3:4 image that swaps on hover, an outline badge tag, a title, a starting price, and a thin progress bar.
Gallery 16 - Tab-synced content carouselgallery16Tabbed navigation synced to a carousel of bordered content cards, each with a gradient-text heading, description, a note, and an image panel.
Gallery 17 - Centered image carousel with scale effectgallery17Full-width image carousel where the active slide renders at full scale and opacity while neighboring slides shrink and fade, with large arrow buttons and dot pagination.
Gallery 18 - Image stack with name captiongallery18Compact card-effect slider that auto-rotates through portrait images with a stacked-deck animation and a name caption beneath each card.
Gallery 19 - Image stack with overlay detailsgallery19Auto-playing card-stack portrait slider with a gradient overlay showing a styled name, description, pagination dots, and a round secondary button on each slide.
Gallery 20 - Scattered draggable photo stackgallery20Five overlapping landscape photos fanned out with rotation and offset, each draggable and scaling up on hover, with a centered heading and round button below.
Gallery 21 - Coverflow image slider with gradient masksgallery21Looping coverflow carousel of portrait images with depth perspective, gradient edge masks, an auto-advance timer, a heading, and a round button.
Gallery 22 - Coverflow team carousel with info cardgallery22Coverflow portrait carousel with gradient edge masks, a bordered info card showing the active person's name and role, social icon links on each slide, and chevron navigation buttons.
Gallery 23 - Accordion image stack with text panelgallery23Two-column layout pairing a heading, paragraph, and button on the left with a vertical stack of images on the right that expand on hover to reveal an overlay with title and cart button.
Gallery 24 - Horizontal accordion gallery with headergallery24Centered italic heading and paragraph above a horizontal row of images that expand on hover to reveal a gradient overlay with title, code, and cart button.
Gallery 25 - Animated masonry photo gridgallery25Four-column masonry grid of black-and-white photos at varying heights, each fading and scaling into view on scroll, repeated in two stacked sections.
Gallery 26 - Blur vignette image gridgallery26Five-column image grid with soft blur vignette overlays that clear on hover, animated into view on scroll.
Gallery 27 - Team member carouselgallery27Looping team carousel with portrait photos, names, and roles, navigated by square previous and next buttons.
Gallery 28 - Centered image carousel with overlay controlsgallery28Looping photo carousel beneath a centered heading, with semi-transparent navigation buttons overlaid on the images.
Gallery 29 - Marquee gallery with featured overlaygallery29Horizontally scrolling image marquee with a centered featured photo that reveals a hover caption, set on a dark background.
Gallery 3 - Case study card carouselgallery3Horizontal carousel of case-study cards with badge labels, descriptions, and arrow navigation that disables at boundaries.
Gallery 30 - Draggable scattered photo collagegallery30Full-viewport hero with absolutely positioned, draggable photos that shuffle on mount and animate in with spring physics.
Gallery 31 - Image bento with direction-aware hovergallery31Responsive product bento grid using direction-aware hover overlays to reveal item names and prices over rounded image cards.
Gallery 32 - Overlapping photo collage with focus blurgallery32Full-viewport collage of overlapping, draggable photos where hovering one blurs the rest and scales the active image.
Gallery 33 - Product card grid with lens zoomgallery33Three-column product card grid featuring a magnifying lens effect on hover, with titles, prices, and action icons.
Gallery 34 - Gallery grid with hover blur and stat chipsgallery34Three-column card grid where hovering one item blurs the others, each card showing an image, title, hashtag, and icon stat chips.
Gallery 35 - Autoplay gallery with paginationgallery35A heading above a horizontally scrolling gallery of large image cards with captions, pagination dots, and play, pause, and restart controls.
Gallery 39 - Reveal gallery carousel over herogallery39Full-bleed terrarium hero that slides aside to reveal a milestone card carousel of botanical art pieces with navigation dots.
Gallery 4 - Case study carousel with dot indicatorsgallery4Full-bleed carousel of image cards with dark gradient overlays, dot pagination, and arrow navigation with scroll-state tracking.
Gallery 40 - Three column image gridgallery40Nine wide images in a responsive three-column grid with a mono eyebrow, heading, and short supporting description above.
Gallery 41 - Captioned two column gallerygallery41Six captioned wide figures in a two-column grid with a split header that pairs a heading on the left and supporting text on the right.
Gallery 42 - Masonry column mosaicgallery42Eleven images of mixed heights flow through a CSS-columns masonry layout under a mono eyebrow, heading, and short description.
Gallery 43 - Lightbox image gridgallery43Eight square gallery tiles open a modal lightbox with a larger image, title, and description on click.
Gallery 44 - Single slide gallery carouselgallery44A single wide slide with title overlay, previous and next controls, and a centered dot indicator strip.
Gallery 45 - Asymmetric bento image gridgallery45Six images arranged in an asymmetric six-column bento with a wide hero tile, tall side panel, and paired bottom cells.
Gallery 46 - Filterable category gallerygallery46A category pill filter above a three-column image grid that shows titled items with small category badges.
Gallery 47 - Hero preview with thumbnail stripgallery47A large wide hero preview driven by a five-thumbnail strip, with the active description shown in the header.
Gallery 48 - Inverted dark framed gallerygallery48Nine wide images nested in layered dark frames on an inverted section with a mono eyebrow and heading.
Gallery 49 - Polaroid collage gridgallery49Nine polaroid-style photo cards in a mixed-span collage grid with white mats, soft shadows, and slight rotations.
Gallery 5 - Feature carousel with icon toggle groupgallery5Carousel of two-column feature slides synced to a Shadcn UI toggle group of icons, with masked edge fading.
Gallery 50 - Before after compare slidersgallery50Two before-and-after image pairs with a draggable vertical divider and labels for each side of the comparison.
Gallery 51 - Horizontal snap photo stripgallery51A horizontally scrolling strip of wide photo cards that snap into place, with titles and short captions under each frame.
Gallery 52 - Caption hover bento gridgallery52Seven images in a packed four-column bento with a large hero tile and captions that fade in on hover.
Gallery 53 - Featured image with side thumbsgallery53A large featured photograph beside a four-thumbnail column that stays height-aligned with the main stage on desktop.
Gallery 54 - Filterable masonry photo columnsgallery54Category filter pills above a CSS-columns masonry of mixed-height photographs with a crossfade when the filter changes.
Gallery 55 - Hover reveal project gridgallery55A three-column project grid where hover darkens the photograph and reveals the project title and short description.
Gallery 56 - Social style photo gridgallery56A social-feed style three-column photo grid with a tall lead tile and hover overlays for likes and comments.
Gallery 6 - Gallery carousel with demo linkgallery6Horizontal image carousel with a heading, call-to-action link, and outline-variant arrow controls above the scrolling cards.
Gallery 7 - Auto-scrolling image carousel with text introgallery7Two-column text header with a link, followed by a looping auto-scroll carousel of staggered-height images.
Gallery 8 - Resource list with image carousel sidebargallery8Three-column layout pairing a categorized resource list with a bordered image carousel and navigation controls.
Gallery 9 - Step carousel with clickable section labelsgallery9Full-width image carousel with icon-labeled steps below, a slide counter, and previous/next navigation buttons.
Gantt Add 1 - Add features on clickgantt-gantt-add-1Gantt provider with onAddItem to create features from the timeline.
Gantt Create Marker 1 - Create markersgantt-gantt-create-marker-1GanttCreateMarkerTrigger for adding and removing timeline milestones.
Gantt Daily 1 - Daily rangegantt-gantt-daily-1Gantt provider configured for daily timeline range.
Gantt Drag 1 - Draggable featuresgantt-gantt-drag-1Gantt features with onMove for drag and resize on the timeline.
Gantt Group 1 - Grouped featuresgantt-gantt-group-1Gantt chart with sidebar and feature list grouped by category.
Gantt Markers 1 - With markersgantt-gantt-markers-1Gantt chart including milestone markers on the timeline.
Gantt Range 1 - Quarterly rangegantt-gantt-range-1Gantt provider configured for quarterly timeline range.
Gantt Row 1 - Multiple items per rowgantt-gantt-row-1GanttFeatureRow packing several reservations into shared resource lanes.
Gantt Standard 1 - Basic gantt chartgantt-gantt-standard-1Gantt timeline with sidebar, feature bars, and today marker.
Gantt Status 1 - Status colorsgantt-gantt-status-1Gantt features with planned, in-progress, and done status colors.
Gantt Timeline 1 - Timeline onlygantt-gantt-timeline-1Gantt timeline without a sidebar for a compact schedule view.
Gantt Zoom 1 - Zoomed timelinegantt-gantt-zoom-1Gantt provider with zoom set to 200 for a closer monthly view.
Github Stars Basic 1 - GitHub Icongithub-stars-github-stars-basic-1GitHub icon in an outlined button-style link.
Github Stars Basic 10 - GitHub Outline Repogithub-stars-github-stars-basic-10Outlined GitHub link with repo name and star count.
Github Stars Basic 2 - GitHub Icon Countgithub-stars-github-stars-basic-2GitHub icon with star count number.
Github Stars Basic 3 - GitHub Icon Star Countgithub-stars-github-stars-basic-3GitHub icon with star icon and count.
Github Stars Basic 4 - GitHub Statgithub-stars-github-stars-basic-4Inline stat-style GitHub link with icon, star, and count.
Github Stars Basic 5 - GitHub Icon Markgithub-stars-github-stars-basic-5GitHub mark icon with star count.
Github Stars Basic 6 - GitHub Icon Fillgithub-stars-github-stars-basic-6Filled inverse GitHub mark icon.
Github Stars Basic 7 - GitHub Outline Countgithub-stars-github-stars-basic-7GitHub icon with star count in an outlined link, matching the GitHub Icon outline style.
Github Stars Basic 8 - GitHub Icon Tooltipgithub-stars-github-stars-basic-8Outlined GitHub icon with star count tooltip on hover.
Github Stars Basic 9 - GitHub Icon Fill Tooltipgithub-stars-github-stars-basic-9Filled inverse GitHub mark icon with star count tooltip on hover.
Glimpse Composition 1 - Full card previewglimpse-glimpse-composition-1Full Glimpse card with image, title, description, and URL.
Glimpse Description 1 - Title and descriptionglimpse-glimpse-description-1Glimpse preview with title and description text.
Glimpse Image 1 - Preview with imageglimpse-glimpse-image-1Glimpse preview including GlimpseImage.
Glimpse Standard 1 - Link previewglimpse-glimpse-standard-1Hover link with title-only Glimpse preview.
Glimpse Url 1 - URL metadata previewglimpse-glimpse-url-1Glimpse preview showing destination URL metadata.
Help 1 - Category grid help centerhelp1Help center with categorized topic cards, a popular topics list, and a contact support button.
Help 2 - Searchable FAQ with contact optionshelp2Help center with a live-filtering FAQ accordion and contact buttons for chat, email, and phone.
Help 3 - FAQ accordion with contact formhelp3Help center combining a searchable FAQ accordion with category badges and a validated contact form below.
Help 4 - Support ticket submission formhelp4Structured ticket form with category and priority selects, description textarea, and multi-file attachment upload.
Hero 1 - Split hero with image on the righthero1A two-column marketing hero with text first, then a badge, headline, body copy, and paired CTAs aligned start on large screens beside the media column.
Hero 10 - Centered hero with grid pattern and logo striphero10A centered marketing hero with outline badge, headline, supporting copy, paired shadcn/ui buttons, muted caption, and a responsive logo grid over a faded grid pattern backdrop.
Hero 100 - Two-column hero with offset image panelhero100A marketing hero with headline, supporting copy, one CTA, and a square image on a muted panel that bleeds past the viewport edge.
Hero 101 - Centered hero with gradient, video modal, and logoshero101A centered hero with pastel radial gradient, headline, demo entry that opens a video modal, primary CTA, and a partner logo strip.
Hero 102 - Announcement hero with desktop frame and handset overlayhero102An announcement-focused hero with megaphone badge, headline stack, primary CTA, wide desktop screenshot, and angled handset overlay.
Hero 103 - Dark hero with collage imagery and scrolling logoshero103A dark two-column hero with headline, twin CTAs, floating photo collage, dashed grid guides, and an auto-scrolling logo carousel.
Hero 104 - Two-column hero with bento product previewhero104A hero with benefit checklist, paired CTAs, and a bento-style grid of preview tiles including video, charts, and photography.
Hero 105 - Split hero with stacked headline and product imagehero105A two-column hero with stacked blended headline, primary and outline CTAs, square product image with animated border beam, skewed photography backdrop, and logo marquee footer.
Hero 107 - Portfolio hero with animated halo CTAhero107A muted split hero with sparkles eyebrow chip, serif gradient headline, conic halo button, understated divider gradient, portrait tile, and hire chip.
Hero 108 - Fintech-education hero with checklist and handsethero108A split hero stressing passive income headline with scripted underline accent, checklist rows with circular chips, handset mock on muted panel, plus Start CTA spanning width on narrow layouts.
Hero 109 - Fintech hero with handset and floating cardhero109A hero with reversed columns on small screens: handset mock, floating worldwide card, gradient headline, body copy, and primary CTA with hover fill.
Hero 11 - Centered hero with logo and wide imagehero11A centered marketing hero with brand logo, headline, supporting copy, two CTAs, and a wide image with top and side borders, soft shadow, and a flush bottom against the section edge.
Hero 110 - Split hero with avatars, ratings, and layered photoshero110A split hero with pill topic label, oversized headline, dual rounded CTAs with sliding labels, overlapping avatars and star row, and a collage of aspect-ratio images above a quote panel.
Hero 111 - Centered HR hero with email form and logoshero111A centered hero with HR headline, validated email field and rounded submit, reassurance lines with check icons, three image tiles, and a company logo grid.
Hero 112 - Education hero with play button and stat striphero112A hero with headline, ghost play control that opens a video dialog, circular photo collage with join pill, tilted icon chips, and a three-cell stats footer.
Hero 113 - Roadmap hero with scribble highlight and icon rowhero113A centered hero with hand-drawn underline on a key word, dual rounded CTAs, wide bordered screenshot, and three icon-led benefit columns.
Hero 114 - Hero with demo dialog and logo carouselhero114A centered hero with release badge, headline, watch-demo and primary CTA, elevated screenshot, and auto-scrolling logo strip plus optional video dialog.
Hero 115 - Centered hero with ring backdrophero115A centered hero with concentric ring decoration behind the copy, a leading icon, headline, supporting text, one primary CTA, optional byline, and a capped hero image.
Hero 116 - Centered hero with overlapping photos and video dialoghero116A centered hero with oversized headline, sliding-label buttons, play-triggered video modal, and three overlapping portrait frames without a border stage.
Hero 117 - Split hero with funding row and photo gridhero117A two-column hero with announcement row, headline, supporting copy, pill and ghost buttons, and a two-by-two grid with one tall photo cell.
Hero 118 - Coming Soon Hero With Logo Striphero118A two-column coming-soon hero with mono badge, split headline, dual CTAs, bordered image with animated edge accents, and an auto-scrolling logo carousel in a separate band.
Hero 12 - Radial hero with frosted logo chip and tech icon buttonshero12A centered hero with radial-masked grid backdrop, frosted logo tile, highlighted keyword in the headline, paired CTAs, and square outline buttons carrying saturated tech icons.
Hero 123 - Two-column hero with inset image panelhero123A muted two-column hero with mono label, large headline, body copy, rounded CTA, and an image inside a primary-tinted rounded frame.
Hero 125 - Returns-focused hero with product cardhero125A two-column Shadcn UI hero with cart label, bold headline, muted subcopy, demo button, and a card showing product art plus exchange, shop, and refund actions.
Hero 126 - Screening hero with credits dockhero126A video-first hero that leads with a looping preview, a play-pause control that shows playback progress, and a two-column credits dock for title, speaker, copy, and CTAs.
Hero 127 - Split hero with news chip and social proof statshero127A wide split hero with ghost news CTA, oversized headline with tinted keywords, dual rounded buttons, and a side column with copy, stats, and overlapping avatars.
Hero 129 - Split hero with phone stack and social avatarshero129A two-column hero with highlighted headline word, buy and outline buttons, overlapping avatars with trust line, and layered phone frames showing skewed screen inserts.
Hero 13 - Left-aligned hero with icon badge and video CTAhero13A left-aligned hero with a wide outline badge carrying an icon chip, oversized headline, muted paragraph, demo button, and outline watch control using shadcn/ui buttons.
Hero 132 - Split hero with overlapping photo collagehero132Two-column hero with a headline, paired CTAs, avatar byline, and three overlapping portrait frames arranged as a collage.
Hero 133 - Split hero with subscribe windowhero133Two-column hero with a waitlist form in the product-frame chrome, a featured proof number, and remaining stats over the screenshot.
Hero 134 - Centered hero with inline video and logo marqueehero134A centered hero with headline, supporting copy, pill primary CTA with hover flourish, framed video with play overlay, and a logo marquee without a trust label.
Hero 135 - Customer stories hero with video and dialoghero135A split hero with customer stories chip, oversized title Client Journeys, large supporting quote, autoplay video, floating play control opening an iframe dialog, and muted section tint.
Hero 136 - Centered hero with spark icon and wide gallery bleedhero136A centered hero with stacked spark icon, headline and blurb, paired rounded CTAs, compact logo row, and a dark wide image band with offset interior panel.
Hero 137 - Full-height split hero with edge imagehero137A minimal split hero with large writing headline, short muted paragraph, and a tall image column that anchors the viewport height on large screens.
Hero 138 - Dark hero with wide media rail and tinted blur bedhero138A dark hero with two-tone headline, dual CTAs and footnote, supporting paragraph column, and a long horizontal media strip over colored blurred pillars.
Hero 139 - Full-height insights hero with tech wordmarkshero139A viewport-tall hero with introducing chip, bold data-insight headline, paragraph, contact button, trust line, grid of light wordmarks, line-art backdrop, and slow pulsing orb behind content.
Hero 14 - Hero with autoplay framework carousel and CLI bannerhero14A dev-marketing hero pairing centered headline copy with a fading CLI banner and an autoplay carousel of framework tiles wired to shadcn/ui carousel primitives.
Hero 140 - Photo-shell hero with new badge and partner markshero140A rounded full-viewport photo shell with glass new-project row, bold launch headline, supporting deployment copy, get-started pill, and a wide band of light partner logos.
Hero 141 - Fullscreen video hero with gradient headlinehero141A viewport hero with looped background footage behind a soft scrim, gradient headline about phone interruptions, glowing buy button with chevron, and compact five-star trust note.
Hero 142 - Product-planning hero with skewed canvashero142A hero with responsive headline swap, platform paragraph, start-building and customer-requests links, and a deep-perspective UI screenshot on a dark field with faint radial ribbons.
Hero 143 - Download hero with cinematic backdrop and waitlist chiphero143A hero with centered productivity messaging, Mac and Windows waitlist buttons, version footnotes, iOS waitlist link with animated border streak, and full-bleed looping footage under a radial scrim.
Hero 144 - Integration grid hero with blurred side tileshero144A hero with two staggered rows of rounded app tiles using blur, scale, and sheen variants, then a centered bold heading and supporting description from props defaults.
Hero 145 - Hiring hero with rotating role titleshero145A full-viewport photo hero with radial dimming, headline whose final line cycles through hiring roles, supporting line, join and hire buttons, and scroll cue.
Hero 146 - AI agents hero with grid frame and video teaserhero146A hero on a square grid texture with gradient headline about enterprise agents, supporting paragraph, metallic get-started button, and a bordered autoplay video card with a bottom play bar and seek track.
Hero 148 - Uppercase hero with layered photo crownshero148A muted hero with an all-caps headline, supporting paragraph, underlined starter-kit link, and four architectural photographs stepping upward in a shared wide frame.
Hero 149 - Design-service hero with checklist and stillhero149A centered hero with bold design headline, capacity paragraph, demo and how-it-works buttons, three check-backed benefit lines, large rounded product still, decorative line art, and soft radial accent; how-it-works opens a video embed.
Hero 15 - Centered hero with changelog badge and store ratingshero15A centered hero using an outline badge link, headline, supporting copy, single primary shadcn/ui button, and a wrap row of store rating proofs with icons.
Hero 150 - Insights hero with staggered image boardhero150A reporting hero with small section kicker, large headline on revenue and receivables, explanatory sentence, and a wide four-column board of bordered cards on alternating vertical offsets with pastel radial backlights.
Hero 151 - Split hero with testimonial row and image mosaichero151A split hero with default blocks heading about Shadcn and Tailwind, CTA, avatar-group quote, and a two-by-two media collage with inset phone mock frame.
Hero 152 - Trust star hero with skewed image triohero152A muted centered hero with star trust line, huge design-system headline, dual rounded CTAs including shadcn preview, and three perspective-skewed dark images.
Hero 154 - Spend Control Hero with Emailhero154A centered finance hero with headline, supporting copy, validated email field and submit button, review score badges, and a layered desktop plus phone mockup scene.
Hero 157 - Photo hero anchored with architectural headlinehero157A full-height photo hero with dark wash, small uppercase kicker, long architectural headline, left-bordered paragraph, and rounded outline projects button.
Hero 158 - Vision hero with bento image triohero158A soft-tint split hero with vision headline, supporting copy, animated arrow primary CTA, and a two-by-two bento grid of rounded dark images with one tall cell.
Hero 159 - Split hero with bottom-left inset cardhero159A two-column hero with headline, paragraph, primary pill CTA with sliding arrows, optional byline, main photo, and square inset overlapping the bottom-left corner.
Hero 16 - Centered hero with gradient-masked imagehero16A centered marketing hero with headline, supporting copy, two CTAs, and a wide image that fades at the bottom behind a linear gradient mask.
Hero 160 - Award badge hero with gradient title and framed mockuphero160A dark hero with trophy badge, gradient long headline, supporting growth copy, dual CTAs, fine-print caveats, full-width background photo fade, and bordered rounded product frame.
Hero 162 - Mental wellness hero with masonry mediahero162A light split hero with large industry headline, care paragraph, outline services button, and a masonry grid of rounded images with testimonial card.
Hero 163 - Team grid hero with testimonial tilehero163A dark hero with centered support label, large team headline, and a mosaic of portrait images broken by a testimonial card with avatar and quote.
Hero 164 - Split hero with primary CTA and inline video teaserhero164A two-column hero with large primary-colored headline, supporting copy, rounded signup button, an inline 16:9 play tile that opens a dialog iframe, and a tall rounded photograph opposite.
Hero 165 - Split hero with tri-image lattice and large headlinehero165A two-column hero with an aspect-ratio lattice of three rounded photo panels opposite an oversized headline and supporting copy, without buttons in the default markup.
Hero 166 - Split hero with animated photo grid and demo buttonhero166A two-column hero with large headline, supporting copy, rounded demo button with hover lift, and three photos in animated columns inside an aspect-ratio frame.
Hero 167 - Split hero with gradient photo frame and insethero167A two-column hero with headline, paragraph, primary and outline CTAs, gradient-wrapped main image, and bottom-left square inset detail.
Hero 168 - Split hero with muted stage and floating image cardshero168A split hero with large welcome headline, body copy, outline button with arrow, and a muted gradient stage holding a central photo plus three smaller offset cards along the edge.
Hero 170 - Centered hero with GitHub star, integrations, and product shothero170A dark centered hero with headline, supporting paragraph, download and GitHub buttons, row of integration icon buttons, and a wide video placeholder with decorative dot corners.
Hero 171 - Split hero with avatars and bento collagehero171Two-column hero with flip-label CTAs, avatar proof, playable dialog video, and a dense illustrative tile collage.
Hero 172 - Hero with email signup and overlapping tri-imageshero172Two-column hero with zod email capture, checklist lines, and three overlapping portrait frames plus decorative strokes.
Hero 173 - Studio hero with triple portraits and promo dialoghero173A split hero pairing uppercase CTAs against three staggered portrait photos, with an outlined control that opens an embedded video in a modal.
Hero 174 - Full-viewport photo hero with anchored footer ribbonhero174Full-height hero layering photo wallpaper beneath a tonal scrim, centered headline paragraph, solitary CTA, and frosted footer strip with HQ copy plus scroll cue.
Hero 175 - Centered promo hero with gradient fade-inhero175Centered hero outlining a tinted outline promo pill, bold headline injecting a tonal accent phrase, subdued paragraph, and paired primary versus ghost-with-icon demo controls.
Hero 177 - Store-rating hero with proof row and split photoshero177Centered hero joining marketplace badge with five-star row, bold savings headline, icon bullet proofs, animated button pair, and uneven dual imagery.
Hero 178 - Support hero with mono label and triple photo stackhero178A split hero pairing monospace category line, clamp-scale headline, essay copy, and three overlapping photo tiles staged along a square bleed.
Hero 179 - Inbox hero with layered wide-and-tall frameshero179Split hero echoing hero178 structure with Shared Inbox narrative and two overlapping AspectRatio plates creating a wide lower band and tall rear panel.
Hero 18 - Integrations hero with orbiting icon tiles and square previewhero18A centered hero with headline, supporting copy, paired shadcn/ui buttons, square product capture, and symmetric rings of small integration tiles on medium and large breakpoints.
Hero 180 - Centered hero with gradient sandwich showcasehero180Centered conversational intelligence headline using muted underline highlight, twin rounded CTAs, and nested AspectRatio frame with gradient bands cradling bordered hero photo.
Hero 183 - Centered premium hero with framed trio and mobile carouselhero183A centered hero with outline badge, headline, twin buttons, desktop trio framed by gradient rules, and a dot carousel for photos on small screens.
Hero 185 - Split hero with bento photo gridhero185A two-column hero with badge, headline, description, twin buttons, and a two-by-two bento grid with one tall primary tile and two supporting photos.
Hero 186 - Rounded shell hero with feature list and wide imagehero186A marketing hero inside a rounded page shell with two columns for copy and icon features and a 16:9 image below that soft-fades out toward the bottom.
Hero 187 - Split hero with feature grid and autoplay carouselhero187A two-column hero with a feature grid, primary and outline CTAs, and an edge-bleed carousel with slide counter labels driven by placeholder images.
Hero 190 - Wireframe-gated centerpiece hero railhero190Center column headline paragraph and chevron CTA framed by bordered wire-rail strips with diagonal tiling, bordered widescreen shot, and lower runway of matching tiles.
Hero 191 - Tabbed banking hero with wide preview canvaseshero191Finance headline, paragraph, CTA button, Tabs with scrollable icon triggers, alternating dashboard imagery, plus subtle plus-grid halo and softened gradient washes.
Hero 192 - Centered hero with medium image and announcementhero192A centered marketing hero with a linked promo pill above the headline, two CTAs, optional trust byline, and a bordered medium image.
Hero 193 - Centered fullscreen hero with serif headlinehero193A full-height hero with edge-to-edge background photography, centered Playfair headline with an italic accent word, supporting copy, and one rounded primary button.
Hero 194 - Dark rounded hero auto-scrolling photo reelshero194Split dark capsule pairs serif headline paragraph command-styled button against triple looping vertical Carousel columns rotating photography plus horizontal carousel pairs on handheld layouts.
Hero 195 - Hero with tabbed dashboard previewhero195Headline paragraph optional Buttons TabsList swapping wide dashboard TabsContent accented by animated border beam silhouette plus dashed ornamental frame lines bordering captured UI.
Hero 196 - Hero with tabbed features and email formhero196Dotted muted backdrop supports linked badge headline paragraph plus inline overlapping email submission button field finished by icon TabsRail switching photography inside softly rounded bordered card panels.
Hero 197 - Announcement hero dotted grid backdrophero197Outline Launching Soon badge with sparkle icon, oversized gradient-clipped headline, supporting copy, and paired large Buttons over subtle dotted mesh background.
Hero 198 - Left-aligned fullscreen hero with serif headlinehero198A full-height photographic hero with a left-aligned Playfair headline, italic accent word, supporting copy, and rounded primary and secondary buttons.
Hero 199 - Right-aligned fullscreen hero with serif headlinehero199A full-height photographic hero mirroring hero198 with right-aligned Playfair headline, italic accent word, supporting copy, and rounded button pair.
Hero 2 - Split hero with image on the lefthero2A two-column marketing hero with the media column first, then a badge, headline, body copy, and paired CTAs aligned start on large screens.
Hero 20 - Two-column hero with synced accordion and fading carouselhero20A marketing hero pairing outline badge, headline, icon accordion answers tied to a fading image carousel, timed accordion rotation, and progress ticks beneath answers.
Hero 200 - Serif hero with rising phone mockuphero200Condensed kicker, multi-line Playfair manifesto, glossy CTA referencing Apple glyph, and motion phone mock floating from bordered band with calendar UI chrome.
Hero 201 - Orbiting integration hero center stagehero201Motion-eased triple OrbitingCircles halo behind vignette mask plus badge kicker enormous condensed heading paragraph primary pill secondary chevron text interplay.
Hero 202 - Split integration hero with orbital panelhero202Text column merges badge heading accent span Buttons while right bordered muted tile hosts OrbitingCircles halo offset integrating logo pool rotations.
Hero 203 - Editorial hero with twin dotted magazine liftshero203Intro link, towering condensed headline and paragraph, single rounded signup CTA, then twin dotted magazine cards layering photography plus meta rows and bottom chevron prompts.
Hero 204 - Serif hero oval signup with dual-phone tilthero204Spark-marked label, serif headline plus paragraph, pill-shaped fused email field and signup button, and framer-motion phone mockups angled in opposing directions atop a bordered stage.
Hero 205 - Portfolio headline hero widening card unveilhero205Oversized multi-line condensed headline mixes italic wording with inline badges, paired CTAs, then motion eased Card unveiling a bordered hero photograph.
Hero 206 - Centered hero with logo row and browser mockuphero206A centered hero with tight tracking headline, supporting copy, a logo strip above the preview, and a rounded browser frame showing responsive dashboard screenshots.
Hero 207 - Badge hero with three staggered portrait cardshero207Optional outline badge fronts headline descriptive copy plus primary Button, then three overlapping portrait cards with gradient fades, captions, supporting copy, tiered stacking, soft shadows.
Hero 21 - Centered hero with promo pill and framed imagehero21A centered marketing hero with a linked promo pill, headline, copy, two CTAs, optional dashed tertiary link, and a capped image in a top-framed shell.
Hero 210 - Centered hero with coverflow image carouselhero210A centered hero with headline and paragraph, Swiper coverflow carousel of portraits with side fades and autoplay, and a pill primary button below.
Hero 211 - Hero with creative card carousel and bottom marqueehero211A hero with centered headline and paragraph, Swiper creative-flip stack with pagination, pill CTA with handwritten callout, and animated card marquees along the base.
Hero 212 - Hero with crossfading portrait and marquee bandhero212A hero with italic display headline, timed crossfade inside a tall rounded phone frame, pill button with handwritten note, yellow glow, and rotated card marquees.
Hero 213 - Hero with masked gallery and floating previewhero213A hero with centered headline, paragraph, pill of outline icons, large SVG-masked image cycle, and a smaller floating frame previewing the next shot.
Hero 214 - Split hero with masked collage and contact CTAhero214A hero with left-aligned serif headline, large masked image slideshow, two satellite frames on desktop and paired tiles on mobile, and rounded contact button.
Hero 215 - Full-height hero with blurred copy and building photohero215A near viewport-tall hero with left-aligned headline on a blurred scrim, supporting paragraph, arrow contact button, and large rounded building photo anchored top right.
Hero 216 - Centered hero with meteors and globehero216A centered hero with kicker, large Cal Sans headline, MagicUI meteor field, rounded secondary CTA with arrow motion, and overscaled globe strip below.
Hero 218 - Hero with staggered headline and particle veilhero218A centered hero with kicker, per-word Framer 3D reveal on the headline with italic emphasis, dense MagicUI particles, abstract SVG ribbon, and arrow CTA.
Hero 219 - Hero with animated accent line and vertical logoshero219A centered hero with kicker, static heading plus 3D animated accent words, MagicUI particles, and seven vertical integration marquees capped by soft blurs.
Hero 220 - Full-viewport hero with video-filled wordmarkhero220A near fullscreen hero with low opacity landscape backdrop, motion fade on mount, and oversized MagicUI video text spelling the main word in Playfair.
Hero 221 - Centered hero with video-filled display typehero221A centered hero with oversized video-filled display type, supporting line, and rounded secondary CTA with arrow motion.
Hero 222 - Full-height hero with variable type and crosshairhero222A near full-viewport hero with photo backdrop, mono chapter label, variable-font headline tied to cursor movement, crosshair overlays, and text CTA strip.
Hero 223 - Centered hero with grid backdrop and shadow wordhero223A centered hero with animated skewed grid backdrop, muted headline with shadow-accent word, supporting line, and two pill buttons.
Hero 224 - Split hero with copy and draggable image cloudhero224A two-column hero with stacked headline, paragraph, dual pill CTAs, and an interactive 3D image cloud built on canvas.
Hero 225 - Centered hero with orbiting integration logoshero225A centered hero with kicker, large heading, four concentric orbiting logo rings, gradient fade, and anchored pill CTA.
Hero 226 - Edge-to-edge slideshow hero with image tileshero226A looping carousel hero with wide slides, background photography, right-aligned title and blurb per slide, CTA strip, and dot pager.
Hero 227 - Centered hero with icon row, vertical reveal type, and phone mockhero227A bordered hero with icon feature row, oversized vertical-cut headline, dual segmented buttons, and animated phone frame with in-screen UI.
Hero 228 - Centered hero with fan carousel of portraitshero228A centered hero with mixed serif headline, supporting copy, and autoplay carousel that fans three portraits with animated tick bars and name crossfades.
Hero 229 - Near full-screen hero with corner wire illustrationshero229A tall bordered hero with secondary pill, centered headline, dual CTAs, and animated SVG line illustrations along top, bottom, and sides.
Hero 230 - Centered hero with logo ticker and filmstrip carouselhero230A stacked hero with pill kicker, headline, dual CTAs, auto-scrolling logo band, and autoplay carousel of raised image cards with edge fades.
Hero 231 - Split hero with coverflow portraits and logo striphero231A split hero with left copy and CTAs, top logo marquee, and Swiper coverflow carousel of portrait cards with pagination dots.
Hero 232 - Full-viewport centered hero with side arcshero232A minimum full-screen hero with pill kicker, masked headline block around a shadow word, dual CTAs, and large muted SVG arcs along both sides on desktop.
Hero 233 - Centered hero with rising column veilhero233A tall hero with gradient column backdrop, pill kicker, shadow-accent headline, paired CTAs, and animated vertical columns that grow upward behind copy.
Hero 234 - Full-height hero with scrolling filmstrips and glass cardhero234A tall hero with two opposing horizontal filmstrip loops of images, edge fades, and centered frosted card with multi-line headline and CTA.
Hero234a - Full-height hero with inset scrolling gallery and glass cardhero234aA tall hero with rounded viewport containing three counter-scrolling image rows and centered frosted headline card with primary button.
Hero234b - Full-height hero with vertical column marqueeshero234bA tall hero with five upward-drifting image columns, top and bottom fades, side scrims, and centered glass card with headline, tag line, and CTA.
Hero 235 - Full-height hero with soft blurs and feature columnshero235A tall hero using theme-colored blur orbs and a light striped grain, centered headline and primary CTA, and a three-column icon feature grid with vertical accents.
Hero 236 - Split hero with copy and 3D logo cloudhero236A split hero with kicker pill, display heading, description text, and canvas image cloud opposite the copy, driven by placeholder integration logos.
Hero 237 - Split hero with orbiting rings bordered sectionhero237A split hero inside a bordered strip with kicker, headline, body, and four orbiting logo rings offset into the media half.
Hero 238 - Split hero with aurora backdrop and benefit rowhero238A tall ambient hero with aurora gradient shell, left-aligned headline, primary and ghost CTAs, inline icon benefit list, and motion stat chip in the media column.
Hero 239 - Centered hero with 3D image marqueehero239A centered hero with uppercase pill, headline, supporting text, dual buttons, and a wide 3D marquee ribbon of photography beneath.
Hero 24 - Centered hero with logo and icon feature gridhero24A centered hero with optional logo, eyebrow badge, headline, primary and outline CTAs, and a four-cell grid of icon-led features with short copy.
Hero 240 - Centered hero with email capture and 3D marqueehero240A centered hero with zap icon label, headline, muted copy, pill email field with subscribe button, and bottom 3D marquee plus fade mask.
Hero 241 - Tall hero with gradient beams and stat footerhero241A near full-height hero with collision-style beams backdrop, centered serif headline, supporting copy, dual rounded CTAs, and two-column stat strip separated by a vertical rule.
Hero 242 - Split hero with growth checklist and bar charthero242A two-column hero with cover-highlight headline, intro copy, dual buttons, checklist of growth claims, and large bar chart in a muted panel.
Hero 243 - Hero with flip-word accent and dashed framehero243A hero with dashed outer borders, an animated word-rotating accent beside fixed headline copy, centered description and CTA, and a three-cell icon summary row.
Hero 244 - Split hero with draggable photo cardshero244A two-column hero with bold cal headline, supporting paragraph, dual CTAs, and draggable image cards scattered over a hint sentence on the media side.
Hero 245 - Centered recruiting hero with highlight word and download CTAshero245A centered hero with hiring pill, pointer-highlight headline mentioning blocks, gradient column veil, Mac download CTA, Windows link, and bordered hero photo.
Hero 246 - Stacked hero with divider CTAs and analytics charthero246A vertical hero with status dot label, headline, body, bordered button row with play ghost, checkerboard corner motifs, and full-width bar chart card.
Hero 247 - Animated portfolio hero with avatar and twin CTAshero247A centered portfolio hero where the avatar, headline, and shadcn buttons ease in with staged motion, plus hover-repeating label animation on each CTA.
Hero 248 - Split hero with overlapping team avatars in headlinehero248A sparse two-column hero with headline embedding animated avatar tooltips, supporting paragraph, and primary CTA while the second column stays open.
Hero 249 - Globe Hero with Logo Marqueehero249A two-row marketing block with split headline, globe visualization, demo CTA, then a caption column beside a grayscale logo marquee with edge fades.
Hero 25 - Centered hero with dual CTAs and inline feature listhero25A centered hero with optional logo, eyebrow label, headline, primary and secondary buttons, and a wrapped row of feature labels each paired with an icon.
Hero 252 - Dashboard hero with reviews and skewed product previewhero252A two-column hero built with shadcn/ui that pairs pill-shaped news links, dual CTAs, avatar stack with star rating, and a perspective-tilted dashboard screenshot panel.
Hero 253 - Announcement hero with dashboard preview and tool marqueehero253A split hero combining kibo announcement styling, gradient headline, twin CTAs, framed dashboard capture, and a toolbelt strip with tooltips or marquee on smaller breakpoints.
Hero 254 - Full-height hero with grid veil and motion headlinehero254A viewport-tall hero using a photographic background, tinted veil, vertical grid lines, centered headline and supporting copy with staged motion, paired pill buttons, and a scroll cue.
Hero 255 - Oversized wordmark hero with services list and contact cardhero255A rounded-top hero filling the viewport width with photography, giant stacked brand wordmark, services column, motto lines, decorative plus row, copyright, and an elevated contact card with avatar CTA.
Hero 256 - Split hero with grid motif and feature striphero256A two-band hero with badge, headline, primary and outline CTAs beside an optional grid and diamond motif, a three-up feature row with descriptions, and a wide landscape image inside the page container without a max-width cap on the media.
Hero 257 - Visitor analytics hero with angled backdrop and logo belthero257A hero using angled gradient panels behind headline and twin CTAs, a bordered product capture, and a dense trusted-logo grid separated by dashed borders.
Hero 258 - Hero with megaphone badge, logos, and hover-expanding cardshero258A muted hero featuring an announcement badge, centered headline and description, primary CTA, grayscale logo row, and horizontally scrolling cards that flex wider on hover.
Hero 259 - Split hero with stacked chrome and animated grain panelhero259A two-column hero pairing logo header, headline, outline CTA, footer notes on the left with a tall animated grain field on the right for high-contrast landing intros.
Hero 26 - Centered hero with pill announcement and inline iconshero26A centered hero using a rounded announcement link with badge chip, oversized headline, paragraph woven with inline Lucide chips, and paired large shadcn/ui buttons.
Hero 260 - Tabbed hero with cursor badge and swap imageryhero260A hero built around selectable tabs that swap descriptive subtitles and imagery beneath an asymmetric headline pair, with a custom cursor badge following movement inside the preview region.
Hero 261 - Two-column hero with features listhero261A split marketing hero with headline, supporting copy, and two CTAs on one side, a dashed divider, an icon feature list on the other, and a large screenshot band below.
Hero 262 - About Hero with Stats Sidebarhero262A two-column about page hero with headline, subheading, and body text on the left, and a vertical stats list separated by a dashed line on the right.
Hero 263 - Centered hero with large image belowhero263A centered hero with badge, headline, supporting copy, two CTAs, and a wide image stacked beneath the text block.
Hero 264 - Centered cutout-mask hero with filmstrip pickerhero264A centered hero with optional badge, headline, dual CTAs, masked widescreen image crossfade, and clickable thumbnail strip inset along the bottom cutout.
Hero 265 - Split hero with masked portrait and copy stackhero265A two-column hero with L-shaped masked portrait cycling on the left and badge, headline, body, and dual CTAs on the right.
Hero 266 - Hero with asymmetric mask, overlays, and mobile thumbshero266A hero with headline row, dual CTAs, large masked slideshow, map-style label chip, projects chip, dot indicators, and mobile thumbnail strip.
Hero 267 - Inset-image hero with left-bleed panelhero267A two-column hero with left media panel bleeding to the viewport edge, main and inset square images, and right-column headline with dual CTAs.
Hero 268 - Contained inset-image hero with media lefthero268A two-column hero inside the container bounds with muted framed main image, corner inset thumbnail, and right-aligned copy plus CTAs.
Hero 269 - Contained inset-image hero with copy lefthero269A two-column hero with headline and dual CTAs on the left and muted framed main image with inset thumbnail on the right, all inside the container.
Hero 27 - Split hero with stacked mega headings and sliding CTAhero27A wide hero pairing three stacked display words with hover drift, a tall bold subheading stack, muted paragraph, and shadcn/ui button whose fill slides up on hover over soft gradient decor.
Hero 270 - Inset hero with landscape frame and trust linehero270A two-column hero with bordered landscape image, overlapping square inset, right-column copy, animated primary CTA, optional byline, and subtle dotted backdrop.
Hero 271 - Right-bleed inset hero with dot gridhero271A two-column hero with copy on the left, right-bleeding main image, optional square inset at bottom-left, dot grid accent, animated primary CTA, and optional byline.
Hero 272 - Split Hero With Rotating Photo Gridhero272A split hero with headline, creator avatars with tooltips, app store download buttons, a partner logo marquee, and a nine-cell photo grid that rotates on a timer with flip-style transitions.
Hero 273 - Centered Hero With 3D Image Carouselhero273A centered hero with badge, dual CTAs, member avatars and counts, plus a drag-to-spin 3D ring of images on an animated aurora background.
Hero 274 - Hero with contained image and hover feature slideshero274A marketing hero with a larger centered headline, a wide landscape image inside the page container that crossfades between slides when each feature column is hovered, and three icon-led columns separated by vertical rules on desktop.
Hero 275 - Split hero with hover slides beside feature listhero275A marketing hero with a left-aligned headline, optional supporting copy above the stacked feature list, a split layout with a crossfading image column, and hover-driven slides.
Hero 276 - Hero with feature row above image and slide dotshero276A marketing hero with a large centered headline, a three-column hover feature row above a crossfading image, and decorative dots under the frame that reflect the active slide.
Hero 277 - Split hero with media column and hover feature slideshero277A two-column marketing hero with a sticky crossfading image on one side and dashed badge, headline, CTAs, and icon feature rows that swap the image on hover on the other.
Hero 278 - Split hero with copy first and hover feature slideshero278A two-column marketing hero with dashed badge, headline, CTAs, and hover-driven icon features on the left, and a sticky crossfading image column on the right.
Hero 279 - Carousel-first hero with centered feature gridhero279A stacked hero led by an autoplay image carousel with indicators, then centered headline, description, responsive feature grid, and dual CTAs.
Hero 28 - Centered integrations hero with masked diagram fieldhero28A centered shadcn/ui hero whose headline, paragraph, and primary button float above an SVG integration lattice visible on large screens behind the copy.
Hero 280 - Split hero with carousel and stacked featureshero280A two-column layout with an autoplay carousel on one side and stacked headline, feature list with icons, dual CTAs, and slide indicators on the other.
Hero 281 - Hero with feature grid and bottom carouselhero281A centered hero with headline, icon feature grid with short blurbs, dual CTAs, and a full-width autoplay carousel with slide labels and dot controls.
Hero 286 - Marquee Features Hero With Masked Edgeshero286Editorial headline plus CTAs in the container, then a full-width muted band with horizontally scrolling hero-feature-icons rows paused on hover and gradient fades masking both sides; optional bordered panorama below.
Hero 288 - Compact Hero With Feature Pills Above Previewhero288A narrow centered hero where three icon pills summarize proof ahead of dual CTAs and a single bordered screenshot using hero-feature-icons imagery fields.
Hero 29 - Centered hero with blurred gradient field and ratings capsulehero29A centered hero built with shadcn/ui buttons that floats headline, twin CTAs, star rating capsule, and raised bordered media above an SVG wash with soft circular blooms.
Hero 290 - Logo-Led Hero With Four-Up Feature Striphero290A marketing hero that shows optional logo and badge above the headline, dual CTAs, a four-cell icon matrix, and a full-width hero-feature-icons preview.
Hero 291 - Three-Pillar Comparison Hero With Shared Imagehero291A hero stacking centered copy and CTAs above three equal icon columns separated by rules, finishing with one shared hero-feature-icons image band.
Hero 292 - Segmented Six-Cell Hero Below Single Previewhero292A hero with headline, CTAs, one framed screenshot, and a segmented grid that presents six icon-led entries from hero-feature-icons props without carousel motion.
Hero 294 - Framed Preview Hero With Divided Feature Bandhero294A centered hero introducing dual CTAs, a padded outer frame around one screenshot, and four vertically divided icon summaries using hero-feature-icons data.
Hero 295 - Hero Card With Flip Accent and Feature Gridhero295A hero inside a rounded card shell with solid borders, an animated word flip between headline lines, a centered description and CTA, and a three-column feature row with simple dividers.
Hero 296 - Split hero with editorial rating railhero296A split hero with copy and CTAs on the left and a large rating figure, stars, review count, avatars, and optional byline on the right.
Hero 297 - Split hero with reviews proof columnhero297A split hero with announcement badge, headline, dual CTAs on the left, and a right column with description plus a reviews panel with stars, score, and avatars.
Hero 298 - Centered hero with quote and review striphero298A centered hero with headline, CTA, a large customer quote, and a compact row of avatars with stars and review count underneath.
Hero 299 - Centered hero with users and avatarshero299A centered hero with headline, CTA, overlapping avatars, and a single active users stat without star ratings or product images.
Hero 3 - Split hero with review strip and tall photographyhero3A two-column hero using shadcn/ui Avatar and Button rows where overlapped faces, star score, and review total sit beside a tall rounded cover image.
Hero 30 - Split hero with plus pattern and stacked photoshero30A two-column hero with medium-weight headline, paired shadcn/ui buttons, and three bordered photos where a tall frame matches the combined height of two stacked side tiles, behind a radial plus-pattern wash.
Hero 300 - Centered hero with download proof pillhero300A centered hero with headline, CTA, and a rounded pill showing avatar faces beside download count, plus optional byline text.
Hero 301 - Panoramic Hero With Border-Rail Featureshero301A hero separating headline copy from dual CTAs using a bordered band of four compact icon summaries ahead of an ultra-wide hero-feature-icons landscape image.
Hero 302 - Sidebar Rail Hero With Lead Framehero302Optional top preview, then a two-column hero where intro and CTAs sit in the main column and hero-feature-icons stack in a bordered-left proof rail with icon wells.
Hero 303 - Split hero with community stat columnhero303A split hero with headline, dual CTAs on the left, and a right column with description, active users stat, and avatar row with join affordance.
Hero 304 - Sticky Narrative Hero With Offset Cardshero304Two-column hero where headline, CTAs, and desktop-only preview stick while stacked hero-feature-icons surfaces scroll alongside—with subtle horizontal offsets on alternating cards.
Hero 305 - Editorial Split Headline Hero With Mosaic Gridhero305Magazine-style two-column opener (headline versus oversized description plus CTAs) followed by an asymmetric six-column mosaic of four hero-feature-icons tiles, then optional framed media.
Hero 306 - Split hero with muted copy panel and bordered previewhero306A rounded shell splits intro, paired CTAs, and icon-backed feature summaries on a muted panel from a full-height preview image, collapsing to centered copy with a quad feature grid when imagery is absent.
Hero 307 - Fullscreen Hero With 3D Dashboard Previewhero307A fullscreen dark hero with oversized headline, paired CTAs, and a CSS-built admin dashboard that tilts on mouse movement in a fixed 3D perspective scene.
Hero 308 - Grid hero with click-to-play video previewhero308A centered marketing hero on a masked grid background with gradient headline, CTA button, and a framed 16:9 video thumbnail that plays inline when the play control is pressed.
Hero 309 - Centered hero with dual metrics and avatarshero309A centered hero with headline, twin CTAs, two adoption stats, a shared avatar rail, and optional byline without star ratings.
Hero 31 - Centered hero with geometric backdrop and floating tileshero31A centered hero using shadcn/ui anchor buttons below headline copy, sitting over an illustrated gradient field with grid veneer and asymmetric floating panels beneath.
Hero 310 - Centered hero with teams adoption cardhero310A centered hero with headline, horizontal teams-onboarded card above dual CTAs, and review count without star ratings or product images.
Hero 311 - Accent hero with badge header and three linked cardshero311A centered marketing hero with an outline badge, large headline, supporting copy, and three linked image cards in a staggered row.
Hero 315 - Split inset-image hero with outside bottom-left insethero315A two-column hero with copy on the left, a bordered main image on the right, and a square inset detail hanging outside the bottom-left corner.
Hero 316 - Inset hero with byline and gradient accenthero316A two-column hero with an animated primary CTA, optional byline beside the button, gradient accent, and an outside bottom-right inset image.
Hero 317 - Kicker inset-image hero with top-right insethero317A two-column hero with an optional byline kicker pill above the headline and a square inset anchored outside the top-right of the main image.
Hero 318 - Gradient frame inset hero with media lefthero318A two-column hero with a chart-gradient frame wrapping the main image, copy on the right, and an outside bottom-right inset detail.
Hero 319 - Left-bleed inset hero with dot grid on copyhero319A left-bleed muted panel hero with framed main image, outside inset toward the copy side, dot grid accent behind the text column, and dual CTAs.
Hero 32 - Split integrations hero with staggered logo masonryhero32A hero that offsets integration story copy and one large shadcn/ui button against three staggered rows of bordered logo tiles over a radial-masked grid backdrop.
Hero 320 - Rotated inset-image hero with outside detailhero320A two-column hero with a slightly rotated square inset hanging outside the bottom-left of the main image and dual CTAs.
Hero 321 - Overlap column inset hero with blur accenthero321A twelve-column hero where the media column overlaps the copy column, with a blur accent, shadowed main image, and outside inset detail.
Hero 322 - Ring accent inset hero with floating bylinehero322A two-column hero with a chart-toned ring around the main image, optional byline pill on the photo, and an outside top-left inset detail.
Hero 323 - Pattern background inset hero with framed mediahero323A two-column hero with a dot pattern background, muted framed main image, outside inset, dual CTAs, and optional byline under the buttons.
Hero 324 - Left-bleed gradient inset hero with dot gridhero324An elaborate hero with left-bleeding gradient panel, bordered main image, optional byline pill on the photo, large outside inset at bottom-right, dot grid on the copy column, and animated primary CTA.
Hero 325 - Fullscreen Screening Herohero325A fullscreen hero with a looping video background, a play-pause control that shows playback progress, and a two-column credits dock for title, speaker, copy, and CTAs.
Hero 326 - Full Bleed Screening Herohero326A full-bleed hero with a wide looping video, a play-pause control that shows playback progress, and a two-column credits dock for title, speaker, copy, and CTAs.
Hero 33 - Split hero with pricing panel and full-height photographhero33A two-column hero pairing badge text, twin shadcn/ui CTAs, bordered pricing summary, and opposite-column photography that covers the full grid cell height.
Hero 34 - Two-column hero on muted panel with bleed imagehero34A basic-tier hero built with shadcn/ui anchor buttons, pairing padded muted-grid copy with an adjacent photograph that fills its column inside one container-wide split.
Hero 35 - Split hero with lattice collage and paired CTAshero35A marketing hero with centered-then-left headline stack, twin shadcn/ui buttons, and a right-side accent lattice framing three rounded photos plus corner markers.
Hero 36 - Accent hero with badge header and three linked cardshero36An accent-background hero using shadcn/ui badge styling above headline copy, followed by three bordered cards with imagery, blur glass surfaces, and trailing arrow links.
Hero 37 - Centered hero with spiral motif and triple handset stackhero37A centered hero using uppercase release label, scaled headline, twin shadcn/ui buttons, and three rotated handset panels over a wide muted spiral particle field.
Hero 38 - Split hero with dotted spiral art and framed photoshero38A two-column hero pairing badge, headline, body, and twin shadcn/ui buttons with an illustrative panel combining dotted spiral artwork and three overlapping bordered photos.
Hero 39 - Rounded shell hero with overlapping photo collagehero39A marketing hero inside a wide rounded accent shell with badge, headline, primary button, and three overlapping bordered photos.
Hero 4 - Split hero with image, avatars, and star ratinghero4A two-column marketing hero with a muted image panel, headline and supporting copy, overlapping reviewer avatars, a five-star rating summary, and paired primary and outline buttons.
Hero 40 - Split hero with checklist, preview, and integration marqueehero40A two-column hero built with shadcn/ui buttons pairing oversized headline, checklist proofs, bordered preview image, and dual MagicUI marquee lanes of integration cards.
Hero 45 - Hero with wide image and three feature columnshero45A hero with outline badge, headline, a wide landscape image that crossfades between slides when each feature column is hovered, gradient veil, and three icon-led columns separated by vertical rules on desktop.
Hero 47 - Split hero with handset frame and split headline linehero47A free-tier hero combining oversized heading with muted continuation phrase, supporting paragraph, stylized shadcn/ui primary button, docs link, and inset screenshot inside a phone asset.
Hero 48 - Centered hero with auto-moving logo carouselhero48A centered marketing hero with bold headline, paragraph, twin shadcn/ui CTAs, looping logo lane with softened edges, and illustration resting below the fold.
Hero 49 - Centered hero with download pill and handset showcasehero49A centered hero using shadcn/ui rounded-full CTA with store badges, dense headline and paragraph stack, and wide smartphone mock framing inset application art.
Hero 5 - Split hero with icon button and wide media tilehero5A hero pairing headline, supporting line, and large shadcn/ui primary button with leading icon opposite an aspect-video rounded image.
Hero 50 - Centered hero with survey banner and layered screenshotshero50A centered hero featuring rounded announcement link, headline, supporting copy, twin shadcn/ui buttons, tall hero image with gradient pedestal, and smaller overlapping captures at the sides.
Hero 51 - Centered hero with grid veil and fanned portraitshero51A centered hero with radial grid backdrop, wide headline, primary button, globe byline, and a central photo with two portrait tiles fanned behind the sides.
Hero 53 - Impact hero with dense headline and avatar proofhero53A left-aligned hero built with shadcn/ui button and avatars, stacking an extra-large headline, reversed-row paragraph with early-access CTA, and overlapping portrait chips beside trust copy.
Hero 55 - Full-viewport centered hero with changelog linkhero55A viewport-height hero combining textured backdrop wash, rounded changelog row with filled badge, oversized headline, and twin large shadcn/ui buttons centered vertically.
Hero 57 - Centered AI proposal hero with floating proof chipshero57A centered hero using shadcn/ui primary trial button beneath headline copy that mixes inline globe iconography with faded emphasis words, dashed corner annotations, muted grid veil, and brief model credit line.
Hero 58 - Split hero with illustration and faded square gridhero58A two-column hero pairing stacked headline with manual line break, supporting paragraph, trailing-arrow shadcn/ui button, and large illustration backed by radial-masked square lattice.
Hero 59 - Fullscreen video hero with beta enrollment CTAshero59A viewport-tall hero with looping muted video backdrop, centered beta label, headline stack, and paired rounded shadcn/ui buttons over full-bleed motion.
Hero 6 - Centered hero with mosaic imagery and partner logoshero6A hero with centered headline, muted paragraph, paired chevron shadcn/ui buttons, five-slot photography grid with outline button on one tile, and repeating logo row.
Hero 60 - Impact hero with grid veil and highlighted closing wordhero60A left-aligned hero using shadcn/ui button beneath oversized headline where one closing word sits on a muted panel, plus grid veil backdrop and credit-line helper.
Hero 61 - Folio hero with hanging copy platehero61A hero built around one wide photograph, with a hanging title plate on the frame and a caption row of supporting copy plus paired CTAs underneath.
Hero 63 - Centered payroll hero with illustration and floating chipshero63A centered hero with accounting headline, muted paragraph, rounded shadcn/ui CTA, illustrative globe art with floating status cards, and grayscale partner logo row.
Hero 64 - Split testimonial hero with rating strip and collage cardshero64A two-column hero pairing headline plus paragraph with floating testimonial cards, metric badges, star rating row, and overlapping avatar chips framed by shadcn/ui ButtonLink CTAs.
Hero 65 - Gradient hero with inverted span headline and bordered previewhero65Stacked hero blending radial fade backdrop, headline where inner span inverts against elevated panel, rounded shadcn/ui primary button, and bordered thumbnail preview row.
Hero 66 - Centered Consultation Herohero66A stacked hero with circular logo, headline and supporting copy, a rounded consultation button with calendar icon, overlapping avatar social proof, and a large framed device image below.
Hero 67 - Calendar-focused hero with avatar proof striphero67Centered hero featuring eyebrow label, stacked headline, paragraph, pill-shaped shadcn/ui schedule button, calendar screenshot duo, and overlapping avatar testimonial row.
Hero 68 - Dashed-border hero with badge strip and feature rowhero68A hero with dashed frame lines, a pill row combining badge and label, centered headline and description, two CTAs, and a three-column feature strip with icons.
Hero 7 - Centered hero with ratings row under single CTAhero7A centered hero with headline, muted paragraph, large shadcn/ui button, overlapped avatars, star row, numeric score, and review total caption.
Hero 70 - Subscription hero with carousel proof and portfolio buttonhero70A hero with headline, descriptive paragraph, stacked benefit chips, autoplaying shadcn/ui carousel of portfolio shots, chat pill link, and prominent portfolio button.
Hero 71 - Gradient hero with client headline and dual CTAshero71Warm gradient hero using centered headline stack, supporting paragraph, two-column shadcn/ui buttons, and adjustable-width rounded photography beneath soft radial backdrop.
Hero 72 - Finance waitlist hero with icon proof grid and split imageryhero72A hero combining headline, paragraph, shadcn/ui email Field plus submit button, icon-caption grid, and staggered photography duo locked via aspect-ratio helpers.
Hero 74 - Business OS hero with email capture and layered photographyhero74A hero promoting a unified operations stack via headline, paragraph, inline email Field plus waitlist button, six-icon capability strip, and overlapping photo trio framed by soft glow backdrop.
Hero 75 - Split upgrade hero with avatar proof and photography railhero75Two-column hero balancing eyebrow label, stacked headline with gradient keyword, paragraph, rounded upgrade button, overlapping avatar stack, supporting caption, and tall photography column.
Hero 76 - Split SaaS hero with dot pattern, logo strip, and product previewhero76Left-aligned split hero with radial dot background, soft glow accents, badge pill, dual CTAs, bordered logo strip, and aspect-ratio product preview with theme-aware dark image support.
Hero 77 - Centered hero with dual CTAs and looping videohero77A hero combining a stacked headline, paragraph, paired shadcn/ui buttons, monochrome logo strip, and a framed looping video stage.
Hero 78 - Fullscreen photo hero with serif headline and grain veilhero78Viewport hero layering background photography beneath readability overlays plus centered serif headline, paragraph, and pill-shaped shadcn/ui button accented by subtle noise texture.
Hero 79 - Full-viewport photo hero with headline bandhero79An edge-to-edge photo hero with brand mark, oversized headline and subtitle, plus a ghost read-more control on wider layouts.
Hero 8 - Centered hero with cutoff imagehero8A centered hero with headline, supporting copy, and two CTAs above a wide image clipped by a full-width bottom edge.
Hero 80 - Split hero with avatars, ratings, and paired imageshero80A two-column marketing hero with softly lit gradient backdrops, eyebrow link, twin CTAs, avatar stack with stars, and two tall preview images.
Hero 82 - Stacked headline hero with wide image bandhero82A top-heavy typographic hero with an oversized headline, animated download-style CTA, and a wide rounded landscape image on a light ground.
Hero 83 - Centered hero with announcement badge and triptychhero83A centered announcement hero with badge, headline, supporting line, twin full-width buttons on small screens, and three width-weighted images.
Hero 84 - Centered hero with fanned phone mockupshero84A tall hero with centered badge, headline, supporting copy, and five overlapping handset-style images in a wide composite frame.
Hero 85 - Split hero with dual auto-scroll gallerieshero85A two-column hero pairing copy with AI-style pill, twin CTAs, and paired auto-scrolling image carousels in horizontal or vertical stacks.
Hero 86 - Split hero with muted panel and portrait cutouthero86A two-column hero where text sits on a muted top band beside a portrait framed with a bordered panel and circular base shape.
Hero 87 - Split hero with grid masked illustrationhero87A two-row headline leads into a split layout with long-form copy, arrow button, and illustrative asset on a subtle square grid field.
Hero 88 - Gradient Statement Herohero88A DM Sans hero with a two-line headline using a primary gradient on the first line and solid foreground on the second, supporting copy with emphasized years line, primary CTA, and a text link with arrow to explore work.
Hero 89 - Split recruitment hero with curved imagehero89A split hero with headline, supporting lines, rounded primary CTA, bordered media, and decorative hand-drawn arrow cue on wide layouts.
Hero 9 - Gradient hero with badge, dual CTAs, and floating code striphero9A hero using outline shadcn/ui Badge, paired Buttons, radial backdrop treatments, aspect-video media frame, and raised monospace snippet overlapping the grid.
Hero 90 - Split hero with floating quote avatarshero90A DM Sans split hero with eyebrow, giant headline, muted subline, and three overlapping square cards with avatars and snippets.
Hero 91 - Split hero with pill-framed videohero91A split-screen hero with uppercase tag, headline, twin CTAs, and a looping video inside a pill-shaped frame on wide layouts.
Hero 92 - Centered hero with bordered stage and flyer imagehero92A centered typographic hero with split-color headline and a desktop-style frame capped by thick border rails plus a floated secondary crop.
Hero 93 - Centered hero with serif bridge and overlapping avatarshero93A centered hero headline weaves serif text with inline overlapping avatars, twin pill buttons, and a wide bordered screenshot.
Hero 94 - Centered platform hero with highlight barhero94A centered tech hero with uppercase eyebrow, huge headline highlighting one phrase with a muted bar, twin bold CTAs, and inline checklist chips.
Hero 95 - Centered hero with staggered portrait triohero95A centered hero with headline, paired CTAs, and three portrait frames staggered with a taller center card.
Hero 96 - Split uptime hero with skewed product screenshothero96A split hero pairing monitoring copy with primary and secondary buttons, reassurance line, and a wide bordered screenshot skewed inside the grid.
Hero 97 - Creator waitlist hero with fanned dashboardshero97A display-type waitlist hero with dotted muted backdrop, validated email Field row, and three offset dashboard screenshots overlapping center stage.
Hero 99 - Centered hero with pill link and asymmetric photo gridhero99A centered hero with changelog-style pill anchor, oversized headline, supporting copy, paired chevron buttons, and a three-column photo strip.
Hover Card Info 1 - Simple info tooltiphover-card-hover-card-info-1Compact HoverCard with short explanatory text on info trigger.
Hover Card Info 2 - Info with titlehover-card-hover-card-info-2HoverCardContent with bold title line plus supporting description.
Hover Card Info 3 - Info with icon and badgehover-card-hover-card-info-3Info hover card combining icon, Badge label, and explanatory copy.
Hover Card Info 4 - Warning infohover-card-hover-card-info-4HoverCard delivering cautionary message on warning icon trigger.
Hover Card Info 5 - Technical infohover-card-hover-card-info-5Hover card with technical details such as API field or ID format.
Hover Card Preview 1 - Link previewhover-card-hover-card-preview-1HoverCard previewing external URL title, domain, and snippet.
Hover Card Preview 2 - Document previewhover-card-hover-card-preview-2Hover card summarizing document title, type, and modified date.
Hover Card Preview 3 - Image previewhover-card-hover-card-preview-3HoverCard showing thumbnail preview for linked or attached image.
Hover Card Preview 4 - Event previewhover-card-hover-card-preview-4Hover card with event title, datetime, and location summary.
Hover Card Preview 5 - Product previewhover-card-hover-card-preview-5Commerce HoverCard with product name, price, and short detail.
Hover Card Profile 1 - Simple profile hover cardhover-card-hover-card-profile-1Radix HoverCard showing avatar, name, and role on username trigger.
Hover Card Profile 2 - Profile with follow buttonhover-card-hover-card-profile-2Profile HoverCardContent including a follow or connect action button.
Hover Card Profile 3 - Profile with badgehover-card-hover-card-profile-3Profile card displaying Badge for verified or role status.
Hover Card Profile 4 - Profile with locationhover-card-hover-card-profile-4Hover card profile including location text under the bio line.
Hover Card Profile 5 - Profile with statshover-card-hover-card-profile-5Profile HoverCard showing follower, post, or contribution counts.
Hover Card Stats 1 - Simple statshover-card-hover-card-stats-1HoverCard listing a few key metrics on chart or KPI trigger.
Hover Card Stats 2 - Growth statshover-card-hover-card-stats-2Stats hover card emphasizing period growth percentages and deltas.
Hover Card Stats 3 - User statshover-card-hover-card-stats-3User activity stats such as sessions, last seen, and plan in HoverCard.
Hover Card Stats 4 - Performance statshover-card-hover-card-stats-4Hover card with latency, uptime, or throughput performance figures.
Hover Card Stats 5 - Financial statshover-card-hover-card-stats-5HoverCard showing revenue, MRR, or transaction summary stats.
Image Crop Aspect 1 - Wide aspect cropimage-crop-image-crop-aspect-1Image crop locked to a 16:9 aspect ratio for cover images.
Image Crop Aspect 2 - Portrait aspect cropimage-crop-image-crop-aspect-2Image crop locked to a 3:4 aspect ratio for portrait framing.
Image Crop Circular 1 - Circular cropimage-crop-image-crop-circular-1Image crop with circularCrop enabled for round avatar framing.
Image Crop File 1 - File input cropimage-crop-image-crop-file-1Image cropper that accepts a user-selected file from an input.
Image Crop Free 1 - Freeform cropimage-crop-image-crop-free-1Image crop without a locked aspect ratio for arbitrary selections.
Image Crop Icons 1 - Icon controlsimage-crop-image-crop-icons-1Image crop using the default ghost icon apply and reset buttons.
Image Crop Preview 1 - Live cropped previewimage-crop-image-crop-preview-1Applies the crop and shows a circular avatar-style preview.
Image Crop Standard 1 - Square image cropimage-crop-image-crop-standard-1Image cropper with square aspect ratio, apply, and reset controls.
Image Zoom Backdrop 1 - Blurred backdropimage-zoom-image-zoom-backdrop-1Image zoom with a blurred backdrop class on the overlay.
Image Zoom Controlled 1 - Controlled zoom stateimage-zoom-image-zoom-controlled-1Image zoom with controlled isZoomed state and a toggle button.
Image Zoom Gallery 1 - Gallery card zoomimage-zoom-image-zoom-gallery-1Image zoom inside a bordered gallery card with caption.
Image Zoom Standard 1 - Click to zoomimage-zoom-image-zoom-standard-1Image wrapped in ImageZoom for click-to-zoom lightbox behavior.
Incentives 1 - Icon row of shopping incentivesincentives1A four-item incentive row with circular icons, titles, and short support copy that scrolls as a carousel on small screens and becomes a grid on larger ones.
Incentives 2 - Centered incentives on a primary bandincentives2A primary-colored incentives band with a section heading and three centered icon-and-copy items for support, returns, and wrapping that carousel on small screens.
Incentives 5 - Auto-scrolling incentive marquee with iconsincentives5Looping incentive carousel of icon items with title and short copy that auto-scrolls and pauses on hover, with edge fade masks.
Incentives 6 - Outlined grid of service incentivesincentives6A four-cell outlined grid of service incentives with icons, titles, and descriptions, plus previous and next controls when the row becomes a carousel.
Incentives 7 - About copy with incentive cardsincentives7A two-column incentives section with overline, about copy, and a CTA beside a grid of icon cards that carousel on small screens.
Incentives 8 - Services carousel with linked incentive cardsincentives8Services and support header with an outline CTA beside a card carousel of icon incentives, each linking out with an arrow affordance.
Industries 1 - Industry cards with hover descriptionindustries1A heading above a grid of industry cards, each linking out with an image and name that reveals a description overlay and plus icon on hover.
Industries 2 - Industry list with badge headingindustries2A badge and heading above stacked industry rows, each pairing a title, icon image, and long description across a three-column layout.
Industries 3 - Industry project rows with hover imageindustries3A labeled list of industry projects showing year, name, and description, with a background photo and outbound arrow revealed on hover.
Industries 4 - Expandable industry showcase with imagesindustries4A large heading above expandable industry panels that grow on hover, each with a category label, photo, description, and learn more link.
Input Group Ai 1 - AI promptinput-group-input-group-ai-1AI Prompt Input.
Input Group Ai 2 - Simple AI promptinput-group-input-group-ai-2Simple AI Prompt.
Input Group Ai 3 - AI with attachmentsinput-group-input-group-ai-3AI with Attachments.
Input Group Ai 4 - AI with voiceinput-group-input-group-ai-4AI with Voice.
Input Group Buttons 1 - Copy buttoninput-group-input-group-buttons-1Copy Button.
Input Group Buttons 2 - Multiple action buttonsinput-group-input-group-buttons-2Multiple Action Buttons.
Input Group Buttons 3 - Search buttoninput-group-input-group-buttons-3Search Button.
Input Group Buttons 4 - Password actionsinput-group-input-group-buttons-4Password Actions.
Input Group Custom 1 - Textarea with actionsinput-group-input-group-custom-1Textarea with Actions.
Input Group Custom 2 - Textarea with counterinput-group-input-group-custom-2Textarea with Counter.
Input Group Custom 3 - Textarea with toolbarinput-group-input-group-custom-3Textarea with Toolbar.
Input Group Custom 4 - Textarea with labelinput-group-input-group-custom-4Textarea with Label.
Input Group Dropdown 1 - Dropdown actionsinput-group-input-group-dropdown-1Dropdown Actions.
Input Group Dropdown 2 - Search filtersinput-group-input-group-dropdown-2Search Filters.
Input Group Dropdown 3 - URL builder with dropdowninput-group-input-group-dropdown-3URL Builder with Dropdown.
Input Group Dropdown 4 - Textarea with dropdowninput-group-input-group-dropdown-4Textarea with Dropdown.
Input Group Icons 1 - Search with iconinput-group-input-group-icons-1Search with Icon.
Input Group Icons 2 - Contact fields with iconsinput-group-input-group-icons-2Contact Fields with Icons.
Input Group Icons 3 - Dual iconsinput-group-input-group-icons-3Dual Icons.
Input Group Icons 4 - Multiple iconsinput-group-input-group-icons-4Multiple Icons.
Input Group Label 1 - Inline labelsinput-group-input-group-label-1Inline Labels.
Input Group Label 2 - Label with tooltipinput-group-input-group-label-2Label with Tooltip.
Input Group Label 3 - Block labelsinput-group-input-group-label-3Block Labels.
Input Group Label 4 - Label with counterinput-group-input-group-label-4Label with Counter.
Input Group Spinner 1 - Loading statesinput-group-input-group-spinner-1Loading States.
Input Group Spinner 2 - Spinner with textinput-group-input-group-spinner-2Spinner with Text.
Input Group Spinner 3 - Animated icon spinnerinput-group-input-group-spinner-3Animated Icon Spinner.
Input Group Spinner 4 - Textarea loadinginput-group-input-group-spinner-4Textarea Loading.
Input Group Text 1 - Currencyinput-group-input-group-text-1Currency Input.
Input Group Text 2 - URL builderinput-group-input-group-text-2URL Builder.
Input Group Text 3 - Email with domaininput-group-input-group-text-3Email with Domain.
Input Group Text 4 - Character counterinput-group-input-group-text-4Character Counter.
Input Group Textarea 1 - Code editorinput-group-input-group-textarea-1Code Editor.
Input Group Textarea 2 - Character counterinput-group-input-group-textarea-2Character Counter.
Input Group Textarea 3 - Rich text toolbarinput-group-input-group-textarea-3Rich Text Toolbar.
Input Group Textarea 4 - Chatinput-group-input-group-textarea-4Chat Input.
Input Group Tooltip 1 - Password requirementsinput-group-input-group-tooltip-1Password Requirements.
Input Group Tooltip 2 - Help tooltipsinput-group-input-group-tooltip-2Help Tooltips.
Input Group Tooltip 3 - API key infoinput-group-input-group-tooltip-3API Key Info.
Input Special 1 - File picker with remove actionsinput-input-special-1File input with selected file list and remove actions.
Input Special 2 - Time valueinput-input-special-2Time Input.
Input Special 3 - Range slider with valueinput-input-special-3Range Slider with Value.
Input Special 4 - Disabledinput-input-special-4Disabled Input.
Input Special 5 - Currencyinput-input-special-5Currency Input.
Input Standard 1 - With labelinput-input-standard-1Input with Label.
Input Standard 2 - With descriptioninput-input-standard-2Input with Description.
Input Standard 3 - With helper textinput-input-standard-3Input with Helper Text.
Input Standard 4 - Required fieldinput-input-standard-4Required Field.
Input Standard 5 - Optional fieldinput-input-standard-5Optional Field.
Input Standard 6 - With character counterinput-input-standard-6Input with Character Counter.
Input Standard 7 - Inline labelinput-input-standard-7Inline Label.
Input Types 1 - Emailinput-input-types-1Email Input.
Input Types 2 - Password with visibility toggleinput-input-types-2Password field with show and hide visibility toggle.
Input Types 3 - Number with increment and decrementinput-input-types-3Number input with increment and decrement buttons.
Input Types 4 - Searchinput-input-types-4Search Input.
Input Types 5 - Dateinput-input-types-5Date Input.
Input Types 6 - Phoneinput-input-types-6Phone Input.
Input Types 7 - URLinput-input-types-7URL Input.
Input Validation 1 - Error stateinput-input-validation-1Error State.
Input Validation 2 - Success stateinput-input-validation-2Success State.
Input Validation 3 - Warning stateinput-input-validation-3Warning State.
Input Validation 4 - Multiple validation messagesinput-input-validation-4Multiple Validation Messages.
Input Validation 5 - Validates on changeinput-input-validation-5Input validates on change with live error messaging.
Input Otp Behavior 1 - Auto-submitinput-otp-input-otp-behavior-1Auto-submit OTP.
Input Otp Behavior 2 - With enhanced focus managementinput-otp-input-otp-behavior-2OTP with Enhanced Focus Management.
Input Otp Behavior 3 - With paste optimizationinput-otp-input-otp-behavior-3OTP with Paste Optimization.
Input Otp Behavior 4 - With resend flowinput-otp-input-otp-behavior-4OTP with Resend Flow.
Input Otp Standard 1 - Standardinput-otp-input-otp-standard-1Standard OTP Input.
Input Otp Standard 2 - With pattern validationinput-otp-input-otp-standard-2OTP with Pattern Validation.
Input Otp Standard 3 - With multiple separatorsinput-otp-input-otp-standard-3OTP with Multiple Separators.
Input Otp Standard 4 - Controlledinput-otp-input-otp-standard-4Controlled OTP Input.
Input Otp Standard 5 - In form with validationinput-otp-input-otp-standard-5OTP in Form with Validation.
Input Otp States 1 - Disabledinput-otp-input-otp-states-1Disabled OTP Input.
Input Otp States 2 - With loading stateinput-otp-input-otp-states-2OTP with Loading State.
Input Otp States 3 - With error stateinput-otp-input-otp-states-3OTP with Error State.
Input Otp States 4 - With success stateinput-otp-input-otp-states-4OTP with Success State.
Input Otp Use Cases 1 - Email verification flowinput-otp-input-otp-use-cases-1Email Verification Flow.
Input Otp Use Cases 2 - Two-factor authenticationinput-otp-input-otp-use-cases-2Two-Factor Authentication.
Input Otp Use Cases 3 - SMS verificationinput-otp-input-otp-use-cases-3SMS Verification.
Input Otp Use Cases 4 - Transaction confirmationinput-otp-input-otp-use-cases-4Transaction Confirmation.
Input Otp Variants 1 - Numeric onlyinput-otp-input-otp-variants-1Numeric Only OTP.
Input Otp Variants 2 - Maskedinput-otp-input-otp-variants-2Masked OTP Input.
Input Otp Variants 3 - Different lengthsinput-otp-input-otp-variants-3Different Length OTP Variants.
Integration 1 - Integration cards with background patternintegration1Six integration cards in a two-column grid with icons, titles, descriptions, and a request integration call-to-action.
Integration 10 - Integration list with connect buttonsintegration10A vertical list of integrations with icons, titles, descriptions, and outline connect buttons in a narrow centered column.
Integration 11 - Tabbed integration grid with togglesintegration11A tabbed component showcasing categorized integrations with toggles for connection status and details button, scaling from one to three columns.
Integration 12 - Integration permission confirmation dialogintegration12A centered connection prompt showing two platform logos, a permissions checklist, and cancel or connect action buttons.
Integration 13 - Dock-style integration icons with hover animationintegration13A row of app icons in a macOS-style dock that scale and float on hover using spring-based motion values.
Integration 14 - Draggable logo marquee with hover glowintegration14Centered integrations pitch with outline badge, gradient headline, and a draggable auto-scrolling logo marquee that lifts and glows on hover.
Integration 15 - Split integrations intro with logo link gridintegration15Two-column integrations section with badge, headline, CTA on the left and a dense logo grid of linked tools that reveal documentation hints on hover.
Integration 16 - Categorized integrations with tabs and selectintegration16Centered integrations headline with dual CTAs above categorized tool cards filtered by tabs on desktop and a select menu on mobile.
Integration 17 - Technical logo grid with settings dialogintegration17Hairline logo grid of named partner cards with live or idle status. Clicking a card opens a settings dialog with enable, webhook, and event controls.
Integration 18 - Accordion integration settings listintegration18Stacked partner rows that expand accordion-style into enable, alert channel, and daily digest settings, with connected and not-connected status.
Integration 19 - Interactive hub and spoke diagramintegration19Circular hub diagram with clickable partner nodes. Hover highlights a spoke; click opens a settings dialog with enable and environment.
Integration 2 - Logo marquee with gradient fadeintegration2An auto-scrolling horizontal marquee of linked brand logos with gradient edge overlays and a centered discovery button.
Integration 20 - Category tabs with connect dialogintegration20Tabbed catalog of connect cards that open a workspace URL and environment dialog, with category tabs that keep a stable height.
Integration 21 - Tagged integration cards with connect dialogintegration21Three-column cards with a logo tile, category badge, description, and a connect button that opens an API key and test mode dialog.
Integration 22 - Searchable integration catalog with connect dialogintegration22Search field and category filters above a logo-card grid. Clicking a tile opens a connect dialog with read, write, and webhook permission checkboxes.
Integration 23 - Hairline logo grid with connect dialogintegration23Heading and short copy above a tight logo grid with an outer border. Clicking a cell opens a connect dialog with OAuth scope checkboxes.
Integration 25 - Paired integration cards with setup dialogintegration25Stacked pairing cards that show two logos joined by a connector, benefit bullets, and a setup action that opens a destination and backfill dialog.
Integration 27 - Centered logo cloud with connect dialogintegration27Centered heading, wrapping grayscale logo cloud, browse and request actions, and a footnote. Clicking a logo opens a connect dialog with view or full access.
Integration 28 - Single integration setup with connect dialogintegration28Sticky partner identity column with tags and a start-setup action beside a four-step timeline. Start setup opens a dialog for publishable and secret keys.
Integration 29 - Wrapping chips with filters and connect dialogintegration29Heading beside category tabs that filter wrapping integration chips without shifting layout. Clicking a chip opens a dialog to choose read or write access.
Integration 3 - Simple integration listintegration3A centered vertical list of integrations showing icons, titles, and descriptions in a single-column layout.
Integration 30 - Toggle list with connect dialogintegration30Settings-style list of partner rows with logos, descriptions, and working switches. Clicking a row opens a connect dialog with a notification email field and a retry-failed-jobs switch.
Integration 32 - Sidebar category nav with connect dialogintegration32Heading above a category sidebar that filters a three-column grid of logo, name, and description cards. Clicking a card opens a connect dialog with a webhook URL and environment select.
Integration 33 - Webhook event cards with connect dialogintegration33Stacked two-column cards pairing a partner logo, event chips, and description with a sample webhook payload. A connect button opens a dialog for endpoint URL and signing secret.
Integration 34 - Featured integration with icon pickerintegration34Large featured partner card beside a grid of square icons. Selecting an icon updates the left panel. Setup opens a connect dialog with a sandbox switch and API key.
Integration 35 - Stats row with connect dialogintegration35Centered heading, four stat cards, and a dense square logo grid that ends with a plus-more tile. Clicking a logo opens a connect dialog with standard or priority support options.
Integration 36 - Hover tiles with connect dialogintegration36Square logo tiles that reveal a connect overlay on hover. Clicking a tile opens a dialog to grant access with a single switch.
Integration 37 - Works-with pills with connect dialogintegration37Split band with a short heading beside wrapping logo-and-name pills. Clicking a pill opens a dialog to name the workspace for that tool.
Integration 38 - Request form beside logo gridintegration38Request-an-integration form with name and email fields beside a named logo grid. Clicking a logo opens a dialog with an account ID field and a usage-stats switch.
Integration 39 - Category columns with connect dialogintegration39Heading and outline browse action above category cards. Each named logo row opens a dialog to pick a sync direction.
Integration 4 - Integration connection with SVG illustrationintegration4Two connected icons with an SVG line and grid pattern, a heading with paragraph, and a wide placeholder image below.
Integration 5 - Two-column integration overview with icon gridintegration5A split layout with headline, description, and buttons on the left, and a wrapped grid of logo tiles on the right.
Integration 6 - Dark card with auto-scrolling logo carouselintegration6A dark-themed rounded card with headline, description, a button containing a rotating logo, and an auto-scrolling logo strip below separators.
Integration 7 - Compact integration pill rowintegration7A bordered card with a text column and two offset rows of pill-shaped integration badges with logos and gradient placeholders.
Integration 8 - Multi-row marquee logo cloud with fade edgesintegration8Large centered heading and description above four horizontal marquee rows of logo pills scrolling in alternating directions with gradient edge masks.
Integration 9 - Integration card gridintegration9A responsive grid of integration cards with icons in muted containers, titles, and descriptions scaling from one to four columns.
Invite User 1 - User Table with Dialog Inviteinvite-user1A user management table with invite button that opens a dialog for sending bulk email invitations with role selection and textarea for multiple addresses.
Invite User 2 - User Table with Sheet Inviteinvite-user2A user management table with invite button that opens a slide-out sheet for sending bulk email invitations with role selection and textarea input.
Invite User 3 - Inline Tag-Based User Inviteinvite-user3A user table with inline tag input for adding email addresses, pending/accepted status badges, and dropdown actions for each user row.
Invite User 4 - Invite Dialog with Copy Linkinvite-user4A user table with invite dialog featuring both email input with role selection and a shareable invite link with copy-to-clipboard functionality.
Item Interactive 1 - As linkitem-item-interactive-1Item as Link.
Item Interactive 2 - In dropdownitem-item-interactive-2Item in Dropdown.
Item Layout 1 - Sizesitem-item-layout-1Item Sizes.
Item Layout 2 - Groupitem-item-layout-2Item Group.
Item Layout 3 - With headeritem-item-layout-3Item with Header.
Item Media 1 - With icon mediaitem-item-media-1Item with Icon Media.
Item Media 2 - With avataritem-item-media-2Item with Avatar.
Item Media 3 - With image mediaitem-item-media-3Item with Image Media.
Item Standard 1 - Basicitem-item-standard-1Basic Item.
Item Standard 2 - With media and iconitem-item-standard-2Item with Media and Icon.
Kanban Columns 1 - Four columnskanban-kanban-columns-1Kanban board with four workflow columns.
Kanban Content 1 - Custom card contentkanban-kanban-content-1Kanban cards with custom children for metadata under the title.
Kanban Events 1 - Drag event loggingkanban-kanban-events-1Kanban board that surfaces the latest drag end event details.
Kanban Standard 1 - Basic kanban boardkanban-kanban-standard-1Three-column kanban board with draggable cards.
Kbd Arrow Keys 1 - Arrow keys cross patternkbd-kbd-arrow-keys-1Arrow Keys Cross Pattern.
Kbd Arrow Keys 2 - Arrow keys horizontalkbd-kbd-arrow-keys-2Arrow Keys Horizontal.
Kbd Arrow Keys 3 - WASD gaming keyskbd-kbd-arrow-keys-3WASD Gaming Keys.
Kbd Arrow Keys 4 - Vim navigation keyskbd-kbd-arrow-keys-4Vim Navigation Keys.
Kbd Function Keys 1 - F1 help keykbd-kbd-function-keys-1F1 Help Key.
Kbd Function Keys 2 - F12 DevTools keykbd-kbd-function-keys-2F12 DevTools Key.
Kbd Function Keys 3 - Function keys rowkbd-kbd-function-keys-3Function Keys Row.
Kbd Function Keys 4 - Special keyskbd-kbd-function-keys-4Special Keys.
Kbd Function Keys 5 - Modifier keyskbd-kbd-function-keys-5Modifier Keys.
Kbd Function Keys 6 - Editing keyskbd-kbd-function-keys-6Editing Keys.
Kbd Platform Specific 1 - Mac command symbolkbd-kbd-platform-specific-1Mac Command Symbol.
Kbd Platform Specific 2 - Mac option symbolkbd-kbd-platform-specific-2Mac Option Symbol.
Kbd Platform Specific 3 - Windows keykbd-kbd-platform-specific-3Windows Key.
Kbd Platform Specific 4 - Platform-aware shortcutkbd-kbd-platform-specific-4Platform-Aware Shortcut.
Kbd Platform Specific 5 - Mac control symbolkbd-kbd-platform-specific-5Mac Control Symbol.
Kbd Pressed State 1 - Active statekbd-kbd-pressed-state-1Active State.
Kbd Pressed State 2 - Disabled statekbd-kbd-pressed-state-2Disabled State.
Kbd Pressed State 3 - Focus statekbd-kbd-pressed-state-3Focus State.
Kbd Pressed State 4 - Pressed downkbd-kbd-pressed-state-4Pressed Down.
Kbd Pressed State 5 - Hover statekbd-kbd-pressed-state-5Hover State.
Kbd Sequence 1 - Key sequence with thenkbd-kbd-sequence-1Key Sequence with Then.
Kbd Sequence 2 - Key sequence with arrowkbd-kbd-sequence-2Key Sequence with Arrow.
Kbd Sequence 3 - Multi-step sequencekbd-kbd-sequence-3Multi-Step Sequence.
Kbd Sequence 4 - Vim command sequencekbd-kbd-sequence-4Vim Command Sequence.
Kbd Shortcut 1 - Command palette shortcutkbd-kbd-shortcut-1Command Palette Shortcut.
Kbd Shortcut 2 - Copy shortcutkbd-kbd-shortcut-2Copy Shortcut.
Kbd Shortcut 3 - Paste shortcutkbd-kbd-shortcut-3Paste Shortcut.
Kbd Shortcut 4 - Complex shortcutkbd-kbd-shortcut-4Complex Shortcut.
Kbd Shortcut 5 - Save shortcutkbd-kbd-shortcut-5Save Shortcut.
Kbd Sizes 1 - Smallkbd-kbd-sizes-1Small Kbd.
Kbd Sizes 2 - Defaultkbd-kbd-sizes-2Default Kbd.
Kbd Sizes 3 - Largekbd-kbd-sizes-3Large Kbd.
Kbd Sizes 4 - Inline with textkbd-kbd-sizes-4Inline with Text.
Kbd Sizes 5 - Extra largekbd-kbd-sizes-5Extra Large Kbd.
Kbd With Icons 1 - Enter with iconkbd-kbd-with-icons-1Enter with Icon.
Kbd With Icons 2 - Delete with iconkbd-kbd-with-icons-2Delete with Icon.
Kbd With Icons 3 - Arrow keys with iconskbd-kbd-with-icons-3Arrow Keys with Icons.
Kbd With Icons 4 - Command with iconkbd-kbd-with-icons-4Command with Icon.
Kbd With Icons 5 - Unicode symbolskbd-kbd-with-icons-5Unicode Symbols.
Label Standard 1 - Requiredlabel-label-standard-1Required Label.
Label Standard 2 - With descriptionlabel-label-standard-2Label with Description.
Label Standard 3 - With tooltiplabel-label-standard-3Label with Tooltip.
Label Standard 4 - With badgelabel-label-standard-4Label with Badge.
Label Standard 5 - With optional indicatorlabel-label-standard-5Label with Optional Indicator.
Label Standard 6 - With character countlabel-label-standard-6Label with Character Count.
Label Standard 7 - Errorlabel-label-standard-7Error Label.
Label Standard 8 - Sectionlabel-label-standard-8Section Label.
Leaderboard 1 - Leaderboard with Progress Barsleaderboard1A ranked list card with progress bars showing relative values for each item.
Leaderboard 2 - Leaderboard with Avatarsleaderboard2A ranked list card with user avatars, names, subtitles, and values for each position.
Leaderboard 3 - Leaderboard with Trendsleaderboard3A ranked list card with trend indicators showing movement direction for each item.
List Avatar 1 - Items with assigneeslist-list-avatar-1List items with assignee avatars composed through ListItem children.
List Content 1 - Custom list item contentlist-list-content-1List items with custom children instead of the default name-only row.
List Empty 1 - Empty droppable grouplist-list-empty-1Multi-group list with an empty target group that accepts dropped items.
List Groups 1 - Multiple status groupslist-list-groups-1List with multiple droppable status groups for cross-group moves.
List Header 1 - Custom group headerlist-list-header-1List group with a fully custom header instead of name and color props.
List Icons 1 - Items with type iconslist-list-icons-1List items that lead with Lucide icons to distinguish task types.
List Priority 1 - Items with priority badgeslist-list-priority-1List items that show priority with Badge variants beside each title.
List Standard 1 - Draggable status listlist-list-standard-1Vertical list with a single status group and draggable items.
List Panel List Activity Feed - Activity feed list panellist-panel-list-activity-feedTimeline-style rows with avatar, action text, and timestamp.
List Panel List As Links - List panel as linkslist-panel-list-as-linksNavigable settings-style rows rendered as anchor links.
List Panel List Bordered - Bordered list panellist-panel-list-borderedList grouped inside a single rounded border container.
List Panel List Compact - Compact list panellist-panel-list-compactDense list using Item size sm for tighter row spacing.
List Panel List Default - Default list panellist-panel-list-defaultBasic vertical stack of Item rows with titles only.
List Panel List Drag Handle Leading - List panel with leading drag handlelist-panel-list-drag-handle-leadingSortable rows with a grip handle on the leading edge of each item.
List Panel List Drag Locked Rows - List panel with locked rowslist-panel-list-drag-locked-rowsSortable list where pinned rows stay fixed and cannot be dragged.
List Panel List Drag Overlay - List panel with drag overlaylist-panel-list-drag-overlayFloating drag preview using dnd-kit DragOverlay while the list reflows.
List Panel List Drag Reorder - Drag reorder list panellist-panel-list-drag-reorderSortable list with grip handles using dnd-kit.
List Panel List Drag Stacked - Stacked drag reorder list panellist-panel-list-drag-stackedSortable rows inside a single stacked bordered panel with divide lines.
List Panel List Drag Whole Row - Whole row drag list panellist-panel-list-drag-whole-rowEntire item rows act as the drag surface with a small activation distance.
List Panel List Drag With Icons - Draggable list panel with iconslist-panel-list-drag-with-iconsSortable rows with leading icons and a trailing grip handle.
List Panel List Filterable - Filterable list panellist-panel-list-filterableSearch input filters visible rows in the list.
List Panel List Load More - List panel with load morelist-panel-list-load-moreScrollable list with a footer button to load additional rows.
List Panel List Manual Reorder - Manual reorder list panellist-panel-list-manual-reorderMove rows up or down with arrow buttons per entry.
List Panel List Multi Select - Multi-select list panellist-panel-list-multi-selectCheckbox on each row plus a select-all control in the header.
List Panel List Muted - Muted list panellist-panel-list-mutedList rows using the muted Item variant for subdued entries.
List Panel List Numbered - Numbered list panellist-panel-list-numberedOrdered list with a rank column prefix on every row.
List Panel List Scrollable - Scrollable list panellist-panel-list-scrollableLong list inside ScrollArea with a fixed max height.
List Panel List Search Empty - List panel search empty statelist-panel-list-search-emptyFilterable panel with a dedicated empty state when nothing matches.
List Panel List Selectable - Selectable list panellist-panel-list-selectableSingle-select list with one highlighted row at a time.
List Panel List Size Xs - Extra small list panellist-panel-list-size-xsDense list panel using the xs Item size variant.
List Panel List Stacked - Stacked list panellist-panel-list-stackedList rows stacked flush inside one bordered panel with divide lines between entries.
List Panel List Stacked Bordered - Stacked list panel with borderslist-panel-list-stacked-borderedStacked outline rows that share edges inside one rounded group.
List Panel List Stacked Context Menu - Stacked list panel context menulist-panel-list-stacked-context-menuRight-click actions on rows in a stacked panel.
List Panel List Stacked Destructive Action - Stacked list panel destructive actionlist-panel-list-stacked-destructive-actionDelete control on each row in a stacked panel.
List Panel List Stacked File Row - Stacked list panel file rowlist-panel-list-stacked-file-rowFile icon rows with sizes in a stacked panel.
List Panel List Stacked Reveal Actions - Stacked list panel reveal actionslist-panel-list-stacked-reveal-actionsHover-revealed row actions in a stacked panel.
List Panel List Stacked Row Menu - Stacked list panel row menulist-panel-list-stacked-row-menuOverflow menu on each row inside a unified stacked panel.
List Panel List Stacked With Icons - Stacked list panel with iconslist-panel-list-stacked-with-iconsStacked list rows with leading icons inside one bordered panel.
List Panel List Stacked With Image - Stacked list panel with imagelist-panel-list-stacked-with-imageThumbnail rows in a unified stacked media panel.
List Panel List Stacked With Progress - Stacked list panel with progresslist-panel-list-stacked-with-progressProgress bars per row in a stacked job panel.
List Panel List Sticky Header - List panel with sticky headerlist-panel-list-sticky-headerScrollable list with sticky section labels while scrolling.
List Panel List Todo Basic - Basic todo list panellist-panel-list-todo-basicCheckbox list with strikethrough styling for completed tasks.
List Panel List Todo With Add - Todo list panel with addlist-panel-list-todo-with-addTask list with an input and button to append new rows.
List Panel List Todo With Due Date - Todo list panel with due datelist-panel-list-todo-with-due-dateTask list with due date meta and overdue row styling.
List Panel List Todo With Priority - Todo list panel with prioritylist-panel-list-todo-with-priorityTask rows with priority Badge labels on each entry.
List Panel List With Avatar - List panel with avatarlist-panel-list-with-avatarMember list with Avatar initials in ItemMedia on each row.
List Panel List With Avatar Description - List panel with avatar descriptionlist-panel-list-with-avatar-descriptionAvatar rows with title and secondary description text.
List Panel List With Back Header - List panel with back headerlist-panel-list-with-back-headerPanel with a sticky back navigation header above the list.
List Panel List With Badge - List panel with badgelist-panel-list-with-badgeRows with a trailing Badge for plan or status labels.
List Panel List With Batch Actions - List panel with batch actionslist-panel-list-with-batch-actionsToolbar appears when rows are selected for bulk delete or archive.
List Panel List With Chevron - List panel with chevronlist-panel-list-with-chevronCompact navigation rows with a trailing chevron indicator.
List Panel List With Context Menu - List panel with context menulist-panel-list-with-context-menuRight-click context menu on each list row.
List Panel List With Description - List panel with descriptionlist-panel-list-with-descriptionTwo-line rows with ItemTitle and ItemDescription on every entry.
List Panel List With Destructive Action - List panel destructive actionlist-panel-list-with-destructive-actionRows with a trailing destructive button for remove or delete.
List Panel List With Disabled Rows - List panel with disabled rowslist-panel-list-with-disabled-rowsMixed list with some rows disabled and non-interactive.
List Panel List With Empty State - List panel empty statelist-panel-list-with-empty-stateList container showing Empty when no rows are available.
List Panel List With File Row - List panel file rowlist-panel-list-with-file-rowFile-style rows with type icon, name, and size metadata.
List Panel List With Footer - List panel with footerlist-panel-list-with-footerRows with ItemFooter for secondary metadata or actions.
List Panel List With Header - List panel with headerlist-panel-list-with-headerRows with ItemHeader above the main content block.
List Panel List With Icons - List panel with iconslist-panel-list-with-iconsEach row includes a leading Lucide icon in ItemMedia.
List Panel List With Image - List panel with imagelist-panel-list-with-imageRows with thumbnail images in ItemMedia for media-style lists.
List Panel List With Loading - Loading list panellist-panel-list-with-loadingSkeleton placeholder rows while list data is loading.
List Panel List With Meta - List panel with metalist-panel-list-with-metaRows with a secondary meta line such as timestamps or file sizes.
List Panel List With Nested Items - List panel with nested itemslist-panel-list-with-nested-itemsExpandable parent tasks revealing nested subtask rows.
List Panel List With Presence - List panel with presencelist-panel-list-with-presenceAvatar rows with an online presence indicator.
List Panel List With Progress - List panel with progresslist-panel-list-with-progressRows with a progress bar showing sync or upload status.
List Panel List With Radio - List panel with radiolist-panel-list-with-radioSingle-select list built from radio controls in each row.
List Panel List With Reveal Actions - List panel with reveal actionslist-panel-list-with-reveal-actionsSecondary row actions that appear on hover.
List Panel List With Row Menu - List panel row menulist-panel-list-with-row-menuOverflow menu on each row for secondary actions.
List Panel List With Sections - List panel with sectionslist-panel-list-with-sectionsGrouped list with section labels above each ItemGroup.
List Panel List With Skeleton Rows - List panel skeleton rowslist-panel-list-with-skeleton-rowsPlaceholder skeleton rows shaped like list items while loading.
List Panel List With Status Dot - List panel with status dotlist-panel-list-with-status-dotRows with a colored dot indicator for online or sync state.
List Panel List With Switch - List panel with switchlist-panel-list-with-switchSettings rows with a trailing Switch control per entry.
List Panel List With Trailing Action - List panel with trailing actionlist-panel-list-with-trailing-actionEach row includes an icon button in ItemActions.
List 1 - Multi-column data tablelist1Responsive table displaying categorized items with icons, descriptions, year, offer tier, and color-coded indicators.
List 2 - Icon list with action buttonslist2Vertical list of items separated by dividers, each showing an icon, title, category, description, and a view button.
List 3 - Career timeline with experience and awardslist3Two-section resume layout listing work experience and achievements in a three-column grid with separator lines.
Live Purchase 1 - Rotating purchase toast cardlive-purchase1A fixed corner card that cycles recent purchases, showing customer name, location, product image, relative time, and a dismiss button.
Live Purchase 2 - Live purchase pill with locationlive-purchase2A floating pill that rotates recent purchases, showing a live indicator, product thumbnail, customer name, location pin, and dismiss control.
Live Purchase 3 - Purchase alerts with live statslive-purchase3A stacked corner widget with rotating purchase alerts plus a stats bar showing current viewers and products sold today.
Login Button Email 1 - Log inlogin-button-login-button-email-1Email login CTA — default variant.
Login Button Email 2 - Sign in with emaillogin-button-login-button-email-2Email login CTA — default variant.
Login Button Email 3 - Continue with emaillogin-button-login-button-email-3Email login CTA — outline variant.
Login Button Email 4 - Email loginlogin-button-login-button-email-4Email login CTA — secondary variant.
Login Button Email 5 - Log inlogin-button-login-button-email-5Email login CTA — ghost variant.
Login Button Email 6 - Sign inlogin-button-login-button-email-6Email login CTA — default variant.
Login Button Email 7 - Log in to accountlogin-button-login-button-email-7Email login CTA — outline variant.
Login Button Email 8 - Access accountlogin-button-login-button-email-8Email login CTA — default variant.
Login Button Minimal 1 - Log inlogin-button-login-button-minimal-1Minimal login button — link without icon.
Login Button Minimal 2 - Sign inlogin-button-login-button-minimal-2Minimal login button — ghost without icon.
Login Button Minimal 3 - Loginlogin-button-login-button-minimal-3Minimal login button — link without icon.
Login Button Minimal 4 - Enterlogin-button-login-button-minimal-4Minimal login button — ghost without icon.
Login Button Minimal 5 - Log inlogin-button-login-button-minimal-5Minimal login button — outline without icon.
Login Button Minimal 6 - Sign inlogin-button-login-button-minimal-6Minimal login button — secondary without icon.
Login Button Minimal 7 - Continuelogin-button-login-button-minimal-7Minimal login button — default without icon.
Login Button Minimal 8 - Accesslogin-button-login-button-minimal-8Minimal login button — outline without icon.
Login Button Signup 1 - Create accountlogin-button-login-button-signup-1Sign-up CTA using LoginButton — default variant.
Login Button Signup 2 - Sign up freelogin-button-login-button-signup-2Sign-up CTA using LoginButton — outline variant.
Login Button Signup 3 - Get startedlogin-button-login-button-signup-3Sign-up CTA using LoginButton — secondary variant.
Login Button Signup 4 - Join nowlogin-button-login-button-signup-4Sign-up CTA using LoginButton — default variant.
Login Button Signup 5 - Registerlogin-button-login-button-signup-5Sign-up CTA using LoginButton — outline variant.
Login Button Signup 6 - Start free triallogin-button-login-button-signup-6Sign-up CTA using LoginButton — default variant.
Login Button Signup 7 - Create your accountlogin-button-login-button-signup-7Sign-up CTA using LoginButton — secondary variant.
Login Button Signup 8 - Sign up todaylogin-button-login-button-signup-8Sign-up CTA using LoginButton — outline variant.
Login Button Social 1 - Login with Googlelogin-button-login-button-social-1Social login composition with Google.
Login Button Social 2 - Login with GitHublogin-button-login-button-social-2Social login composition with GitHub.
Login Button Social 3 - Login with Applelogin-button-login-button-social-3Social login composition with Apple.
Login Button Social 4 - Login with Microsoftlogin-button-login-button-social-4Social login composition with Microsoft.
Login Button Social 5 - Login with Xlogin-button-login-button-social-5Social login composition with X.
Login Button Social 6 - Login with Discordlogin-button-login-button-social-6Social login composition with Discord.
Login Button Social 7 - Login with Facebooklogin-button-login-button-social-7Social login composition with Facebook.
Login Button Social 8 - Login with LinkedInlogin-button-login-button-social-8Social login composition with LinkedIn.
Login 1 - Minimal email and password loginlogin1Simple centered login form with a logo, email and password inputs, a submit button, and a signup link.
Login 2 - Labeled input login formlogin2Centered login card with labeled email and password fields, a submit button, and a signup prompt below.
Login 3 - Borderless centered login formlogin3Full-screen login with a logo, heading, labeled email and password fields, and a signup link on a plain background.
Login 4 - Login with social provider buttonslogin4Centered login form offering email and password fields plus Google, Facebook, and GitHub social login buttons.
Login 5 - Login form with muted card and social buttonslogin5Centered login with labeled fields inside a muted rounded container, plus Google, Facebook, and GitHub sign-in options.
Login 6 - Google-first login with dividerlogin6Bordered login card leading with a Google sign-in button, an OR divider, then email and password fields below.
Login 7 - Card login with Google and credentialslogin7Login card using CardHeader for a logo and brand name, a Google button, an OR divider, and email plus password fields.
Login 9 - Social login with email optionlogin9A centered login card with a logo, heading, signup link, Google, GitHub, and LinkedIn buttons, an OR divider, and a continue with email action.
Logo Right Click Download - Right-click downloadlogo-logo-right-click-downloadLogo supports right-click download of brand image assets.
Logo Standard - Desktop and mobile imageslogo-logo-standardResponsive logo with separate desktop and mobile images.
Logo Wordmark - Wordmark imagelogo-logo-wordmarkWordmark logo image inside a linked brand wrapper.
Logos 1 - Inline logo strip with headinglogos1Displays a heading alongside a horizontal row of up to four logos in a single-line layout.
Logos 10 - Numbered boxed logo marqueelogos10Scrolls logos inside bordered, numbered cells in a continuous marquee with gradient edge overlays.
Logos 11 - Dual carousel with patterned borderslogos11Stacks two auto-scrolling logo carousels between bordered header and footer bars adorned with diagonal hatch patterns.
Logos 12 - Boxed logo marqueelogos12Scrolls logos inside bordered rectangular cells in a continuous marquee with gradient edge fade.
Logos 13 - Partner logo grid with sticky label and year tagslogos13Pairs a sticky left-column label with a right-side grid of logo cards, each annotated with a year in the bottom corner.
Logos 17 - Two-Row Logo Grid with Marqueelogos17A logo cloud section with two rows of company logos displayed in a static grid on desktop and animated marquee on mobile.
Logos 18 - Logo Grid Without Headlinelogos18A centered wrap grid of partner logos with no title, using the same logo list and spacing as the heading-based grid variant.
Logos 19 - Logo Marquee Without Headlinelogos19An auto-scrolling logo carousel with side fades and no heading, matching the marquee behavior of the titled variant.
Logos 2 - Two-column certifications with logo gridlogos2Pairs a headline, paragraph, and button on the left with a bordered 3x2 grid of logos on the right.
Logos 20 - Double-Row Alternating Marqueeslogos20A two-row partner logo section with the top strip scrolling one way and the bottom strip scrolling the opposite way, plus a shared headline.
Logos 21 - Static Logo Grid With Muted Backgroundlogos21A static logo grid on a muted background with a centered heading and optional subtitle.
Logos 22 - Double Row Logo Grid Without Headinglogos22A two-row static logo grid without any heading or subtitle text.
Logos 23 - Double Row Marquee Without Headinglogos23Two alternating-direction logo marquee rows without any heading or subtitle text.
Logos 24 - Double Row Marquee With Muted Backgroundlogos24Two alternating-direction logo marquee rows on a muted background with a centered heading and optional subtitle.
Logos 25 - Double Row Marquee Constrained Widthlogos25Two alternating-direction logo marquee rows inside a constrained max-width container with heading and subtitle.
Logos 26 - Double Row Marquee Constrained Without Headinglogos26Two alternating-direction logo marquee rows inside a constrained max-width container without any heading or subtitle.
Logos 27 - Six Column Logo Gridlogos27A static six-column logo grid displaying up to twelve partner or client logos with a centered heading and subtitle.
Logos 28 - Four Column Logo Gridlogos28A static four-column logo grid displaying up to twelve partner or client logos with a centered heading and subtitle.
Logos 29 - Three Column Logo Gridlogos29A static three-column logo grid with a constrained width, displaying up to twelve logos with a centered heading and subtitle.
Logos 3 - Logo marquee with headinglogos3Scrolls logos in a continuous horizontal marquee beneath a centered heading, with edge gradient fade.
Logos 30 - Six Column Logo Grid Without Headinglogos30A minimal six-column static logo grid displaying up to twelve logos without any heading or subtitle.
Logos 31 - Four Column Logo Grid Without Headinglogos31A minimal four-column static logo grid displaying up to twelve logos without any heading or subtitle.
Logos 32 - Six Column Logo Grid With Muted Backgroundlogos32A static six-column logo grid on a muted background with a centered heading and subtitle.
Logos 33 - Left Aligned Logo Grid With Muted Backgroundlogos33A muted-background logo grid with a left-aligned heading and compact left-aligned logo tiles in six columns.
Logos 34 - Muted Logo Marquee Without Headlinelogos34A headline-free logo marquee on a muted background with edge fades and continuous auto-scroll.
Logos 35 - Bordered logo grid with hover cellslogos35Centered trust heading above a bordered six-column logo grid with hover-highlight cells.
Logos 4 - Partner call-to-action with logo gridlogos4Centers a badge, large heading, paragraph, and button above a responsive grid of grayscale partner logos.
Logos 5 - Double-row static logo gridlogos5Stacks two centered rows of logos beneath a heading and optional subtitle, with four logos on top and five below.
Logos 7 - Logo marquee on muted backgroundlogos7Scrolls logos in a continuous marquee over a muted background strip, with gradient edge fade and centered heading.
Logos 8 - Centered logo row with headinglogos8Shows up to six logos in a centered flex-wrap row beneath a heading, with dark-mode inversion.
Logos 9 - Logo carousel with testimonialslogos9Combines an auto-scrolling logo carousel with a row of bordered testimonial cards separated by a horizontal rule.
Magic Link 1 - Centered magic link cardmagic-link1Full-screen passwordless login card with an email field and a send-link button.
Magic Link 2 - Split magic link with imagemagic-link2Two-column passwordless login with an email form and a full-height photograph.
Magic Link 3 - Minimal inline magic linkmagic-link3Centered passwordless login with a large heading and an email field sharing a row with the send button.
Magic Link 4 - Muted panel magic linkmagic-link4Passwordless login inside a large muted panel with a labeled email field.
Marquee Fade 1 - Edge fademarquee-marquee-fade-1Marquee with left and right gradient fades at the scroll edges.
Marquee Logos 1 - Logo marqueemarquee-marquee-logos-1Marquee scrolling a row of company logo images.
Marquee Pause 1 - Pause on hovermarquee-marquee-pause-1Marquee that pauses scrolling when the pointer hovers over the track.
Marquee Reverse 1 - Reverse directionmarquee-marquee-reverse-1Marquee scrolling in the reverse direction using direction right.
Marquee Speed 1 - Custom speedmarquee-marquee-speed-1Marquee with a faster custom scroll speed via the speed prop.
Marquee Standard 1 - Standard marqueemarquee-marquee-standard-1Basic horizontal scrolling text items in a continuous loop.
Menubar Standard 1 - Simple textmenubar-menubar-standard-1Simple Text Menubar.
Menubar Standard 10 - Compactmenubar-menubar-standard-10Compact Menubar.
Menubar Standard 2 - With shortcutsmenubar-menubar-standard-2Menubar with Shortcuts.
Menubar Standard 3 - With iconsmenubar-menubar-standard-3Menubar with Icons.
Menubar Standard 4 - With checkboxesmenubar-menubar-standard-4Menubar with Checkboxes.
Menubar Standard 5 - With radio groupsmenubar-menubar-standard-5Menubar with Radio Groups.
Menubar Standard 6 - With submenumenubar-menubar-standard-6Menubar with Submenu.
Menubar Standard 7 - With destructive actionmenubar-menubar-standard-7Menubar with Destructive Action.
Menubar Standard 8 - Applicationmenubar-menubar-standard-8Application Menubar.
Menubar Standard 9 - With sectionsmenubar-menubar-standard-9Menubar with Sections.
Mini Calendar Composition 1 - Full mini calendarmini-calendar-mini-calendar-composition-1Navigation, seven days, and a preselected date together.
Mini Calendar Days 1 - Seven day rangemini-calendar-mini-calendar-days-1Mini calendar showing seven consecutive days.
Mini Calendar Navigation 1 - Previous and next navigationmini-calendar-mini-calendar-navigation-1Mini calendar with chevron navigation controls.
Mini Calendar Selected 1 - Preselected datemini-calendar-mini-calendar-selected-1Mini calendar with defaultValue selecting a date.
Mini Calendar Standard 1 - Five day pickermini-calendar-mini-calendar-standard-1Default five-day horizontal mini calendar.
Navbar 1 - Navbar with icon dropdown menusnavbar1A horizontal navbar with logo, navigation menu dropdowns showing icons and descriptions, login and signup buttons, and a mobile sheet with accordion submenus.
Navbar 10 - Advanced navbar with multi-panel dropdownsnavbar10Full-width navigation bar with three distinct dropdown panel layouts, image previews on hover, and a mobile sheet menu.
Navbar 11 - Fixed navbar with grouped mega menusnavbar11A fixed top navbar with multi-column grouped dropdowns for products, solutions, and platform, icon sublinks, separate mobile auth buttons, and a full-screen mobile sheet.
Navbar 12 - Simple navbar with icon dropdownsnavbar12Fixed navigation bar with compact icon-enhanced dropdown menus, dual action buttons, and a full-height mobile sheet.
Navbar 14 - Education mega menu navbarnavbar14An education-focused navbar with icon mega menus, optional featured image cards, quick-start links, login and demo buttons, and accordion mobile navigation.
Navbar 17 - Minimal navbar with sliding active indicatornavbar17Clean navigation bar with a sliding underline indicator that tracks the active link and a popover mobile menu.
Navbar 18 - Floating top-center navbar pillnavbar18Compact pill-shaped navigation bar anchored to the top center with small dropdown menus and a popover mobile menu.
Navbar 2 - Navbar with responsive wordmark logonavbar2A navigation bar using a responsive logo component, animated dropdown panels, login and signup buttons, and a mobile sheet with accordion menus.
Navbar 21 - Full-screen overlay menu with blur hover effectnavbar21Navigation bar with a MENU/CLOSE text toggle that opens a full-screen overlay showing large uppercase links with blur-on-hover and social links.
Navbar 22 - Minimal navbar with live clocknavbar22Clean navigation bar with text-roll hover animations on links, a live local time display, and a full-screen mobile sheet.
Navbar 24 - Dark floating dock with morphing icon shapesnavbar24Bottom-fixed dock bar with a dark foreground-colored background, spring-animated icon scaling, and dynamic border-radius morphing on hover.
Navbar 29 - Mega menu navbar with clip-path revealnavbar29Navigation bar with an animated mega menu that reveals via a clip-path transition, four link columns, a footer row, and a mobile link list.
Navbar 3 - Sticky mega menu navbarnavbar3A sticky header with four wide mega menu panels for platform, solutions, developers, and resources, plus drill-down mobile submenus and login buttons.
Navbar 33 - Floating Navbar with Dropdown Menunavbar33A floating fixed navbar with logo, navigation menu with dropdowns, and login button. Features glassmorphism styling and animated mobile hamburger menu.
Navbar 4 - Enterprise mega menu navbarnavbar4A navigation header with five full-width mega menus covering solutions, products, company, partners, and resources, plus layered mobile drill-down navigation.
Navbar 5 - Navbar with features dropdown gridnavbar5A compact navbar with logo, a two-column features dropdown, plain text links, sign-in and CTA buttons, and a top sheet mobile menu with accordion.
Navbar 6 - Floating pill navbar with dropdownnavbar6A floating rounded navbar with backdrop blur, a features dropdown with two rich links, text nav items, login button, and an animated hamburger mobile panel.
Navbar 7 - Platform navbar with icon mega panelsnavbar7A navbar with Platform and Resources mega dropdowns, icon-led solution and use-case lists, a twelve-item resources grid, and dashed-border mobile accordions.
Navbar 8 - Fixed navbar with image swap dropdownnavbar8A fixed header that gains a background on scroll, mega dropdowns with a preview image that changes on link hover, auth buttons, and a full-height primary mobile sheet.
Navbar 9 - Dark navbar with GitHub stars badgenavbar9A dark-themed navbar with icon submenus, a live GitHub star count button, sign-up CTA, and a mobile sheet with accordion navigation groups.
Navigation Menu Complex 1 - Full mega menunavigation-menu-navigation-menu-complex-1Full Mega Menu.
Navigation Menu Complex 2 - Multi-level nestednavigation-menu-navigation-menu-complex-2Multi-level Nested Navigation.
Navigation Menu Complex 3 - Tabbed mega menunavigation-menu-navigation-menu-complex-3Tabbed Mega Menu.
Navigation Menu Complex 4 - Dashboard-style with statsnavigation-menu-navigation-menu-complex-4Dashboard-style with Stats.
Navigation Menu Complex 5 - Mixed content typesnavigation-menu-navigation-menu-complex-5Mixed Content Types.
Navigation Menu Features 1 - Feature cards with iconsnavigation-menu-navigation-menu-features-1Feature Cards with Icons.
Navigation Menu Features 2 - Feature grid layoutnavigation-menu-navigation-menu-features-2Feature Grid Layout.
Navigation Menu Features 3 - Feature sections with headersnavigation-menu-navigation-menu-features-3Feature Sections with Headers.
Navigation Menu Features 4 - Features with badgesnavigation-menu-navigation-menu-features-4Features with Badges.
Navigation Menu Features 5 - Feature categoriesnavigation-menu-navigation-menu-features-5Feature Categories.
Navigation Menu Marketing 1 - Product showcase with CTAnavigation-menu-navigation-menu-marketing-1Product Showcase with CTA.
Navigation Menu Marketing 2 - Pricing tiers previewnavigation-menu-navigation-menu-marketing-2Pricing Tiers Preview.
Navigation Menu Marketing 3 - Case studies & testimonialsnavigation-menu-navigation-menu-marketing-3Case Studies & Testimonials.
Navigation Menu Marketing 4 - Resources with lead magnetsnavigation-menu-navigation-menu-marketing-4Resources with Lead Magnets.
Navigation Menu Marketing 5 - Industry solutionsnavigation-menu-navigation-menu-marketing-5Industry Solutions.
Navigation Menu Standard 1 - Simplenavigation-menu-navigation-menu-standard-1Simple Navigation.
Navigation Menu Standard 2 - With iconsnavigation-menu-navigation-menu-standard-2Navigation with Icons.
Navigation Menu Standard 3 - With descriptionsnavigation-menu-navigation-menu-standard-3Navigation with Descriptions.
Navigation Menu Standard 4 - Without viewportnavigation-menu-navigation-menu-standard-4Navigation without Viewport.
Navigation Menu Standard 5 - Mixed links and dropdownsnavigation-menu-navigation-menu-standard-5Mixed Links and Dropdowns.
Newsletter 1 - Centered newsletter subscribenewsletter1Mid-page subscribe stack with a heading, email field, submit validation, and a success confirmation.
Newsletter 2 - Split newsletter with imagenewsletter2Two-column subscribe section with a validated email form beside a wide photograph and a success confirmation.
Newsletter 3 - Muted band newsletternewsletter3Compact full-width subscribe band with a validated inline email field and a success confirmation.
Newsletter 4 - Newsletter with feature listnewsletter4Two-column subscribe section pairing a validated email form with three short perk descriptions and a success confirmation.
Newsletter 5 - Inverted newsletter bandnewsletter5Full-width inverted subscribe band with a validated email form and a success confirmation.
Offer Modal 1 - Corner newsletter discount modaloffer-modal1A corner dialog offering a first-order newsletter discount with a headline, email field, subscribe button, and close control.
Offer Modal 4 - Membership offer modal with photooffer-modal4A promotional dialog with a product photo, membership discount headline, email field, submit button, and supporting copy.
Offer Modal 5 - Side sheet offer with logooffer-modal5A side sheet offering a mailing-list discount with a logo, headline, description, email field, join button, legal links, and promotional image.
Onboarding 1 - Multi-Step Onboarding Flowonboarding1A five-step onboarding wizard with profile setup, workspace configuration, account linking, role selection, and team invites featuring animated dashboard preview.
Onboarding 2 - Dialog-Based Onboarding Wizardonboarding2A modal onboarding flow with colorful step backgrounds, profile questions, goal checkboxes, account linking, extension promotion, and trial activation.
Order History 1 - Order history with status tabsorder-history1An order history list with status tabs, order-number search, stacked product thumbnails, totals, and actions to track shipped orders or reorder delivered ones.
Order History 2 - Collapsible order history with filtersorder-history2An expandable order list with search and status filter, product images, shipping address, and actions to track, cancel, buy again, or return.
Order History 3 - Order history with per-item statusorder-history3An order history of cards showing number, date, and total, invoice and archive actions, and line items with delivery status and a buy-again button.
Order History 4 - Editorial order history with timelineorder-history4A spacious order history with search, a status timeline for in-progress orders, large product images, designer labels, and links for details, invoice, or returns.
Order History 5 - Order history with returns and reviewsorder-history5An order history with status tabs, search, shipment banners, item details, and actions to track, buy again, start a return, or write a review.
Order Summary 1 - Order confirmation with itemized totalsorder-summary1A post-purchase confirmation with a status badge, itemized products, cost breakdown, shipping address, payment method, and actions to track, download a receipt, or print.
Order Summary 11 - Card checkout with address dialogorder-summary11Card-based order summary listing line items, shipping options, and totals, with dialogs to edit contact or shipping details and add order notes.
Order Summary 2 - Compact stacked order confirmationorder-summary2A narrow confirmation stack with a status badge, compact item list, totals, combined delivery and payment card, plus track, receipt, and print actions.
Order Summary 3 - Order confirmation with product gridorder-summary3A bold confirmation with a four-cell details bar, large product image cards, shipping address, cost summary, and buttons to track the order or continue shopping.
Order Summary 4 - Order confirmation with status timelineorder-summary4A confirmation with an interactive delivery timeline, progress bar, step details, itemized products, shipping address, payment summary, and track or receipt actions.
Order Summary 5 - Order summary in a side sheetorder-summary5A confirmation sheet with item thumbnails, quantity and price, subtotal through total, estimated delivery, and buttons to track the order or continue shopping.
Order Summary 6 - Order confirmation dialogorder-summary6A confirmation dialog with a check icon, order number, estimated arrival, compact item list, subtotal and shipping, and buttons to track or keep shopping.
Order Summary 8 - Split checkout order and paymentorder-summary8Two-column checkout combining order line items and shipping method radios with a payment form for card, billing address, and order totals.
Our Story 1 - Tabbed brand timelineour-story1Brand milestone timeline using tabs synced with a carousel of dated story slides, each with an image, title, and long-form description.
Our Story 2 - Autoplay story timelineour-story2Discover-our-story section with autoplaying carousel slides and tabbed milestones, including previous and next controls for brand history storytelling.
Our Story 3 - Reveal story carousel over heroour-story3Full-bleed lifestyle background that slides aside to reveal a milestone card carousel telling a skincare brand origin story.
Our Story 4 - Sticky vertical timelineour-story4Two-column brand timeline with a sticky year and step rail linked to a content carousel of milestone images, badges, and descriptions.
Our Story 5 - Year tabs with hover mediaour-story5Year-based brand story with desktop timeline tabs, mobile year select, featured copy, and hover-card media carousels for each milestone.
Our Story 6 - Century scroll story chaptersour-story6Long-scroll fragrance brand history with a sticky century digits carousel on the left and chapter sections that advance years via intersection observer.
Pagination Advanced 1 - Start ellipsispagination-pagination-advanced-1Start Ellipsis.
Pagination Advanced 2 - End ellipsispagination-pagination-advanced-2End Ellipsis.
Pagination Advanced 3 - Both ellipsispagination-pagination-advanced-3Both Ellipsis.
Pagination Advanced 4 - Many pagespagination-pagination-advanced-4Many Pages.
Pagination Advanced 5 - Disabled statepagination-pagination-advanced-5Disabled State.
Pagination Basic 1 - Simple page numberspagination-pagination-basic-1Simple Page Numbers.
Pagination Basic 2 - Five page numberspagination-pagination-basic-2Five Page Numbers.
Pagination Basic 3 - With previous and nextpagination-pagination-basic-3With Previous and Next.
Pagination Basic 4 - With ellipsispagination-pagination-basic-4With Ellipsis.
Pagination Basic 5 - Completepagination-pagination-basic-5Complete Pagination.
Pagination Navigation 1 - Previous and next onlypagination-pagination-navigation-1Previous and Next Only.
Pagination Navigation 2 - With page counterpagination-pagination-navigation-2With Page Counter.
Pagination Navigation 3 - First and lastpagination-pagination-navigation-3First and Last.
Pagination Navigation 4 - With first and lastpagination-pagination-navigation-4With First and Last.
Pagination Sizes 1 - Small sizepagination-pagination-sizes-1Small Size.
Pagination Sizes 2 - Default sizepagination-pagination-sizes-2Default Size.
Pagination Sizes 3 - Large sizepagination-pagination-sizes-3Large Size.
Pagination Sizes 4 - Compactpagination-pagination-sizes-4Compact.
Pagination Sizes 5 - Spaciouspagination-pagination-sizes-5Spacious.
Passkey 1 - Centered passkey cardpasskey1Full-screen passkey login card with a fingerprint icon, a primary action, and a password fallback.
Passkey 2 - Minimal passkey promptpasskey2Centered passkey screen with a large heading and a single primary action, without a card.
Payment Methods 1 - Payment methods list with inline editpayment-methods1A saved payment list for cards and PayPal with radio selection, default badge, inline add and edit forms, and a menu to delete methods.
Payment Methods 2 - Payment methods grid with default cardpayment-methods2A two-column grid of saved cards and PayPal accounts with selection rings, default badge, inline editing, and a menu to set a default or delete.
Payment Methods 3 - Payment methods with flip credit cardspayment-methods3A stacked payment picker with flippable bank-branded credit cards, last-four details, default badge, inline edit, and a control to set the default card.
Payment Methods 4 - Payment methods carousel with flip cardspayment-methods4A carousel of flippable bank-branded credit cards with last-four details, default selection, inline edit, and previous and next controls.
Pill Avatar 1 - Pill with avatarpill-pill-avatar-1Pill with PillAvatar and assignee name.
Pill Avatar 2 - Avatar with handlepill-pill-avatar-2Pill with PillAvatar and a social handle.
Pill Avatar Group 1 - Avatar grouppill-pill-avatar-group-1Pill with PillAvatarGroup and supporting text.
Pill Button 1 - Dismissible pillpill-pill-button-1Pill with a PillButton remove control.
Pill Button 2 - Tag with dismisspill-pill-button-2Pill combining PillIcon and a dismiss PillButton.
Pill Composition 1 - Composed pillpill-pill-composition-1Pill combining status indicator, delta, and avatar group.
Pill Composition 2 - Status with dismisspill-pill-composition-2Pill combining PillStatus and a dismiss PillButton.
Pill Composition 3 - Icon with deltapill-pill-composition-3Pill combining PillIcon and PillDelta.
Pill Composition 4 - Status with avatarpill-pill-composition-4Pill combining PillStatus and PillAvatar.
Pill Delta 1 - Pill with deltapill-pill-delta-1Pill showing positive and negative PillDelta values.
Pill Delta 2 - Neutral deltapill-pill-delta-2Pill with a zero PillDelta showing no change.
Pill Delta 3 - Delta directionspill-pill-delta-3Pills for up, down, and no-change PillDelta states.
Pill Icon 1 - Pill with iconpill-pill-icon-1Pill with PillIcon and a user count.
Pill Icon 2 - Icon variantspill-pill-icon-2Pills using different PillIcon glyphs for metadata.
Pill Indicator 1 - Pill with indicatorpill-pill-indicator-1Pill with PillIndicator success variant.
Pill Indicator 2 - Error indicatorpill-pill-indicator-2Pill with a static error PillIndicator.
Pill Indicator 3 - Warning indicatorpill-pill-indicator-3Pill with a warning PillIndicator.
Pill Indicator 4 - Info indicatorpill-pill-indicator-4Pill with a pulsing info PillIndicator.
Pill Indicator 5 - All indicator variantspill-pill-indicator-5Row of pills covering every PillIndicator variant.
Pill Standard 1 - Basic pillpill-pill-standard-1Simple pill with text content.
Pill Standard 2 - Outline pillpill-pill-standard-2Pill using the outline badge variant.
Pill Standard 3 - Destructive pillpill-pill-standard-3Pill using the destructive badge variant.
Pill Standard 4 - Default pillpill-pill-standard-4Pill using the default primary badge variant.
Pill Status 1 - Status sectionpill-pill-status-1Pill with PillStatus separating a build result from an ID.
Pill Status 2 - Approval statuspill-pill-status-2Pill with a pending PillStatus and approval label.
Popover Standard 1 - Simple textpopover-popover-standard-1Simple Text Popover.
Popover Standard 10 - With footerpopover-popover-standard-10Popover with Footer.
Popover Standard 11 - With stepspopover-popover-standard-11Popover with Steps.
Popover Standard 12 - Notificationspopover-popover-standard-12Notifications Popover.
Popover Standard 13 - Filterpopover-popover-standard-13Filter Popover.
Popover Standard 14 - Sharepopover-popover-standard-14Share Popover.
Popover Standard 15 - Feedbackpopover-popover-standard-15Feedback Popover.
Popover Standard 2 - With headingpopover-popover-standard-2Popover with Heading.
Popover Standard 3 - With actionspopover-popover-standard-3Popover with Actions.
Popover Standard 4 - With formpopover-popover-standard-4Popover with Form.
Popover Standard 5 - Info iconpopover-popover-standard-5Info Icon Popover.
Popover Standard 6 - With listpopover-popover-standard-6Popover with List.
Popover Standard 7 - User profilepopover-popover-standard-7User Profile Popover.
Popover Standard 8 - With dividerpopover-popover-standard-8Popover with Divider.
Popover Standard 9 - Compactpopover-popover-standard-9Compact Popover.
Price Basic - Formatted USD displayprice-price-basicFormatted USD price display via Price and PriceValue.
Price On Sale - Discounted and original amountsprice-price-on-saleSale price shows discounted and original amounts.
Pricing 1 - Four-tier pricing comparison gridpricing1A centered pricing section with four divided plan columns, large prices, CTAs, and checkmarked feature lists below a divider.
Pricing 10 - Four-plan pricing cards with grouped featurespricing10Four pricing cards with plan images, grouped feature checklists, and a highlighted recommended tier, arranged in a row under a heading.
Pricing 100 - Single plan card with billing switchpricing100One centered pricing card with monthly and yearly switch, discount chip, dual buttons, and checklist rows.
Pricing 105 - Single plan wide muted panelpricing105Full-width muted surface splits narrative copy from a stacked checklist and single solid CTA.
Pricing 106 - Single plan split heading and cardpricing106Two-column layout places section story and inline switch beside a bordered pricing card.
Pricing 107 - Single plan card with accent railpricing107Card capped by a gradient rail includes corner switch row, badge-led title, and dot-led features.
Pricing 108 - Single plan split art panel and detailspricing108Gradient art panel with optional plan artwork contrasts a detail column with switch, facts, and CTA.
Pricing 11 - Four-plan feature matrix with sticky headerpricing11Feature comparison matrix for four plans with a sticky plan header row, billing tabs, tooltips on feature names, and collapsible rows on mobile.
Pricing 110 - Single plan with tabbed billingpricing110Tabs swap monthly and yearly amounts inside one card while sharing a single checklist and CTA.
Pricing 117 - Single plan bracketed price displaypricing117Oversized price sits inside corner bracket framing with prose grid for feature text below.
Pricing 118 - Single plan on inverted primary sectionpricing118Primary-tinted band wraps a light inset card that carries price, CTA, and two-column checks.
Pricing 12 - Add-on pricing with featured cards and listpricing12Add-on section split into featured items on accent cards and additional items in a divided list, each with title, description, and monthly price.
Pricing 13 - Three add-on cards in a bordered containerpricing13Three add-on options inside a single bordered section, each with a title, description, and monthly price or contact label, plus a header image.
Pricing 14 - Single plan card with discount badge and dual buttonspricing14Single-plan layout on a muted surface with plan name, discount badge, price, separator, two-column feature checklist, and two CTA buttons.
Pricing 15 - Two-column single plan with feature sidebarpricing15Split layout with heading, description, and subscribe button on the left, paired with a bordered feature card showing price and checklist on the right.
Pricing 16 - Three-plan pricing with billing tabs and checkmark featurespricing16Centered heading with monthly or yearly tabs, three bordered columns, optional zap badge on the recommended tier, split dollar amount display, and emerald check circles on features.
Pricing 17 - Two-plan comparison with feature matrixpricing17A pricing section comparing standard and premium plans with duration, listing limits, per-plan pricing, and a shared feature checklist shown as stacked cards on mobile and a comparison table on desktop.
Pricing 2 - Classic two-plan pricing with billing switchpricing2Centered heading with a monthly/yearly toggle, two side-by-side cards with large prices, feature checklists, and full-width CTA buttons.
Pricing 20 - Bordered three-plan pricing grid with plan icons and dividerspricing20Heading and toggle for monthly or yearly rates, three columns with vertical dividers between them, icon next to each tier name, oversized prices, badge-style checks on features, and primary or secondary buttons.
Pricing 21 - Three-plan comparison table with border accentspricing21Three pricing tiers displayed as column headers above a grouped feature matrix with monthly/yearly toggle and border-accented section dividers.
Pricing 22 - Three-plan pricing cards with per-column billing switchpricing22Three cards in a row with a yearly switch on paid tiers tied to one shared state, thick primary border on the recommended tier, and check icons on features.
Pricing 23 - Three-plan feature comparison with collapsible mobile selectorpricing23Feature comparison table for three plans using a collapsible plan picker on mobile and a four-column grid on desktop.
Pricing 24 - Three-plan pricing with switch and muted highlight cardspricing24Center headline with one annual switch, three cards on the theme muted color, highlighted tier with primary ring offset and slight scale, and primary-tinted checks on features.
Pricing 26 - Three service pricing cards with badge labelspricing26Three rounded cards on a muted background showing service plans with topic badges, key-value feature rows, and a highlighted middle card.
Pricing 27 - Agency services pricing pairpricing27A two-offering pricing grid with a large muted primary card plus image and a secondary expert-hire card with feature checklists.
Pricing 28 - Four-plan pricing with social proof and billing tabspricing28Four bordered plan cards below a centered heading, avatar social proof strip, billing tabs with savings badge, tooltips, and grouped feature lists.
Pricing 29 - Three-tier pricing on gradient background with patternpricing29Three pricing tiers rendered over a primary-color gradient with a plus-sign SVG pattern, highlighted middle card, and feature checklists.
Pricing 3 - Three-plan pricing with billing switch and dashed feature rowspricing3Three columns with a billing switch, optional intro text, checks and dashed separators on feature rows, and feature blocks that appear only on wide layouts.
Pricing 30 - Three-plan comparison table with highlighted columnpricing30Feature comparison for three plans with a collapsible mobile plan picker and a desktop grid where the middle column uses a muted highlighted background.
Pricing 31 - Three-plan pricing with icon feature rows and top pillpricing31Three columns with monthly price only, optional floating pill on the popular tier, primary border on that tier, and varied icons next to each feature line.
Pricing 32 - Five-tier pricing with billing togglepricing32Pricing with a monthly and annual switch, five plan cards including a highlighted popular tier, and a compare-all CTA.
Pricing 33 - Stacked add-on cards with icons and pricingpricing33Vertically stacked add-on rows with circular icon, name, description, price, and a purchase button, centered under a badge heading.
Pricing 34 - Three-plan pricing with billing toggle and mobile carouselpricing34Toggle between monthly and yearly prices, three cards with primary border on the recommended plan, labeled feature band, badge-style checks on rows, and a carousel when the layout is narrow.
Pricing 35 - Bold static pricing cards with inverted highlightpricing35Two large side-by-side cards with oversized prices, a centered billed-monthly divider, optional annual savings line, and full-width CTAs on a primary-filled highlighted card.
Pricing 36 - Rounded-shell pricing cards with inline CTA strippricing36Two side-by-side plans in large rounded shells with a white content panel, feature checklist, and a colored footer strip holding the call-to-action link.
Pricing 37 - Single premium plan spotlight cardpricing37A centered single-plan pricing block with uppercase label, spotlight card, icon feature rows, and purchase CTA.
Pricing 38 - Service package selector with radio grouppricing38Two-column layout pairing descriptive copy and info alerts on the left with three selectable plan cards using radio inputs on the right.
Pricing 39 - Slider-driven plan cards with usage tierspricing39A pricing section with heading, usage slider, and stacked plan cards that update price and feature copy as visitors move across monthly volume tiers, with tooltips and tagged highlights.
Pricing 4 - Three-plan pricing with tabs and one highlighted columnpricing4Monthly and yearly tabs above three tier columns with one muted highlighted column, badge labels from tier names, checks on features, and sans-serif price type.
Pricing 40 - Accordion-based service packagespricing40Four service packages displayed as accordion items that expand to reveal a three-column grid of scope, deliverables, and audience details.
Pricing 41 - Narrow three-plan pricing cards with per-column switchpricing41Same card pattern as the wide per-switch layout but inside a narrower centered container, yearly switch on paid tiers, and standard plan marked with a thick primary border.
Pricing 42 - Feature Comparison Pricing Tablepricing42A detailed pricing comparison table with plan headers and categorized feature rows showing availability across tiers with check marks and values.
Pricing 43 - Four Tier Pricing With Promo Countdownpricing43A pricing section with four columns, monthly and yearly tabs, a featured tier with compare-at pricing and a live countdown ribbon, primary or secondary CTAs per tier, and a grayscale payment logo row.
Pricing 44 - Narrow stacked three-plan pricing with switch and mobile carouselpricing44Centered heading and monthly/yearly switch in a medium-width column, three plan cards in a row on large screens, and a masked mobile carousel with arrows below that breakpoint.
Pricing 45 - Three-plan pricing with feature comparison tablepricing45Three-plan pricing cards with monthly/yearly toggle and a grouped feature comparison table below showing per-plan values as text, checkmarks, or dashes.
Pricing 46 - Unified pricing comparison tablepricing46A single bordered table merging plan summaries into column headers with categorized feature rows below, monthly/yearly toggle, and no separate cards.
Pricing 47 - Container-wide three-plan pricing with toggle and carouselpricing47Same card treatment as the constrained three-column carousel block but the heading and cards use the full container width on large screens, with primary border emphasis on the highlighted plan.
Pricing 48 - Full-container three-plan pricing with switch and carouselpricing48Square monthly or yearly switch, three cards across the full container, subtle muted fill on the recommended tier, feature ribbon, and mobile carousel like the wide-row switch variant with a narrower intro option elsewhere.
Pricing 49 - Three-plan pricing in one horizontal bandpricing49One bordered band split into three segments, billing toggle for monthly or yearly prices, two short feature lines per tier, and full-width buttons.
Pricing 5 - Two-plan pricing with comparison tablepricing5Side-by-side plan cards with prices and CTAs, plus a feature matrix table with check and minus indicators.
Pricing 50 - Three-plan pricing with centered spotlight columnpricing50Twelve-column style grid with the recommended tier scaled and ringed, billing toggle, card stacks with checks on features, and full-width primary or outline buttons.
Pricing 52 - Three-plan pricing carousel at all breakpointspricing52Coverflow carousel with edge mask and billing toggle; slides tween rotation and scale with scroll so tiers ease into the center; looping autoplay; center card gets primary border and button.
Pricing 57 - Developer-style three-plan pricingpricing57Monospace-friendly layout with small plan id badges, dashed card borders, tight feature lists, and a square billing toggle over three tiers.
Pricing 58 - Editorial Two-Plan Pricing Gridpricing58Left-aligned heading and sharp-cornered toggle above a bordered two-column grid with vertical dividers, oversized prices, and badge-style feature checks.
Pricing 59 - Compact Two-Plan Pricing Bandpricing59Centered heading and rounded toggle above a single bordered container split into two plan columns with inner dividers, compact feature lists, and full-width buttons.
Pricing 6 - Single plan pricing card with grouped featurespricing6Centered single-plan card with separated feature groups, a large price numeral, and a CTA button, all under a heading and subheading.
Pricing 60 - Developer-Style Two-Plan Pricingpricing60Monospace-accented two-plan pricing with dashed card borders, tiny plan-code badges, compact feature lists, and a square billing toggle on a subtly tinted band.
Pricing 61 - Left-Aligned Two-Plan Pricing With Tabspricing61Left-aligned heading with a pill-style billing toggle on the right, two side-by-side plan columns with uppercase badges, separators, check-marked feature lists, and full-width buttons.
Pricing 62 - Spotlight Two-Plan Pricing With Ringpricing62Centered heading and switch above two muted-background cards where the second plan scales up slightly with a primary-colored ring highlight.
Pricing 63 - Asymmetric Two-Plan Pricing With Tabspricing63Asymmetric twelve-column grid with a narrower left card and wider highlighted right card, controlled by a tabs billing toggle.
Pricing 64 - Two-Plan Pricing With Top Border Accentpricing64Two side-by-side pricing cards where the recommended plan is distinguished by a thick primary-colored top border accent.
Pricing 66 - Minimal Two-Plan Pricing Cardspricing66Ultra-minimal two-plan pricing with large centered prices, no feature lists, and an inverted primary-fill card for the recommended plan.
Pricing 67 - Two-Plan Pricing With Dark Card Contrastpricing67Centered heading and billing switch above two side-by-side cards where the second card inverts foreground and background colors for automatic dark contrast.
Pricing 68 - Two-Plan Pricing With Muted Feature Sectionpricing68Tab-toggled two-plan pricing where each card splits visually into a white header area for the price and CTA and a muted rounded region for the feature list.
Pricing 69 - Two-Plan Pricing With Segmented Radio Controlpricing69Centered heading with a segmented RadioGroup pill control featuring a green discount badge, above two bordered cards in a clean grid layout.
Pricing 7 - Two-plan pricing with radio toggle and discount badgepricing7Centered heading with a segmented radio control for monthly/yearly billing, optional savings badge, and two bordered plan panels with feature checklists.
Pricing 71 - Two-Plan Pricing With Feature Ribbonpricing71Two pricing cards with a Switch toggle for monthly and yearly billing, a centered FEATURES separator ribbon between the CTA and the feature checklist, and BadgeCheck icons on each row.
Pricing 72 - Offset Two-Plan Pricing Cardspricing72Two pricing cards where the second card is offset upward with a negative top margin, creating a staggered overlapping layout with Tabs for billing cycle selection.
Pricing 73 - Elevated Two-Plan Pricing On Muted Surfacepricing73Two pricing cards elevated on a muted section background, with a ToggleGroup for billing, Separator between price and features, and a subtle ring on the recommended plan.
Pricing 74 - Two-Plan Pricing With Popular Pill Badgepricing74Two pricing cards with a floating pill badge on the recommended plan, a Switch toggle with a yearly billing label, and Check icons on each feature row.
Pricing 75 - Two-Plan Pricing With Per-Card Billing Switchpricing75Two pricing cards each containing their own billing Switch that toggles between monthly and yearly pricing simultaneously across both cards.
Pricing 76 - Display Price Two-Plan Pricing With Feature Badgespricing76Two-plan pricing layout with oversized display prices, tab-based billing toggle, and features rendered as horizontal Badge chips instead of a vertical list.
Pricing 78 - Two-Plan Pricing With Dashed Feature Separatorspricing78Two-plan pricing grid with a ToggleGroup billing switch and feature lists separated by dashed horizontal rules below each card.
Pricing 79 - Spacious Rounded Two-Plan Pricingpricing79Two generously padded cards with extra-large border radius, tab-based billing toggle, and a highlighted second plan with a primary border and shadow.
Pricing 8 - Single plan card on muted background with feature gridpricing8Single-plan card with oversized price, CTA button, and a multi-column feature checklist spread beneath the card on a muted surface.
Pricing 80 - Bordered Two-Plan Section With Centered Headerpricing80A single bordered container with a centered header section above a two-column plan comparison separated by a vertical divider.
Pricing 81 - Two-Plan Pricing With Primary Border Framepricing81Two plan cards where the highlighted card is wrapped in a solid primary-color border frame using a background-clip technique for a bold accent.
Pricing 82 - Compact Two-Plan Pricing Strippricing82Two plans inside a single compact bordered container with shared dividers, minimal padding, and small-size controls for a dense, utilitarian look.
Pricing 83 - Wide two-plan pricing with billing togglepricing83A dual pricing block with a monthly or yearly switch, two equal-width cards that span the container, feature checklists, and full-width CTAs per plan.
Pricing 84 - Container-wide pricing7-style two tierspricing84Like pricing7 with monthly or yearly radio tabs, discount chip, feature lists, and CTAs, but both plans stretch to the full container width on desktop.
Pricing 85 - Four-plan pricing carousel with billing togglepricing85Four pricing cards in a swipeable mobile carousel or four-column desktop grid, with a pill-style monthly and yearly billing toggle.
Pricing 86 - Four-plan cards with annual billing switchpricing86Four pricing cards with a shared annual billing switch repeated on each paid tier, compact feature checklists, and a primary border on the highlighted plan.
Pricing 87 - Four-plan carousel with centered billing switchpricing87A centered monthly and yearly switch above four pricing cards, with a masked carousel on mobile and a muted background fill on the highlighted tier.
Pricing 88 - Four-column editorial pricing strippricing88Left-aligned heading with a square billing toggle above a single bordered grid split into four vertical tiers with icon headers and feature checklists.
Pricing 89 - Four-plan cards with optional feature iconspricing89Centered heading and four bordered panels with oversized price, arrow CTA, mixed feature icons from data, and a floating pill on the highlighted tier.
Pricing 9 - Three-tier comparison table with billing togglepricing9Three-plan feature comparison rendered as stacked cards on mobile and a bordered table on desktop, with an annual/monthly switch and tooltips.
Pricing 90 - Three tall pricing cards with billing togglepricing90Centered headline and intro from shared three-plan content, pill billing control, and three separate bordered cards with large dollar figures, primary accents, and checklist rows like the four-plan strip.
Pricing 91 - Three plan columns with tier logos and billing togglepricing91Article-style cards with a small illustration per tier, three columns, segmented monthly and yearly control, and optional recommended ribbon on the highlighted plan.
Pricing 92 - Narrow two plan columns with tier logospricing92Two illustrated tiers in compact article cards inside a capped width column, monthly prices only, recommended ribbon on the emphasized plan, and feature checklists.
Pricing 93 - Four-plan grid with spotlight column scale and shadowpricing93Four pricing cards in a desktop grid with billing toggle, where the highlighted plan scales up with a colored ring and shadow to draw attention.
Pricing 94 - Four-plan pricing with muted ring cards and scale emphasispricing94Four pricing tiers on muted cards with a primary ring and scale pop on the highlighted plan, annual billing switch, and check-marked feature lists.
Pricing 95 - Developer-style four-plan pricingpricing95Monospace-accented four-tier pricing with plan id badges, dashed card borders, dense feature lists, and a billing toggle.
Pricing 96 - Tinted four-plan pricing with badge accentspricing96Four pricing cards on a muted tinted background with badge-labeled highlighted plan, billing toggle, and emerald feature checklists.
Pricing 97 - Four-plan pricing with left heading and tab billingpricing97Four pricing cards with a left-aligned heading, tab-style billing toggle, and badge plan labels above each card.
Pricing 98 - Four-plan 3D coverflow pricing carouselpricing98Looping coverflow carousel with four pricing tiers, 3D perspective transforms, scroll-linked rotation and scale, and a monthly/yearly billing toggle.
Pricing 99 - Four-plan pricing with detached feature listspricing99Four pricing cards with billing toggle above separate per-plan feature checklists displayed in a matching grid below.
Process 1 - Sticky sidebar four-step processprocess1Two-column process section with a sticky heading and contact button on the left, numbered step cards on the right.
Process 2 - Scroll-driven process with image transitionsprocess2Two-column process layout where scrolling through numbered steps triggers animated image changes in a sticky panel.
Process 3 - Stacked color-band process stepsprocess3Five-step animated process with progressive sky-blue background bands, arrow icons, and oversized offset step numbers.
Process 4 - Hover-activated process cards with image popupprocess4Three-step process with a sticky title column and rounded cards that reveal an animated floating image on hover.
Product Card 1 - Product card with sale badgeproduct-card1A linked product card with a product image, urgency badge, name, short description, and regular plus sale price.
Product Card 10 - Product card with variant thumbnailsproduct-card10A product card with a zooming image, sale or sold-out badge, hover add to cart and quick view, plus thumbnail buttons to switch variants.
Product Card 2 - Product card with add to cartproduct-card2A product card with image, urgency badge, name, description, sale price, and a full-width add to cart button.
Product Card 21 - Apparel Card With Color Swatchesproduct-card21A product card with dual-image hover swap, color radio swatches with tooltips, collapsible row for overflow colors, name, sale and regular price, and a compact add button.
Product Card 22 - Electronics Card With Spec Carouselproduct-card22A compact card with a four-image carousel controlled by horizontal hover zones, reveal add-to-cart on hover, brand and rating row, icon spec strip, optional variant thumbnails, and sale pricing.
Product Card 23 - Tableware Card With Color Variantsproduct-card23A tall product card for homeware with responsive image, brand link, optional new badge, color radio swatches that swap imagery, price, and a search icon button in the footer row.
Product Card 24 - Hoodie Card With Form Variantsproduct-card24A product card combining an image carousel with next and previous controls, react-hook-form and zod driven size and color groups with stock states, gradient color swatches, and sticky-feel add-to-cart with sale pricing.
Product Card 3 - Product card with hover add to cartproduct-card3A product card with image, urgency badge, name, description, sale price, and an add to cart button that appears over the image on hover.
Product Card 4 - Product card with brand and ratingproduct-card4A compact product card with a product image, brand label, star rating, product name, and price.
Product Card 5 - Product card with collection labelproduct-card5A product card with a square image, collection label, product name, and price for catalog listings.
Product Card 6 - Product card with color variantsproduct-card6A product card with a variant image, collection name, color swatches, sale price, and hover actions for quick add, shop now, and quick view.
Product Card 7 - Product card with size pickerproduct-card7A product card with image, name, sale price and discount badge, plus a hover size selector on desktop and a mobile drawer for add to cart.
Product Card 8 - Product card with expandable cart formproduct-card8A product card with hover image swap, rating and discount badges, and a bag button that opens size, color, and quantity selectors.
Product Card 9 - Product card with color swatchesproduct-card9A product card with a hover image gallery, stacked badges, category link, sale price, and color swatches that update the product photos.
Product Categories 1 - Split category banner with imageproduct-categories1A two-column product category banner with a centered title and summary on the left and a full-bleed category image on the right.
Product Categories 2 - Category card gridproduct-categories2A heading above a grid of linked category cards, each with a hover-zoom image, title, and short summary.
Product Categories 3 - Overlay category bannerproduct-categories3A full-bleed category banner with a darkened background image and centered title plus summary overlaid on the photo.
Product Categories 4 - Category banner with breadcrumbsproduct-categories4A full-bleed category banner with breadcrumb navigation, a large title, and supporting copy over a darkened background image.
Product Categories 5 - Split media category promosproduct-categories5A two-panel category section pairing a looping video and a still image, each with a title, discount line, bag button, and optional call to action.
Product Detail 1 - Product detail with specs listproduct-detail1A two-column product page with an image carousel, reviews, in-stock badge, buy now button, size and color options, and a labeled specs list.
Product Detail 10 - Product detail with three-column layoutproduct-detail10A product page with a full-width image carousel above three columns for feature icons, material and size options, and long-form description.
Product Detail 2 - Product detail with zoom galleryproduct-detail2A split product page with a zoomable image gallery, color and material options, quantity stepper, add to cart and purchase buttons, and expandable info sections.
Product Detail 3 - Product detail with color and sizeproduct-detail3A two-column product page with a lightbox image gallery, color swatches, size options, quantity stepper, and add to cart plus buy now buttons.
Product Detail 4 - Product detail with thumbnail galleryproduct-detail4A two-column product page with a thumbnail image gallery and lightbox, star rating, color options, accordion details, and a buy now button.
Product Detail 5 - Product detail with size chartproduct-detail5A two-column product page with a lightbox gallery, size chart, color and size options, live stock status, and add to cart or buy now actions.
Product Detail 6 - Product detail with recommended productsproduct-detail6A product page with a lightbox gallery, size and quantity form, shipping notes, a recommended products carousel, and accordion product details.
Product Detail 7 - Product detail with brand and featuresproduct-detail7A two-column product page with a branded heading, lightbox carousel, quantity stepper, feature list, sustainability notes, and accordion details.
Product Detail 8 - Product detail with reviews and servicesproduct-detail8A two-column product page with a lightbox carousel, star reviews, size and color options with stock status, services list, and accordion details.
Product Detail 9 - Product detail with spec tableproduct-detail9A split product page with a vertical lightbox gallery, large product name, sale price, size options, a bordered specs table, and add to cart.
Product Gallery 1 - Product image carousel and gridproduct-gallery1A product image gallery that swipes as a carousel on small screens and becomes a three-column grid with a full-width lead image on larger screens.
Product Gallery 2 - Zoomable product gallery with lightboxproduct-gallery2A product image carousel that opens a lightbox with zoom, custom next and previous controls, and an image index badge.
Product Gallery 3 - Product gallery with dot indicatorsproduct-gallery3A product image gallery that uses a carousel with dot indicators on small screens and a two-column lightbox grid on larger screens.
Product Gallery 4 - Thumbnail sidebar product galleryproduct-gallery4A product gallery with a sticky thumbnail sidebar, a scroll-synced main image stack, and a lightbox for zoomed viewing.
Product Gallery 7 - Thumbnail carousel with new badgeproduct-gallery7A product gallery with a thumbnail column, a main carousel that opens a lightbox, a New badge, and a progress indicator.
Product List 1 - Product grid with badgesproduct-list1A responsive product grid of cards with images, optional urgency badges, names, descriptions, and regular plus sale prices.
Product List 10 - Product rows with featured promoproduct-list10Stacked product rows that pair a featured promotion card with a grid of products showing sale badges, hover add to cart and quick view.
Product List 2 - Product grid with add to cartproduct-list2A product grid of cards with images, optional badges, names, descriptions, sale prices, and a full-width add to cart button on each card.
Product List 3 - Product grid with hover add to cartproduct-list3A product grid of cards with images, optional badges, names, descriptions, and an add to cart button that appears over the image on hover.
Product List 4 - Product grid with promo cardproduct-list4A product grid that opens with a promotional card, then product cards showing image, brand, star rating, name, and price.
Product List 5 - Product grid with collection headerproduct-list5A product listing with a heading, collection call to action, and a grid of cards showing square images, collection labels, names, and prices.
Product List 6 - Product carousel with color variantsproduct-list6A headed product carousel of cards with variant images, color swatches, sale prices, and hover quick add, shop now, and quick view actions.
Product List 7 - Product grid with size pickerproduct-list7A headed product grid of cards with images, sale prices, discount badges, and hover size selectors on desktop or a mobile add-to-cart drawer.
Product List 8 - Product grid with expandable cart formproduct-list8A dense product grid of cards with hover image swap, rating and discount badges, and a bag button that opens size, color, and quantity selectors.
Product List 9 - Tabbed product carousel with promoproduct-list9A New Arrivals listing with category tabs and a carousel that pairs a promo card with products showing color swatches, badges, and sale prices.
Product Quick View 4 - Dialog quick view with variantsproduct-quick-view4A product quick-view dialog with an image carousel, description, price, color and size options, and add-to-cart plus details actions.
Product Quick View 5 - Dialog quick view with accordionproduct-quick-view5A product quick-view dialog with a thumbnail carousel, stock status, color and quantity controls, service list, share links, and accordion details.
Product Quick View 6 - Sheet quick view with ratingproduct-quick-view6A product quick-view sheet with an image carousel, star rating, sale price, stock badge, quantity stepper, and add-to-cart actions.
Product Quick View 7 - Dialog quick view with dual imagesproduct-quick-view7A product quick-view dialog showing two images at once, plus color, size, and quantity controls with add-to-cart and buy-now buttons.
Product Quick View 8 - Minimal Quick View Dialogproduct-quick-view8A dialog quick view with custom close control, scrollable body, image carousel, price and title stack, long description, and a fixed full-width add-to-cart bar at the bottom.
Product Search 1 - Search popover with product carouselproduct-search1Sticky search field that opens a popover of keyword suggestions and a product card carousel with image galleries, badges, and pricing.
Product Search 2 - Search sheet with product resultsproduct-search2Search icon opens a sheet listing product results with images, prices, badges, and clear or close controls for quick store search.
Product Search 3 - Search sheet with trending collectionsproduct-search3Branded search sheet showing trending searches and most-searched collection tiles instead of live product rows.
Product Search 4 - Search sheet with recommendationsproduct-search4Full-height search sheet with logo, trending searches, and a collapsible recommended-products grid of image cards with prices.
Product Search 5 - Search dialog with products and articlesproduct-search5Dialog search experience with popular queries and tabbed results for products and editorial articles, plus tooltips on result actions.
Product Search 6 - Category search drawerproduct-search6Tall search drawer with logo, category dropdown on the input, and tabbed product and article results plus popular search links.
Product Search 7 - Combobox search with promo panelproduct-search7Combobox search dropdown splitting popular links and recommended products beside a large promotional image card.
Product Specs 1 - Collapsible product spec tablesproduct-specs1A product specifications section with expandable categories, icons, label-value tables, and expand-all or collapse-all controls.
Product Specs 2 - Tabbed product specificationsproduct-specs2A tabbed product specifications section with scrollable category tabs, key-spec badges, check and cross indicators, and a key highlights list.
Progress Basic 1 - Emptyprogress-progress-basic-1Empty Progress.
Progress Basic 2 - Quarterprogress-progress-basic-2Quarter Progress.
Progress Basic 3 - Halfprogress-progress-basic-3Half Progress.
Progress Basic 4 - Three quartersprogress-progress-basic-4Three Quarters Progress.
Progress Basic 5 - Completeprogress-progress-basic-5Complete Progress.
Progress Colored 1 - Successprogress-progress-colored-1Success.
Progress Colored 2 - Warningprogress-progress-colored-2Warning.
Progress Colored 3 - Dangerprogress-progress-colored-3Danger.
Progress Colored 4 - Infoprogress-progress-colored-4Info.
Progress Colored 5 - Gradientprogress-progress-colored-5Gradient.
Progress Sizes 1 - Extra smallprogress-progress-sizes-1Extra Small.
Progress Sizes 2 - Smallprogress-progress-sizes-2Small.
Progress Sizes 3 - Default sizeprogress-progress-sizes-3Default.
Progress Sizes 4 - Largeprogress-progress-sizes-4Large.
Progress Sizes 5 - Extra largeprogress-progress-sizes-5Extra Large.
Progress With Label 1 - With percentageprogress-progress-with-label-1With Percentage.
Progress With Label 2 - With label aboveprogress-progress-with-label-2With Label Above.
Progress With Label 3 - With label belowprogress-progress-with-label-3With Label Below.
Progress With Label 4 - With countprogress-progress-with-label-4With Count.
Progress With Label 5 - Multi-line labelprogress-progress-with-label-5Multi-line Label.
Project 1 - Project detail with animated scroll revealproject1Single-project layout with a header, hero image, descriptive paragraphs, metadata rows, and a two-column image grid with fade-up scroll animations.
Project 10 - Photography project with numbered sections and carouselproject10Urban photography showcase with a header, category metadata, numbered content sections, a two-column image grid, and a horizontally scrolling image marquee.
Project 12 - Project intro with mask-reveal heading animationproject12Two-column project introduction featuring multi-line headings with a clip-path mask reveal, metadata labels, and a large bordered hero image.
Project 13 - Full-screen parallax hero with image grid and concept sectionproject13Scroll-driven parallax hero with an overlay title, project metadata grid, a four-image gallery with hover zoom, and a two-column concept narrative.
Project13a - Parallax hero with full-width gallery and concept sectionproject13aViewport-height parallax hero with gradient overlay, a project overview grid, vertically stacked full-width images, and a two-column concept narrative.
Project 14 - Automotive project showcase with grayscale imageryproject14Centered uppercase title with staggered two-column image grids, category metadata, a body paragraph, and a full-width hero image, all in grayscale.
Project 2 - Project detail with serif title and metadata columnsproject2Single-project page with a large serif title, three-column metadata row, a full-width image, and a description section ending with a shadcn/ui Button.
Project2a - Centered project detail with label and dividerproject2aCenter-aligned project page with a label, large serif title, horizontal divider, three-column metadata, a captioned image, and a description section with a button.
Project2b - Project detail with monospace title and bordered sidebarproject2bTwelve-column layout pairing a monospace title with a border-left metadata sidebar, a captioned 3:2 image, and a split description section with a button.
Project2c - Project showcase with dot indicators and sticky headingproject2cProject page featuring dot-prefixed labels, three-column metadata with top borders, a 16:9 image, and a sticky overview heading alongside a description and button.
Project2d - Project detail with card metadata and floating captionproject2dTwelve-column layout with a serif title, a muted metadata card, a rounded image with a floating caption overlay, and a split description section with a button.
Project 4 - Long-form case study with prose content and breakout imagesproject4Single-column case study layout with a header, metadata, prose sections covering challenge, process, and outcome, and full-bleed breakout images with captions.
Project4a - Case study with sticky sidebar navigationproject4aFour-column layout with a sticky sidebar containing project info, metadata, and anchor links alongside a scrolling prose content area with images and captions.
Project4b - Centered case study with interleaved image sectionsproject4bCenter-aligned case study with a header, metadata row, and alternating prose sections and full-width images covering challenge, process, and outcome.
Project4c - Case study with full-screen hero overlay and metrics gridproject4cFull-screen hero with white text overlay, an article-style body with prose sections, a blockquote, figure captions, and a three-column results metrics grid.
Project 5 - Exhibition project with metadata table and image galleryproject5Art exhibition layout with a title, description, bordered metadata rows, a hero image, a two-column image grid, and a two-column artistic vision section.
Project5a - Exhibition project with horizontal accent linesproject5aThree-column header with a horizontal accent line, title, description, and metadata alongside a hero image, a creative process section with paired square images.
Project5b - Exhibition project with materials table and dimensionsproject5bTwo-column layout with accent lines, a wide hero image, paired square images, a concept narrative, a materials list, and a dimensions table.
Project5c - Exhibition project with metadata card and 3:1 image splitproject5cThree-column header with a title, description, and a muted metadata card, followed by a 3:1 image split and a two-column artistic vision section.
Project5d - Narrow exhibition page with stacked images and full-width buttonproject5dNarrow single-column exhibition layout with a title, description, stacked images, a four-column metadata row, a vision section, and a full-width button.
Project5e - Exhibition gallery grid with hover overlays and statsproject5eCenter-aligned exhibition page with a title, button, metadata line, a multi-column image grid with hover reveal overlays, a vision section, and a three-column stats row.
Project5f - Exhibition page with card header and booking footerproject5fRounded card header with a two-column description and metadata grid, three stacked full-width images, and a muted footer card with a booking button.
Project5g - Exhibition project with asymmetric grid and visit CTAproject5gFive-column header with a two-tone title and sidebar portrait, a 2:1 image grid with border-left metadata, a vision section, and a visit scheduling button.
Project 6 - Photography collection with sticky sidebar and project cardsproject6Two-column layout with a sticky title, badges, and description alongside scrollable portrait images, followed by a three-column grid of overlay project cards.
Project6a - Photography collection with inline project rowsproject6aSingle-column photography gallery with a title, badges, stacked portrait images, an about section, and compact project rows with thumbnail images and badges.
Project 7 - Architectural case study with hero, carousel, and image gridproject7Multi-section architecture project page with a full-height hero overlay, prose sections, a shadcn/ui Carousel, a panoramic image, and a four-image grid.
Project 8 - Fashion project with centered title and creditsproject8Animated fashion project layout with a centered bold title, subtitle, a rounded hero image, and a two-column section with narrative text and a credits list.
Project8a - Fashion project with full-bleed image and creditsproject8aCentered title and subtitle above a full-bleed 16:9 hero image, followed by a two-column section with narrative text and a team credits list.
Project8b - Fashion project with side-by-side image and textproject8bCentered title and subtitle above a two-column layout pairing a 4:5 portrait image on the left with narrative text and credits on the right.
Project8c - Fashion project with narrow layout and bordered headerproject8cNarrow-width fashion project layout with a centered title, a 3:2 image, a bordered metadata header, and a two-column section for narrative and credits.
Project8d - Fashion project with sidebar metadata and multi-column creditsproject8dCentered title with a wide 2:1 image, a four-column layout with metadata sidebar and narrative text, and a bordered credits section in a multi-column grid.
Project8e - Fashion project with full-screen hero backgroundproject8eFull-screen background image hero with animated white text, followed by a white-background content section with a two-column narrative and credits layout.
Project 9 - Photography project with sticky sidebar and image gridproject9Two-column layout with a sticky sidebar containing breadcrumb navigation, metadata rows, and a project overview alongside a scrollable image gallery with hover zoom.
Projects 1 - Animated project list with images and badgesprojects1Vertical list of projects with two-column rows containing images, descriptions, and category badges that animate into view on scroll.
Projects 10 - Image grid with hover-reveal titlesprojects10Three-column grid of square images that scale and reveal a title and description overlay when hovered.
Projects 11 - Masonry image gallery with scroll animationsprojects11Multi-column masonry gallery where images fade in on scroll and scale with a brightness shift on hover.
Projects 12 - Project grid with spring-animated cursor tooltipprojects12Three-column image grid with titles and metadata, plus a spring-physics tooltip that follows the cursor showing an explore prompt.
Projects 13 - Project list with numbered rows and thumbnailsprojects13Horizontal list layout presenting projects with a numbered index, title, launch date, description, and small thumbnail image per row.
Projects 14 - Staggered grid portfolio with animated entriesprojects14Five-column grid with intentionally hidden cells creating an offset pattern, where project cards animate into view on scroll.
Projects 15 - Full-width video sections with hover playbackprojects15Stacked full-width video panels that show a thumbnail at rest and play the video on hover, with studio name and title overlays.
Projects15a - Two-column video grid with hover playbackprojects15aVideo panels in a two-column grid that crossfade from thumbnail to looping video on hover, with title overlays.
Projects15b - Integrated header and video grid in two columnsprojects15bHeader cell and video panels share a two-column grid, with each video crossfading from thumbnail to playback on hover.
Projects15c - Stacked video panels with rounded cornersprojects15cVertically stacked video panels with rounded containers and spacing between each, crossfading to video on hover.
Projects15d - Two-by-two video grid with aspect-ratio panelsprojects15dFour video panels in a 2x2 grid with 16:9 aspect ratio and rounded corners, crossfading to video on hover.
Projects15e - Video carousel with hover playbackprojects15eHorizontal carousel of video panels that crossfade from thumbnail to playback on hover, with navigation arrows and looping.
Projects 16 - Photo gallery with staggered aspect ratiosprojects16Two-column image layout using alternating 4:3 and 4:5 aspect ratios, paired with a heading, paragraph, and link button.
Projects 17 - Horizontal project carousel with navigation arrowsprojects17Scrollable carousel of project cards showing a 4:3 image, title, location, and view button, with left and right arrow controls.
Projects17a - Widescreen carousel with category pillsprojects17aHorizontal carousel of wide 16:9 project cards showing image, title, and a tinted category pill, with circular navigation arrows.
Projects17b - Project card carousel with full metadataprojects17bCarousel of bordered cards containing a square image, title, category badge, location, year, description, and action button.
Projects 18 - Project rows with background images and hover revealprojects18Stacked full-bleed rows using background images with a dark blur overlay that clears on hover to reveal a view-project button.
Projects 2 - Editorial project showcase with large imagesprojects2Stacked project entries in a 4/8 column split with uppercase titles, descriptions on the left and large bordered images on the right.
Projects 3 - Scroll-animated project cards with cursor iconprojects3Single-column project cards with parallax scroll effects and a floating plus-icon cursor that appears on hover following mouse position.
Projects 4 - Illustrated project grid with header textprojects4Two-column grid of project illustrations with titles, categories, and dates, preceded by a large heading and two descriptive text blocks.
Projects 5 - Animated project cards with year badgesprojects5Two-column grid of bordered project cards with images, titles, categories, and pill-shaped year badges that animate into view on scroll.
Projects 6 - Photo card grid with gradient overlaysprojects6Two-column grid of rounded dark cards with full-bleed images, category tags, titles, and descriptions revealed on hover.
Projects 7 - Filterable image gallery with hover overlaysprojects7Two-column image grid with category filter buttons that animate items in and out, revealing title and description overlays on hover.
Projects 8 - Three-column filterable gallery with overlaysprojects8Three-column image grid with category filter buttons that animate items on change, revealing title and description on hover.
Projects 9 - Two-column image grid with slide-up captionsprojects9Edge-to-edge two-column grid of square images where titles and descriptions slide up from the bottom on hover.
Promo Banner 1 - Free shipping progress bannerpromo-banner1A storefront banner that shows remaining spend toward free shipping, a progress bar, and a confirmation message once the threshold is met.
Promo Banner 2 - Sale banner with shop-now linkpromo-banner2A full-width promo bar with a sale message, discount line, and underlined shop-now link for a seasonal or sitewide offer.
Promo Banner 3 - Delivery cutoff countdown bannerpromo-banner3A promo bar with a gift icon and live hours-minutes-seconds countdown showing how long remains to order for delivery by a set date.
Promo Banner 4 - Trust-signal promo bannerpromo-banner4A slim banner row of trust messages with icons for free shipping, returns, and secure checkout, shown as a repeating horizontal list.
Promo Banner 5 - Flash sale countdown bannerpromo-banner5A flash-sale banner with a live hours-minutes-seconds timer in boxed digits and a short offer line such as a percent-off message.
Promo Banner 6 - Holiday sale countdown bannerpromo-banner6A holiday sale banner with a gift icon, title, and a live countdown of days, hours, minutes, and seconds in labeled boxes.
Promo Banner 7 - Flash sale banner with stock barpromo-banner7A flash-sale banner with a live countdown, a sold-progress bar, and remaining-item count for a limited-time, limited-stock offer.
Qr Code Robust 1 - High error correctionqr-code-qr-code-robust-1QR code using high robustness for denser recovery.
Qr Code Sizes 1 - Size variantsqr-code-qr-code-sizes-1QR codes shown at small, medium, and large sizes.
Qr Code Standard 1 - URL QR codeqr-code-qr-code-standard-1Client QR code for a URL using theme-aware colors.
Qr Code Text 1 - Plain text payloadqr-code-qr-code-text-1QR code encoding a short plain-text string instead of a URL.
Radio Group Advanced 1 - With iconsradio-group-radio-group-advanced-1RadioGroup with Icons.
Radio Group Advanced 2 - With custom contentradio-group-radio-group-advanced-2RadioGroup with Custom Content.
Radio Group Form 1 - In a formradio-group-radio-group-form-1RadioGroup in Form.
Radio Group Form 2 - With disabled statesradio-group-radio-group-form-2RadioGroup with Disabled States.
Radio Group Layout 1 - Horizontalradio-group-radio-group-layout-1Horizontal RadioGroup.
Radio Group Layout 2 - With cardsradio-group-radio-group-layout-2RadioGroup with Cards.
Radio Group Layout 3 - In a gridradio-group-radio-group-layout-3RadioGroup in Grid.
Radio Group Standard 1 - Basicradio-group-radio-group-standard-1Basic RadioGroup.
Radio Group Standard 2 - With descriptionsradio-group-radio-group-standard-2RadioGroup with Descriptions.
Rate Card 1 - Monthly rate with process stepsrate-card1A two-column rate card with a monthly price, booking conditions, and a five-step process list covering revision, strategy, implementation, testing, and review.
Rate Card 2 - Two-plan monthly rate cardsrate-card2A pair of pricing cards for a monthly retainer and a premium package, each with a description, included-benefits list, price, and a get-started button.
Rating Basic - Numeric score displayrating-rating-basicStar rating display for a numeric score.
Rating Composition 1 - Rating with labelrating-rating-composition-1Star rating paired with descriptive label text.
Rating Default 1 - Default rating valuerating-rating-default-1Rating prefilled with defaultValue of three stars.
Rating Half 1 - Three star selectionrating-rating-half-1Rating with three stars selected for a mid-range score.
Rating Kibo Composition 1 - With field labelrating-rating-kibo-composition-1Star rating composed with a field label so users know they are scoring a specific product.
Rating Kibo Controlled 1 - Controlled valuerating-rating-kibo-controlled-1Controlled five-star rating bound to a value, with helper text showing the currently selected star count.
Rating Kibo Default 1 - Default valuerating-rating-kibo-default-1Five-star rating prefilled with a default value of three so a mid-range score shows on load.
Rating Kibo Readonly 1 - Read-only displayrating-rating-kibo-readonly-1Non-interactive four-star rating that displays a fixed score without accepting pointer or keyboard input.
Rating Kibo Sizes 1 - Larger star sizerating-rating-kibo-sizes-1Five-star rating that uses a larger button size and starts with four stars selected.
Rating Kibo Standard 1 - Interactive starsrating-rating-kibo-standard-1Interactive five-star rating with clickable buttons that starts empty so users can pick a score.
Rating Readonly 1 - Read-only displayrating-rating-readonly-1Non-interactive rating for displaying an average score.
Rating Sizes 1 - Larger star sizerating-rating-sizes-1Rating with increased star icon size.
Rating Standard 1 - Interactive starsrating-rating-standard-1Five-star rating with clickable buttons.
Rating With Score - Stars plus numeric scorerating-rating-with-scoreRating shows stars plus explicit numeric score.
Reel Controls 1 - Playback controlsreel-reel-controls-1Reel with play, mute, previous, and next control buttons.
Reel Images 1 - Images onlyreel-reel-images-1Timed image reel without video items.
Reel Overlay 1 - Title overlayreel-reel-overlay-1Reel with header overlay title and description on each item.
Reel Standard 1 - Basic media reelreel-reel-standard-1Vertical reel with image and video items, progress, and navigation.
Relative Time Composition 1 - World clock layoutrelative-time-relative-time-composition-1Composed world clock with labels, dates, and times.
Relative Time Formats 1 - Custom formatsrelative-time-relative-time-formats-1RelativeTime with custom date and time format options.
Relative Time Labels 1 - Zone labelsrelative-time-relative-time-labels-1RelativeTime rows with custom RelativeTimeZoneLabel text.
Relative Time Standard 1 - Single UTC zonerelative-time-relative-time-standard-1RelativeTime showing one UTC clock row.
Relative Time Zones 1 - Multiple time zonesrelative-time-relative-time-zones-1RelativeTime with NYC, London, and Tokyo zones.
Reset Password 1 - Centered reset password cardreset-password1Full-screen new-password form with two fields, a submit button, and a return-to-login link.
Reset Password 2 - Split reset password with imagereset-password2Two-column reset screen with password fields on the left and a full-height photograph on the right.
Reset Password 3 - Minimal reset password stackreset-password3Centered reset screen with a large heading and stacked password fields without a card.
Reset Password 4 - Reset password with rules listreset-password4Muted-panel reset form with two password fields and a checklist of password requirements.
Reset Password 6 - Reset password with rules panelreset-password6Two-column reset card pairing password fields with a dedicated requirements panel.
Resizable Collapsible Sidebar - Collapsible sidebarresizable-resizable-collapsible-sidebarCollapsible panel with a button to collapse and expand the sidebar.
Resizable Horizontal Split - Horizontal splitresizable-resizable-horizontal-splitBasic horizontal ResizablePanelGroup with two equal panels.
Resizable Ide Layout - IDE layoutresizable-resizable-ide-layoutSidebar, editor, and terminal split using nested panel groups.
Resizable Min Max Sizes - Min and max sizesresizable-resizable-min-max-sizesResizablePanel with minSize and maxSize percentage constraints.
Resizable Nested Panels - Nested panelsresizable-resizable-nested-panelsNested horizontal and vertical ResizablePanelGroup composition.
Resizable Three Columns - Three columnsresizable-resizable-three-columnsThree-panel horizontal layout with two ResizableHandle separators.
Resizable Vertical Split - Vertical splitresizable-resizable-vertical-splitVertical ResizablePanelGroup with header and content panels.
Resizable With Scroll Area - With scroll arearesizable-resizable-with-scroll-areaResizable file list and preview panes each using ScrollArea.
Resizable With Visible Handle - With visible handleresizable-resizable-with-visible-handleResizableHandle with the withHandle prop for a visible drag grip.
Resource 1 - Resource detail with sidebar and articleresource1A two-column resource page with a prose article on the right and a sidebar containing download options, whitepaper info, and social sharing links.
Resource 2 - Article detail with social shareresource2An article layout with back navigation, author avatar and byline, rich blog content, social sharing buttons, and a companion illustration.
Resource 3 - Resource detail with breadcrumb and sticky sidebarresource3A two-column document page featuring breadcrumb navigation, a prose article with a hero image, and a sticky sidebar with download button, reviewer info, feature list, and social share icons.
Resources 1 - Resources page with category filter and email formresources1A full resources page with a hero section containing breadcrumb, headline, email form, and featured card, plus a filterable grid of resource cards with load-more pagination.
Resources 2 - Resources grid with featured articles and tab filterresources2A resources section with a large featured article grid, two secondary article cards, and a tabbed list of updates filterable by category.
Resources 3 - Featured resource with article listresources3A resources section with a large featured post card containing an image and CTA button, followed by a list of articles showing date, category, and title in columns.
Resources 4 - Resources list with hover animationsresources4A news and resources list with a left label column and rows displaying linked titles, categories, author avatars, and dates with animated hover effects.
Resources 5 - Course cards with author and statsresources5A stacked course list where each entry shows a badge, title, lesson and video counts, duration, audience, author avatar, image, and a start button.
Reviews 1 - Customer review list with average ratingreviews1A review list with a calculated average rating, star scores, titles, author avatars, dates, and verified-purchase badges for each entry.
Reviews 14 - Reviews with write-review formreviews14Product reviews section with rating summary bars, sort control, review posts with image carousels, and a dialog form to submit new reviews with photos and attribute scores.
Reviews 16 - Filterable reviews with Q&Areviews16Sidebar search and filters plus review cards with media, helpful votes, and accordion Q&A, including sheet filters on mobile and a write-review dialog.
Reviews 18 - Reviews with image gallery and sortingreviews18A review list with sort controls, load more, verified-buyer badges, country labels, and per-review image carousels that open in a lightbox.
Reviews 19 - Product reviews modal with filtersreviews19Full reviews experience inside a large dialog with product preview, rating breakdown, filter checkboxes, searchable sortable reviews, media lightbox, and pagination.
Reviews 2 - Reviews with rating distribution sidebarreviews2A two-column review section with an average score, star-distribution progress bars, and cards that show author avatars, verified badges, and written feedback.
Reviews 22 - Product review cards carouselreviews22Horizontal carousel of review cards pairing customer quotes with product thumbnails, author avatars, and expandable comments on smaller screens.
Reviews 23 - Product review carousel with buyer cardsreviews23A carousel of product reviews that pairs each comment and author avatar with the product image and name, verified-buyer labels, and navigation controls.
Reviews 3 - Photo reviews with helpful votesreviews3A review list with ratings, author avatars, product photos, variant details, helpful-vote counts, and a button to write a new review.
Reviews 4 - Reviews with star-rating filtersreviews4A review grid with an average score, clickable star-distribution bars that filter the list, and cards showing author, date, and written feedback.
Reviews 5 - Sortable review list with rating barsreviews5A review list with an average score, rating-distribution bars, a sort dropdown for helpfulness, date, and rating, verified badges, and a load-more control.
Reviews 6 - Review carousel with product cardsreviews6A customer-review carousel that pairs each comment and rating with the reviewed product's image, name, price, and a link, plus navigation controls.
Reviews 8 - Mixed text and photo review carouselreviews8A review carousel that alternates text quotes and photo cards, each with a rating and author, plus navigation buttons and slide indicators.
Reviews 9 - Product review carousel with imagesreviews9A review carousel of cards that pair product photos with star ratings, comments, authors, and dates, plus previous, next, and slide indicators.
Sandbox Console 1 - With consolesandbox-sandbox-console-1Sandbox tabs that include a console panel for runtime logs.
Sandbox Files 1 - File explorersandbox-sandbox-files-1Multi-file sandbox with a file explorer beside the editor.
Sandbox Preview 1 - Preview focusedsandbox-sandbox-preview-1Sandbox that opens on the preview tab for demo-first docs.
Sandbox Standard 1 - Code and previewsandbox-sandbox-standard-1Sandpack sandbox with code editor and live preview tabs.
Scroll Area Advanced 1 - Both orientationsscroll-area-scroll-area-advanced-1Both Orientations.
Scroll Area Advanced 2 - Dynamic contentscroll-area-scroll-area-advanced-2Dynamic Content.
Scroll Area Advanced 3 - With resize handlescroll-area-scroll-area-advanced-3With ResizableHandle.
Scroll Area Layout 1 - Fixed heightscroll-area-scroll-area-layout-1Fixed Height ScrollArea.
Scroll Area Layout 2 - Scrollable tagsscroll-area-scroll-area-layout-2Scrollable Tags.
Scroll Area Layout 3 - Chat messagesscroll-area-scroll-area-layout-3Chat Messages.
Scroll Area Standard 1 - Basicscroll-area-scroll-area-standard-1Basic ScrollArea.
Scroll Area Standard 2 - Horizontalscroll-area-scroll-area-standard-2Horizontal ScrollArea.
Scrollable Tabslist Basic - Horizontal scrolling tabsscrollable-tabslist-scrollable-tabslist-basicTabsList scrolls horizontally inside ScrollableTabsList.
Select Clearable - Clearableselect-select-clearableControlled select with a button to clear the current value.
Select Compact Toolbar - Compact toolbar selectselect-select-compact-toolbarInline sort select for toolbar and filter bar layouts.
Select Default - Defaultselect-select-defaultDefault shadcn Select with a pre-selected value.
Select Disabled - Disabledselect-select-disabledEntire select control in a disabled state.
Select Empty State - Empty stateselect-select-empty-stateSelect dropdown with a message when no options exist.
Select Full Width - Full width layoutselect-select-full-widthFull-width select inside a Field wrapper.
Select Ghost - Ghost selectselect-select-ghostMinimal ghost-style select without a visible border.
Select Horizontal Field Layout - Horizontal field layoutselect-select-horizontal-field-layoutSelect with label and control on one row.
Select Loading - Loading stateselect-select-loadingSelect that shows skeleton placeholders while options load.
Select Option With Badge - Options with badgeselect-select-option-with-badgeSelect items with trailing badges such as New or Pro.
Select Option With Badge And Description - Badge with descriptionselect-select-option-with-badge-and-descriptionTwo-line select items with a trailing badge beside the title and description.
Select Option With Description - Options with descriptionselect-select-option-with-descriptionTwo-line select items with a title and supporting description.
Select Option With Icon - Select option with iconselect-select-option-with-iconSelect items with Lucide icons beside each option label.
Select Option With Icon And Badge - Icon with badgeselect-select-option-with-icon-and-badgeSelect items with a leading icon, label, and trailing badge tag.
Select Option With Icon And Description - Icon with descriptionselect-select-option-with-icon-and-descriptionSelect items with a leading icon, title, and supporting description line.
Select Option With Rich Item - Rich option rowselect-select-option-with-rich-itemSelect items combining icon, two-line text, and a trailing badge in one row.
Select Option With Status Dot - Status dot optionsselect-select-option-with-status-dotTwo-line select items with a colored status dot, label, and incident detail.
Select Permission Level - Permission levelselect-select-permission-levelAccess level select with icon, role name, and capability description per row.
Select Position Variant - Position variantselect-select-position-variantSelect menu positioned above the trigger with side="top".
Select Read Only - Read-only displayselect-select-read-onlyStatic read-only presentation of a selected value.
Select Region With Latency - Region with latencyselect-select-region-with-latencyDeploy region picker with flag, label, and latency badge per option.
Select Required - Requiredselect-select-requiredRequired select field marked with an asterisk.
Select Scrollable Long List - Scrollable long listselect-select-scrollable-long-listSelect with many options in a scrollable menu.
Select Size Variants - Size variantsselect-select-size-variantsSmall, default, and large select trigger sizes.
Select Timezone - Timezone selectselect-select-timezoneTimezone picker with grouped regional options.
Select With Avatar - Options with avatarselect-select-with-avatarSelect items with user avatars beside each name.
Select With Avatar And Description - Avatar with descriptionselect-select-with-avatar-and-descriptionSelect items with avatar, name, and role or subtitle on a second line.
Select With Background Color - With background colorselect-select-with-background-colorSelect trigger with a muted background fill.
Select With Color Swatch - Color swatch optionsselect-select-with-color-swatchSelect items with color swatches beside each label.
Select With Colored Border And Ring - With colored border and ringselect-select-with-colored-border-and-ringSelect with a custom blue border and focus ring on the trigger.
Select With Create Footer - Create footerselect-select-with-create-footerProject select with a sticky Create new project button below the options.
Select With Default Value - With default valueselect-select-with-default-valueSelect pre-filled with a default selected option.
Select With Description - With descriptionselect-select-with-descriptionSelect with descriptive copy above the control.
Select With Destructive Option - Destructive optionselect-select-with-destructive-optionWorkspace select with a separator and destructive delete action row.
Select With Disabled Options - With disabled optionsselect-select-with-disabled-optionsSelect menu with individual disabled items.
Select With Error - With errorselect-select-with-errorRole select with invalid styling and a validation error message.
Select With Flag - Options with flagselect-select-with-flagSelect items with country flag emoji beside each label.
Select With Helper Text - With helper textselect-select-with-helper-textSelect wrapped in Field with helper text below the control.
Select With Icon - With iconselect-select-with-iconSelect trigger with a GitBranch icon for choosing a git branch.
Select With Inset Label - With inset labelselect-select-with-inset-labelSelect with a small label inside the trigger.
Select With Leading Text - With leading textselect-select-with-leading-textSelect trigger with static leading text before the value.
Select With Option Groups - With option groupsselect-select-with-option-groupsSelect with grouped options and section labels.
Select With Overlapping Label - With overlapping labelselect-select-with-overlapping-labelSelect with a label overlapping the trigger border.
Select With Placeholder - With placeholderselect-select-with-placeholderSelect with placeholder text before a value is chosen.
Select With Prefix And Suffix - With prefix and suffix adornmentselect-select-with-prefix-and-suffixSelect with currency prefix and unit suffix in the trigger.
Select With Quota Progress - Quota progressselect-select-with-quota-progressStorage bucket select with usage text and a Progress bar in each option.
Select With Recommended Option - Recommended optionselect-select-with-recommended-optionPlan select with one highlighted row and a Recommended badge.
Select With Separator - With separatorselect-select-with-separatorGrouped select with separators between sections.
Select With Status - Status selectselect-select-with-statusSelect trigger that displays the choice as a status badge.
Select With Truncated Trigger - Truncated trigger textselect-select-with-truncated-triggerSelect trigger that truncates long selected labels.
Select Workspace Switcher - Workspace switcherselect-select-workspace-switcherOrg picker with logo tile, member count, and plan badge on each option.
Separator Basic 1 - Horizontalseparator-separator-basic-1Horizontal Separator.
Separator Basic 2 - Verticalseparator-separator-basic-2Vertical Separator.
Separator Basic 3 - In navigationseparator-separator-basic-3In Navigation.
Separator Basic 4 - Section dividerseparator-separator-basic-4Section Divider.
Separator Basic 5 - Simple lineseparator-separator-basic-5Simple Line.
Separator Spacing 1 - Tight spacingseparator-separator-spacing-1Tight Spacing.
Separator Spacing 2 - Default spacingseparator-separator-spacing-2Default Spacing.
Separator Spacing 3 - Wide spacingseparator-separator-spacing-3Wide Spacing.
Separator Spacing 4 - With marginsseparator-separator-spacing-4With Margins.
Separator Spacing 5 - Insetseparator-separator-spacing-5Inset Separator.
Separator Styled 1 - Thickseparator-separator-styled-1Thick Separator.
Separator Styled 2 - Dashedseparator-separator-styled-2Dashed Separator.
Separator Styled 3 - Dottedseparator-separator-styled-3Dotted Separator.
Separator Styled 4 - Gradient lineseparator-separator-styled-4Gradient line divider between content sections.
Separator Styled 5 - Double lineseparator-separator-styled-5Double Line.
Separator With Text 1 - With text centerseparator-separator-with-text-1With Text Center.
Separator With Text 2 - With text leftseparator-separator-with-text-2With Text Left.
Separator With Text 3 - With text rightseparator-separator-with-text-3With Text Right.
Service 1 - Service detail page with hero and prose contentservice1A single-column service page with a muted full-width hero heading, an introduction section, and long-form prose content with headings, paragraphs, and a service list.
Service 2 - Service detail page with photo heroservice2A single-column service page with a full-width background photo hero and dark overlay, followed by introduction and prose content sections with headings and a service list.
Service 3 - Service detail page with photo hero and stats gridservice3A service page combining a background-photo hero with an icon, a three-column stats section with tool logos, and long-form prose content with service descriptions.
Service 4 - Service detail page with sidebar statsservice4A service page with a muted hero, two-thirds prose content with icon-labeled services, and a one-third sticky sidebar displaying tool expertise metrics.
Service 5 - Service detail page with expertise and related services sidebarservice5A service page with a two-thirds content column featuring an icon, heading, and prose sections, alongside a sidebar containing tool expertise stats and a related services list with hover effects.
Service 6 - Service detail page with centered layout and sectionsservice6A centered single-column service page with an icon header, three-column expertise grid, prose content with icon-labeled services, and a two-column related services grid.
Service 7 - Service detail page with bordered expertise and related servicesservice7A single-column service page with a circular icon, bordered expertise cards in a three-column grid, icon-labeled prose content, and a bordered two-column related services grid.
Services 1 - Services grid with check listsservices1Four service cards in a two-column grid, each with a title, short description, and a checklist of offerings marked by circular check icons.
Services 10 - Service cards with pricing and deliverablesservices10Four service cards in a two-column grid with icons, descriptions, included items, deliverable badges, pricing, and a bottom call-to-action banner.
Services 11 - Services intro with image cardsservices11A split layout with headline, copy, view-all button, and two portrait photo cards with hover animation and link arrows.
Services 12 - Image card grid with intro panelservices12Five service image cards in a split layout with a left-side heading, description paragraph, and outline button, plus hover opacity animations.
Services 13 - Hero image card with portrait gridservices13Five service cards combining a wide hero card with four portrait cards below, each showing a cover image, white title, and hover animation.
Services 14 - Split layout with square image cardsservices14A two-column split with heading, description, and button on the left, and four square image cards in a 2x2 grid on the right.
Services 15 - Masonry image cards with variable heightsservices15Six service cards in a CSS-columns masonry layout with three height tiers, gradient hover overlays, and a centered view-all button.
Services 16 - Accordion services with images and category badgesservices16A large typographic heading followed by a multi-open accordion where each item expands to show an image, description, and category badges.
Services 18 - Service list with images and dot indicatorsservices18A three-column split with a large title, highlight points, and a button on the left, alongside stacked service rows with thumbnails and dot indicators on the right.
Services 19 - Table layout with cursor-following imageservices19A services table listing six rows with categories and subcategories, where a preview image follows the cursor and updates per hovered row.
Services 20 - Stacked service rows with hatched backgroundsservices20Five full-width service rows with oversized titles, milestone-icon option lists, diagonal hatched backgrounds, and staggered scroll-triggered animations.
Services 21 - Sticky image preview with hover-activated service listservices21A two-column layout with a sticky image preview and description on the left that updates as users hover over large service titles on the right.
Services 3 - Minimal service rows with three-column gridservices3Four service rows in a narrow container, each displaying an icon and title on the left and a list of sub-services on the right, separated by bottom borders.
Services 4 - Bordered service cards with icon and bullet listservices4Four service cards in a two-column grid, each with a circular icon, title, description, and dot-prefixed item list, plus a hover shadow effect.
Services 5 - Muted service cards with included items gridservices5Four service cards in a two-column grid, each with an icon in a bordered container, a title with description, and a two-column included-items list.
Services 6 - Centered icon columns with hover inversionservices6Four services in a four-column grid, each center-aligned with a large circular icon, title, description, and stacked item labels, featuring a background-inverting hover effect.
Services 7 - Horizontal service cards with pill tagsservices7Four stacked horizontal cards, each with a square icon container, a title, description, and a row of rounded pill-shaped tags listing sub-services.
Services 8 - Accordion services with included items and deliverablesservices8Four collapsible accordion items, each with an icon, title, and subtitle in the trigger, expanding to show a description and a two-column grid of items and deliverables.
Services 9 - Service cards with duration and pricingservices9Four bordered service cards in a two-column grid, each showing an icon, title, duration, description, included items, a price, and a Shadcn UI outline button.
Settings Integrations 1 - Integration Grid with Searchsettings-integrations1A searchable integration gallery with category filter popover, compact integration cards showing logos and categories, and filtered results display.
Settings Integrations 2 - Integration List with Statussettings-integrations2A vertical integration list with app logos, descriptions, connected status badges, and help links in a two-column layout with sidebar CTAs.
Settings Integrations 3 - Integration Cards Gridsettings-integrations3A responsive grid of integration cards with large logos, descriptions, connected status badges, and hover arrow indicators for available connections.
Settings Integrations3a - Integration Grid with Status Badgessettings-integrations3aA responsive integration settings grid displaying third-party service cards with connection status badges and hover interactions.
Settings Integrations 4 - Tabbed Integration Categoriessettings-integrations4A settings integrations panel with tabbed navigation to browse services by category, featuring connect/disconnect buttons and status badges.
Settings Integrations 5 - Toggle Switch Integration Listsettings-integrations5A compact integration settings panel with toggle switches for quick enable/disable of connected services.
Settings Integrations 6 - Integration Table with Actionssettings-integrations6A table-based integration management view showing service status, sync times, and action buttons for settings and removal.
Settings Integrations 7 - Integration Cards with Footer Actionssettings-integrations7A full-page integration browser with search, card-based layout featuring category labels and connect buttons in card footers.
Settings Integrations 8 - Sidebar Category Navigationsettings-integrations8A two-column integration browser with category sidebar navigation and scrollable list of integration items.
Settings Integrations 9 - Connected Integrations with Activitysettings-integrations9A management view for active integrations showing connection status, who connected them, and recent activity with dropdown actions.
Settings Members 1 - Members Table with Filterssettings-members1A team members table with search input, role filter popover, invite dialog, and status badges showing active and pending members.
Settings Members 2 - Members List with Avatarssettings-members2A vertical member list with avatars, role badges, dropdown actions, search input, and invite dialog with help link in subheading.
Settings Members 3 - Member Cards Gridsettings-members3A responsive card grid displaying team members with avatars, color-coded role badges, join dates, and dropdown action menus.
Settings Members 4 - Members with Bulk Selectionsettings-members4A compact member list with checkboxes for bulk selection, role count badges, pending status indicators, and bulk remove action button.
Settings Members 5 - Tabbed Members with Invitessettings-members5A tabbed interface separating active members from pending invitations, with online status indicators, last active times, and invite expiration tracking.
Settings Notifications 1 - Simple Checkbox Listsettings-notifications1A minimal notification settings list with checkboxes for each notification type in a single vertical column.
Settings Notifications 2 - Simple Switch Listsettings-notifications2A minimal notification settings list with switch toggles for each notification type in a vertical stack.
Settings Notifications 3 - Grouped Categories with Switchessettings-notifications3A notification settings section with notifications organized into labeled categories, each in a bordered card with switch toggles.
Settings Notifications 4 - Two-Channel Matrix Tablesettings-notifications4A notification settings table with Email and SMS checkbox columns for each notification type in a matrix layout.
Settings Profile 1 - Basic Profile Formsettings-profile1A compact profile settings card with avatar upload, name, username, email, and bio fields.
Settings Profile1a - Profile form with avatar upload and preferencessettings-profile1aA settings profile section with avatar upload, name and email fields, timezone and week-start selectors, disclaimer banner, and save action.
Settings Profile 2 - Profile Form with Social Linkssettings-profile2A comprehensive profile settings form with personal info, work details, and social media links organized in sections.
Settings Profile2a - Centered profile card with photo uploadsettings-profile2aA settings profile layout with centered avatar upload, first and last name inputs, read-only email, and save button inside a bordered card.
Settings Profile 3 - Profile Settings with Cover Imagesettings-profile3A multi-card profile settings layout with cover image upload, avatar, basic info, and regional preferences.
Settings Profile 4 - Full Page Profile Editorsettings-profile4A full-page profile editor with sidebar navigation, sectioned content, and sticky save bar.
Settings Profile 5 - Profile with Live Previewsettings-profile5A two-column profile editor with live preview showing how changes appear to others in real-time.
Settings Profile 6 - Profile Setup Wizardsettings-profile6A multi-step wizard for profile setup with progress indicator, back/next navigation, and review step.
Settings Profile 7 - Compact Inline Edit Profilesettings-profile7A compact profile card with inline editing - click to edit fields, save on enter or blur.
Shader 1 - Raymarched 3D Shadershader1A full-screen shader background with raymarched 3D shapes, rotating scene, configurable color, and smooth volumetric lighting.
Shader 10 - Image Transition Shadershader10A full-screen shader background that cycles between two images with lens distortion and bubble transition, configurable transition and pause duration.
Shader 11 - 3D Torus with Bloomshader11A full-screen 3D background with an instanced torus of 30 metallic slices, blue gradient backdrop, multi-light setup, and bloom post-processing.
Shader 12 - Raymarched Grid Shadershader12A full-screen shader background with a raymarched 3D grid scene, configurable base, accent, and glow colors, vignette, and time-based camera motion.
Shader 13 - Flowing Organic Shadershader13A full-screen shader background with fluid, organic shapes driven by sine and cosine distortion, single configurable color, and time-based animation.
Shader 14 - Noise Pattern with Character Dithershader14A two-pass shader background with simplex noise distortion, flowing organic pattern, and a second pass that renders the result as character-based dither blocks.
Shader 15 - Light Dispersion Shadershader15A full-screen shader background with RGB prism effect, color acts as spectral mask, configurable color and time multiplier.
Shader 16 - Space Invaders Shadershader16A full-screen shader background with falling pixel-art invaders, expanding rings, configurable color, and time multiplier.
Shader 17 - Fluid Reveal Imageshader17A full-screen WebGL background that layers a real-time fluid simulation over a loaded image, driven by pointer movement and a configurable fluid tint color.
Shader 18 - Texture Flame Shadershader18A full-screen fragment shader background using four tiled noise textures, a warm flame-style color ramp, parabolic silhouettes, and adjustable warp and edge controls.
Shader 19 - Refraction Noise Shadershader19A full-screen shader background with glass rod refraction, 3D noise, RGB dispersion, and configurable background and object colors.
Shader 2 - Kaleidoscope Swirl Shadershader2A full-screen shader background with kaleidoscope-style rotating shapes, fractal-like patterns, configurable color, and time-based animation.
Shader 20 - Metaball Glass Shadershader20A full-screen shader background with glass rod refraction, two metaballs, configurable metaball and background colors.
Shader 3 - Mouse-Interactive Glass Shadershader3A full-screen shader background with glass refraction, circular shapes, mouse-following interaction, and configurable color.
Shader 4 - Chromatic Aberration Shadershader4A full-screen shader background with chromatic aberration, procedural organic scene, light streaks, and dark color palette.
Shader 5 - Raymarched Gyroid Sphereshader5A full-screen shader background with raymarched gyroid surface and sphere, neon volumetric lighting, and blue noise dither.
Shader 6 - Dithered Wave Shadershader6A full-screen shader background with cosine wave pattern, Bayer dither, and configurable foreground and background colors.
Shader 7 - Fluid Vector Field Shadershader7A full-screen shader background with fluid simulation, vector field visualization, arrow patterns, mouse interaction, and configurable color.
Shader 8 - Interactive Grid Shadershader8A full-screen shader background with ping-pong buffer, grid-based shapes (squares, crosses, lines), and mouse interaction.
Shader 9 - Glowing Torus with Mouseshader9A full-screen shader background with raymarched 3D torus, glow effect, mouse proximity highlight (red), and dark color palette.
Sheet Details 1 - Product detailssheet-sheet-details-1Product Details Sheet.
Sheet Details 2 - User profile viewsheet-sheet-details-2User Profile View Sheet.
Sheet Details 3 - Order detailssheet-sheet-details-3Order Details Sheet.
Sheet Details 4 - Article previewsheet-sheet-details-4Article Preview Sheet.
Sheet Details 5 - Notification listsheet-sheet-details-5Notification List Sheet.
Sheet Form 1 - Contact formsheet-sheet-form-1Contact Form Sheet.
Sheet Form 2 - User profile editsheet-sheet-form-2User Profile Edit Sheet.
Sheet Form 3 - Search and filtersheet-sheet-form-3Search and Filter Sheet.
Sheet Form 4 - Create new itemsheet-sheet-form-4Create New Item Sheet.
Sheet Form 5 - Multi-step formsheet-sheet-form-5Multi-Step Form Sheet.
Sheet Multi Section 1 - Header, content, and footersheet-sheet-multi-section-1Sheet with Header, Content, and Footer.
Sheet Multi Section 2 - With tabssheet-sheet-multi-section-2Sheet with Tabs.
Sheet Multi Section 3 - Scrollable contentsheet-sheet-multi-section-3Sheet with Scrollable Content.
Sheet Multi Section 4 - Action buttons in footersheet-sheet-multi-section-4Sheet with Action Buttons in Footer.
Sheet Multi Section 5 - Sticky header and footersheet-sheet-multi-section-5Sheet with Sticky Header and Footer.
Sheet Navigation 1 - Mobile menusheet-sheet-navigation-1Mobile Menu Sheet.
Sheet Navigation 2 - Sidebar navigationsheet-sheet-navigation-2Sidebar Navigation Sheet.
Sheet Navigation 3 - Nested navigation menusheet-sheet-navigation-3Nested Navigation Menu Sheet.
Sheet Navigation 4 - Navigation with user profilesheet-sheet-navigation-4Navigation with User Profile Sheet.
Sheet Navigation 5 - Navigation with searchsheet-sheet-navigation-5Navigation with Search Sheet.
Sheet Settings 1 - App preferencessheet-sheet-settings-1App Preferences Sheet.
Sheet Settings 2 - Account settingssheet-sheet-settings-2Account Settings Sheet.
Sheet Settings 3 - Notification preferencessheet-sheet-settings-3Notification Preferences Sheet.
Sheet Settings 4 - Theme settingssheet-sheet-settings-4Theme Settings Sheet.
Sheet Settings 5 - Privacy settingssheet-sheet-settings-5Privacy Settings Sheet.
Sheet Standard 1 - Bottom-slidingsheet-sheet-standard-1Bottom-Sliding Sheet.
Sheet Standard 2 - With title and descriptionsheet-sheet-standard-2Sheet with Title and Description.
Sheet Standard 3 - Left-sidedsheet-sheet-standard-3Left-Sided Sheet.
Sheet Standard 4 - Top-slidingsheet-sheet-standard-4Top-Sliding Sheet.
Shop The Look 1 - Auto-scrolling lookbook with lightboxshop-the-look1Full-bleed lookbook carousel with auto-scroll, PhotoSwipe lightbox, and floating product cards for shopping complete outfits from lifestyle images.
Shop The Look 2 - Outfit builder with variantsshop-the-look2Two-column shop-the-look with a full outfit image, thumbnail carousel, and product cards supporting color, material, and size selects plus stock status.
Shop The Look 3 - Frequently bought together bundleshop-the-look3Bundle builder with a selectable product carousel, discount progress toward a multi-item save offer, and an add-selected-to-cart action.
Shop The Look 4 - Room collections with hover productsshop-the-look4Split layout pairing a lifestyle hero with room collections, each listing products revealed through hover cards in a carousel.
Shop The Look 5 - Creator looks grid with hotspotsshop-the-look5Grid of creator look cards that open a dialog carousel with hotspot-tagged look images and linked product cards.
Shop The Look 6 - Look carousel with product groupsshop-the-look6Look-by-look carousel showing a large outfit image beside a product group list with prices and view actions.
Shopping Cart 1 - Simple page shopping cartshopping-cart1A page shopping cart listing item images, quantities, and line totals with a remove action, overall total, checkout button, and empty state.
Shopping Cart 12 - Sheet cart with suggested productsshopping-cart12A sheet shopping cart pairing suggested products with line items, a free-shipping alert, shipping and total, checkout, and payment-method logos.
Shopping Cart 14 - Sheet cart with product cardsshopping-cart14A sheet shopping cart that grids product cards with quantity controls, a running total, and view-cart plus checkout actions.
Shopping Cart 15 - Page cart with variants and promoshopping-cart15A page shopping cart with color and size variants, quantity and remove controls, a promo-code field, useful links, and an empty-cart state.
Shopping Cart 16 - Sheet cart with discount and suggestionsshopping-cart16A sheet shopping cart with a dark header, suggested products, an applied discount, a shipping spend threshold, and checkout plus view-cart buttons.
Shopping Cart 17 - Basket sheet with promo codeshopping-cart17A basket sheet with a favourites shortcut, free-delivery alert, quantity controls, a promotional-code field, and a checkout total.
Shopping Cart 18 - Popover mini shopping cartshopping-cart18A compact popover shopping cart with item thumbnails, quantity controls, remove actions, a subtotal, checkout button, and empty state.
Shopping Cart 19 - Sheet cart with shipping progressshopping-cart19A sheet shopping cart with a free-shipping progress bar, upsell products, a promo-code field, subtotal, and checkout.
Shopping Cart 2 - Page cart with order summaryshopping-cart2A page shopping cart with quantity controls, item removal, and an order summary showing subtotal, shipping, and total before checkout.
Shopping Cart 20 - Popover cart with express checkoutshopping-cart20A compact popover shopping cart with item thumbnails, quantity controls, a subtotal, checkout, and Apple Pay plus PayPal express options.
Shopping Cart 25 - Sheet cart with order notesshopping-cart25A wide sheet shopping cart with line items, a total card, a collapsible order-notes field, and checkout plus view-cart buttons.
Shopping Cart 26 - Sheet cart with promo offershopping-cart26A sheet shopping cart with line items, a promotional offer, a coupon field, estimated total, and checkout plus view-cart actions.
Shopping Cart 3 - Page cart with promo codeshopping-cart3A page shopping cart with quantity updates, a promo-code field, order summary, and a free-shipping note plus checkout.
Shopping Cart 7 - Dialog cart with product gridshopping-cart7A dialog shopping cart that grids cart items with quantity controls, a running total, view-cart and checkout actions, and an empty state.
Sidebar 1 - Basic Sidebar with Groupssidebar1A simple sidebar with logo header, labeled navigation groups, footer links, and main content area with breadcrumbs and toggle button.
Sidebar 10 - Inset sidebar with search inputsidebar10An inset sidebar with workspace switcher, search field, collapsible project nav, user account footer, and a breadcrumb header.
Sidebar 11 - Right sidebar with search inputsidebar11A right-aligned sidebar with workspace switcher, search field, collapsible groups, user footer, and a header trigger on the trailing edge.
Sidebar 12 - Dual sidebar with metrics panelsidebar12A dual sidebar layout with left app navigation, a right metrics menu of compact labels, and a breadcrumb header between them.
Sidebar 13 - Sidebar with file treesidebar13A sidebar file explorer with a brand header, nested folders and files, chevron expanders, and a path-style breadcrumb in the main header.
Sidebar 14 - Sidebar with slide-out submenusidebar14A sidebar where nested items open a slide-out panel beside the rail instead of expanding inline, with search, workspace switcher, and user footer.
Sidebar 15 - Sidebar with dropdown submenussidebar15A sidebar that opens nested navigation in a dropdown menu under each parent item, with workspace switcher, search input, and user footer.
Sidebar 16 - Sidebar with mega menu overlaysidebar16A sidebar of service categories that opens a full-height mega menu overlay with multi-column section grids, plus workspace switcher and search.
Sidebar 17 - Sidebar with icon tabssidebar17A sidebar with workspace switcher, three icon tabs for files, git branches, and settings, plus a user account footer.
Sidebar 18 - Sidebar with chat channelssidebar18A chat-style sidebar with workspace switcher, text and voice channels, direct messages with status dots, unread badges, and user media controls.
Sidebar 19 - Dual sidebar with members listsidebar19A dual sidebar chat layout with collapsible channel categories on the left, a members list on the right, and a hashed channel title in the header.
Sidebar 2 - Sidebar with Collapsible Submenussidebar2A sidebar with collapsible navigation groups, nested submenu items with chevron indicators, and expandable project sections.
Sidebar 20 - Documentation sidebar with table of contentssidebar20A documentation layout with a left docs tree and search, a right on-this-page outline, and a multi-level breadcrumb in the header.
Sidebar 21 - Sidebar with drill-down navigationsidebar21A sidebar that replaces the main menu with a child list and back control when a parent item is opened, plus logo header and user footer.
Sidebar 3 - Sidebar with Multiple Groupssidebar3A sidebar with multiple labeled navigation groups covering overview, projects, team, and workspace sections with footer utilities.
Sidebar 4 - Sidebar with Collapsible Groupssidebar4A sidebar with collapsible navigation groups that can expand/collapse entire sections, combining group labels with expandable content.
Sidebar 5 - Sidebar with Search Inputsidebar5A sidebar with integrated search input in the header, collapsible navigation groups, and labeled sections for quick filtering.
Sidebar 6 - Sidebar with User Footersidebar6A sidebar with user profile dropdown in the footer showing avatar, name, email, and account/logout options with collapsible navigation.
Sidebar 7 - Sidebar with Workspace Switchersidebar7A sidebar with workspace/organization switcher dropdown in the header, allowing users to switch between different workspaces or teams.
Sidebar 8 - Sidebar Inset Variantsidebar8An inset sidebar variant that appears contained within the page with rounded corners, workspace switcher, user footer, and collapsible groups.
Sidebar 9 - Floating sidebar with search inputsidebar9A floating sidebar with workspace switcher, search field, grouped nav with nested project links, user footer, and a breadcrumb header.
Signup 1 - Centered signup form with confirm passwordsignup1A full-screen centered signup form with a logo, unlabeled email and password fields, a confirm password input, a create account button, and a login link.
Signup 10 - Split signup with full-height imagesignup10A two-column signup with a logo, Google button, email input, continue button, legal links, and a full-height image on large screens.
Signup 2 - Centered signup form with logosignup2A full-screen centered signup form with a logo, email and password inputs, a create account button, and a login link on a muted background.
Signup 3 - Muted panel signup with social loginsignup3A full-screen centered signup form with a logo, labeled email and password fields, a create account button, and Google, GitHub, and Facebook sign-up options.
Signup 4 - Bordered signup card with social loginsignup4A centered signup form with a logo and heading above a bordered card containing labeled fields, a create account button, social provider buttons, and a login link.
Signup 5 - Signup form with muted panel and social buttonssignup5A centered signup form with a logo and heading above a muted panel of labeled fields, a create account button, social sign-up options, and a login link.
Signup 6 - Centered signup form with Google firstsignup6A centered signup card with a logo, a Google sign-up button above a divider, labeled email and password fields including confirm password, and a login link.
Signup 7 - Split signup with product previewsignup7A two-column signup section with Google, email, and enterprise SSO options, legal links, review badges, a product screenshot, and three feature blurbs.
Signup 8 - Split signup with browser previewsignup8A two-column signup with a promotional badge, large headline, Google and email buttons, a no-credit-card note, and a browser window mockup.
Signup 9 - Signup form with Google option and logo carouselsignup9A full-screen centered signup page with a Google sign-up button, email input, continue button, login link, and an auto-scrolling logo carousel at the bottom.
Skeleton Card 1 - Simple card with image and textskeleton-skeleton-card-1Simple Card with Image and Text.
Skeleton Card 2 - Card with avatar and contentskeleton-skeleton-card-2Card with Avatar and Content.
Skeleton Card 3 - Card with badge and tagsskeleton-skeleton-card-3Card with Badge and Tags.
Skeleton Card 4 - Vertical card layoutskeleton-skeleton-card-4Vertical Card Layout.
Skeleton Card 5 - Horizontal card layoutskeleton-skeleton-card-5Horizontal Card Layout.
Skeleton Content 1 - Article previewskeleton-skeleton-content-1Article Preview.
Skeleton Content 2 - Blog postskeleton-skeleton-content-2Blog Post.
Skeleton Content 3 - Comment threadskeleton-skeleton-content-3Comment Thread.
Skeleton Content 4 - Detailed articleskeleton-skeleton-content-4Detailed Article.
Skeleton Content 5 - Content with sidebarskeleton-skeleton-content-5Content with Sidebar.
Skeleton Form 1 - Input fieldsskeleton-skeleton-form-1Input Fields.
Skeleton Form 2 - Form with labelsskeleton-skeleton-form-2Form with Labels.
Skeleton Form 3 - Multi-column formskeleton-skeleton-form-3Multi-column Form.
Skeleton Form 4 - Form with sectionsskeleton-skeleton-form-4Form with Sections.
Skeleton Form 5 - Search formskeleton-skeleton-form-5Search Form.
Skeleton List 1 - Simple list itemsskeleton-skeleton-list-1Simple List Items.
Skeleton List 2 - List with avatarsskeleton-skeleton-list-2List with Avatars.
Skeleton List 3 - List with iconsskeleton-skeleton-list-3List with Icons.
Skeleton List 4 - Multi-line list itemsskeleton-skeleton-list-4Multi-line List Items.
Skeleton List 5 - Hierarchical list itemsskeleton-skeleton-list-5Hierarchical List Items.
Skeleton Profile 1 - User profile headerskeleton-skeleton-profile-1User Profile Header.
Skeleton Profile 2 - Profile cardskeleton-skeleton-profile-2Profile Card.
Skeleton Profile 3 - Profile settings formskeleton-skeleton-profile-3Profile Settings Form.
Skeleton Profile 4 - Profile with statsskeleton-skeleton-profile-4Profile with Stats.
Skeleton Profile 5 - Team member cardskeleton-skeleton-profile-5Team Member Card.
Skeleton Table 1 - Simple table rowsskeleton-skeleton-table-1Simple Table Rows.
Skeleton Table 2 - Table with actionsskeleton-skeleton-table-2Table with Actions.
Skeleton Table 3 - Table with avatarsskeleton-skeleton-table-3Table with Avatars.
Skeleton Table 4 - Expandable rowsskeleton-skeleton-table-4Expandable Rows.
Skeleton Table 5 - Table with paginationskeleton-skeleton-table-5Table with Pagination.
Skills 1 - Sticky tools list with experience badgesskills1A sticky heading column beside a stacked list of tools, each with a logo, category, and years-of-experience badge.
Skills 2 - Two-column tools grid with usageskills2A large heading above a two-column list of tools with logos, categories, hatched backgrounds, and usage percentages.
Slider Interactive 1 - Synced with input fieldslider-slider-interactive-1Synced with Input Field.
Slider Interactive 2 - With increment/decrement buttonsslider-slider-interactive-2With Increment/Decrement Buttons.
Slider Interactive 3 - With preset valuesslider-slider-interactive-3With Preset Values.
Slider Interactive 4 - With reset buttonslider-slider-interactive-4With Reset Button.
Slider Interactive 5 - With live previewslider-slider-interactive-5With Live Preview.
Slider Range 1 - Basic rangeslider-slider-range-1Basic Range Slider.
Slider Range 2 - Price rangeslider-slider-range-2Price Range Slider.
Slider Range 3 - Range with value displayslider-slider-range-3Range with Value Display.
Slider Range 4 - Range with constraintsslider-slider-range-4Range with Constraints.
Slider Range 5 - Percentage rangeslider-slider-range-5Percentage Range.
Slider Settings 1 - Volume controlslider-slider-settings-1Volume Control.
Slider Settings 2 - Brightness controlslider-slider-settings-2Brightness Control.
Slider Settings 3 - Temperature controlslider-slider-settings-3Temperature Control.
Slider Settings 4 - Speed controlslider-slider-settings-4Speed Control.
Slider Standard 1 - Simpleslider-slider-standard-1Simple Slider.
Slider Standard 2 - With labelslider-slider-standard-2Slider with Label.
Slider Standard 3 - With value displayslider-slider-standard-3Slider with Value Display.
Slider Standard 4 - With min/max labelsslider-slider-standard-4Slider with Min/Max Labels.
Slider Standard 5 - With step indicatorsslider-slider-standard-5Slider with Step Indicators.
Slider Styled 1 - Coloredslider-slider-styled-1Colored Slider.
Slider Styled 2 - With tooltipslider-slider-styled-2With Tooltip.
Slider Styled 3 - Large/thickslider-slider-styled-3Large/Thick Slider.
Slider Styled 4 - Minimal styleslider-slider-styled-4Minimal Style.
Slider Styled 5 - With gradient trackslider-slider-styled-5With Gradient Track.
Slider Vertical 1 - Volume control styleslider-slider-vertical-1Volume Control Style.
Slider Vertical 2 - Height selectorslider-slider-vertical-2Height Selector.
Slider Vertical 3 - Vertical with labelsslider-slider-vertical-3Vertical with Labels.
Slider Vertical 4 - Vertical rangeslider-slider-vertical-4Vertical Range.
Slider Vertical 5 - Vertical with indicatorsslider-slider-vertical-5Vertical with Indicators.
Snippet Composition 1 - Install commandsnippet-snippet-composition-1Full install snippet with stable and preview tabs plus dynamic copy button.
Snippet Controlled 1 - Controlled tabssnippet-snippet-controlled-1Snippet with value and onValueChange controlled by external buttons.
Snippet Copy 1 - Copy buttonsnippet-snippet-copy-1Snippet with SnippetCopyButton in the header for clipboard copy.
Snippet Header 1 - Custom headersnippet-snippet-header-1SnippetHeader with a label, tab trigger, and copy button in a custom layout.
Snippet Standard 1 - Single tabsnippet-snippet-standard-1Snippet with one tab showing a package install command in a code block.
Snippet Tabs 1 - Multiple tabssnippet-snippet-tabs-1Snippet with TypeScript, JavaScript, and Python language tabs.
Social Button Apple Default - Apple defaultsocial-button-social-button-apple-defaultApple social button — default style.
Social Button Apple Full - Apple fullsocial-button-social-button-apple-fullApple social button — full style.
Social Button Apple Icon - Apple iconsocial-button-social-button-apple-iconApple social button — icon style.
Social Button Apple Outline - Apple outlinesocial-button-social-button-apple-outlineApple social button — outline style.
Social Button Apple Secondary Outline - Apple secondary-outlinesocial-button-social-button-apple-secondary-outlineApple social button — secondary-outline style.
Social Button Apple Sm - Apple smsocial-button-social-button-apple-smApple social button — sm style.
Social Button Discord Default - Discord defaultsocial-button-social-button-discord-defaultDiscord social button — default style.
Social Button Discord Full - Discord fullsocial-button-social-button-discord-fullDiscord social button — full style.
Social Button Discord Icon - Discord iconsocial-button-social-button-discord-iconDiscord social button — icon style.
Social Button Discord Outline - Discord outlinesocial-button-social-button-discord-outlineDiscord social button — outline style.
Social Button Discord Secondary Outline - Discord secondary-outlinesocial-button-social-button-discord-secondary-outlineDiscord social button — secondary-outline style.
Social Button Discord Sm - Discord smsocial-button-social-button-discord-smDiscord social button — sm style.
Social Button Facebook Default - Facebook defaultsocial-button-social-button-facebook-defaultFacebook social button — default style.
Social Button Facebook Full - Facebook fullsocial-button-social-button-facebook-fullFacebook social button — full style.
Social Button Facebook Icon - Facebook iconsocial-button-social-button-facebook-iconFacebook social button — icon style.
Social Button Facebook Outline - Facebook outlinesocial-button-social-button-facebook-outlineFacebook social button — outline style.
Social Button Facebook Secondary Outline - Facebook secondary-outlinesocial-button-social-button-facebook-secondary-outlineFacebook social button — secondary-outline style.
Social Button Facebook Sm - Facebook smsocial-button-social-button-facebook-smFacebook social button — sm style.
Social Button Github Default - GitHub defaultsocial-button-social-button-github-defaultGitHub social button — default style.
Social Button Github Full - GitHub fullsocial-button-social-button-github-fullGitHub social button — full style.
Social Button Github Icon - GitHub iconsocial-button-social-button-github-iconGitHub social button — icon style.
Social Button Github Outline - GitHub outlinesocial-button-social-button-github-outlineGitHub social button — outline style.
Social Button Github Secondary Outline - GitHub secondary-outlinesocial-button-social-button-github-secondary-outlineGitHub social button — secondary-outline style.
Social Button Github Sm - GitHub smsocial-button-social-button-github-smGitHub social button — sm style.
Social Button Google Default - Google defaultsocial-button-social-button-google-defaultGoogle social button — default style.
Social Button Google Full - Google fullsocial-button-social-button-google-fullGoogle social button — full style.
Social Button Google Icon - Google iconsocial-button-social-button-google-iconGoogle social button — icon style.
Social Button Google Outline - Google outlinesocial-button-social-button-google-outlineGoogle social button — outline style.
Social Button Google Secondary Outline - Google secondary-outlinesocial-button-social-button-google-secondary-outlineGoogle social button — secondary-outline style.
Social Button Google Sm - Google smsocial-button-social-button-google-smGoogle social button — sm style.
Social Button Linkedin Default - LinkedIn defaultsocial-button-social-button-linkedin-defaultLinkedIn social button — default style.
Social Button Linkedin Full - LinkedIn fullsocial-button-social-button-linkedin-fullLinkedIn social button — full style.
Social Button Linkedin Icon - LinkedIn iconsocial-button-social-button-linkedin-iconLinkedIn social button — icon style.
Social Button Linkedin Outline - LinkedIn outlinesocial-button-social-button-linkedin-outlineLinkedIn social button — outline style.
Social Button Linkedin Secondary Outline - LinkedIn secondary-outlinesocial-button-social-button-linkedin-secondary-outlineLinkedIn social button — secondary-outline style.
Social Button Linkedin Sm - LinkedIn smsocial-button-social-button-linkedin-smLinkedIn social button — sm style.
Social Button Microsoft Default - Microsoft defaultsocial-button-social-button-microsoft-defaultMicrosoft social button — default style.
Social Button Microsoft Full - Microsoft fullsocial-button-social-button-microsoft-fullMicrosoft social button — full style.
Social Button Microsoft Icon - Microsoft iconsocial-button-social-button-microsoft-iconMicrosoft social button — icon style.
Social Button Microsoft Outline - Microsoft outlinesocial-button-social-button-microsoft-outlineMicrosoft social button — outline style.
Social Button Microsoft Secondary Outline - Microsoft secondary-outlinesocial-button-social-button-microsoft-secondary-outlineMicrosoft social button — secondary-outline style.
Social Button Microsoft Sm - Microsoft smsocial-button-social-button-microsoft-smMicrosoft social button — sm style.
Social Button Twitter Default - X defaultsocial-button-social-button-twitter-defaultX social button — default style.
Social Button Twitter Full - X fullsocial-button-social-button-twitter-fullX social button — full style.
Social Button Twitter Icon - X iconsocial-button-social-button-twitter-iconX social button — icon style.
Social Button Twitter Outline - X outlinesocial-button-social-button-twitter-outlineX social button — outline style.
Social Button Twitter Secondary Outline - X secondary-outlinesocial-button-social-button-twitter-secondary-outlineX social button — secondary-outline style.
Social Button Twitter Sm - X smsocial-button-social-button-twitter-smX social button — sm style.
Social Media Trending 1 - Video Carousel Social Feedsocial-media-trending1A horizontal carousel of social media post cards with hover-to-play videos, user avatars, usernames, and product links, plus scroll progress and nav buttons.
Social Media Trending 2 - Auto-Scroll Image Carouselsocial-media-trending2An auto-scrolling carousel of social media image cards with avatars and usernames; hover pauses autoplay. Includes title and profile link in header.
Social Media Trending 3 - Featured Profile Image Gridsocial-media-trending3A grid of social media post images with a featured profile section (avatar, username, follower count, CTA) spanning two columns; Instagram icon appears on hover.
Social Media Trending 4 - Vertical Marquee Social Feedsocial-media-trending4A vertical marquee grid of social media post cards with fade masks on top and bottom, featuring multiple columns scrolling at different speeds and directions.
Social Media Trending 5 - Social Grid with Video Cardsocial-media-trending5A social media feed grid with larger image tiles, featured profile section, video card with hover-to-play, and social network icons that appear on hover.
Social Media Trending 6 - UGC gallery with share dialogsocial-media-trending6Hashtag-led social gallery carousel that opens a dialog with image carousel, captions, source links, and social share actions for shoppable user-generated content.
Social Media Trending 7 - Shoppable social video storiessocial-media-trending7Floating video trigger opens a full-screen stories-style dialog with product video, image carousel, ratings, quantity controls, and add-to-cart actions.
Social Media Trending 8 - Instagram-style shoppable mosaicsocial-media-trending8Asymmetric photo mosaic of Instagram-tagged home posts that open a fade carousel dialog with author, caption, and tagged products.
Sonner Content 1 - Toast with descriptionsonner-sonner-content-1Sonner toast with a title and supporting description.
Sonner Content 2 - Toast with custom iconsonner-sonner-content-2Sonner toast with a custom icon and supporting description.
Sonner Content 3 - Toast with custom durationsonner-sonner-content-3Sonner toast that stays visible for a custom duration.
Sonner Content 4 - Toast with multi-line contentsonner-sonner-content-4Success sonner toast with a longer multi-line description.
Sonner Content 5 - Toast with rich HTML contentsonner-sonner-content-5Sonner toast that renders custom React content instead of a title string.
Sonner Content 6 - Toast with close buttonsonner-sonner-content-6Sonner toast with a close button using the closeButton option.
Sonner Content 7 - Persistent toastsonner-sonner-content-7Sonner toast that stays on screen until dismissed with duration Infinity.
Sonner Content 8 - Inverted toastsonner-sonner-content-8Sonner toast that inverts light and dark colors with the invert option.
Sonner Interactive 1 - Toast with action buttonsonner-sonner-interactive-1Sonner toast with an action button for undo or follow-up.
Sonner Interactive 2 - Toast with cancel buttonsonner-sonner-interactive-2Sonner toast with a cancel button to dismiss a pending action.
Sonner Interactive 3 - Toast with action and cancelsonner-sonner-interactive-3Sonner toast with both action and cancel buttons for confirm or abort.
Sonner Interactive 4 - Non-dismissible toastsonner-sonner-interactive-4Sonner toast that cannot be dismissed until it expires.
Sonner Interactive 5 - Programmatic dismisssonner-sonner-interactive-5Dismiss a sonner toast by id or clear the stack with toast.dismiss.
Sonner Interactive 6 - Update toast by IDsonner-sonner-interactive-6Update one sonner toast in place by passing the same id to later toast calls.
Sonner Interactive 7 - Headless custom toastsonner-sonner-interactive-7Headless sonner toast rendered with toast.custom and fully custom markup.
Sonner Interactive 8 - Toast lifecycle callbackssonner-sonner-interactive-8Sonner toast with onDismiss and onAutoClose callbacks after the toast leaves.
Sonner Interactive 9 - Toast with JSX actionsonner-sonner-interactive-9Sonner toast with JSX action and cancel buttons instead of label objects.
Sonner Position 1 - Top left positionsonner-sonner-position-1Sonner toast positioned in the top left of the viewport.
Sonner Position 2 - Top center positionsonner-sonner-position-2Sonner toast positioned at the top center of the viewport.
Sonner Position 3 - Top right positionsonner-sonner-position-3Sonner toast positioned in the top right of the viewport.
Sonner Position 4 - Bottom left positionsonner-sonner-position-4Sonner toast positioned in the bottom left of the viewport.
Sonner Position 5 - Bottom center positionsonner-sonner-position-5Sonner toast positioned at the bottom center of the viewport.
Sonner Position 6 - Bottom right positionsonner-sonner-position-6Sonner toast positioned in the bottom right of the viewport.
Sonner Promise 1 - Basic promise toastsonner-sonner-promise-1Promise toast using the shadcn sonner toast.promise API.
Sonner Promise 2 - Promise toast with datasonner-sonner-promise-2Promise toast that interpolates resolved data into the sonner success message.
Sonner Promise 3 - Promise toast with errorsonner-sonner-promise-3Promise toast that surfaces the rejected error in the sonner message.
Sonner Promise 4 - Loading toastsonner-sonner-promise-4Persistent loading toast using the shadcn sonner toast.loading API.
Sonner Promise 5 - Promise toast with optionssonner-sonner-promise-5Promise toast whose success and error handlers return a toast options object.
Sonner Special 1 - Expanded toast stacksonner-sonner-special-1Expanded sonner stack with closeButton so each toast can be dismissed.
Sonner Standard 1 - Default toastsonner-sonner-standard-1Default sonner toast using the shadcn Sonner component.
Sonner Standard 2 - Success toastsonner-sonner-standard-2Success toast using the shadcn sonner toast.success API.
Sonner Standard 3 - Error toastsonner-sonner-standard-3Error toast using the shadcn sonner toast.error API.
Sonner Standard 4 - Warning toastsonner-sonner-standard-4Warning toast using the shadcn sonner toast.warning API.
Sonner Standard 5 - Info toastsonner-sonner-standard-5Info toast using the shadcn sonner toast.info API.
Sonner Standard 6 - Rich colors toastsonner-sonner-standard-6Typed sonner toasts with richColors enabled on the Toaster.
Spinner Applications 1 - In itemspinner-spinner-applications-1Spinner in Item.
Spinner Applications 2 - In input groupspinner-spinner-applications-2Spinner in Input Group.
Spinner Applications 3 - In empty statespinner-spinner-applications-3Spinner in Empty State.
Spinner Button 1 - Loading buttonspinner-spinner-button-1Loading Button.
Spinner Button 2 - Loading outline buttonspinner-spinner-button-2Loading Outline Button.
Spinner Button 3 - Loading icon buttonspinner-spinner-button-3Loading Icon Button.
Spinner Button 4 - Loading secondary buttonspinner-spinner-button-4Loading Secondary Button.
Spinner Button 5 - Loading small buttonspinner-spinner-button-5Loading Small Button.
Spinner Ellipsis 1 - Ellipsis spinnerspinner-spinner-ellipsis-1Spinner using the bouncing ellipsis variant.
Spinner Inline 1 - Inline with textspinner-spinner-inline-1Inline with Text.
Spinner Inline 2 - Before textspinner-spinner-inline-2Spinner Before Text.
Spinner Inline 3 - After textspinner-spinner-inline-3Spinner After Text.
Spinner Inline 4 - In list itemspinner-spinner-inline-4Spinner in List Item.
Spinner Kibo Ellipsis 1 - Ellipsisspinner-spinner-kibo-ellipsis-1Kibo UI spinner using the ellipsis animation variant with bouncing dots as a compact loading indicator.
Spinner Kibo Pinwheel 1 - Pinwheelspinner-spinner-kibo-pinwheel-1Kibo UI spinner using the pinwheel animation variant as a rotating radial loading indicator in a centered layout.
Spinner Kibo Ring 1 - Ringspinner-spinner-kibo-ring-1Kibo UI spinner using the ring animation variant as a pulsing circular loading indicator in a larger size.
Spinner Kibo Sizes 1 - Size variantsspinner-spinner-kibo-sizes-1Kibo UI throbber spinner at small, medium, and large sizes displayed side by side for comparing scale.
Spinner Kibo Standard 1 - Defaultspinner-spinner-kibo-standard-1Kibo UI spinner with the default animation variant, shown as a standalone loading indicator in a centered layout.
Spinner Kibo Throbber 1 - Throbberspinner-spinner-kibo-throbber-1Kibo UI spinner using the throbber animation variant for a classic rotating loader icon in a centered layout.
Spinner Pinwheel 1 - Pinwheel spinnerspinner-spinner-pinwheel-1Spinner using the pinwheel animation variant.
Spinner Ring 1 - Ring spinnerspinner-spinner-ring-1Spinner using the pulsing ring variant.
Spinner Sizes 1 - Spinner sizesspinner-spinner-sizes-1Multiple Kibo UI spinner sizes side by side.
Spinner Standard 1 - Default spinnerspinner-spinner-standard-1Kibo UI Spinner using the default variant.
Spinner Standard 2 - Smallspinner-spinner-standard-2Small Spinner.
Spinner Standard 3 - Largespinner-spinner-standard-3Large Spinner.
Spinner Standard 4 - Primary colorspinner-spinner-standard-4Primary Color Spinner.
Spinner Standard 5 - Mutedspinner-spinner-standard-5Muted Spinner.
Spinner Throbber 1 - Throbber spinnerspinner-spinner-throbber-1Spinner using the throbber animation variant.
Stats Card 1 - Metric Card with Trendstats-card1A compact metric card displaying a value with trend indicator showing percentage change and direction.
Stats Card 10 - Metric Card with Accent Borderstats-card10A metric card with a colored left border accent and pill badge showing percentage change.
Stats Card 2 - Metric Card with Sparklinestats-card2A metric card with a sparkline area chart showing recent trend data below the main value.
Stats Card 3 - Metric Card with Progressstats-card3A metric card showing progress toward a goal with a progress bar and target value.
Stats Card 4 - Metric Card with Comparisonstats-card4A metric card displaying current and previous period values side by side for easy comparison.
Stats Card 5 - Metric Card with Iconstats-card5A metric card with a colored icon badge in the header alongside the title and value.
Stats Card 6 - Metric Card with Breakdownstats-card6A metric card showing a total value with a breakdown list of contributing segments below.
Stats Card 7 - Metric Card with Donutstats-card7A metric card with a mini donut chart showing percentage completion alongside the value.
Stats Card 8 - Metric Card with Statusstats-card8A metric card with a color-coded status indicator showing healthy, warning, or critical states.
Stats Card 9 - Metric Card with Togglestats-card9A metric card with MRR/ARR toggle to switch between monthly and annual recurring revenue views.
Stats 1 - Centered three-column performance statsstats1A centered heading above three large performance figures, each with a short label above and a supporting phrase below.
Stats 10 - Stats cards with avatars and logosstats10Three linked metric cards in a responsive grid, each displaying an avatar, company logo, large stat number, and short description with hover elevation effects.
Stats 11 - Stats section with gradient background and circle decorationstats11A stats section with a headline, four metrics in a two-column grid, a primary-tinted gradient background, vertical line grid pattern, and a large decorative circle element.
Stats 12 - Split stats with monthly togglestats12A two-column stats section with a heading, chart, and call to action beside a large animated revenue figure that toggles monthly and yearly values.
Stats 13 - Animated competitor bar comparisonstats13A centered heading above four animated comparison bars, with one highlighted column showing a conversions tooltip and percentage.
Stats 14 - Countdown timer with CTAstats14Animated countdown display showing days, hours, minutes, and seconds inside a decorated container with a call-to-action button.
Stats 15 - Year-toggle stats with timelinestats15A heading, two buttons, and four animated figures next to year-range pills that update the numbers and a connecting line.
Stats 16 - Centered stats with line chartstats16A centered heading and pill label above a line chart, followed by three key figures with short descriptions.
Stats 17 - Radial chart with stacked metricsstats17A centered heading above a two-column layout with a radial visitor chart and three stacked key figures.
Stats 18 - Centered stats with radar chartstats18A centered heading and pill label above a radar chart, followed by three key figures with short descriptions.
Stats 19 - Sticky milestones liststats19A sticky milestones label beside a stacked list of large figures, each paired with a supporting paragraph and a bottom border.
Stats 2 - Accent cards with trend arrowsstats2A centered heading above a six-card grid of stats, each pairing a trend icon with a value and a short description.
Stats 22 - Yearly Metrics With Ruler Timelinestats22Animated fiscal-year KPIs above a ruler-style baseline with default and secondary CTAs. Year pills stay in chronological order and use light horizontal motion when selected.
Stats 4 - Platform rating barstats4Inline rating strip showing star scores and platform logos for Apple Store, Play Store, and Trustpilot.
Stats 5 - Three-column metric displaystats5Three bold percentage figures with trend icons and labels, arranged in a row beneath a large heading.
Stats 6 - Left-aligned stats with dual buttonsstats6A left-aligned heading and two call-to-action buttons above a four-column row of large figures with metric labels.
Stats 7 - Weekly stats with progress barsstats7A bordered card of weekly metrics, each with a labeled progress bar, colored trend arrow, and week-over-week comparison.
Stats 8 - Stats grid with heading and linkstats8A heading, description, and linked call to action above a four-column grid of large stat figures with labels.
Stats 9 - Split stats with feature cardsstats9A two-column section with a badge, heading, and three inline metrics beside a four-card feature grid.
Status Custom 1 - Custom status labelstatus-status-custom-1Online status with custom StatusLabel children text.
Status Degraded 1 - Degraded statusstatus-status-degraded-1Degraded status badge for partial outages.
Status Maintenance 1 - Maintenance statusstatus-status-maintenance-1Maintenance status badge for scheduled downtime.
Status Offline 1 - Offline statusstatus-status-offline-1Offline status badge with indicator and default label.
Status Standard 1 - Online statusstatus-status-standard-1Online status badge with indicator and default label.
Stepper Badge 1 - Optional and required badgesstepper-stepper-badge-1Stepper steps annotated with Badge labels for required or optional stages.
Stepper Checkout 1 - Checkout flowstepper-stepper-checkout-1Ecommerce-style checkout stepper with order summary cards per step.
Stepper Completed 1 - Completed stepsstepper-stepper-completed-1Stepper with earlier steps marked completed via the completed prop.
Stepper Content 1 - Step panels onlystepper-stepper-content-1Minimal indicators with richer content panels and a step counter.
Stepper Controlled 1 - Controlled valuestepper-stepper-controlled-1Controlled stepper using value and onValueChange with external step buttons.
Stepper Disabled 1 - Disabled stepsstepper-stepper-disabled-1Stepper with later steps disabled until earlier ones are reached.
Stepper Form 1 - Multi-step formstepper-stepper-form-1Form wizard with per-step field validation and previous/next controls.
Stepper Icons 1 - Custom indicator iconsstepper-stepper-icons-1Stepper indicators that render Lucide icons instead of step numbers.
Stepper Inline 1 - Titles under indicatorsstepper-stepper-inline-1Step titles and descriptions stacked under each indicator in a centered column.
Stepper Labeled 1 - With titlesstepper-stepper-labeled-1Horizontal stepper with a title next to each step indicator.
Stepper Labeled 2 - With titles and descriptionsstepper-stepper-labeled-2Horizontal stepper with titles and supporting descriptions on each step.
Stepper Loading 1 - Loading next stepstepper-stepper-loading-1Next button shows a loading state while an async step transition resolves.
Stepper Loop 1 - Looping navigationstepper-stepper-loop-1Controlled stepper that wraps from the last step back to the first.
Stepper Manual 1 - Manual activationstepper-stepper-manual-1Stepper using activationMode manual so arrow focus does not change the step.
Stepper Nav 1 - Previous and nextstepper-stepper-nav-1Stepper with StepperPrev and StepperNext navigation buttons.
Stepper Noninteractive 1 - Non-interactive progressstepper-stepper-noninteractive-1Read-only stepper using nonInteractive for status or order tracking.
Stepper Onboarding 1 - Icon onboardingstepper-stepper-onboarding-1Onboarding stepper with custom icons and short feature blurbs per step.
Stepper Progress 1 - Synced progress barstepper-stepper-progress-1Stepper with a Progress bar that updates as the active step changes.
Stepper Progress 2 - Segmented progress separatorsstepper-stepper-progress-2Stepper separators styled as thick progress segments between steps.
Stepper Sizes 1 - Compact indicatorsstepper-stepper-sizes-1Stepper with smaller indicators and tighter spacing for dense layouts.
Stepper Standard 1 - Basic horizontalstepper-stepper-standard-1Horizontal stepper with numbered indicators and step content panels.
Stepper Validation 1 - With validationstepper-stepper-validation-1Stepper that blocks forward navigation until the current step fields validate.
Stepper Vertical 1 - Vertical orientationstepper-stepper-vertical-1Vertical stepper with titles, descriptions, and content for each step.
Stepper Vertical 2 - Vertical with navigationstepper-stepper-vertical-2Vertical stepper with content and previous/next controls.
Switch Cards 1 - Settings cardswitch-switch-cards-1Settings Card.
Switch Cards 2 - Feature cardswitch-switch-cards-2Feature Card.
Switch Cards 3 - Settings listswitch-switch-cards-3Settings List.
Switch Cards 4 - In itemswitch-switch-cards-4Switch in Item.
Switch Icons 1 - Theme toggle with iconsswitch-switch-icons-1Theme Toggle with Icons.
Switch Icons 2 - Icon with labelswitch-switch-icons-2Icon with Label.
Switch Icons 3 - Volume toggleswitch-switch-icons-3Volume Toggle.
Switch Labeled 1 - With labelswitch-switch-labeled-1Switch with Label.
Switch Labeled 2 - With on labelswitch-switch-labeled-2Switch with On Label.
Switch Labeled 3 - With state labelsswitch-switch-labeled-3Switch with State Labels.
Switch Labeled 4 - With descriptionswitch-switch-labeled-4Switch with Description.
Switch Square 1 - Squareswitch-switch-square-1Square Switch.
Switch Square 2 - Square with textswitch-switch-square-2Square Switch with Text.
Switch Square 3 - Square with labelswitch-switch-square-3Square Switch with Label.
Switch Square 4 - Square theme toggleswitch-switch-square-4Square Theme Toggle.
Switch Standard 1 - Defaultswitch-switch-standard-1Default Switch.
Switch Standard 2 - Checkedswitch-switch-standard-2Checked Switch.
Switch Standard 3 - Smallswitch-switch-standard-3Small Switch.
Switch Standard 4 - Disabledswitch-switch-standard-4Disabled Switch.
Table Actions 1 - Actions columntable-table-actions-1Static action buttons in the last column.
Table Advanced 1 - With vertical linestable-table-advanced-1Table with Vertical Lines.
Table Advanced 2 - Densetable-table-advanced-2Dense Table.
Table Advanced 3 - Verticaltable-table-advanced-3Vertical Table.
Table Advanced 4 - Compatibilitytable-table-advanced-4Compatibility Table.
Table Badges 1 - Status badgestable-table-badges-1Static table with Badge status cells.
Table Bordered 1 - Fully borderedtable-table-bordered-1Every cell bordered like a spreadsheet grid.
Table Borderless 1 - No outer bordertable-table-borderless-1Table flush on the page without a bordered wrapper.
Table Caption 1 - With captiontable-table-caption-1Table with a TableCaption below the data.
Table Card 1 - Card containertable-table-card-1Table inside a card with title and description.
Table Checkbox 1 - Checkbox columntable-table-checkbox-1Static checkbox column for selectable list markup.
Table Colspan 1 - Grouped headerstable-table-colspan-1Header cells spanning multiple columns.
Table Comparison 1 - Plan comparisontable-table-comparison-1Feature comparison across plan columns.
Table Empty 1 - Empty statetable-table-empty-1Table with header and a single empty-state row.
Table Footer 1 - With footer totalstable-table-footer-1TableFooter row summing numeric columns.
Table Header 1 - Uppercase headerstable-table-header-1Compact uppercase muted header labels.
Table Icons 1 - With iconstable-table-icons-1Leading Lucide icons in the primary column.
Table Metric 1 - Metric summarytable-table-metric-1Compact KPI table with delta annotations.
Table Mono 1 - Monospace cellstable-table-mono-1IDs and hashes in monospace for ops tables.
Table Numeric 1 - Numeric alignmenttable-table-numeric-1Right-aligned tabular numbers for finance.
Table Pinned 1 - Pinned first columntable-table-pinned-1Horizontal scroll with a sticky primary column.
Table Progress 1 - With progresstable-table-progress-1Static progress bars inside table cells.
Table Ranking 1 - Ranking tabletable-table-ranking-1Leaderboard-style ranks with medal emphasis.
Table Rating 1 - With ratingstable-table-rating-1Static star ratings in a reviews table.
Table Rowspan 1 - Row spanstable-table-rowspan-1Category cells spanning multiple rows.
Table Schedule 1 - Schedule gridtable-table-schedule-1Simple weekday schedule / timetable layout.
Table Secondary 1 - Secondary linetable-table-secondary-1Primary label with muted secondary text.
Table Selected 1 - Highlighted rowtable-table-selected-1A row visually marked as selected or active.
Table Spacious 1 - Spacious rowstable-table-spacious-1Extra vertical padding for comfortable reading.
Table Standard 1 - Basictable-table-standard-1Basic Table.
Table Standard 2 - With avatartable-table-standard-2Table with Avatar.
Table Standard 3 - Without dividerstable-table-standard-3Table Without Dividers.
Table Standard 4 - Stripedtable-table-standard-4Striped Table.
Table Status 1 - Status dotstable-table-status-1Colored status dots beside labels.
Table Sticky 1 - Sticky headertable-table-sticky-1Scrollable body with a sticky TableHeader.
Table Team 1 - Team columntable-table-team-1Rows with stacked avatars for shared ownership.
Table Thumbnail 1 - With thumbnailstable-table-thumbnail-1Product rows with small image thumbnails.
Table Truncate 1 - Truncated cellstable-table-truncate-1Long text truncated with ellipsis in fixed widths.
Tabs Advanced 1 - With badge countstabs-tabs-advanced-1Tabs with Badge Counts.
Tabs Advanced 2 - Controlledtabs-tabs-advanced-2Controlled Tabs.
Tabs Advanced 3 - Nestedtabs-tabs-advanced-3Nested Tabs.
Tabs Content 1 - With formstabs-tabs-content-1Tabs with Forms.
Tabs Content 2 - With cardstabs-tabs-content-2Tabs with Cards.
Tabs Content 3 - With tablestabs-tabs-content-3Tabs with Tables.
Tabs Layout 1 - Verticaltabs-tabs-layout-1Vertical Tabs.
Tabs Layout 2 - Full widthtabs-tabs-layout-2Full Width Tabs.
Tabs Layout 3 - Scrollabletabs-tabs-layout-3Scrollable Tabs.
Tabs Standard 1 - Basictabs-tabs-standard-1Basic Tabs.
Tabs Standard 2 - With iconstabs-tabs-standard-2Tabs with Icons.
Tags Composition 1 - Pre-selected tagstags-tags-composition-1Tags trigger pre-populated with multiple TagsValue badges on initial load.
Tags Empty 1 - Empty statetags-tags-empty-1Tags dropdown with TagsEmpty message when search returns no matches.
Tags Groups 1 - Grouped tagstags-tags-groups-1Tags list organized into multiple TagsGroup sections with headings.
Tags Multi 1 - Multi-select tagstags-tags-multi-1Tags with multiple selected values and removable TagsValue badges.
Tags Search 1 - Searchable tagstags-tags-search-1Tags dropdown with TagsInput for filtering the available tag list.
Tags Standard 1 - Single tag selecttags-tags-standard-1Tags component with controlled value and setValue for single selection.
Team 1 - Centered team grid with avatarsteam1Centered team intro with heading and supporting copy above a responsive avatar grid of names and roles.
Team 10 - Experts list grid with join CTAteam10Left intro column with heading, copy, and join button beside a muted multi-column list of compact avatar and role rows.
Team 11 - Team grid with hover bio highlightteam11Bordered team header above a dense member grid that reveals a highlighted bio card on hover for medium screens and up.
Team 12 - Staggered portrait trio with bracket headerteam12Bracket-style meet-the-team header and careers link above three tall staggered portraits with name and designation.
Team 13 - Animated team portraits with mobile carouselteam13Bracket team header with careers link, showing animated portraits in a looping carousel on mobile and a staggered row on desktop.
Team 14 - Split hiring panel with team photo rowteam14A team section with a bordered hiring message and CTA beside portrait photos, shown as a carousel on mobile and a row on desktop.
Team 15 - Split team cards with social buttonsteam15Centered team header with label and split title above cards that pair member copy and social buttons with a square portrait.
Team 16 - Mission panel with full-bleed portrait gridteam16Split team section pairing a mission and collaboration story with CTA against a grid of full-bleed portraits labeled with role and name.
Team 17 - Team portraits with alumni and culture sectionsteam17Portrait team grid followed by alumni and collaborator name lists plus a culture section explaining how the group works.
Team 18 - Categorized team directory with bio popoversteam18Sticky team heading beside categorized member groups with avatar name grids, role badges, and hover popovers for bios and category info.
Team 19 - Corner-framed team profile cardsteam19Team profile card grid with decorative corner frames, role, avatar, bio, previous companies, and optional Twitter or LinkedIn links.
Team 2 - Team grid with social profile linksteam2Centered team intro above a member grid with avatars, roles, and optional GitHub, Twitter, and LinkedIn icon links.
Team 3 - Hover-lift team cards with gradient accentsteam3Centered team section with gradient headline treatment and member cards that lift on hover to reveal avatar glow, role pills, and social links.
Team 36 - Simple team photo gridteam36Team heading above a minimal responsive grid of square photos with names and role labels.
Team 37 - Centered circular avatar rowteam37Centered heading and supporting copy above a four-person row of ringed circular avatars with names and roles.
Team 38 - Founder cards with department badgesteam38Centered intro above three bordered profile cards, each with a circular avatar, role, and department badge.
Team 39 - Hover overlay portrait gridteam39Left-aligned heading above a square portrait grid that reveals each member role on hover.
Team 4 - Team grid with bios and social linksteam4Left-aligned team intro with a badge and copy above a four-column grid of portraits, roles, short bios, and Twitter or GitHub links.
Team 40 - Founding team bio listteam40Uppercase label and heading above stacked founder rows with rounded-square avatars, roles, bios, and separators.
Team 41 - Team grid with hiring cardteam41Centered intro above a three-column card grid of member avatars plus a dashed hiring tile with a roles CTA.
Team 42 - Sticky intro with portrait gridteam42Sticky left copy and stacked avatar preview beside a three-column grid of square member portraits.
Team 43 - Inverted remote crew gridteam43Inverted full-width section with a centered label, heading, and six circular avatars of a remote crew.
Team 44 - Team cards with contact linksteam44Centered intro above four profile cards with circular avatars and website, social, and email icon links.
Team 45 - Filterable department team gridteam45Centered heading above department tabs that filter a card grid of circular avatars by team without collapsing the section.
Team 46 - Featured founder with supporting teamteam46Centered intro above a large founder portrait card with bio and tags, plus a row of supporting avatar cards.
Team 47 - Masonry team portrait columnsteam47Left-aligned label and heading above a multi-column masonry of portrait cards with mixed square and tall crops.
Team 48 - Team directory by departmentteam48Heading above department sections with a count, divider, and compact rows of circular avatars and roles.
Team 49 - Team directory list with avatarsteam49Label and heading above a list of people with circular avatars, roles, and join years, divided by hairlines.
Team 5 - Team cards with expertise badges and careers CTAteam5Centered team intro with careers button above member cards showing avatar, department badge, bio, expertise tags, and a bottom careers CTA.
Team 50 - Distributed team location cardsteam50Heading and copy above a card grid of members with circular avatars plus location and timezone badges.
Team 52 - Team member card carouselteam52Heading with previous and next controls above a three-card portrait window that slides between people, with bios and paging dots.
Team 53 - Founder quote beside team gridteam53Sticky founder quote with a circular avatar beside a heading and square portrait grid of the rest of the team.
Team 55 - Editorial team portrait cardsteam55Serif heading above two-column cards that pair a tall portrait with name, role, bio, and a beat pill.
Team 6 - Compact team cards with department badgesteam6Centered team intro and careers CTA above a dense grid of bordered member cards with avatar, role, and department badge.
Team 7 - Portrait grid with names and rolesteam7Left-aligned team heading above a dense portrait grid showing each person's photo, name, and role.
Team 8 - Team carousel with experience calloutsteam8Left-aligned headline and copy beside a member carousel of bordered cards with photo, role, separator, and years of experience.
Team 9 - Filterable team grid with tabs and searchteam9Team directory with category tabs, name or role search, and a responsive card grid showing photo, role, and years of experience.
Testimonial 1 - Staggered column testimonial gridtestimonial1Centered heading with eight testimonial cards in a staggered multi-column layout, each showing a quote, avatar, name, and role.
Testimonial 10 - Single centered quotetestimonial10One large testimonial quote centered on the page with an avatar, name, and role beneath it.
Testimonial 11 - Masonry testimonial grid with ratingstestimonial11Multi-column testimonial cards over a gradient background, paired with a heading, description, and star-rated platform logos.
Testimonial 12 - Testimonial carousel with statstestimonial12Carousel of testimonial slides combining a portrait image, blockquote, company logo, and two highlighted stat figures.
Testimonial 13 - Centered quote with stacked avatarstestimonial13A single centered quote on an accent background, topped by a pill of overlapping avatars and a short trust label.
Testimonial 14 - Testimonial carousel with dot navigationtestimonial14Full-width carousel cycling through centered quotes with avatars, names, and clickable dot indicators below.
Testimonial 15 - Split membership pitch with quote stacktestimonial15A two-column section with a headline, membership button, and company logos beside a stack of four avatar quotes.
Testimonial 16 - Expandable tweet-style testimonialstestimonial16Two-column layout with a heading on the left and a list of expandable tweet-style testimonial entries on the right.
Testimonial 17 - Logo quotes with mobile carouseltestimonial17A section heading beside three company-logo testimonial cards, shown as a dotted carousel on small screens and a static grid on large ones.
Testimonial 18 - Featured quote with star ratingtestimonial18A centered heading with a star-rating line and a single featured quote card showing amber stars, a large quote, supporting text, and an author avatar.
Testimonial 19 - Auto-scrolling testimonial card rowtestimonial19A centered heading and supporting line above an auto-scrolling carousel of testimonial cards with avatars, five-star ratings, and quoted reviews, faded at both edges.
Testimonial 2 - Inline avatar CTA headlinetestimonial2Large centered headline with overlapping avatars woven into the text and a primary action button below.
Testimonial 20 - Dashed two-column quote pairtestimonial20A two-column testimonial pair inside a dashed frame, each side showing a quote with a bolded phrase, an avatar, and a name, with sparkle icons at the corners.
Testimonial 21 - Expert quotes with company logostestimonial21A bordered header with a badge and large heading above a three-column grid of cards, each with a company logo, italic quote, and author photo.
Testimonial 23 - Masonry testimonial cards with badgetestimonial23Masonry grid of social-style testimonial cards with avatars, verified badges, and dates, beneath a centered heading and badge label.
Testimonial 24 - Masonry star-rated quotes with fadetestimonial24A centered heading and description above a masonry wall of star-rated quote cards with avatars, fading into the page background at the bottom.
Testimonial 25 - Photo testimonial carousel with stories linktestimonial25A left-aligned heading, supporting copy, and customer-stories button above a looping carousel of portrait cards with quotes, names, roles, and company lines.
Testimonial 26 - Quote carousel with dot indicatorstestimonial26Draggable testimonial carousel showing large blockquotes with company logos, author names, and circular dot navigation.
Testimonial 27 - Quotes with case study metricstestimonial27A heading and description above two quote cards with avatars and company logos, plus three square case-study tiles showing a large stat and title.
Testimonial 28 - Dashed-border testimonial carouseltestimonial28Carousel of testimonial slides inside dashed-line cards with corner plus marks, navigation arrows, and a decorative line between controls.
Testimonial 29 - Centered autoplay testimonial slidertestimonial29A large centered heading above an autoplay slider that shows one framed avatar, name, role, and oversized quote at a time, with pill indicators.
Testimonial 3 - Centered quote with company wordmarktestimonial3A single centered testimonial quote framed by top and bottom borders, with a company wordmark and author name beneath it.
Testimonial 30 - Auto-rotating accordion testimonialstestimonial30An auto-rotating testimonial section with accordion items, company logos, avatars, outcome metrics, progress bars, and a call-to-action button.
Testimonial 31 - Testimonial Carousel with Photo Cardstestimonial31A testimonial section with heading, description, CTA button, and a horizontal carousel of photo cards featuring quotes and author info.
Testimonial 33 - Bento featured testimonial gridtestimonial33A testimonial section with a centered headline and a responsive grid where one large quote spans two columns and rows beside two stacked accent cards.
Testimonial 34 - Image Case Studies With Quote Cardstestimonial34Puts three case-study cards with a top image, stat, and title above a two-column testimonial section with left-accent quotes and shadcn/ui avatars, built with Shadcn UI.
Testimonial 35 - Logo-First Testimonials And Case Listtestimonial35Left-aligned intro, two testimonial cards with company logo on top and author below, and a single bordered list of case-study rows with thumbnails, stats, and titles, built with Shadcn UI.
Testimonial 36 - Split Copy And Stacked Case Studiestestimonial36A two-column layout with heading, description, and testimonial cards on the left and a bordered list of case-study rows (thumbnail, metric, title) on the right, built with Shadcn UI.
Testimonial 37 - Inverted Testimonials And Case Striptestimonial37A rounded foreground-on-background band containing testimonial cards and a three-column case-study row with high-contrast type, built with Shadcn UI avatars and the testimonial-case-studies shape.
Testimonial 38 - Divided List And Metric Blockstestimonial38A narrow centered section with a bordered, divided list for testimonials and a simple three-column case-study row with border-only tiles and tabular numbers, built with Shadcn UI.
Testimonial 39 - Snap Scroll Quotes And Image Case Rowstestimonial39Testimonials in a horizontal snap scroll on small screens and a two-column grid on desktop, with case studies as image-plus-content rows, built with Shadcn UI and the testimonial-case-studies model.
Testimonial 4 - Featured quote with supporting cardstestimonial4A large photo beside a featured quote card, followed by three smaller testimonial cards with avatars, names, and roles.
Testimonial 40 - Muted Surface With Portrait Case Cardstestimonial40A muted full-width background with elevated testimonial cards and three tall case-study cards using background photos and a top gradient for legible light text, built with Shadcn UI and testimonial-case-studies content.
Testimonial 41 - Centered Testimonial Carousel with Faded Edgestestimonial41A testimonial carousel showing three photo cards at a time with masked edges and centered navigation, featuring large portrait photos, star ratings, and author details.
Testimonial 42 - Left Aligned Carousel With Four Columnstestimonial42A testimonial carousel with left-aligned heading and navigation, four photo cards visible on large screens, square portraits, and faded edge masking.
Testimonial 6 - Testimonial carousel with arrow controlstestimonial6A heading above a carousel of bordered quote cards with avatars and previous and next controls, revealing one to three cards at a time.
Testimonial 7 - Dual auto-scrolling testimonial rowstestimonial7A heading and supporting line above two looping rows of testimonial cards that scroll in opposite directions, each with an avatar, name, role, and quote.
Testimonial 8 - Masonry testimonial wall with fadetestimonial8A heading and supporting line above a masonry wall of quote cards that fades out toward the bottom, each with an avatar, name, and role.
Testimonial 9 - Masonry quotes with source iconstestimonial9A heading and supporting line above a responsive masonry of testimonial cards with avatars and optional source icons.
Textarea Form 1 - Requiredtextarea-textarea-form-1Required Textarea.
Textarea Form 2 - With helper texttextarea-textarea-form-2Textarea with Helper Text.
Textarea Form 3 - With errortextarea-textarea-form-3Textarea with Error.
Textarea Form 4 - With hinttextarea-textarea-form-4Textarea with Hint.
Textarea Form 5 - With character counttextarea-textarea-form-5Textarea with Character Count.
Textarea Labeled 1 - With labeltextarea-textarea-labeled-1Textarea with Label.
Textarea Labeled 2 - With descriptiontextarea-textarea-labeled-2Textarea with Description.
Textarea Labeled 3 - With floating labeltextarea-textarea-labeled-3Textarea with Floating Label.
Textarea Labeled 4 - With inline labeltextarea-textarea-labeled-4Textarea with Inline Label.
Textarea Standard 1 - Simpletextarea-textarea-standard-1Simple Textarea.
Textarea Standard 2 - Disabledtextarea-textarea-standard-2Disabled Textarea.
Textarea Standard 3 - Read-onlytextarea-textarea-standard-3Read-only Textarea.
Textarea Standard 4 - Shorttextarea-textarea-standard-4Short Textarea.
Theme Switcher Composition 1 - Settings rowtheme-switcher-theme-switcher-composition-1ThemeSwitcher composed in a labeled settings row.
Theme Switcher Controlled 1 - Controlled switchertheme-switcher-theme-switcher-controlled-1ThemeSwitcher controlled with React state.
Theme Switcher Dark 1 - Dark defaulttheme-switcher-theme-switcher-dark-1ThemeSwitcher with defaultValue set to dark.
Theme Switcher Light 1 - Light defaulttheme-switcher-theme-switcher-light-1ThemeSwitcher with defaultValue set to light.
Theme Switcher Standard 1 - System defaulttheme-switcher-theme-switcher-standard-1ThemeSwitcher with default system selection.
Theme Toggle Icon 1 - Icon toggle 1theme-toggle-theme-toggle-icon-1Theme toggle icon button with outline variant.
Theme Toggle Icon 10 - Icon toggle 10theme-toggle-theme-toggle-icon-10Theme toggle icon button with default variant.
Theme Toggle Icon 2 - Icon toggle 2theme-toggle-theme-toggle-icon-2Theme toggle icon button with default variant.
Theme Toggle Icon 3 - Icon toggle 3theme-toggle-theme-toggle-icon-3Theme toggle icon button with ghost variant.
Theme Toggle Icon 4 - Icon toggle 4theme-toggle-theme-toggle-icon-4Theme toggle icon button with outline variant.
Theme Toggle Icon 5 - Icon toggle 5theme-toggle-theme-toggle-icon-5Theme toggle icon button with ghost variant.
Theme Toggle Icon 6 - Icon toggle 6theme-toggle-theme-toggle-icon-6Theme toggle icon button with outline variant.
Theme Toggle Icon 7 - Icon toggle 7theme-toggle-theme-toggle-icon-7Theme toggle icon button with default variant.
Theme Toggle Icon 8 - Icon toggle 8theme-toggle-theme-toggle-icon-8Theme toggle icon button with ghost variant.
Theme Toggle Icon 9 - Icon toggle 9theme-toggle-theme-toggle-icon-9Theme toggle icon button with outline variant.
Theme Toggle Labeled 1 - Labeled toggle 1theme-toggle-theme-toggle-labeled-1Theme toggle with visible label and outline variant.
Theme Toggle Labeled 2 - Labeled toggle 2theme-toggle-theme-toggle-labeled-2Theme toggle with visible label and default variant.
Theme Toggle Labeled 3 - Labeled toggle 3theme-toggle-theme-toggle-labeled-3Theme toggle with visible label and ghost variant.
Theme Toggle Labeled 4 - Labeled toggle 4theme-toggle-theme-toggle-labeled-4Theme toggle with visible label and outline variant.
Theme Toggle Labeled 5 - Labeled toggle 5theme-toggle-theme-toggle-labeled-5Theme toggle with visible label and default variant.
Theme Toggle Labeled 6 - Labeled toggle 6theme-toggle-theme-toggle-labeled-6Theme toggle with visible label and ghost variant.
Theme Toggle Labeled 7 - Labeled toggle 7theme-toggle-theme-toggle-labeled-7Theme toggle with visible label and outline variant.
Theme Toggle Labeled 8 - Labeled toggle 8theme-toggle-theme-toggle-labeled-8Theme toggle with visible label and default variant.
Theme Toggle Outline 1 - Outline toggle 1theme-toggle-theme-toggle-outline-1Outline theme toggle with optional styling.
Theme Toggle Outline 10 - Outline toggle 10theme-toggle-theme-toggle-outline-10Outline theme toggle with optional styling.
Theme Toggle Outline 2 - Outline toggle 2theme-toggle-theme-toggle-outline-2Outline theme toggle with optional styling.
Theme Toggle Outline 3 - Outline toggle 3theme-toggle-theme-toggle-outline-3Outline theme toggle with optional styling.
Theme Toggle Outline 4 - Outline toggle 4theme-toggle-theme-toggle-outline-4Outline theme toggle with optional styling.
Theme Toggle Outline 5 - Outline toggle 5theme-toggle-theme-toggle-outline-5Outline theme toggle with optional styling.
Theme Toggle Outline 6 - Outline toggle 6theme-toggle-theme-toggle-outline-6Outline theme toggle with optional styling.
Theme Toggle Outline 7 - Outline toggle 7theme-toggle-theme-toggle-outline-7Outline theme toggle with optional styling.
Theme Toggle Outline 8 - Outline toggle 8theme-toggle-theme-toggle-outline-8Outline theme toggle with optional styling.
Theme Toggle Outline 9 - Outline toggle 9theme-toggle-theme-toggle-outline-9Outline theme toggle with optional styling.
Ticker Change 1 - Price changeticker-ticker-change-1Ticker with absolute and percent price change indicators.
Ticker Flash 1 - Flash on price changeticker-ticker-flash-1Ticker that briefly highlights green or red when the price moves.
Ticker Icon 1 - With iconticker-ticker-icon-1Ticker including a leading icon avatar for the instrument.
Ticker Live 1 - Live price updatesticker-ticker-live-1Ticker that periodically updates price and change values.
Ticker Locale 1 - Euro localeticker-ticker-locale-1Ticker formatted with EUR currency and a non-US locale.
Ticker Marquee 1 - Scrolling ticker tapeticker-ticker-marquee-1Horizontal marquee of ticker chips for a continuous market tape.
Ticker Standard 1 - Symbol and priceticker-ticker-standard-1Ticker button with symbol and formatted price.
Ticker Watchlist 1 - Animated watchlistticker-ticker-watchlist-1Stacked tickers with icons and live price movement per symbol.
Timeline 1 - Centered three-step process timelinetimeline1A centered three-step process timeline with circular outlined icons, headings, monospace supporting copy, and dashed vertical connectors between each step.
Timeline 10 - Horizontal four-phase progress timelinetimeline10A four-phase project timeline with dates, titles, and descriptions, plus an animated progress line that fills through to the current phase.
Timeline 11 - Horizontal phase timeline with progresstimeline11Four-column timeline of project phases with icons, dates, and an animated progress bar highlighting the current phase.
Timeline 12 - Tabbed phase timeline with imagestimeline12Four-tab timeline where each tab reveals a phase with a date, heading, description, download button, and an animated image card.
Timeline 13 - Horizontal product launch timelinetimeline13A three-phase product launch timeline with numbered steps, progress bars, duration estimates, an animated indicator, and a request-a-demo button.
Timeline 14 - Sticky-scroll milestone timelinetimeline14A scroll timeline of company milestones with images and copy, a sticky year indicator, and the active entry highlighted as you move through the list.
Timeline 19 - Vertical Phase Timelinetimeline19A vertical timeline with four project phases, dot markers, and an animated progress line showing current completion status.
Timeline 2 - Sticky image timeline with scroll-synced stepstimeline2A two-column timeline with a page heading, scrollable step copy on the left, and a sticky image on the right that fades as each step reaches the viewport.
Timeline 20 - Vertical Icon Phase Timelinetimeline20A vertical timeline with four icon-marked phases, dates, titles, descriptions, and an animated progress indicator along the left track.
Timeline 3 - Sticky intro with stacked milestone cardstimeline3A two-column timeline with a sticky heading, supporting copy, and two buttons on the left, plus stacked image cards for company milestones on the right.
Timeline 4 - Alternating vertical timeline with scroll progresstimeline4Vertical timeline with alternating text and image blocks, a scroll-driven progress bar, icon badges, and diagonal pattern borders.
Timeline 5 - Sticky heading with scrollable cardstimeline5Two-column layout with a sticky heading on the left and numbered feature cards that scroll independently on the right.
Timeline 6 - Sticky headline with icon-led step listtimeline6A two-column timeline with a sticky multi-line headline on the left and a vertical list of six icon-led steps with titles and descriptions on the right.
Timeline 7 - Interactive stepper with progress bartimeline7A centered interactive stepper with a four-step progress bar, an image and description for the current step, and previous and next buttons.
Timeline 8 - Vertical changelog timeline with date badgestimeline8A centered vertical changelog timeline with a connecting line, date badges, and bullet lists of product updates with bold, italic, and underlined phrases.
Timeline 9 - Vertical dot timelinetimeline9Vertical timeline with a left-aligned separator, filled dot markers, and card-wrapped entries showing dates, titles, and prose content.
Todo 1 - Simple checkbox todo listtodo1A simple todo list with a heading, task titles, and checkboxes that toggle completion and fade completed items.
Todo 10 - Full task manager with subtaskstodo10A task manager for organizing items by due date, project, and priority, with subtasks, drag-and-drop, filters, starring, and add, edit, and delete actions.
Todo 2 - Drag-and-drop todo listtodo2A todo list with grip handles for drag-and-drop reordering, checkboxes to toggle completion, and keyboard-accessible sort controls.
Todo 3 - Todo list with completed sectiontodo3A drag-and-drop todo list that splits active tasks from a collapsible completed section, with checkboxes and animation when items move.
Todo 4 - Todo list with add-task formtodo4A drag-and-drop todo list that lets users add tasks from an inline input, cancel creation, reorder items, and toggle completion.
Todo 5 - Todo list with edit and deletetodo5A drag-and-drop todo list for creating, reordering, editing, and deleting tasks, with a dropdown of actions and a delete confirmation dialog.
Todo 6 - Todo list with priority filterstodo6A drag-and-drop todo list with priority badges, starred items, filter and sort dropdowns, and controls to add and complete tasks.
Todo 7 - Todo list with dates and projectstodo7A task list for creating items with due dates, priorities, reminders, and project tags, plus drag-and-drop reordering, filtering, and sorting.
Todo 8 - Todo list with expandable subtaskstodo8A drag-and-drop todo list where tasks expand to show nested subtasks, progress, checkboxes, and a field to add new subtasks.
Todo 9 - Todo list with search and tagstodo9A drag-and-drop todo list with real-time search, per-task tags, tag filters, and controls to add or remove tags on each item.
Toggle Group Sizes 1 - Smalltoggle-group-toggle-group-sizes-1Small Toggle Group.
Toggle Group Sizes 2 - Default sizetoggle-group-toggle-group-sizes-2Default Size Toggle Group.
Toggle Group Sizes 3 - Largetoggle-group-toggle-group-sizes-3Large Toggle Group.
Toggle Group Standard 1 - Defaulttoggle-group-toggle-group-standard-1Default Toggle Group.
Toggle Group Standard 2 - Outlinetoggle-group-toggle-group-standard-2Outline Toggle Group.
Toggle Group Standard 3 - Single selectiontoggle-group-toggle-group-standard-3Single Selection Toggle Group.
Toggle Group Standard 4 - Disabledtoggle-group-toggle-group-standard-4Disabled Toggle Group.
Toggle Sizes 1 - Smalltoggle-toggle-sizes-1Small Toggle.
Toggle Sizes 2 - Default sizetoggle-toggle-sizes-2Default Size Toggle.
Toggle Sizes 3 - Largetoggle-toggle-sizes-3Large Toggle.
Toggle Standard 1 - Defaulttoggle-toggle-standard-1Default Toggle.
Toggle Standard 2 - Outlinetoggle-toggle-standard-2Outline Toggle.
Toggle Standard 3 - Disabledtoggle-toggle-standard-3Disabled Toggle.
Toggle Standard 4 - With texttoggle-toggle-standard-4Toggle with Text.
Tooltip Content 1 - With title and descriptiontooltip-tooltip-content-1Tooltip with Title and Description.
Tooltip Content 2 - With icontooltip-tooltip-content-2Tooltip with Icon.
Tooltip Content 3 - With keyboard shortcuttooltip-tooltip-content-3Tooltip with Keyboard Shortcut.
Tooltip Content 4 - With imagetooltip-tooltip-content-4Tooltip with Image.
Tooltip Standard 1 - Simpletooltip-tooltip-standard-1Simple Tooltip.
Tooltip Standard 2 - Positionstooltip-tooltip-standard-2Tooltip Positions.
Tooltip Standard 3 - With longer texttooltip-tooltip-standard-3Tooltip with Longer Text.
Tooltip Standard 4 - On icontooltip-tooltip-standard-4Tooltip on Icon.
Tree Expanded 1 - Default expandedtree-tree-expanded-1Tree with defaultExpandedIds preset to open specific folders on load.
Tree Lines 1 - With linestree-tree-lines-1File tree with connector lines enabled via showLines.
Tree Multi 1 - Multi-selecttree-tree-multi-1Tree with multiSelect enabled for choosing several nodes with Ctrl or Cmd.
Tree No Icons 1 - Without iconstree-tree-no-icons-1File tree with folder and file icons hidden using showIcons false.
Tree Selection 1 - Single selectiontree-tree-selection-1Selectable tree where one node can be highlighted at a time.
Tree Standard 1 - Standard treetree-tree-standard-1Basic nested folder and file tree with expand and collapse.
Trust Strip 1 - Icon grid of store guaranteestrust-strip1A four-column strip of trust items, each with an icon, title, and short description covering shipping, returns, payment, and ratings.
Trust Strip 2 - Ratings strip with press logostrust-strip2A trust strip with star rating, review count, customer total, and an as-seen-in row of press names.
Trust Strip 3 - Certification pills and guaranteestrust-strip3A strip of certification badges with icons plus a row of guarantee labels such as money-back, authenticity, and secure checkout.
Trust Strip 4 - Rating strip with seller badgetrust-strip4A compact trust bar with star rating, verified review count, shipping and support icons, and a verified seller badge.
Two Factor 1 - Centered two factor codetwo-factor1Full-screen second-step card with a six-digit authenticator input and a continue button.
Two Factor 2 - Split two factor with imagetwo-factor2Two-column second-step screen with a six-digit code form and a full-height photograph.
Two Factor 5 - Two factor with QR pairingtwo-factor5Two-column pairing screen with a scannable authenticator QR code on one side and a six-digit code form on the other.
Two Factor 6 - Two factor recovery codestwo-factor6Second-step panel that shows a grid of one-time recovery codes with a download action.
User Profile 1 - Basic Profile Carduser-profile1A centered profile card with avatar, name, role, bio, and action buttons for messaging and following.
User Profile 10 - Portrait Profile Carduser-profile10A profile card with large portrait image, verification badge, and follow button.
User Profile 11 - Full Image Profile Carduser-profile11A profile card with full-bleed background image and overlay text.
User Profile 12 - Social Profile Carduser-profile12A social media style profile card with cover image, avatar, bio, and engagement stats.
User Profile 13 - Freelancer Profile Carduser-profile13A freelancer profile card with skills, rating, client count, and hourly rate.
User Profile 14 - Full-Bleed Freelancer Carduser-profile14A dramatic freelancer card with full-bleed background image and gradient overlay.
User Profile 2 - Profile with Statsuser-profile2A horizontal profile layout with avatar, name, role, social links, follower stats, and action buttons.
User Profile 3 - Full Profile with Coveruser-profile3A detailed profile card with cover image, overlapping avatar, bio, location, join date, social links, stats, and skill badges.
User Profile 4 - Compact Inline Profileuser-profile4A small pill-shaped profile chip with avatar, name, role, and status indicator for inline use.
User Profile 5 - Team Member Carduser-profile5A compact team member card with gradient header, overlapping avatar, and contact action buttons.
User Profile 6 - Profile with Tabsuser-profile6A profile card with tabbed sections for About, Experience, and Projects content.
User Profile 9 - Profile Dashboarduser-profile9A full-width profile dashboard with cover image, stats cards showing metrics with change indicators.
Verify Email 1 - Centered verify email codeverify-email1Full-screen verification card with a six-digit code input, the destination email, and a resend link.
Verify Email 2 - Split verify email with imageverify-email2Two-column verification screen with a six-digit code form and a full-height photograph.
Verify Email 3 - Verify email inbox promptverify-email3Centered confirmation screen with a mail icon, the destination address, and an open-inbox action.
Verify Email 4 - Muted panel verify emailverify-email4Verification form in a muted panel with the destination email in a compact badge and a six-digit code input.
Verify Email 5 - Branded column verify emailverify-email5Split verification screen with a dark branding column and a six-digit code form.
Verify Email 6 - Verify email with inbox shortcutsverify-email6Confirmation card with Gmail and Outlook shortcuts plus a resend control under the destination email.
Video Player Autoplay 1 - Muted autoplay loopvideo-player-video-player-autoplay-1Autoplaying muted loop for marketing and hero embeds.
Video Player Full 1 - Full control barvideo-player-video-player-full-1Complete media-chrome bar with seek, duration, mute, and volume.
Video Player Fullscreen 1 - Fullscreen controlvideo-player-video-player-fullscreen-1Video player with poster image and fullscreen button.
Video Player Poster 1 - Poster imagevideo-player-video-player-poster-1Video player content with a poster frame before playback.
Video Player Rate 1 - Playback speedvideo-player-video-player-rate-1Seekable player with a playback rate control for tutorials.
Video Player Seek 1 - Seek controlsvideo-player-video-player-seek-1Video player with seek backward and forward buttons.
Video Player Standard 1 - Basic video playervideo-player-video-player-standard-1Media chrome video player with play and time controls.
Video Player Volume 1 - With volume rangevideo-player-video-player-volume-1Video player control bar including a volume slider.
Waitlist 1 - Centered waitlist with avatar rowwaitlist1A full-height waitlist with a large heading, supporting copy, email field, join button, overlapping avatars, and a joined-count line.
Waitlist 2 - Waitlist with countdown timerwaitlist2A centered waitlist with a logo, pulsing coming-soon badge, email form, overlapping avatars, joined count, and a launch countdown.
Waitlist 3 - Split waitlist with photowaitlist3A two-column waitlist with company logo, coming-soon badge, heading, email form, overlapping avatars, copyright, and a large photo.
Wishlist 1 - Wishlist grid with price-drop badgeswishlist1A three-column wishlist of saved products with price-drop and stock badges, add-to-cart or notify actions, add-all, and an empty state.
Wishlist 2 - Wishlist list with sort and sharewishlist2A saved-items list with share and sort by date, price, or name, category labels, stock badges, and buttons to add in-stock items to the cart.
Wishlist 4 - Multi-list wishlist dialogwishlist4Dialog wishlist with selectable lists, a product grid, share menu, empty state, and login CTA for managing saved items across favorites collections.