S
shadcnblocks/shadcn-ui-blocks
About 1 - Multi-Section Mission Valuesabout1A multi-section about block with mission statement, values grid with icons, and image panels for company storytelling.
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 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 rotated polaroid-style photo card on the left and headline with body text on the right.
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 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 3 - Company Profile with Achievementsabout3A two-column about section with main image, breakout card, logo strip, and achievements stats grid on muted background.
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 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 Avataraccept-invite2A compact centered invitation card with host avatar initial, personalized message, and accept/decline buttons with expiration notice.
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.
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.
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 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 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 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.
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 stripblog22Dark-styled section with heading row, outline Read More button, large featured image and headline with Avatar author row, plus a second column of small 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 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 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 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 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 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 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.
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 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 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 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.
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 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.
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 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.
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.
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.
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.
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 - Compact desktop download card with copy-to-clipboarddownload13This component provides a user interface for downloading a desktop application, featuring functionalities like copying installation commands and selecting specific download versions for Windows. It includes buttons for direct downloading and a visual indication of successful clipboard operations.
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 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.
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 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 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 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 separatorfeature82A component showcasing integration options with icons and descriptions, structured in up to 4 columns, including a headline, subtext, and a button above a separator.
Feature 83feature83A component with a 2-column layout featuring badges, icons, and text to highlight flexible support and collaborative tools. Includes a decorative background effect.
Feature 85feature85A block highlighting features of a project management app with icons, titles, and descriptions arranged in up to 3 columns.
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 87feature87A block with headings, a feature list with icons, a CTA, and a large bleeding 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 9feature9A component featuring a central title, description, badges, two textual cards, and an image in a three-column layout; includes "Read more" buttons.
Feature 90feature90A marketing component featuring a title, description, button, a row of logos, and a link to more integrations.
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 93feature93A component featuring staggered avatars and a 3-column layout with icons, highlighting customer care themes, and focusing on support, solutions, and feedback.
Feature 94feature94A component showcasing a title, a button, and a 4-column layout with cards, each containing images, titles, and text about different features.
Feature 95feature95A component with a badge, a title, and a paragraph, followed by a 4-column tabbed interface that switches content views.
Feature 97feature97A component showcasing platform highlights in a two-column grid with icons, titles, and texts for each feature. Includes a title, description, and buttons above the grid.
Feature 98feature98A component featuring a 5-column layout that consolidates investment solutions, including text and buttons, followed by a 3-item visual grid, each with a title, text, and icon overlay on images.
Feature 99feature99A component displaying a setup guide with a heading, introductory section, and a 3-column layout for steps, each having a title and description.
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 1footer1A component showcasing a footer layout with logos, navigation links across 4 columns, download buttons, and social icons.
Footer 10footer10A time-updating footer with 3 columns, displaying a copyright date, current London time, and an email. Features an auto-updating clock functionality.
Footer 11footer11A component with a logo, menu links across 3 columns, social media icons, and a large image. Offers product, company, and legal info sections.
Footer 12footer12A footer component with three sections for navigation links, social media, and legal text. Includes an image with external link indicators for social media.
Footer 13footer13This component is a multi-section footer block featuring a call-to-action, newsletter signup, navigational links, and social media connections. It includes 4 columns of navigation links and uses buttons and input for interactions.
Footer 14footer14A footer component with logo, newsletter, navigation links across three columns, and social icons. Includes a succinct company description and subscription form.
Footer 15footer15This component is a footer block featuring a logo, a slogan, social links, navigation with categorized links, a newsletter form, and copyright text. It also includes a badge indicating operational status.
Footer 16footer16A footer component featuring logo, contact button, social icons, and navigation in accordion for smaller screens or columns layout.
Footer 17footer17A footer component with theme toggle, navigation links, social links, theme-specific logo, and a system status indicator.
Footer 18footer18A footer component with social links, language settings, privacy dialog, and navigation sections in a column layout that expands to a row at larger sizes.
Footer 19footer19A component featuring a multi-column layout with navigation links, social media buttons, and a logo. It includes two main sections: one with four columns of links categorized by topics and another highlighted section with guides and tools across three columns.
Footer 2footer2A footer component with a logo and tagline, 1-4 columns of menu items, and a bottom row for copyright and policy links.
Footer 21footer21A footer component with navigation links, logo, slogan, social media buttons, and copyright info arranged in columns.
Footer 23footer23A footer component with a logo, description, link columns, and an animated globe. Includes 3 sections with navigational links and separators.
Footer 24footer24A footer component with a bold heading, sections for email, social links, phone, and navigation links. It also includes a design attribution.
Footer 25footer25A footer component with a background image, featuring a personal message, social and portfolio links, contact details, and legal links in a 1-2-4 column layout.
Footer 27footer27A footer block with animated visibility, featuring a "Connect with Me" call-to-action, social links with hover effects, and copyright information.
Footer 28footer28This component is a versatile footer block featuring navigational links categorized under Features, Resources, and Company sections, along with social media icons and an email subscription form. It includes visual elements like a badge to indicate online status and buttons for engagement, making it ideal for enhancing user interaction at the bottom of a page.
Footer 29footer29Multi-column footer with newsletter subscription, navigation links, social icons, status badge, and theme toggle.
Footer 3footer3A footer component with a logo, navigation links in 2-5 columns, social icons, newsletter subscription form, and legal links.
Footer 30footer30A footer component showcasing contact info, navigation, social links, and legal terms in a multi-column layout, plus a prominent brand name display.
Footer 31footer31A footer component with dynamic animation, featuring navigation, social links, subscription form, location, and privacy terms. Includes email contact, 2-column grid for links, and an animated logo.
Footer 32footer32This component, called Footer32, provides a customizable footer block featuring a pre-defined heading, descriptive text, a call-to-action button, and integration with social media links for platforms like Twitter, Instagram, and Facebook. It also allows for adding a support email link, making it suitable for enhancing connectivity and engagement on web applications.
Footer 37footer37This component is a versatile footer block that includes sections for a brand logo, navigation links, social media connections, and a newsletter sign-up form. It also features contact information, including phone number, email, and location, as well as legal links and copyright details.
Footer 4footer4A footer component with a logo, social icons, link sections, a newsletter subscription, and legal links. GridLayout adapts to 6 columns on large screens.
Footer 49footer49This component functions as a versatile footer block providing navigation, contact information, and social media links. It features expandable menus, a call-to-action section, and customizable branding elements to enhance user interaction and accessibility.
Footer 5footer5A 4-column component featuring sections for product, company, resources, and social links, followed by contact and mobile app info, accentuated with social and mobile app icons.
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 6footer6A footer component with a logo, description, navigation links across two columns, a newsletter sign-up form, and copyright/terms section.
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 7footer7A footer component with a logo, description, social icons, link sections, and legal info spread over two rows. Includes 3 columns of navigational links.
Footer 8footer8A footer component with a logo, description, social icons, link sections, newsletter signup, and copyright info arranged in a grid layout.
Footer 9footer9A multi-layout footer block featuring marketing messages, a pricing card, link sections, and legal/social links. Incorporates colorful icons and hover effects.
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.
Gallery 1gallery1A gallery block showcasing 3 case studies with dynamic resizing; includes images, logos, text, and interactive effects on mouse hover.
Gallery 10gallery10A testimonial carousel component with text content, navigation buttons, and progress indicator. It has a dual-column layout with quotes and images.
Gallery 11gallery11A travel destination gallery with 4 items in a carousel, each item featuring an image, title, and description. Has a heading and "Explore All" button.
Gallery 12gallery12A component displaying a carousel of features with images, titles, and descriptions, navigable via prev/next buttons. It includes a heading and subtext above the carousel.
Gallery 13gallery13A carousel component showcasing items with images, titles, descriptions, and icons in a 2:3 column layout. It dynamically updates the active display and navigation functionality.
Gallery 14gallery14A gallery component with a carousel of items, featuring dynamic navigation dots that expand with titles on the active item. Layout includes a headline, description, and 2-column design with imagery.
Gallery 15gallery15A gallery component showcasing services with carousel functionality, navigation buttons, and a progress indicator.
Gallery 16gallery16A component displaying a carousel and tabs for navigating items, which comprise an image, title, description, and note. Features include dynamic tab indicators and previous/next buttons.
Gallery 17gallery17A carousel component featuring an image gallery with navigation arrows and pagination dots. Each image scales and adjusts opacity on selection.
Gallery 18gallery18A card-carousel gallery with autoplay, displaying portraits with annotated names in a looping mode.
Gallery 19gallery19Component displays a carousel of images with overlay text & a "Know More" link. Offers animated entrances and card effects.
Gallery 20gallery20A gallery component displaying overlapping, draggable images with dynamic animation. Includes textual content and a button, all within a single column layout.
Gallery 21gallery21Interactive gallery component with image slider, effect animations, and a call-to-action button.
Gallery 22gallery22An interactive gallery block with coverflow effect, auto-slide feature, and social media links. Displays images in a carousel, each paired with name and role. Includes left/right navigation buttons.
Gallery 23gallery23Interactive gallery with expandable images and detailed captions on hover, featuring a statement and button on the left.
Gallery 24gallery24An interactive gallery block that showcases images with dynamic resizing and details on hover or click, including an "Add to Cart" button.
Gallery 25gallery25A 4-column animated image gallery, each column with varying image heights and animated transitions on view.
Gallery 26gallery26A gallery block with animated blur vignettes around images, arranged in a 5-column grid. Features image reveal animations on scroll.
Gallery 27gallery27A team carousel featuring images, names, and roles with navigation buttons, looping functionality. Displays items 2 on medium screens, 1/4 on large.
Gallery 28gallery28A gallery block featuring a carousel of curated interior design images with a centralized heading, description, and navigation buttons.
Gallery 29gallery29A component displaying a gallery title, description, and a marquee of images with a central featured image that reveals a caption on hover, surrounded by fading edges and decorative skew elements.
Gallery 3gallery3A carousel component showcasing case studies with navigational arrows and dynamic scroll availability indicators, including images, titles, descriptions, and read more links.
Gallery 30gallery30An interactive gallery component with dynamically shuffled images that are draggable. Includes title and description.
Gallery 31gallery31A product showcase block with a dynamic grid layout of 1-4 columns, displaying items with hover effects, titles, and prices.
Gallery 32gallery32An interactive gallery component with dimension-variable, overlapping images and blur effect on hover. Contains descriptive text animations.
Gallery 33gallery33A gallery component showcasing items in a grid that adjusts from 1 to 3 columns based on screen size. Features hover effects and links to more details.
Gallery 34gallery34A gallery component displaying items in up to 3 columns, featuring interactive image blur on hover and icons indicating different characteristics.
Gallery 35gallery35This component, Gallery35, displays a scrollable gallery of visual cards with accompanying text and images, featuring smooth scrolling and pagination controls for easy navigation. Users can control the autoplay functionality, allowing for an interactive viewing experience.
Gallery 4gallery4A component showcasing a scrollable gallery with navigation buttons and indicators, featuring images, titles, and descriptions for each item.
Gallery 5gallery5A feature gallery component with a carousel layout, toggles for selecting features, and next/prev buttons. It displays items in two columns, with icons, text, and images.
Gallery 6gallery6A carousel component with a heading, 'Book a demo' link, scrolling buttons, and dynamic content blocks comprising images, titles, and summaries.
Gallery 7gallery7A component that combines a 2-column text intro with a looping AI-themed image carousel. Unique feature: staggered image positions.
Gallery 8gallery8A carousel component displaying resources in 3 columns, featuring navigation, separators, and dynamic link icons.
Gallery 9gallery9A component with a heading, badge, and a carousel displaying images and texts with navigation indicators. Features clickable sections to scroll through content.
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 Cards Help Centerhelp1A help center section with categorized topic cards in a grid layout, popular topics list, and contact support call-to-action button.
Help 2 - FAQ Help Centerhelp2A help center section with searchable FAQ accordion and contact support buttons for live chat, email, and phone.
Help 3 - Help Center Contact Formhelp3A help center section with searchable FAQ accordion featuring category tags, and a contact form below for submitting support requests.
Help 4 - Support Ticket Formhelp4A support ticket submission form with category and priority selectors, detailed description field, 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 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 email capture, devices, and logo gridhero105A two-column hero with stacked headline treatment, supporting paragraph, rounded email field paired with an inset submit control, phone plus widescreen mock collage, skewed photography backdrop, and logo grid 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 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 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 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 image grid and video dialoghero116A centered hero with large growth headline, supportive paragraph, sliding-label CTAs including a play-triggered video modal, and a bordered collage of four offset photos.
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 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 134 - Centered hero with video modal and logo striphero134A centered hero with headline, supporting copy, pink-hover primary CTA, play control opening a video dialog, large rounded media, and a muted partner logo row.
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 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 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, bordered teaser card with underline prompt, and centered play control opening an embed.
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 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 - Financial hero with inset card on photohero159A split hero with bold finance headline, platform paragraph, free-start CTA with sliding arrows, fee disclaimer, large portrait image, corner inset card, and decorative wide accent shape.
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 dark 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 serif headline and pastel tri-image latticehero165A two-column hero with an aspect-ratio lattice of three color-washed image panels and opposite serif headline plus Montserrat-style subhead, no buttons in the default markup.
Hero 166 - Split hero with crossfading image stacks and demo buttonhero166A two-column hero with headline, Montserrat subhead, rounded demo button with hover lift, and dual columns of animated crossfading image stacks inside an aspect-ratio frame.
Hero 167 - Healthcare hero with badge pills and layered photoshero167A two-column hero with large headline, muted paragraph, two outline badge-style links with arrows, and a soft gradient panel layering two offset aspect-ratio images.
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 dialoghero173Split hero pairing uppercase CTAs against three staggered AspectRatio portraits, opened by a Presentation Video modal from the outlined control.
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 stackhero178Split hero pairing monospace category line, clamp-scale headline, essay copy, and three overlapping AspectRatio 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 - Premium mosaic hero with mobile carousel fallbackhero183Outline premium badge, centered funnel copy, oversized button pair, seven-cell desktop mosaic framed by faded rules, plus dot-controlled carousel grouping photos on phones.
Hero 185 - Editorial split hero with offset portrait duohero185Bordered two-column hero pairing sweeping productivity headline, mission copy, large vertical photo, offset twin portrait columns, and extended mission essay without extra CTAs.
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 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 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 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 trust badge and browser mockuphero206A centered hero with uppercase display headline, supporting copy, outline trust badge with avatars, 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 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 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 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 Herohero271Two-column hero with copy on the left and a right-bleed main image that extends past the container edge, featuring an optional square inset overlay and a dot grid accent.
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 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 mesh glow and layered imageryhero30A two-column hero featuring left-aligned copy with paired shadcn/ui buttons and a right column where tall photography floats above warmer mesh lighting plus optional stacked placeholders.
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 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 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 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 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 placeholder tiles 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 rectangleshero38A two-column hero pairing release label, headline, body, and twin shadcn/ui buttons with an illustrative panel combining dotted spiral artwork and three overlapping accent rectangles.
Hero 39 - Rounded shell hero with geometric collagehero39A marketing hero inside a wide rounded accent shell that splits intro copy and one primary shadcn/ui button from four overlapping bordered rectangles.
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 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 square-grid veil and orbit imageryhero51A hero pairing radial-masked square grid backdrop, centered headline, muted paragraph, shadcn/ui marketplace button, globe caption, and collage of rotated peripheral photos around one hero image.
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 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 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 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 - Library hero with logo stack and aspect-ratio previewhero76Centered hero highlighting design-library headline, descriptive paragraph, pill-shaped download button, logo trio, and wide preview graphic constrained via shadcn/ui AspectRatio.
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 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 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.
Incentives 1incentives1This component displays a carousel of incentives, featuring items with icons, titles, and descriptive text. It allows users to showcase benefits such as support, exchanges, premium wrapping, and product guarantee, customizable with different icons and text for each incentive.
Incentives 2incentives2This component displays a carousel featuring various incentives, such as tech assistance, quick exchanges, and premium wrapping, each highlighted with an associated icon and description. It allows users to easily browse through a list of service benefits, improving their overall shopping experience.
Incentives 6incentives6This component is an interactive carousel that displays a list of incentives, each with a title, description, and icon. It allows users to browse through various incentive options such as customer care and app information with navigational controls for easier access.
Incentives 7incentives7This component displays a carousel of incentives, highlighting key features with icons and descriptions to engage users with compelling information. It includes customizable options for titles, descriptions, icons, and a call-to-action button that links to additional content.
Industries 1industries1This component displays a grid of industry categories, each with an image, name, and detailed description revealed on hover. Designed with interactive animations and hover effects, it facilitates user engagement and provides information about various industries through visual and textual elements.
Industries 2industries2This component displays a collection of service industries with descriptive text, images, and a customizable badge for quick identification. It features a structured layout with headings, icons, and detailed descriptions of services to enhance user navigation and comprehension.
Industries 3industries3This component displays a list of projects with details such as year, name, description, and a relevant image, allowing users to explore different project categories. Each project entry includes a hover effect that reveals additional information and provides a clickable link for further exploration.
Industries 4industries4This component, Industries4, showcases a list of contractors from different categories, such as Hydro, Wind, and Solar, providing information and images for each. It features interactive elements, including hover effects and expandable content showcasing additional details and links for users to learn more.
Input Group Ai 1input-group-input-group-ai-1AI Prompt Input.
Input Group Ai 2input-group-input-group-ai-2Simple AI Prompt.
Input Group Ai 3input-group-input-group-ai-3AI with Attachments.
Input Group Ai 4input-group-input-group-ai-4AI with Voice.
Input Group Buttons 1input-group-input-group-buttons-1Copy Button.
Input Group Buttons 2input-group-input-group-buttons-2Multiple Action Buttons.
Input Group Buttons 3input-group-input-group-buttons-3Search Button.
Input Group Buttons 4input-group-input-group-buttons-4Password Actions.
Input Group Custom 1input-group-input-group-custom-1Textarea with Actions.
Input Group Custom 2input-group-input-group-custom-2Textarea with Counter.
Input Group Custom 3input-group-input-group-custom-3Textarea with Toolbar.
Input Group Custom 4input-group-input-group-custom-4Textarea with Label.
Input Group Dropdown 1input-group-input-group-dropdown-1Dropdown Actions.
Input Group Dropdown 2input-group-input-group-dropdown-2Search Filters.
Input Group Dropdown 3input-group-input-group-dropdown-3URL Builder with Dropdown.
Input Group Dropdown 4input-group-input-group-dropdown-4Textarea with Dropdown.
Input Group Icons 1input-group-input-group-icons-1Search with Icon.
Input Group Icons 2input-group-input-group-icons-2Contact Fields with Icons.
Input Group Icons 3input-group-input-group-icons-3Dual Icons.
Input Group Icons 4input-group-input-group-icons-4Multiple Icons.
Input Group Label 1input-group-input-group-label-1Inline Labels.
Input Group Label 2input-group-input-group-label-2Label with Tooltip.
Input Group Label 3input-group-input-group-label-3Block Labels.
Input Group Label 4input-group-input-group-label-4Label with Counter.
Input Group Spinner 1input-group-input-group-spinner-1Loading States.
Input Group Spinner 2input-group-input-group-spinner-2Spinner with Text.
Input Group Spinner 3input-group-input-group-spinner-3Animated Icon Spinner.
Input Group Spinner 4input-group-input-group-spinner-4Textarea Loading.
Input Group Text 1input-group-input-group-text-1Currency Input.
Input Group Text 2input-group-input-group-text-2URL Builder.
Input Group Text 3input-group-input-group-text-3Email with Domain.
Input Group Text 4input-group-input-group-text-4Character Counter.
Input Group Textarea 1input-group-input-group-textarea-1Code Editor.
Input Group Textarea 2input-group-input-group-textarea-2Character Counter.
Input Group Textarea 3input-group-input-group-textarea-3Rich Text Toolbar.
Input Group Textarea 4input-group-input-group-textarea-4Chat Input.
Input Group Tooltip 1input-group-input-group-tooltip-1Password Requirements.
Input Group Tooltip 2input-group-input-group-tooltip-2Help Tooltips.
Input Group Tooltip 3input-group-input-group-tooltip-3API Key Info.
Input Special 1input-input-special-1File input with selected file list and remove actions.
Input Special 2input-input-special-2Time Input.
Input Special 3input-input-special-3Range Slider with Value.
Input Special 4input-input-special-4Disabled Input.
Input Special 5input-input-special-5Currency Input.
Input Standard 1input-input-standard-1Input with Label.
Input Standard 2input-input-standard-2Input with Description.
Input Standard 3input-input-standard-3Input with Helper Text.
Input Standard 4input-input-standard-4Required Field.
Input Standard 5input-input-standard-5Optional Field.
Input Standard 6input-input-standard-6Input with Character Counter.
Input Standard 7input-input-standard-7Inline Label.
Input Types 1input-input-types-1Email Input.
Input Types 2input-input-types-2Password field with show and hide visibility toggle.
Input Types 3input-input-types-3Number input with increment and decrement buttons.
Input Types 4input-input-types-4Search Input.
Input Types 5input-input-types-5Date Input.
Input Types 6input-input-types-6Phone Input.
Input Types 7input-input-types-7URL Input.
Input Validation 1input-input-validation-1Error State.
Input Validation 2input-input-validation-2Success State.
Input Validation 3input-input-validation-3Warning State.
Input Validation 4input-input-validation-4Multiple Validation Messages.
Input Validation 5input-input-validation-5Input validates on change with live error messaging.
Input Otp Behavior 1input-otp-input-otp-behavior-1Auto-submit OTP.
Input Otp Behavior 2input-otp-input-otp-behavior-2OTP with Enhanced Focus Management.
Input Otp Behavior 3input-otp-input-otp-behavior-3OTP with Paste Optimization.
Input Otp Behavior 4input-otp-input-otp-behavior-4OTP with Resend Flow.
Input Otp Standard 1input-otp-input-otp-standard-1Standard OTP Input.
Input Otp Standard 2input-otp-input-otp-standard-2OTP with Pattern Validation.
Input Otp Standard 3input-otp-input-otp-standard-3OTP with Multiple Separators.
Input Otp Standard 4input-otp-input-otp-standard-4Controlled OTP Input.
Input Otp Standard 5input-otp-input-otp-standard-5OTP in Form with Validation.
Input Otp States 1input-otp-input-otp-states-1Disabled OTP Input.
Input Otp States 2input-otp-input-otp-states-2OTP with Loading State.
Input Otp States 3input-otp-input-otp-states-3OTP with Error State.
Input Otp States 4input-otp-input-otp-states-4OTP with Success State.
Input Otp Use Cases 1input-otp-input-otp-use-cases-1Email Verification Flow.
Input Otp Use Cases 2input-otp-input-otp-use-cases-2Two-Factor Authentication.
Input Otp Use Cases 3input-otp-input-otp-use-cases-3SMS Verification.
Input Otp Use Cases 4input-otp-input-otp-use-cases-4Transaction Confirmation.
Input Otp Variants 1input-otp-input-otp-variants-1Numeric Only OTP.
Input Otp Variants 2input-otp-input-otp-variants-2Masked OTP Input.
Input Otp Variants 3input-otp-input-otp-variants-3Different Length OTP Variants.
Integration 1integration1A component showcasing a collection of integration options with app icons, titles, and descriptions, arranged in up to two columns.
Integration 10integration10A component showcasing a list of integrations with titles, descriptions, and "Connect" buttons, arranged in a single column with a minimalist design.
Integration 11integration11A tabbed component showcasing categorized integrations with toggles for connection status and details button. Layout scales from 1 to 3 columns.
Integration 12integration12A component features platform integration with a list of 5 permissions. Includes two logo comparisons, title, description, and buttons for actions.
Integration 13integration13A component showcasing a collection of integrations with iconic apps, featuring hover-activated animation for emphasis and links for more details.
Integration 2integration2A component featuring a title, subtitle, a marquee of logos linking to various resources, and a discovery button.
Integration 3integration3A component showcasing a list of integrations with icons, titles, and descriptions arranged in a single column layout.
Integration 4integration4A component depicting global connectivity with a central title, supportive text, and graphical illustrations of interconnected nodes, accented by a large background image.
Integration 5integration5A component showcasing integration options with title, description, buttons, and a two-column layout with logos.
Integration 6integration6A component with a headline, description, interactive button leading to more content, and two logo carousels separated by dividers, all within a dark-themed layout.
Integration 7integration7A component showcasing integration with various tools, featuring two column layout, icons, and descriptions. Unique for its customizable gradient placeholders.
Integration 8integration8A component featuring dual-direction marquee rows of logos, highlighted with fade edges.
Integration 9integration9A component displaying available integrations in a 1-4 column grid, featuring icons, titles, and descriptions.
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 1item-item-interactive-1Item as Link.
Item Interactive 2item-item-interactive-2Item in Dropdown.
Item Layout 1item-item-layout-1Item Sizes.
Item Layout 2item-item-layout-2Item Group.
Item Layout 3item-item-layout-3Item with Header.
Item Media 1item-item-media-1Item with Icon Media.
Item Media 2item-item-media-2Item with Avatar.
Item Media 3item-item-media-3Item with Image Media.
Item Standard 1item-item-standard-1Basic Item.
Item Standard 2item-item-standard-2Item with Media and Icon.
Kbd Arrow Keys 1kbd-kbd-arrow-keys-1Arrow Keys Cross Pattern.
Kbd Arrow Keys 2kbd-kbd-arrow-keys-2Arrow Keys Horizontal.
Kbd Arrow Keys 3kbd-kbd-arrow-keys-3WASD Gaming Keys.
Kbd Arrow Keys 4kbd-kbd-arrow-keys-4Vim Navigation Keys.
Kbd Function Keys 1kbd-kbd-function-keys-1F1 Help Key.
Kbd Function Keys 2kbd-kbd-function-keys-2F12 DevTools Key.
Kbd Function Keys 3kbd-kbd-function-keys-3Function Keys Row.
Kbd Function Keys 4kbd-kbd-function-keys-4Special Keys.
Kbd Function Keys 5kbd-kbd-function-keys-5Modifier Keys.
Kbd Function Keys 6kbd-kbd-function-keys-6Editing Keys.
Kbd Platform Specific 1kbd-kbd-platform-specific-1Mac Command Symbol.
Kbd Platform Specific 2kbd-kbd-platform-specific-2Mac Option Symbol.
Kbd Platform Specific 3kbd-kbd-platform-specific-3Windows Key.
Kbd Platform Specific 4kbd-kbd-platform-specific-4Platform-Aware Shortcut.
Kbd Platform Specific 5kbd-kbd-platform-specific-5Mac Control Symbol.
Kbd Pressed State 1kbd-kbd-pressed-state-1Active State.
Kbd Pressed State 2kbd-kbd-pressed-state-2Disabled State.
Kbd Pressed State 3kbd-kbd-pressed-state-3Focus State.
Kbd Pressed State 4kbd-kbd-pressed-state-4Pressed Down.
Kbd Pressed State 5kbd-kbd-pressed-state-5Hover State.
Kbd Sequence 1kbd-kbd-sequence-1Key Sequence with Then.
Kbd Sequence 2kbd-kbd-sequence-2Key Sequence with Arrow.
Kbd Sequence 3kbd-kbd-sequence-3Multi-Step Sequence.
Kbd Sequence 4kbd-kbd-sequence-4Vim Command Sequence.
Kbd Shortcut 1kbd-kbd-shortcut-1Command Palette Shortcut.
Kbd Shortcut 2kbd-kbd-shortcut-2Copy Shortcut.
Kbd Shortcut 3kbd-kbd-shortcut-3Paste Shortcut.
Kbd Shortcut 4kbd-kbd-shortcut-4Complex Shortcut.
Kbd Shortcut 5kbd-kbd-shortcut-5Save Shortcut.
Kbd Sizes 1kbd-kbd-sizes-1Small Kbd.
Kbd Sizes 2kbd-kbd-sizes-2Default Kbd.
Kbd Sizes 3kbd-kbd-sizes-3Large Kbd.
Kbd Sizes 4kbd-kbd-sizes-4Inline with Text.
Kbd Sizes 5kbd-kbd-sizes-5Extra Large Kbd.
Kbd With Icons 1kbd-kbd-with-icons-1Enter with Icon.
Kbd With Icons 2kbd-kbd-with-icons-2Delete with Icon.
Kbd With Icons 3kbd-kbd-with-icons-3Arrow Keys with Icons.
Kbd With Icons 4kbd-kbd-with-icons-4Command with Icon.
Kbd With Icons 5kbd-kbd-with-icons-5Unicode Symbols.
Label Standard 1label-label-standard-1Required Label.
Label Standard 2label-label-standard-2Label with Description.
Label Standard 3label-label-standard-3Label with Tooltip.
Label Standard 4label-label-standard-4Label with Badge.
Label Standard 5label-label-standard-5Label with Optional Indicator.
Label Standard 6label-label-standard-6Label with Character Count.
Label Standard 7label-label-standard-7Error Label.
Label Standard 8label-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 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 1list1A component displaying a table with details on various projects, including icons, categories, descriptions, years, offers, and segments. It adapts to different screen widths.
List 2list2A component displaying a list of awards with icons, titles, categories, and descriptions. Includes headings and buttons to view details.
List 3list3A component showcasing career progression with two sections for experience and achievements, each detailed in a 3-column layout, interconnected with separators.
Live Purchase 1live-purchase1The LivePurchase1 component displays recent purchases with customer and product details in a rotating card format, featuring automatic rotation and customizable interval options. It is ideal for showcasing live purchase updates with user avatars, product images, and a dismissible close button.
Live Purchase 2live-purchase2This component dynamically displays recent customer purchases, cycling through them at specified intervals to show customer name, location, and product details with an option to dismiss the notification. It includes customizable properties such as purchase data, auto-rotation settings, and visual styling, ensuring adaptability to various user needs.
Live Purchase 3live-purchase3This component displays live notifications of recent purchases, including product details and when they were made, in a rotating manner for improved visibility. It also shows live stats with the number of current viewers and the total purchases made today, providing a quick overview of customer interactions.
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 1login1A login block featuring logo, input fields for email and password, a login button, a Google signup button, and a signup link.
Login 2login2A login component featuring a logo, headings, email and password fields, login & Google signup buttons, and a signup link. Set in a centered, single-column layout with a focus on simplicity and readability.
Login 3login3A login block with logo, main heading, subheading, email/password inputs, remember me checkbox, forgot password link, login & google login buttons, and signup prompt.
Login 4login4A login form featuring email and password fields, "Remember me" checkbox & Google Login. Includes forgot password & signup links.
Login 5login5A login component featuring a 2-column layout with one column for form inputs including email and password fields, a checkbox for "Remember me", and buttons for submitting the form or logging in with Google. The second column displays an image.
Login 6login6A login form component with email and password fields, sign-in and Google sign-up buttons, links for account creation and password recovery.
Login 7login7A login component featuring a card layout with a logo, a 'Sign up with Google' button, a divider with 'OR', email and password fields, and a submit button.
Login 9login9This component provides a user-friendly login interface featuring options for social media and email authentication. It includes customizable login buttons for Google, GitHub, and LinkedIn, along with a sign-up option and a logo display.
Logo Right Click Downloadlogo-logo-right-click-downloadLogo supports right-click download of brand image assets.
Logo Standardlogo-logo-standardResponsive logo with separate desktop and mobile images.
Logo Wordmarklogo-logo-wordmarkWordmark logo image inside a linked brand wrapper.
Logos 1logos1A component displaying a title and a row of partner logos with adjustable gaps, featuring grayscale and partial opacity effects.
Logos 10logos10A carousel component showcasing company logos with automatic scrolling feature. Includes a header and user prompt button. Each logo is numbered and arranged in a responsive grid.
Logos 11logos11A component featuring dual carousels of logos, a central title, and action buttons, styled with patterns and lines.
Logos 12logos12A carousel component displaying logos with auto-scroll functionality, supporting dark mode inversion.
Logos 13logos13A component displays partner logos in a grid with years; features a sticky description column and dynamic image inversion in dark mode.
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 2logos2A two-column block featuring certifications with text and a button on one side and a 3x2 grid of logos on the other.
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 3logos3A component displaying logos in a carousel with auto-scroll feature. Logos are shown in columns that adjust layout based on screen size.
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 4logos4A component displays a section with a title, description, button, and a grid of logos. It includes a badge, central text block, and logos arranged in up to 4 columns.
Logos 5logos5A dual-row logo showcase component, featuring 4 logos on the top row and 5 on the bottom, with hover effects and external links.
Logos 7logos7A component showcasing logos with a headline, organized in a horizontally scrolling ticker, featuring hover effects.
Logos 8logos8A logos showcase component with a title, subtitle, and a grid of logos from various companies, customizable via props.
Logos 9logos9A component showcasing product team endorsements and logos in carousels, with auto-scrolling functionality and dynamic column adjustments.
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 1menubar-menubar-standard-1Simple Text Menubar.
Menubar Standard 10menubar-menubar-standard-10Compact Menubar.
Menubar Standard 2menubar-menubar-standard-2Menubar with Shortcuts.
Menubar Standard 3menubar-menubar-standard-3Menubar with Icons.
Menubar Standard 4menubar-menubar-standard-4Menubar with Checkboxes.
Menubar Standard 5menubar-menubar-standard-5Menubar with Radio Groups.
Menubar Standard 6menubar-menubar-standard-6Menubar with Submenu.
Menubar Standard 7menubar-menubar-standard-7Menubar with Destructive Action.
Menubar Standard 8menubar-menubar-standard-8Application Menubar.
Menubar Standard 9menubar-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 10navbar10A navigation bar component featuring a logo, links to products, solutions, platform, resources, pricing, a sign-up button, and a mobile menu trigger. It includes dropdown menus for extensive categories with featured links, images, and company logos arranged in various layouts.
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 12navbar12A component featuring a logo, dual navigation modes for desktop/mobile, accented by icons, primary & secondary action buttons, wrapped in an adaptable UI.
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 17navbar17A navigation component with dynamic indicator for active links and a mobile menu with an animated icon for toggling.
Navbar 18navbar18A navigation bar with logo, collapsible menus, and a login button. Layout adapts for mobile with a popover 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 21navbar21A dynamic navigation component with animated menu toggling. Displays a logo, a menu toggle button, expanding to show main links and socials.
Navbar 22navbar22This component is a navigation bar featuring a clock, logo with text, collapsible menu for mobile, and link animations. It has a flexible layout with toggled visibility for different elements based on device width.
Navbar 24navbar24A dynamic navbar component featuring an animated dock with interactive icons for navigation linked to different sections.
Navbar 29navbar29A navigation component with expandable mega menu, mobile navigation layout, animated button for menu toggling, including footer links and company contact information, supporting conditional rendering and animation for menu items.
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 1navigation-menu-navigation-menu-complex-1Full Mega Menu.
Navigation Menu Complex 2navigation-menu-navigation-menu-complex-2Multi-level Nested Navigation.
Navigation Menu Complex 3navigation-menu-navigation-menu-complex-3Tabbed Mega Menu.
Navigation Menu Complex 4navigation-menu-navigation-menu-complex-4Dashboard-style with Stats.
Navigation Menu Complex 5navigation-menu-navigation-menu-complex-5Mixed Content Types.
Navigation Menu Features 1navigation-menu-navigation-menu-features-1Feature Cards with Icons.
Navigation Menu Features 2navigation-menu-navigation-menu-features-2Feature Grid Layout.
Navigation Menu Features 3navigation-menu-navigation-menu-features-3Feature Sections with Headers.
Navigation Menu Features 4navigation-menu-navigation-menu-features-4Features with Badges.
Navigation Menu Features 5navigation-menu-navigation-menu-features-5Feature Categories.
Navigation Menu Marketing 1navigation-menu-navigation-menu-marketing-1Product Showcase with CTA.
Navigation Menu Marketing 2navigation-menu-navigation-menu-marketing-2Pricing Tiers Preview.
Navigation Menu Marketing 3navigation-menu-navigation-menu-marketing-3Case Studies & Testimonials.
Navigation Menu Marketing 4navigation-menu-navigation-menu-marketing-4Resources with Lead Magnets.
Navigation Menu Marketing 5navigation-menu-navigation-menu-marketing-5Industry Solutions.
Navigation Menu Standard 1navigation-menu-navigation-menu-standard-1Simple Navigation.
Navigation Menu Standard 2navigation-menu-navigation-menu-standard-2Navigation with Icons.
Navigation Menu Standard 3navigation-menu-navigation-menu-standard-3Navigation with Descriptions.
Navigation Menu Standard 4navigation-menu-navigation-menu-standard-4Navigation without Viewport.
Navigation Menu Standard 5navigation-menu-navigation-menu-standard-5Mixed Links and Dropdowns.
Offer Modal 1offer-modal1This component displays a modal dialog offering a newsletter subscription with a 35% discount on a first order, featuring an input field for email entry and subscribe and close buttons. It is categorized under user interface components for promotional offers and user engagement with features like customizable dialog behavior.
Offer Modal 4offer-modal4The component renders a promotional modal that encourages users to become members and receive a discount, featuring an email subscription form with validation using Zod schema. It includes customizable titles, descriptions, and a visual image to attract users, with options to submit the form via an interactive button.
Offer Modal 5offer-modal5This component presents a promotional sign-up form that offers users a 20% discount for joining a mailing list. It includes input validation for an email field and displays a customizable image and text content such as a title, logo, and description within a modal format.
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 1order-history1This component provides users an interface to view and manage their order history, including functionalities to filter orders by status and search by order number. It displays details such as order number, date, status, item count, total price, and allows actions like tracking shipped orders and reordering delivered items.
Order History 2order-history2This component provides an interactive order management interface, allowing users to filter, search, and review details of their purchase history. It features collapsible order details, status indicators, and various actions that users can perform on their orders such as canceling, tracking, or reordering items.
Order History 3order-history3This component is designed to display a user's order history, providing details such as order number, date, total amount, and status of each item. It features a search functionality allowing users to filter orders by number or item name, and offers options to view invoices, archive orders, or purchase items again.
Order History 4order-history4This component displays a list of user orders with functionalities for searching, viewing details, and tracking the status of each order. It provides an interactive interface to filter orders by search query, view order items with details, and navigate through the order status timeline.
Order History 5order-history5This component allows users to view, filter, and search through their order history, providing details such as order date, number, status, and items. Users can track shipments, initiate returns, and access additional order details, enhancing order management and accessibility.
Order Summary 1order-summary1This component displays a detailed order summary, including order information, itemized lists of products, billing and shipping details, and a payment method overview. It features interactive elements like tracking orders, downloading receipts, and printing order documents, enhancing user engagement and utility.
Order Summary 2order-summary2This component displays a comprehensive order summary, including order details, itemized lists, payment method, and shipping information. Users can easily track their orders and access options to download a receipt or print the summary.
Order Summary 3order-summary3This component displays a detailed summary of an order, including information about the order number, date, delivery details, payment method, and itemized list with images and prices. Additionally, it features sections for shipping address, order total breakdown, and action buttons for tracking the order or continuing shopping.
Order Summary 4order-summary4This component is designed to display a comprehensive order summary, including order details, timeline tracking, payment information, and shipping address, enhancing the user experience by providing a clear overview of their purchase. It allows users to interact with various elements such as timeline steps and provides progress visualization, making it easier to track the order's status and history.
Order Summary 5order-summary5This component displays an order summary with detailed information about ordered items, pricing, and estimated delivery dates, allowing users to view, track orders, and continue shopping. It features interactive elements like buttons to toggle the display and manage actions, as well as formatted pricing details for enhanced user experience.
Order Summary 6order-summary6This component is designed to display an order confirmation dialog, highlighting key details such as order number, estimated delivery date, itemized products with images, quantities, and prices. It also features a summary of the order costs including subtotal, shipping, and total, with options to track the order or continue shopping.
Pagination Advanced 1pagination-pagination-advanced-1Start Ellipsis.
Pagination Advanced 2pagination-pagination-advanced-2End Ellipsis.
Pagination Advanced 3pagination-pagination-advanced-3Both Ellipsis.
Pagination Advanced 4pagination-pagination-advanced-4Many Pages.
Pagination Advanced 5pagination-pagination-advanced-5Disabled State.
Pagination Basic 1pagination-pagination-basic-1Simple Page Numbers.
Pagination Basic 2pagination-pagination-basic-2Five Page Numbers.
Pagination Basic 3pagination-pagination-basic-3With Previous and Next.
Pagination Basic 4pagination-pagination-basic-4With Ellipsis.
Pagination Basic 5pagination-pagination-basic-5Complete Pagination.
Pagination Navigation 1pagination-pagination-navigation-1Previous and Next Only.
Pagination Navigation 2pagination-pagination-navigation-2With Page Counter.
Pagination Navigation 3pagination-pagination-navigation-3First and Last.
Pagination Navigation 4pagination-pagination-navigation-4With First and Last.
Pagination Sizes 1pagination-pagination-sizes-1Small Size.
Pagination Sizes 2pagination-pagination-sizes-2Default Size.
Pagination Sizes 3pagination-pagination-sizes-3Large Size.
Pagination Sizes 4pagination-pagination-sizes-4Compact.
Pagination Sizes 5pagination-pagination-sizes-5Spacious.
Payment Methods 1payment-methods1This component allows users to manage their payment methods by adding, editing, and deleting various payment options, such as Visa, Mastercard, American Express, and PayPal. It features a user-friendly interface with the ability to designate a default payment method and view associated details like the last four digits of a card number or the linked email for PayPal accounts.
Payment Methods 2payment-methods2This component allows users to manage payment methods, supporting actions such as adding, editing, and removing cards or PayPal accounts. It features a user-friendly interface for setting a default payment method and includes a visual grid layout for displaying current payment methods with logos.
Payment Methods 3payment-methods3This component allows users to manage their payment methods, including viewing, editing, or adding new credit card information. It provides functionalities such as setting a default card, editing card details, and securely displaying card information with interactive elements.
Payment Methods 4payment-methods4This component allows users to view and manage a list of payment methods, providing functionalities to edit card details and set a default card using a carousel interface. Users can add new cards and are assured that payment information is stored securely.
Pill Avatar 1 - Pill with avatarpill-pill-avatar-1Pill with PillAvatar and assignee name.
Pill Composition 1 - Composed pillpill-pill-composition-1Pill combining status indicator, delta, and avatar group.
Pill Delta 1 - Pill with deltapill-pill-delta-1Pill showing positive and negative PillDelta values.
Pill Indicator 1 - Pill with indicatorpill-pill-indicator-1Pill with PillIndicator success variant.
Pill Standard 1 - Basic pillpill-pill-standard-1Simple pill with text content.
Popover Standard 1popover-popover-standard-1Simple Text Popover.
Popover Standard 10popover-popover-standard-10Popover with Footer.
Popover Standard 11popover-popover-standard-11Popover with Steps.
Popover Standard 12popover-popover-standard-12Notifications Popover.
Popover Standard 13popover-popover-standard-13Filter Popover.
Popover Standard 14popover-popover-standard-14Share Popover.
Popover Standard 15popover-popover-standard-15Feedback Popover.
Popover Standard 2popover-popover-standard-2Popover with Heading.
Popover Standard 3popover-popover-standard-3Popover with Actions.
Popover Standard 4popover-popover-standard-4Popover with Form.
Popover Standard 5popover-popover-standard-5Info Icon Popover.
Popover Standard 6popover-popover-standard-6Popover with List.
Popover Standard 7popover-popover-standard-7User Profile Popover.
Popover Standard 8popover-popover-standard-8Popover with Divider.
Popover Standard 9popover-popover-standard-9Compact Popover.
Price Basicprice-price-basicFormatted USD price display via Price and PriceValue.
Price On Saleprice-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 10pricing10A pricing component displays 4 plans in columns, detailing features, price, and an annual billing switch. Includes badges for discounts and a "Recommended" tag.
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 11pricing11A component with pricing plans & feature comparison. It displays billing options, plan details across columns, and uses collapsibles for mobile view.
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 12pricing12A component displaying add-on options in two sections: "featured" in a grid layout and "other" in a list layout, with prices and descriptions.
Pricing 13pricing13A component showcasing 3 add-on options, each with a title, description, and pricing/contact info. It features an image and introductory text.
Pricing 14pricing14A pricing plan component displays plan details, a discount badge, and features with checkmarks, laid out in 2-column format. Includes "Book a demo" and "Learn more" buttons.
Pricing 15pricing15A component displaying a pricing plan with benefits and a subscription button. Uses a 2-column layout on larger screens, shifting to a single column on smaller devices.
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 21pricing21A pricing component with toggleable monthly/yearly plans, integrating icons, buttons, and badges for a structured display of various subscription tiers and feature comparisons across columns.
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 23pricing23A component displaying pricing plans and feature comparison, collapsible on mobile for plan selection, grid layout for desktop showing all plans side-by-side.
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 26pricing26A component displaying 3 marketing plan options, highlighting one. Features badges, descriptions, and a call-to-action button for each plan.
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 28pricing28This component displays pricing packages with toggle for monthly/annual billing, features tooltip, and a "Popular" badge for a highlighted plan, all in a 4-column layout.
Pricing 29pricing29A component displaying 3 pricing tiers with features and CTA buttons, highlighted by design variations for the middle tier.
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 30pricing30A component displays subscription plans with selectable features, highlighted options, and dynamic pricing details in a collapsible mobile layout and a 4-column desktop layout.
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 33pricing33A block displaying a collection of add-ons with icons, descriptions, and prices, plus a button to get each add-on. Features dual-column layout on larger displays.
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 38pricing38A marketing package selector with 3 options, highlighting features per plan. Includes alerts and clickable elements for user interaction.
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 40pricing40A component displays service packages in accordions, providing details on pricing and what each offers in a 3-column layout upon expansion.
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 6pricing6A pricing component with a heading, description, price, features list, and a call-to-action button. Features 3 groups of listed perks.
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 8pricing8A pricing component featuring a title, intro text, a card with price detail, a trial button, and a 3-column list of features with check icons.
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 9pricing9A pricing table component with a plan switcher, tooltips, and feature icons, displaying 3 tiers and key features in a 4-column layout.
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 1process1A component displaying a 4-step process, with a unique title and an asterisk icon, a brief introduction, and a contact button. It uses a 6-column layout with illustrations for each step.
Process 2process2A component visualizing a 4-step process with dynamic image transitions and a contact button, spread over 2 columns in a larger view.
Process 3process3A component showcasing a 5-step process with animated entries, structured layout, and shifting background colors for each step. Unique number positioning.
Process 4process4A 3-step interactive component showing processes with hover animations on images. It includes a sticky title column and image-driven steps in a 6-column layout.
Product Card 1product-card1This component represents a product card that displays product details, including an image, name, description, price with sale options, and a customizable badge indicating urgency, perfect for featuring items in an e-commerce platform. It is designed with a flexible layout, allowing users to link to a product page, making it ideal for showcasing products dynamically.
Product Card 10product-card10This component displays a product card that includes features like image galleries, stock status indicators, and a price display with sale and regular prices. It also offers functionality for selecting product variants, adding the item to a cart, and viewing quick product details through interactive buttons and tooltips.
Product Card 2product-card2This component displays a product card featuring an image, title, description, price details (including sale pricing), and an "Add to cart" button. It also includes a customizable badge, link overlay, and manages layout using a card structure.
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 3product-card3This component is a product display block designed to showcase product details including an image, name, description, pricing with sale indication, and a customizable badge. It features a call-to-action button for adding items to a cart and provides an interactive experience with hover effects.
Product Card 4product-card4This component displays a product card featuring an image, product name, brand, price, and rating, making it suitable for showcasing items in an online catalog. It supports price displays for regular and sale prices and allows for additional styling through customizable class names.
Product Card 5product-card5This component displays a product card featuring an image, name, collection, and price of a product, offering a sale price option. It utilizes elements like a linked image, card structure, and price formatting to create an engaging product showcase block.
Product Card 6product-card6This component is an interactive product display block that showcases product details, including images, pricing, and stock status. It integrates a form allowing users to select product variants, with features like quick add to cart, sale indicators, and variant-specific color options.
Product Card 7product-card7This component is a product display block that features an image, product name, and sale price details, with functionality to select options like size and stock status. It includes interactive elements like add to cart buttons and a form for choosing size options, enhancing user engagement and shopping experience.
Product Card 8product-card8This component is a dynamic product display block that features an interactive card for showcasing a product with options for selecting size, color, and quantity directly from the card. It includes a detailed product form, image carousel, and controls for managing user selections, all within a visually appealing card layout.
Product Card 9product-card9This component displays a product card showcasing a ceramic cup with pricing details, color variants, and customizable badges. It features interactive elements like an "Add to cart" button, a tooltip for color selection, and a dynamic image gallery that changes based on the selected color variant.
Product Categories 1product-categories1This component displays a product category with a title, summary, and image, designed to highlight key features of a specific item. It uses animations to create a visually engaging experience, with text and images dynamically appearing on the screen.
Product Categories 2product-categories2This block displays a collection of product categories with titles, summaries, images, and links, designed to highlight various product options. Utilizing an animated grid layout, it showcases each category in an engaging and visually appealing manner for easy navigation and discovery.
Product Categories 3product-categories3This component displays a product category with a title, summary, and background image, arranged centrally with flexible layout capabilities. It is highly customizable, allowing users to modify text and image content via props, and includes optional class-based styling.
Product Categories 4product-categories4This component provides a customizable display block for product categories, featuring a background image, title, and description, optimized for visual appeal. It includes a breadcrumb navigation section for easy user orientation, enhancing the browsing experience with clickable links to different sections.
Product Categories 5product-categories5This component displays a selection of product categories, each with a title, description, and media content, such as images or videos, to enhance visual engagement. It includes call-to-action buttons for linking to detailed product pages, making it ideal for showcasing promotional offers or featured collections.
Product Detail 1product-detail1This component is designed to display detailed information about a product, including its images, pricing, description, reviews, and available sizes with stock status. It features a carousel for product image navigation, form fields for selecting size options, and a section to highlight product details and specifications.
Product Detail 10product-detail10This component allows users to view detailed information about a product, including multiple images, and customize options such as material, color, and size before making a purchase. It features a carousel for product images, an accordion for additional product details, and a form for selecting product options, along with display of pricing information, including sale and regular prices.
Product Detail 2product-detail2This React component is designed for displaying product details, including images, price options, and specifications. It features an interactive image carousel with zoom functionality and allows users to select various product attributes such as color, material, and quantity, while also providing detailed product information through expandable sections.
Product Detail 3product-detail3This component provides a detailed layout for showcasing a product with an interactive image carousel, customizable options for color, size, and quantity, and options to add the product to a cart or purchase it immediately. It features elements such as a title and description, a pricing display, and form controls to update product specifications, making it ideal for integrating into an e-commerce platform to facilitate product browsing and purchasing.
Product Detail 4product-detail4This component displays detailed product information, including images, descriptions, pricing, and reviews, and allows users to select product options like color. It features an interactive image gallery with thumbnails and a lightbox for enhanced viewing, along with an accordion for expanding additional product details.
Product Detail 5product-detail5This component is a detailed product display block that showcases key product information, including images, descriptions, pricing, and available options such as size and color. It features an interactive gallery for images, a form to select product options, and real-time stock status updates, making it ideal for enhancing customer engagement and assisting in purchasing decisions on an e-commerce platform.
Product Detail 6product-detail6This component provides a detailed view of a product, featuring an image gallery, pricing information, and a form to select options like size and quantity. It includes functionalities for customers to view recommended products, read detailed product information through an accordion, and add items to the cart or proceed to buy immediately.
Product Detail 7product-detail7This component showcases detailed product information, integrating a carousel for engaging image displays and a dynamic form for quantity selection. It features an accordion for organizing sections like product details and application tips, and presents badges for promotional messages such as discounts or new arrivals.
Product Detail 8product-detail8This component is designed to display detailed product information, including images, reviews, available sizes and colors, and stock status. It features an interactive form allowing users to select product options and add items to their cart, incorporating a carousel for image viewing and an accordion for additional product details.
Product Detail 9product-detail9This component is designed to display detailed product information, including images, price, and size options, providing an interactive user interface for selecting product variations and purchasing. It features an image carousel with lightbox functionality, a form for selecting product specifications, and buttons for adding the product to the cart or buying it immediately.
Product Gallery 1product-gallery1This component is a product image gallery featuring a carousel with multiple images, allowing users to navigate through images using next and previous controls. It supports customization through an optional className prop, enabling users to adjust its styling according to their needs.
Product Gallery 2product-gallery2This component provides an interactive carousel gallery for displaying a collection of product images, supporting functionalities like zoom and navigation controls. It integrates with a lightbox library to enhance image viewing, allowing users to browse through images with next-prev buttons and a custom close option.
Product Gallery 3product-gallery3This component, named `ProductGallery3`, provides an interactive image gallery with carousel functionality to display product images dynamically from a provided list. It leverages PhotoSwipeLightbox for viewing images in a full-screen mode and includes custom navigation elements for enhanced user interaction.
Product Gallery 4product-gallery4The component is a versatile product image gallery block that displays images in a carousel format, allowing users to view high-quality images with zoom capabilities via a lightbox feature. It includes thumbnail navigation, customizable indicators, and interactive controls for enhanced user engagement.
Product Gallery 7product-gallery7This component is a dynamic image gallery block that allows users to browse through product images using a carousel with thumbnail navigation and zoom features. It utilizes PhotoSwipe for lightbox functionality and manages user interactions like image selection and carousel navigation with hooks and state management in React.
Product List 1product-list1This component displays a dynamic grid of product cards, showcasing attributes like name, description, image, pricing, and optional badges for promotional messages. Users can explore detailed product information and special offers, with pricing options reflecting regular and sale prices.
Product List 10product-list10This component is designed for showcasing a collection of products with promotional features, including details like stock status, pricing, and special badges. It allows users to view product images, access additional options like 'Add to cart' and 'Quick View', and features a promotional card with a call-to-action button.
Product List 2product-list2This component is designed to display a list of product cards, each containing details such as the product image, name, description, pricing, and an optional badge. It features a grid layout to organize multiple product listings, with each card providing an "Add to cart" button for quick shopping actions.
Product List 3product-list3This component is a product listing block that displays a grid of product cards, each featuring an image, name, description, and pricing details, including sale prices where applicable. It also incorporates interactive elements such as "Add to cart" buttons and optional badges to highlight specific product features or promotions.
Product List 4product-list4This component displays a dynamic product showcase with promotional information, allowing users to view a collection of products with details such as images, prices, brands, and ratings. It includes a promo card that highlights special offers and a list of individual product cards that provide quick access through clickable links.
Product List 5product-list5This component, named `ProductList5`, displays a collection of products, showcasing their images, names, prices (including sale prices), and respective collections in a grid format. It also includes a header with a call-to-action button and organizes products using a card layout, making it suitable for listing and browsing items visually.
Product List 6product-list6This component is a product carousel designed to showcase a list of products with features such as stock status, pricing, and variant options. Users can view different product options by selecting various color variants and can quickly add products to their cart if they're in stock.
Product List 7product-list7This component displays a grid of product cards with images, names, prices, and availability information, allowing users to browse and select products. It includes features for selecting size options through a radio group interface and adding products to a cart, providing user interaction through tooltips for stock status.
Product List 8product-list8This component displays a grid of products, each with customizable options such as size, color, and quantity, allowing users to add items to their cart. It features interactive elements for product selection, dynamic price display, and visual cues for available options, aiding in an engaging shopping experience.
Product List 9product-list9This component is a versatile product showcase block that features a carousel of items organized into categories with promotional content. It includes interactive elements such as tabbed navigation, product color variants, and dynamic pricing display to enhance the user shopping experience.
Product Quick View 4product-quick-view4This component provides a quick view interface for a product, showcasing images, a description, pricing details, and available options such as color and size. It features a carousel for product images and a form that allows users to select product variations and add the item to their cart, all within a dialog layout.
Product Quick View 5product-quick-view5The component provides a detailed product quick view interface featuring a carousel of image previews, rating display, pricing information, stock status, and service offerings. It includes interactive features like quantity selection, color choice options, social media sharing links, and an accordion section detailing product descriptions and features, making it ideal for e-commerce platforms to enhance product exploration and engagement.
Product Quick View 6product-quick-view6This React component provides a quick view feature for a product, displaying product details like images, price, reviews, and availability. It includes interactive elements such as an image carousel, quantity selector, and buttons for adding products to a cart or purchasing immediately.
Product Quick View 7product-quick-view7This React component provides a quick view of a product, featuring a detailed display of product images, pricing, and availability indicators. It includes features such as a carousel for navigating images, a form for selecting product options like color, size, and quantity, and interactive buttons for adding the product to the cart or buying it immediately.
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 Specs 1product-specs1This component is a collapsible block designed to display technical specifications across various categories, such as display, performance, and connectivity. It features toggle functionality to expand or collapse categories, with visual icons and a neatly organized table format for easy specification viewing.
Product Specs 2product-specs2This component displays detailed product specifications organized into tabs for easy navigation and comparison, allowing users to switch between categories like Overview, Display, and Performance. Each spec group highlights key features and uses visual indicators to show boolean values with check and cross icons.
Progress Basic 1progress-progress-basic-1Empty Progress.
Progress Basic 2progress-progress-basic-2Quarter Progress.
Progress Basic 3progress-progress-basic-3Half Progress.
Progress Basic 4progress-progress-basic-4Three Quarters Progress.
Progress Basic 5progress-progress-basic-5Complete Progress.
Progress Colored 1progress-progress-colored-1Success.
Progress Colored 2progress-progress-colored-2Warning.
Progress Colored 3progress-progress-colored-3Danger.
Progress Colored 4progress-progress-colored-4Info.
Progress Colored 5progress-progress-colored-5Gradient.
Progress Sizes 1progress-progress-sizes-1Extra Small.
Progress Sizes 2progress-progress-sizes-2Small.
Progress Sizes 3progress-progress-sizes-3Default.
Progress Sizes 4progress-progress-sizes-4Large.
Progress Sizes 5progress-progress-sizes-5Extra Large.
Progress With Label 1progress-progress-with-label-1With Percentage.
Progress With Label 2progress-progress-with-label-2With Label Above.
Progress With Label 3progress-progress-with-label-3With Label Below.
Progress With Label 4progress-progress-with-label-4With Count.
Progress With Label 5progress-progress-with-label-5Multi-line Label.
Project 1project1A block showcasing team collaboration, with a header, an exploration link, a hero image, text descriptions, project details, and two grids of images. Unique fade-up animation on scroll.
Project 10project10A component showcasing urban photography, featuring a title, button, and categories. It contains interactive images and sections discussing inspiration, challenges, and rewards. Includes a carousel aspect.
Project 12project12A component with dynamic text animations, back button, detailed project information, and a large image; layout includes columns with animations for elements.
Project 13project13This component showcases a project with animated transitions. It includes a full-screen hero section with scaled imagery based on scroll progress, descriptive text, a project outline with key details, and a visually immersive grid of images that enlarge on hover, followed by an in-depth exploration section.
Project13aproject13aA visual storytelling component with a parallax hero section, project details, full-width images, and a concept overview. Uses staggered animations.
Project 14project14This component displays an animated showcase with a staggered fade-in effect, featuring a main title, two 2-column grids of images with hover effects, and a descriptive section with details on category, year, and brand.
Project 2project2A component displaying a project with a large title, metadata (year, category, client) in columns, an image, and descriptions, ending with a button.
Project2aproject2aA component showcasing a project with dynamic text elements, a three-column metadata layout, a full-width image, and detailed descriptions. Includes a styled button with an arrow icon.
Project2bproject2bA component showcasing project details with a 2-column layout for headings and metadata, a full-width image, and a detailed description area split into a smaller column for the heading and a larger one for text and a button.
Project2cproject2cA project showcase component with dynamic text fields, a 3-column layout for metadata, an image preview, and detailed descriptions. Features an outlined contact button.
Project2dproject2dA layout showcasing project details with a large title, stats in a 7:5 column ratio, an image with a caption overlay, and descriptive text in a 4:8 ratio. Features include dynamic text fields and a button.
Project 4project4A component showcasing a project case study with headers, body text, and full-width photos, arranged in a single-column layout focusing on brand identity design.
Project4aproject4aA brand identity design showcase component with a sticky sidebar featuring project info, metadata, and navigation. A 4-column layout on larger screens transitions to single-column on smaller ones.
Project4bproject4bA component showcasing a brand identity project for a juice company, with sections on design process, challenges, and outcomes, complemented by images and text descriptions.
Project4cproject4cA component showcasing a brand identity project with a hero section, article content, and visual assets. Features a full-screen image overlay, project summary, and results metrics grid.
Project 5project5An art-themed component showcasing a project with animated effects, including a main title, description, details (studio, museum, year, category, exhibition), main image, gallery of two images, and an artistic vision section.
Project5aproject5aThis component displays an art project with animated effects. It features a 3-column layout that condenses to 1 on smaller screens, descriptive text, a title, and images. Unique sections detail the project and artistic vision.
Project5bproject5bThis component displays a project with a staggered fade-in animation, divided into two columns, including images, exhibition details, a description, and specific artwork information.
Project5cproject5cThis component showcases an art project, combining text descriptions with images across different sections. It includes animated entries, a three-column layout for the header, and a main section with a 3:1 column ratio. Unique identifiers like artist and medium are highlighted.
Project5dproject5dAn animated gallery block with staggered fade-ins, featuring a title, descriptive text, image showcases, details in a 4-column grid, and a full exhibition button.
Project5eproject5eA layout featuring an animated art collection display with text descriptions, utilizing staggered child animations for a dynamic entry. It includes a 1-2-3 column grid for images, interactive hover effects, and detailed exhibition info sections.
Project5fproject5fA component displaying an art piece description, details, and images in a 2-column layout with fading animations and a booking button.
Project5gproject5gAn artistic component featuring staggered fade-in animations, structured into a header and main area. It contains a 5-column grid layout in the header and grids that shift from 3 to 2 columns in the main part, for displaying text and images related to an art exhibition. Unique elements include variable text spans and carefully positioned images within adjustable aspect ratios.
Project 6project6A component displaying a sticky description section alongside a grid of images, followed by another grid featuring project cards with hover effects.
Project6aproject6aA component displaying an image collection with animated elements, project rows, and descriptive text. Features dynamic image scaling on hover.
Project 7project7A component showcasing an architectural project with multiple sections: a header with a hero image, philosophy & vision, carousel of design images, architectural details, construction materials, and project impact. Uses imagery, text, and a carousel.
Project 8project8An animated block showcasing a fashion theme with large title, description, image, and credits. Features 1-2 columns and dynamic entry animations.
Project8aproject8aA visual-rich component showcasing a fashion theme with dynamic animations. Features a centered title, a subtitle, a full-width image, and a two-column layout for narrative and credits.
Project8bproject8bA visually animated block with a title, subtitle, two-column layout featuring an image and detailed text descriptions, incorporating motion effects on load.
Project8cproject8cA component showcasing a project with animated visibility effects, featuring a title, description, an image, and detailed information divided into a single column and a two-column section.
Project8dproject8dA component showcasing a fashion project with animated visibility, a large title, a subtitle, an image, detailed descriptions, and credits spanning multiple columns.
Project8eproject8eA two-section block featuring a fullscreen hero with animated text and a detailed content section in a 2-column layout with credits.
Project 9project9A dual-column component featuring a sticky narrative section with animated transitions and a gallery of monochrome images that enlarge on hover.
Projects 1projects1A block showcasing architectural projects with animation, containing a title, images, descriptions, and tags. It has a 2-column layout for larger screens with animation effects.
Projects 10projects10A gallery block with a 3-column layout displaying images that enlarge and reveal titles and descriptions on hover.
Projects 11projects11A dynamic image gallery with 1-3 columns featuring animated, hover-zoomed images.
Projects 12projects12An interactive gallery component with a 1-3 column layout, showcasing projects with hover animations and dynamic, motion-enhanced tooltips.
Projects 13projects13A component showcasing 4 projects with details: Title, Description, Launch Date & Image, in a 3-column layout emphasizing project highlights.
Projects 14projects14A grid-based component showcasing projects, with animation effects on hover. It includes a title, link to view all, and displays 5 items out of 10 with varied visibility.
Projects 15projects15A component showcasing video projects with hover-play functionality, dynamic text overlays for studio names and titles, and a header section for exploration.
Projects15aprojects15aA component displaying a grid of video sections, each showing a thumbnail that plays a video on hover, with project titles.
Projects15bprojects15bA video gallery with a header and hover-to-play videos laid out in a 2-column grid, featuring project titles and studio names.
Projects15cprojects15cA video gallery block with hover-play functionality, showcasing project titles and studio names over thumbnails.
Projects15dprojects15dA component displays video projects in a 2x2 grid, with auto-play on hover, showing studio names and titles.
Projects15eprojects15eA video carousel component displaying project thumbnails that play videos on hover, showcasing titles and studio names. Features navigation arrows and auto-pause.
Projects 16projects16A gallery component showcasing nature photos in two columns, with a descriptive heading and a discovery link button.
Projects 17projects17A carousel block showcasing projects with images, title, and location. Included are navigation buttons for scrolling through items.
Projects17aprojects17aA component showcasing projects in a carousel with cinematic images, titles, categories, and dynamic navigation arrows.
Projects17bprojects17bA carousel-based component showcasing projects with images, titles, categories, locations, years, and descriptions within cards. Includes navigational arrows and badges for category identification.
Projects 18projects18A component showcasing a portfolio of projects with dynamic overlays, featuring images, headings, and descriptions. Includes a header with a title and intro, plus a button. Each project is visualized in a column, revealing more info on hover.
Projects 2projects2A showcase block with a title and a list of projects. Each listing includes a bold title, description, and image arranged in a flexible grid.
Projects 3projects3A dynamic showcase of projects with animations reacting to scrolling and mouse movement. Displays projects in a single-column layout with expandable image and text animations upon hover.
Projects 4projects4This component displays projects with a 2-column grid, including images, titles, categories, and dates. Features a large title and descriptive text section.
Projects 5projects5A gallery block showcasing 6 projects with animations, in 1 or 2 columns depending on screen size, including images and project details.
Projects 6projects6A gallery component with a 2-column layout showcasing 4 project cards that animate on hover and reveal details.
Projects 7projects7A component displaying items in a grid, with dynamic filtering. It shows 1-2 columns of items, each with hover effects revealing details. Unique: filter-based display animation.
Projects 8projects8A component displaying items in a grid with 3 columns, featuring category filters and animations on item change.
Projects 9projects9A component displaying a 1 or 2-column grid of images with hover effects revealing titles and descriptions.
Promo Banner 1promo-banner1This component displays a promotional banner indicating progress towards unlocking a free shipping offer based on a spending threshold. It features a progress bar and dynamically updates the user's remaining balance to qualify for free shipping.
Promo Banner 2promo-banner2This component displays a promotional banner with customizable text for a message, discount, and a call-to-action link. It is designed to enhance user engagement by offering a clickable area that leads to more details or a shopping page.
Promo Banner 3promo-banner3This component is a promotional banner designed to display a countdown timer indicating the time remaining for users to place orders to ensure delivery by a specified date. It includes customizable delivery date and cutoff time features and utilizes a countdown logic to update live on-screen, making it ideal for time-sensitive promotions.
Promo Banner 4promo-banner4This component, PromoBanner4, displays a series of promotional messages using icons and text to highlight key trust-building features like free shipping, return policies, and secure checkout. It allows for customization by accepting an array of items, where each item consists of an icon and descriptive text, making it an ideal choice for enhancing customer assurance and showcasing promotional highlights.
Promo Banner 5promo-banner5This component is a promotional banner with a countdown timer that highlights a flash sale event, displaying the time remaining until the end of the sale. It features customizable messages and descriptions, and adjusts its appearance based on provided styling classes.
Promo Banner 6promo-banner6This component is a promotional banner featuring a countdown timer, useful for displaying time left until a special event or offer ends. It accepts props such as `endTime` for the countdown target, a customizable `title` for the banner message, and additional styling through `className`.
Promo Banner 7promo-banner7This component displays a promotional banner featuring a countdown timer and stock progress bar, ideal for showcasing limited-time offers. Users can customize the end time and stock values, while it dynamically updates to indicate time left and items remaining.
Radio Group Advanced 1radio-group-radio-group-advanced-1RadioGroup with Icons.
Radio Group Advanced 2radio-group-radio-group-advanced-2RadioGroup with Custom Content.
Radio Group Form 1radio-group-radio-group-form-1RadioGroup in Form.
Radio Group Form 2radio-group-radio-group-form-2RadioGroup with Disabled States.
Radio Group Layout 1radio-group-radio-group-layout-1Horizontal RadioGroup.
Radio Group Layout 2radio-group-radio-group-layout-2RadioGroup with Cards.
Radio Group Layout 3radio-group-radio-group-layout-3RadioGroup in Grid.
Radio Group Standard 1radio-group-radio-group-standard-1Basic RadioGroup.
Radio Group Standard 2radio-group-radio-group-standard-2RadioGroup with Descriptions.
Rate Card 1rate-card1This component displays a detailed pricing plan with a step-by-step breakdown of the process, including revision, strategy refinement, and implementation over specified timelines. It features a clear pricing structure, booking conditions, and utilizes illustrative elements to enhance visual representation.
Rate Card 2rate-card2This component is designed to display pricing plans, featuring options for a monthly retainer and a premium package, each with detailed descriptions and a list of included benefits. Users can easily view the price, billing period, and a button to initiate the sign-up process for each plan.
Rating Basicrating-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 1rating-rating-kibo-composition-1
Rating Kibo Controlled 1rating-rating-kibo-controlled-1
Rating Kibo Default 1rating-rating-kibo-default-1
Rating Kibo Readonly 1rating-rating-kibo-readonly-1
Rating Kibo Sizes 1rating-rating-kibo-sizes-1
Rating Kibo Standard 1rating-rating-kibo-standard-1
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 Scorerating-rating-with-scoreRating shows stars plus explicit numeric score.
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.
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 1resource1A component displaying a guide with options to download, share, and a story narrative; uses icons, buttons, and social links; split into two main sections.
Resource 2resource2This component is designed to showcase articles and facilitate easy navigation and social sharing. It features sections for blog content, author details with an avatar, an illustration, and social media sharing buttons, making it ideal for displaying detailed, narrative-rich content.
Resource 3resource3A component featuring a breadcrumb navigation, article content with an image and story, alongside a sidebar highlighting document features, reviewer info, and social share buttons. Includes a 2-column layout.
Resources 1resources1The Resources1 component is a comprehensive resources page that displays a collection of reports and articles with a featured post, category filtering, email subscription form, and a responsive grid layout of resource cards, all built with Shadcn UI components and featuring modern design patterns.
Resources 2resources2A component showcasing resources & whitepapers with a featured article, latest developments, and updates section. Utilizes tabs for category filtering, avatars for author representation, and badges for feature highlights.
Resources 3resources3A component showcasing a featured post with an image and a list of resources, each with a date, category, and title, arranged in columns.
Resources 4resources4A component showcasing recent updates with a title, list items including titles, categories, avatars, dates, and interactive hover effects.
Resources 5resources5This component displays a collection of educational courses, each including details like title, description, lessons, videos, duration, audience, author information, and a call-to-action button. It visually presents course information with thematic badges, images, and author avatars to enhance user engagement and easy navigation.
Reviews 1reviews1This component displays a list of customer reviews, including each review's rating, title, content, author, and date. It calculates and shows the average rating from all reviews, and highlights verified purchases with a distinct badge.
Reviews 18reviews18This component is a review display block that showcases customer reviews, ratings, and images with an interactive carousel gallery. It includes features such as sorting options, the ability to load more reviews, and a detailed view of each review, highlighting the author's details and visual content.
Reviews 2reviews2This component displays a list of customer reviews, providing a summary of average ratings, a distribution of ratings, and individual review details including the author, date, and content. It features elements like avatars, badges for verified reviews, and rating bars to visually represent the feedback statistics.
Reviews 23reviews23The component displays a carousel of product reviews, each featuring an author's avatar, comment, and associated product details such as image and name. It includes carousel navigation controls to scroll through the reviews and highlights verified buyers, making it ideal for showcasing customer feedback on products interactively.
Reviews 3reviews3This component presents user reviews with features that include displaying the reviewer's name, avatar, review content, rating, and images. It also allows users to mark reviews as helpful and provides a button to write a new review.
Reviews 4reviews4This component displays a collection of user reviews with features including average rating calculation, review filtering by star rating, and visual representation of rating distribution. Users can see detailed information about each review, such as the content, author, and date, with the option to filter and clear selected ratings.
Reviews 5reviews5This component displays a list of customer reviews with features like sorting options by helpfulness, date, and rating, and includes visual elements such as avatars, ratings, and progress bars for rating distribution. It provides an interactive user interface where users can view detailed customer feedback and load additional reviews.
Reviews 6reviews6This component is designed to display a carousel of customer reviews, highlighting feedback on various products including product details such as name, image, price, and a link. Users can interact with the carousel to navigate through different reviews, and the component includes dynamic elements like product rating, customer comments, and author attribution.
Reviews 8reviews8This component provides a review carousel functionality, allowing users to scroll through and view customer reviews, both text-based and image-supported, with ratings and author details. Ideal for showcasing testimonials or product feedback, the block includes navigational buttons for smooth scrolling and individual indicators for easy selection.
Reviews 9reviews9This component displays a carousel of user reviews, featuring ratings, comments, authors, dates, and associated images. It's designed to easily integrate user feedback into applications, providing an interactive way to showcase testimonials.
Scroll Area Advanced 1scroll-area-scroll-area-advanced-1Both Orientations.
Scroll Area Advanced 2scroll-area-scroll-area-advanced-2Dynamic Content.
Scroll Area Advanced 3scroll-area-scroll-area-advanced-3With ResizableHandle.
Scroll Area Layout 1scroll-area-scroll-area-layout-1Fixed Height ScrollArea.
Scroll Area Layout 2scroll-area-scroll-area-layout-2Scrollable Tags.
Scroll Area Layout 3scroll-area-scroll-area-layout-3Chat Messages.
Scroll Area Standard 1scroll-area-scroll-area-standard-1Basic ScrollArea.
Scroll Area Standard 2scroll-area-scroll-area-standard-2Horizontal ScrollArea.
Scrollable Tabslist Basicscrollable-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 1separator-separator-basic-1Horizontal Separator.
Separator Basic 2separator-separator-basic-2Vertical Separator.
Separator Basic 3separator-separator-basic-3In Navigation.
Separator Basic 4separator-separator-basic-4Section Divider.
Separator Basic 5separator-separator-basic-5Simple Line.
Separator Spacing 1separator-separator-spacing-1Tight Spacing.
Separator Spacing 2separator-separator-spacing-2Default Spacing.
Separator Spacing 3separator-separator-spacing-3Wide Spacing.
Separator Spacing 4separator-separator-spacing-4With Margins.
Separator Spacing 5separator-separator-spacing-5Inset Separator.
Separator Styled 1separator-separator-styled-1Thick Separator.
Separator Styled 2separator-separator-styled-2Dashed Separator.
Separator Styled 3separator-separator-styled-3Dotted Separator.
Separator Styled 4separator-separator-styled-4Gradient line divider between content sections.
Separator Styled 5separator-separator-styled-5Double Line.
Separator With Text 1separator-separator-with-text-1With Text Center.
Separator With Text 2separator-separator-with-text-2With Text Left.
Separator With Text 3separator-separator-with-text-3With Text Right.
Service 1service1A component detailing UX/UI design services, featuring a full-width hero, introductory section, and content blocks with headings, paragraphs, and a list. It has a single-column layout.
Service 2service2A component featuring a full-width hero with a background image, overlay, and centered title, followed by sections with titles, text, and a list detailing design services and philosophies.
Service 3service3A component featuring a hero section with an overlay for text readability, a three-column stats display, and detailed content sections focusing on UX/UI design principles and services.
Service 4service4A component showcasing UX/UI design services with a hero section and a sidebar detailing expertise. Layout includes a 2:1 column split with services listed and a sidebar for stats.
Service 5service5A component showcasing UX/UI design services, with a 2:1 column layout. Features text descriptions, expertise stats, and related services with icons.
Service 6service6This component showcases UX/UI design services, expertise, and related offerings in a structured layout including icons and descriptions.
Service 7service7A component showcasing UX/UI design services with sections on expertise, main content, and related services. It includes icons, titles, descriptions, and a grid layout of 1 to 3 columns.
Services 1services1A component displaying services in 1-2 columns, each service with a title, description, and list of features marked by check icons.
Services 10services10A component showcasing various digital services, each with an icon, title, duration, price, and featured status. Includes an intro badge, section headings, and a grid layout with 1-2 columns. Features detailed service descriptions, included items, deliverables with badges, and customizable "Get Started" buttons. A final call-to-action offers custom solutions.
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 12services12A component displaying featured services in a grid layout with a description panel, offering dynamic interaction for each service card.
Services 13services13A component featuring services with a dynamic layout. It has a title, text, and a button, followed by cards for each service with hover effects. The layout shifts from single to multiple columns.
Services 14services14A component showcasing 4 service areas in a grid with animated cards. It features a title, a description, and a call-to-action button. Each service card includes an image, title, and hover effect.
Services 15services15A component showcasing digital services in a masonry layout with 1-3 columns, variable heights, and hover effects. Includes a title, description, and a view-all button.
Services 16services16A component displaying services in an accordion layout with images, descriptions, and categorized badges. Features a bold service counter and a large "Services." heading spanning 3 of 4 columns.
Services 18services18A 3-column component displaying services with a large title, description, and interactive list. Includes progress indicators and "Get Started" CTA.
Services 19services19An animated table layout displaying service options with a unique feature of a cursor-following image that changes based on the hovered table row.
Services 20services20A component listing services using animations, a structured approach text, and contact button. Includes 5 sections, each with a title and options; animations on scroll.
Services 21services21A component displaying a dynamic list of services with an animating image preview. It has a sticky side section for images and texts, plus a list that updates the preview on hover. Includes a CTA button with an animated icon.
Services 3services3A component displaying four service categories, each with an icon, title, and list of services in a three-column layout.
Services 4services4A component displaying services in a 2-column grid, detailing 4 services with icons, titles, descriptions, and bullet points. Features hover effects and a central header.
Services 5services5A 4-column component listing services with icons, titles, descriptions, and bullet points. Features a central 'Services' title and summary.
Services 6services6A component showcasing 4 services with icons, titles, descriptions, and items in a 1-2-4 column layout, featuring hover effects.
Services 7services7This component displays four services, each with an icon, title, description, and list of features, styled with rounded containers.
Services 8services8An interactive component lists services with accordions, including icons, titles, and descriptions. Features 2-column grid for in-depth details.
Services 9services9A component displays services with icons, titles, descriptions, inclusions, durations, and prices in a 2-column grid, with a 'Get Started' 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 1sheet-sheet-details-1Product Details Sheet.
Sheet Details 2sheet-sheet-details-2User Profile View Sheet.
Sheet Details 3sheet-sheet-details-3Order Details Sheet.
Sheet Details 4sheet-sheet-details-4Article Preview Sheet.
Sheet Details 5sheet-sheet-details-5Notification List Sheet.
Sheet Form 1sheet-sheet-form-1Contact Form Sheet.
Sheet Form 2sheet-sheet-form-2User Profile Edit Sheet.
Sheet Form 3sheet-sheet-form-3Search and Filter Sheet.
Sheet Form 4sheet-sheet-form-4Create New Item Sheet.
Sheet Form 5sheet-sheet-form-5Multi-Step Form Sheet.
Sheet Multi Section 1sheet-sheet-multi-section-1Sheet with Header, Content, and Footer.
Sheet Multi Section 2sheet-sheet-multi-section-2Sheet with Tabs.
Sheet Multi Section 3sheet-sheet-multi-section-3Sheet with Scrollable Content.
Sheet Multi Section 4sheet-sheet-multi-section-4Sheet with Action Buttons in Footer.
Sheet Multi Section 5sheet-sheet-multi-section-5Sheet with Sticky Header and Footer.
Sheet Navigation 1sheet-sheet-navigation-1Mobile Menu Sheet.
Sheet Navigation 2sheet-sheet-navigation-2Sidebar Navigation Sheet.
Sheet Navigation 3sheet-sheet-navigation-3Nested Navigation Menu Sheet.
Sheet Navigation 4sheet-sheet-navigation-4Navigation with User Profile Sheet.
Sheet Navigation 5sheet-sheet-navigation-5Navigation with Search Sheet.
Sheet Settings 1sheet-sheet-settings-1App Preferences Sheet.
Sheet Settings 2sheet-sheet-settings-2Account Settings Sheet.
Sheet Settings 3sheet-sheet-settings-3Notification Preferences Sheet.
Sheet Settings 4sheet-sheet-settings-4Theme Settings Sheet.
Sheet Settings 5sheet-sheet-settings-5Privacy Settings Sheet.
Sheet Standard 1sheet-sheet-standard-1Bottom-Sliding Sheet.
Sheet Standard 2sheet-sheet-standard-2Sheet with Title and Description.
Sheet Standard 3sheet-sheet-standard-3Left-Sided Sheet.
Sheet Standard 4sheet-sheet-standard-4Top-Sliding Sheet.
Shopping Cart 1shopping-cart1This component, named "ShoppingCart1," provides a user interface for displaying and managing items in a shopping cart. It supports functionality like removing items, viewing the item list with images, and calculating the total cost dynamically.
Shopping Cart 14shopping-cart14This component provides a comprehensive shopping cart interface, allowing users to view, modify, and manage items in their cart, such as adjusting quantities and removing products. It features integration with form handling to calculate the total price dynamically and supports easy navigation for cart and checkout actions.
Shopping Cart 15shopping-cart15This component manages a shopping cart, showcasing items with functionalities for quantity management, item removal, variant selection, and promotional code application. It displays either an empty cart message or a detailed list of products, including variants and pricing, to facilitate user interactions and order adjustments.
Shopping Cart 16shopping-cart16The component is a dynamic and interactive shopping cart block that allows users to manage items in their cart, update item quantities, and view suggested products. It features functionalities like displaying product details, calculating totals, applying discounts, and incorporates carousel and collapsible elements for enhanced user interaction.
Shopping Cart 17shopping-cart17This component provides an interactive shopping cart experience with features like displaying cart items, allowing quantity adjustments, and updating the total price dynamically. It includes functionality for handling empty cart states and adding promotional codes to enhance user engagement and purchase potential.
Shopping Cart 18shopping-cart18This component provides a dynamic shopping cart interface with functionalities to view, update item quantities, and remove items, along with calculating and displaying the subtotal. It utilizes a popover for cart interactions and includes visual elements for item display, quantity management, and checkout options.
Shopping Cart 19shopping-cart19This component provides an interactive shopping cart interface allowing users to manage and adjust item quantities, apply promo codes, and view subtotal costs with progress towards free shipping. It also suggests upsell products and provides a checkout feature, all contained within a collapsible interface.
Shopping Cart 2shopping-cart2This component provides a detailed shopping cart interface where users can view, modify, and manage their selected items, including options to adjust quantities or remove items. It also features an order summary with subtotal, shipping costs, and total price calculations, allowing users to seamlessly proceed to checkout.
Shopping Cart 20shopping-cart20The ShoppingCart20 component provides an interactive shopping cart interface, allowing users to view, modify, and manage items directly from a pop-up interface. Key features include displaying items with images, adjusting item quantities, calculating subtotals, and offering express checkout options with payment integrations like Apple Pay and PayPal.
Shopping Cart 3shopping-cart3This component is a dynamic shopping cart block that allows users to manage items, update quantities, and apply promotional codes. It includes features such as order summary, item removal, subtotal calculation, and trust badges for secure checkout, making it a comprehensive solution for handling online purchases.
Shopping Cart 7shopping-cart7This component provides a dynamic shopping cart interface, allowing users to view, update quantities, and remove products with real-time price calculation. It integrates form management via react-hook-form to handle cart item data and user interactions efficiently.
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 10sidebar10A sidebar10 component
Sidebar 11sidebar11A sidebar11 component
Sidebar 12sidebar12A sidebar12 component
Sidebar 13sidebar13A sidebar13 component
Sidebar 14sidebar14A sidebar14 component
Sidebar 15sidebar15A sidebar15 component
Sidebar 16sidebar16A sidebar16 component
Sidebar 17sidebar17A sidebar17 component
Sidebar 18sidebar18A sidebar18 component
Sidebar 19sidebar19A sidebar19 component
Sidebar 2 - Sidebar with Collapsible Submenussidebar2A sidebar with collapsible navigation groups, nested submenu items with chevron indicators, and expandable project sections.
Sidebar 20sidebar20A sidebar20 component
Sidebar 21sidebar21A sidebar21 component
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 9sidebar9A sidebar9 component
Signup 1signup1A signup component featuring a logo, customizable headings, email and password fields, buttons for account creation and Google signup, and a login redirect.
Signup 10signup10A signup component with a logo, social sign-up option, email input, continue button, and legal links. It has a two-column layout on larger screens with an image on one side.
Signup 2signup2A signup component with logo, headings, email/password inputs, and buttons for account creation and Google signup, arranged in a centered column layout.
Signup 3signup3A signup component with a logo, forms for email and password, and social login options (Google, Github, Facebook). Fits in a column of max-width 340px.
Signup 4signup4A signup component featuring a logo, headings, email/password inputs, and social media signup options (Google, Facebook, Apple). Includes a 'login' link.
Signup 5signup5A signup component with 2 columns; one for form inputs including name, email, password, and Google sign-up, and another for an image. Includes a text link for existing accounts.
Signup 6signup6A signup component featuring email/password fields, Google signup, and a login redirect. Layout includes a centered form in a 400px column.
Signup 7signup7This component is a two-column layout for account creation, featuring sign-up options with Google, Email, or SSO, terms agreement links, and a side section showcasing benefits and logos.
Signup 8signup8A signup component with a 2-column layout featuring a promotional badge, headings, text, and sign-up buttons on the left, and an illustrative card simulating a browser window on the right.
Signup 9signup9A signup component with Google signup option, email input, and a carousel of logos at the bottom.
Skeleton Card 1skeleton-skeleton-card-1Simple Card with Image and Text.
Skeleton Card 2skeleton-skeleton-card-2Card with Avatar and Content.
Skeleton Card 3skeleton-skeleton-card-3Card with Badge and Tags.
Skeleton Card 4skeleton-skeleton-card-4Vertical Card Layout.
Skeleton Card 5skeleton-skeleton-card-5Horizontal Card Layout.
Skeleton Content 1skeleton-skeleton-content-1Article Preview.
Skeleton Content 2skeleton-skeleton-content-2Blog Post.
Skeleton Content 3skeleton-skeleton-content-3Comment Thread.
Skeleton Content 4skeleton-skeleton-content-4Detailed Article.
Skeleton Content 5skeleton-skeleton-content-5Content with Sidebar.
Skeleton Form 1skeleton-skeleton-form-1Input Fields.
Skeleton Form 2skeleton-skeleton-form-2Form with Labels.
Skeleton Form 3skeleton-skeleton-form-3Multi-column Form.
Skeleton Form 4skeleton-skeleton-form-4Form with Sections.
Skeleton Form 5skeleton-skeleton-form-5Search Form.
Skeleton List 1skeleton-skeleton-list-1Simple List Items.
Skeleton List 2skeleton-skeleton-list-2List with Avatars.
Skeleton List 3skeleton-skeleton-list-3List with Icons.
Skeleton List 4skeleton-skeleton-list-4Multi-line List Items.
Skeleton List 5skeleton-skeleton-list-5Hierarchical List Items.
Skeleton Profile 1skeleton-skeleton-profile-1User Profile Header.
Skeleton Profile 2skeleton-skeleton-profile-2Profile Card.
Skeleton Profile 3skeleton-skeleton-profile-3Profile Settings Form.
Skeleton Profile 4skeleton-skeleton-profile-4Profile with Stats.
Skeleton Profile 5skeleton-skeleton-profile-5Team Member Card.
Skeleton Table 1skeleton-skeleton-table-1Simple Table Rows.
Skeleton Table 2skeleton-skeleton-table-2Table with Actions.
Skeleton Table 3skeleton-skeleton-table-3Table with Avatars.
Skeleton Table 4skeleton-skeleton-table-4Expandable Rows.
Skeleton Table 5skeleton-skeleton-table-5Table with Pagination.
Skills 1skills1A component featuring a compilation of professional tools and frameworks, with a 6-column layout, displaying items in a 2:4 ratio. It highlights each tool's name, category, experience, and logo. Unique features include customizable buttons and a sticky left column with introductory text and navigation options.
Skills 2skills2A component listing tools & technologies in a 2-column layout with a decorative background pattern for each item, including icons, names, categories, and usage percentages.
Slider Interactive 1slider-slider-interactive-1Synced with Input Field.
Slider Interactive 2slider-slider-interactive-2With Increment/Decrement Buttons.
Slider Interactive 3slider-slider-interactive-3With Preset Values.
Slider Interactive 4slider-slider-interactive-4With Reset Button.
Slider Interactive 5slider-slider-interactive-5With Live Preview.
Slider Range 1slider-slider-range-1Basic Range Slider.
Slider Range 2slider-slider-range-2Price Range Slider.
Slider Range 3slider-slider-range-3Range with Value Display.
Slider Range 4slider-slider-range-4Range with Constraints.
Slider Range 5slider-slider-range-5Percentage Range.
Slider Settings 1slider-slider-settings-1Volume Control.
Slider Settings 2slider-slider-settings-2Brightness Control.
Slider Settings 3slider-slider-settings-3Temperature Control.
Slider Settings 4slider-slider-settings-4Speed Control.
Slider Standard 1slider-slider-standard-1Simple Slider.
Slider Standard 2slider-slider-standard-2Slider with Label.
Slider Standard 3slider-slider-standard-3Slider with Value Display.
Slider Standard 4slider-slider-standard-4Slider with Min/Max Labels.
Slider Standard 5slider-slider-standard-5Slider with Step Indicators.
Slider Styled 1slider-slider-styled-1Colored Slider.
Slider Styled 2slider-slider-styled-2With Tooltip.
Slider Styled 3slider-slider-styled-3Large/Thick Slider.
Slider Styled 4slider-slider-styled-4Minimal Style.
Slider Styled 5slider-slider-styled-5With Gradient Track.
Slider Vertical 1slider-slider-vertical-1Volume Control Style.
Slider Vertical 2slider-slider-vertical-2Height Selector.
Slider Vertical 3slider-slider-vertical-3Vertical with Labels.
Slider Vertical 4slider-slider-vertical-4Vertical Range.
Slider Vertical 5slider-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.
Sonner Content 1sonner-sonner-content-1Toast with Description.
Sonner Content 2sonner-sonner-content-2Toast with Custom Icon.
Sonner Content 3sonner-sonner-content-3Toast with Custom Duration.
Sonner Content 4sonner-sonner-content-4Toast with Multi-line Content.
Sonner Content 5sonner-sonner-content-5Toast with Rich HTML Content.
Sonner Interactive 1sonner-sonner-interactive-1Toast with Action Button.
Sonner Interactive 2sonner-sonner-interactive-2Toast with Cancel Button.
Sonner Interactive 3sonner-sonner-interactive-3Toast with Action and Cancel.
Sonner Interactive 4sonner-sonner-interactive-4Non-Dismissible Toast.
Sonner Position 1sonner-sonner-position-1Top Left Position.
Sonner Position 2sonner-sonner-position-2Top Center Position.
Sonner Position 3sonner-sonner-position-3Top Right Position.
Sonner Position 4sonner-sonner-position-4Bottom Left Position.
Sonner Position 5sonner-sonner-position-5Bottom Center Position.
Sonner Position 6sonner-sonner-position-6Bottom Right Position.
Sonner Promise 1sonner-sonner-promise-1Basic Promise Toast.
Sonner Promise 2sonner-sonner-promise-2Promise Toast with Data.
Sonner Promise 3sonner-sonner-promise-3Promise Toast with Error.
Sonner Promise 4sonner-sonner-promise-4Loading Toast.
Sonner Standard 1sonner-sonner-standard-1Default Toast.
Sonner Standard 2sonner-sonner-standard-2Success Toast.
Sonner Standard 3sonner-sonner-standard-3Error Toast.
Sonner Standard 4sonner-sonner-standard-4Warning Toast.
Sonner Standard 5sonner-sonner-standard-5Info Toast.
Spinner Applications 1spinner-spinner-applications-1Spinner in Item.
Spinner Applications 2spinner-spinner-applications-2Spinner in Input Group.
Spinner Applications 3spinner-spinner-applications-3Spinner in Empty State.
Spinner Button 1spinner-spinner-button-1Loading Button.
Spinner Button 2spinner-spinner-button-2Loading Outline Button.
Spinner Button 3spinner-spinner-button-3Loading Icon Button.
Spinner Button 4spinner-spinner-button-4Loading Secondary Button.
Spinner Button 5spinner-spinner-button-5Loading Small Button.
Spinner Ellipsis 1 - Ellipsis spinnerspinner-spinner-ellipsis-1Spinner using the bouncing ellipsis variant.
Spinner Inline 1spinner-spinner-inline-1Inline with Text.
Spinner Inline 2spinner-spinner-inline-2Spinner Before Text.
Spinner Inline 3spinner-spinner-inline-3Spinner After Text.
Spinner Inline 4spinner-spinner-inline-4Spinner in List Item.
Spinner Kibo Ellipsis 1spinner-spinner-kibo-ellipsis-1
Spinner Kibo Pinwheel 1spinner-spinner-kibo-pinwheel-1
Spinner Kibo Ring 1spinner-spinner-kibo-ring-1
Spinner Kibo Sizes 1spinner-spinner-kibo-sizes-1
Spinner Kibo Standard 1spinner-spinner-kibo-standard-1
Spinner Kibo Throbber 1spinner-spinner-kibo-throbber-1
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 2spinner-spinner-standard-2Small Spinner.
Spinner Standard 3spinner-spinner-standard-3Large Spinner.
Spinner Standard 4spinner-spinner-standard-4Primary Color Spinner.
Spinner Standard 5spinner-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 1stats1A component displaying performance stats in 3 columns, highlighted by large numbers and explanatory texts, centered around platform efficiency gains.
Stats 10stats10A component with 3 cards each showcasing metrics like conversion stoppage, time-saving, and growth. Each card has an avatar, logo, large text for the metric, and a description.
Stats 11stats11A statistical block displaying achievements with a unique background gradient, 2-column layout for stats, and decorative circles in the backdrop.
Stats 12stats12This component displays dynamic stats with a toggle for monthly/yearly views, animated graph, and call-to-action button. It has a 2-column layout with animated numbers and icons.
Stats 13stats13A component showcasing animated bars comparing values, with tooltips and percentage indicators for enhanced visual analysis. Includes a candy-striped background.
Stats 14stats14A countdown display component with an animated timer, promotional text, and a call-to-action button. Features a decorated container with dotted accents.
Stats 15stats15Dynamic stats display component with animated numbers, toggling year buttons, and an animated link illustration that changes based on the selected year. Features 4 columns of data.
Stats 16stats16A component displaying statistics with a title, subtitle, a dynamic line chart, and three key metrics.
Stats 17stats17A stat component displaying a radial chart and key metrics in a 2-column layout, including an SEO optimization percentage, number of built blocks, and a total visitors' trend with icons.
Stats 18stats18A component featuring a central radar chart and a row of stats below, displaying numerical values and descriptions.
Stats 19stats19A component displaying "Milestones" with a 6-column layout; includes a sticky label and lists stats in 2:3 column ratios.
Stats 2stats2A 3-column block displaying platform insights with arrows and icons denoting trends and values, includes descriptive texts.
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 4stats4A component displays platform ratings from Apple Store, Play Store, and Trustpilot, along with a headline. It uses star icons for ratings and logos for each platform.
Stats 5stats5A component displays performance metrics in 3 columns, highlighting values with dynamic icons and bold percentage figures.
Stats 6stats6A component displaying platform performance metrics and two buttons. It features a bold title, 4 columns for statistics, and dynamic text sizing.
Stats 7stats7A component displaying weekly stats in a bordered block with 3 metrics (work completed, progress metric, error rate), each with percentages, arrows indicating trend, and progress bars.
Stats 8stats8A stats display component with a heading, description, and link, followed by a 4-column layout for statistics.
Stats 9stats9This component displays statistics and four feature cards in a 2-column layout, highlighting benefits and key metrics.
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.
Switch Cards 1switch-switch-cards-1Settings Card.
Switch Cards 2switch-switch-cards-2Feature Card.
Switch Cards 3switch-switch-cards-3Settings List.
Switch Cards 4switch-switch-cards-4Switch in Item.
Switch Icons 1switch-switch-icons-1Theme Toggle with Icons.
Switch Icons 2switch-switch-icons-2Icon with Label.
Switch Icons 3switch-switch-icons-3Volume Toggle.
Switch Labeled 1switch-switch-labeled-1Switch with Label.
Switch Labeled 2switch-switch-labeled-2Switch with On Label.
Switch Labeled 3switch-switch-labeled-3Switch with State Labels.
Switch Labeled 4switch-switch-labeled-4Switch with Description.
Switch Square 1switch-switch-square-1Square Switch.
Switch Square 2switch-switch-square-2Square Switch with Text.
Switch Square 3switch-switch-square-3Square Switch with Label.
Switch Square 4switch-switch-square-4Square Theme Toggle.
Switch Standard 1switch-switch-standard-1Default Switch.
Switch Standard 2switch-switch-standard-2Checked Switch.
Switch Standard 3switch-switch-standard-3Small Switch.
Switch Standard 4switch-switch-standard-4Disabled Switch.
Table Advanced 1table-table-advanced-1Table with Vertical Lines.
Table Advanced 2table-table-advanced-2Dense Table.
Table Advanced 3table-table-advanced-3Vertical Table.
Table Advanced 4table-table-advanced-4Compatibility Table.
Table Standard 1table-table-standard-1Basic Table.
Table Standard 2table-table-standard-2Table with Avatar.
Table Standard 3table-table-standard-3Table Without Dividers.
Table Standard 4table-table-standard-4Striped Table.
Tabs Advanced 1tabs-tabs-advanced-1Tabs with Badge Counts.
Tabs Advanced 2tabs-tabs-advanced-2Controlled Tabs.
Tabs Advanced 3tabs-tabs-advanced-3Nested Tabs.
Tabs Content 1tabs-tabs-content-1Tabs with Forms.
Tabs Content 2tabs-tabs-content-2Tabs with Cards.
Tabs Content 3tabs-tabs-content-3Tabs with Tables.
Tabs Layout 1tabs-tabs-layout-1Vertical Tabs.
Tabs Layout 2tabs-tabs-layout-2Full Width Tabs.
Tabs Layout 3tabs-tabs-layout-3Scrollable Tabs.
Tabs Standard 1tabs-tabs-standard-1Basic Tabs.
Tabs Standard 2tabs-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 1team1A team showcase component with a title, subtitle, description, and a grid of member avatars, names, and roles, supporting up to 4 columns.
Team 10team10A block displaying a team with a title, introduction, and button, followed by a multi-column layout of team members' avatars and roles.
Team 11team11This component displays a grid of team members, showcasing their images, names, roles, and short descriptions. It features an interactive highlight effect on hover, enhancing the user engagement with dynamic animations and additional details.
Team 12team12A team showcase component with staggered animation for each member's photo, including name and role. Displays info in two columns with adjustable gaps.
Team 13team13A component featuring a team carousel with animated images/animations for mobile and a grid layout for other devices.
Team 15team15This component showcases a team of professionals, featuring their names, roles, avatars, and social media links (Twitter, Instagram, and LinkedIn) in an engaging, grid-based layout. It includes customizable titles and subtitles to highlight the team's mission and provides buttons to connect with each member through their social media profiles.
Team 2team2A component showcasing a team with a section title, description, and a grid of profiles (up to 4 columns), each with an avatar, name, role, description, and social links.
Team 3team3A component displaying a team section with a hiring call, team intro, and dynamic grid of team members (up to 8), including avatar, name, role, and social links. Grid adapts from 1 to 4 columns.
Team 36 - Simple Team Grid with Photosteam36A simple team or investors grid with square photos, names, and roles/companies in a responsive 5-column layout.
Team 4team4A component showcasing a team with 4 profile cards, including images, roles, bios, and social links. Each row adapts to screen size, displaying up to 4 columns.
Team 5team5A component featuring a team section with a hiring call, team intro, and buttons. It displays 8 profiles in up to 4 columns with photos, names, roles, and descriptions.
Team 6team6A component displaying a team section with a hiring call, team introduction, and a grid of team members' profiles including their roles, descriptions, and social links.
Team 7team7A component showcasing a team with a title, displaying 5 profiles in grids that adapt from 2 to 5 columns. Each profile has an image, name, and company.
Team 8team8A carousel component showcasing team members with images, roles, and years of experience. Includes navigation buttons and a separator.
Team 9team9A component showcasing team members with tabbed categorization and search functionality, displaying member details within a grid layout of up to 4 columns.
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 10testimonial10A testimonial block with a central quote, author's name, role, and avatar in a vertical layout.
Testimonial 11testimonial11A component displaying a testimonial section with a rating block, supporting multiple columns, and dynamic testimonial visibility based on screen size.
Testimonial 12testimonial12A component displaying carousel testimonials in a 3-column layout, featuring image+text on the left and detailed stats on the right.
Testimonial 13testimonial13A component featuring a testimonial with overlapping avatars and a quote, showcased on a single-column layout with centered text.
Testimonial 14testimonial14A carousel component showcasing testimonials, featuring text quotes, avatars, names, roles, and a 5-star rating system. Includes navigation dots for carousel control.
Testimonial 15testimonial15A component with a 2-column layout, showcasing a headline, description, button, company logos, and 4 personalized testimonials with avatars.
Testimonial 16testimonial16A component showcasing user testimonials in a grid with 2 columns, expandable content, and avatars.
Testimonial 17testimonial17A testimonial component with a dynamic carousel for mobile and a static 3-column layout for larger screens, showcasing user feedback and logos.
Testimonial 18testimonial18A testimonial component displaying a 5-star rating, a highlighted quote, and the author's avatar and details.
Testimonial 19testimonial19A carousel showcasing client testimonials with a 5-star rating system, client roles, and avatars. Features auto-scroll and multi-column layout.
Testimonial 2testimonial2This component displays a bold, centered message with overlapping avatars and a large "Get started for free" button underneath.
Testimonial 20testimonial20A two-column testimonial block with dashed borders, featuring quotes, avatars, and names. Decorated with sparkle icons at its corners.
Testimonial 21testimonial21A component showcasing expert testimonials with a header, badges, and a 3-column layout of cards containing logos, quotes, and author info.
Testimonial 23testimonial23A masonry layout component displaying customer testimonials with avatars, feedback, and dates. Includes a title, subtitle, and a "See More" button.
Testimonial 24testimonial24A component showcasing testimonials in a masonry layout with 1-3 columns, featuring user reviews, avatars, and star ratings. Includes reward cards with icons.
Testimonial 25testimonial25Testimonial carousel with navigation buttons, cards displaying quotes, authors, roles, companies, and images.
Testimonial 26testimonial26A testimonial carousel block with dynamic navigation dots and decorative background patterns. Displays quotes, authors, roles, and logos.
Testimonial 27testimonial27This component displays testimonials and case studies. It features a two-column layout for testimonials and a three-column grid for case studies. Each testimonial includes a quote, author photo, name, and role. Case studies show stats, title, and a background image that changes on hover.
Testimonial 28testimonial28A carousel component showcasing testimonials with avatars, names, and comments. Each slide has a dashed border with plus icons at the corners.
Testimonial 29testimonial29A testimonial carousel block with auto-rotation, featuring individual avatars, names, roles, and quotes. Layout includes centered items and pagination dots.
Testimonial 3testimonial3A testimonial component with a quote, image logo, and author attribution centered in a bordered block with adjustable padding.
Testimonial 30testimonial30Dynamic slideshow component with auto-rotating testimonials, accented by logos and avatars. Features accordion items for detailed views, automated 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 4testimonial4A testimonial component with 1 large image & text block plus 3 smaller text cards, each featuring an avatar.
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 6testimonial6A carousel showcasing testimonials with navigational controls, featuring a title, user quotes, and their avatars. Each slide shows 1-3 testimonials based on size.
Testimonial 7testimonial7A component showcasing two auto-scrolling carousels of client testimonials, with avatars, names, roles, and quotes, plus a section header.
Testimonial 8testimonial8A component displaying testimonials in a masonry layout, with items structured in up to 3 columns adjusting to breakpoints. It includes a badge, a title, and a subtitle.
Testimonial 9testimonial9A testimonials grid with dynamic columns, showcasing clients' feedback, names, roles, and avatars, along with a headline and subtext.
Textarea Form 1textarea-textarea-form-1Required Textarea.
Textarea Form 2textarea-textarea-form-2Textarea with Helper Text.
Textarea Form 3textarea-textarea-form-3Textarea with Error.
Textarea Form 4textarea-textarea-form-4Textarea with Hint.
Textarea Form 5textarea-textarea-form-5Textarea with Character Count.
Textarea Labeled 1textarea-textarea-labeled-1Textarea with Label.
Textarea Labeled 2textarea-textarea-labeled-2Textarea with Description.
Textarea Labeled 3textarea-textarea-labeled-3Textarea with Floating Label.
Textarea Labeled 4textarea-textarea-labeled-4Textarea with Inline Label.
Textarea Standard 1textarea-textarea-standard-1Simple Textarea.
Textarea Standard 2textarea-textarea-standard-2Disabled Textarea.
Textarea Standard 3textarea-textarea-standard-3Read-only Textarea.
Textarea Standard 4textarea-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.
Timeline 1timeline1A component presenting a 3-step process: "Data Integration," "Custom Configuration," and "Scale Your Business," each with icons, titles, and descriptions.
Timeline 10timeline10A timeline component with 4 columns, highlighting project phases with dates, titles, and descriptions, using animation to show current progress.
Timeline 11timeline11A 4-column timeline component showcasing phases with icons, dates, titles, and descriptions. Features an animated progress indicator.
Timeline 12timeline12An interactive timeline component with four tabs. Each tab reveals content on a different phase, including dates, descriptions, animated images, and a download button.
Timeline 13timeline13A component displaying a product launch timeline with 3 phases, progress bars, and durations. Features an animated timeline indicator.
Timeline 14timeline14A timeline component showcasing key milestones, uses intersection observer for active item highlight, includes sticky year indicator.
Timeline 19 - Vertical Phase Timelinetimeline19A vertical timeline with four project phases, dot markers, and an animated progress line showing current completion status.
Timeline 2timeline2A component displaying a timeline of sections with images and text. It has a two-column layout, with text on the left and a sticky, changing image on the right as you scroll.
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 3timeline3A component with a two-column layout. It displays a heading, description, and two buttons on one side. The other side visualizes features with images, titles, and descriptions.
Timeline 4timeline4A component showcasing a step-by-step guide with alternating layout, custom badges, icons, and diagonal patterns.
Timeline 5timeline5A 2-column layout component featuring static content on the left and scrollable cards on the right, each with an icon, title, and description.
Timeline 6timeline6A two-column component featuring a sticky section with a bold statement on the left and a scrollable section on the right showcasing icons with related titles and descriptions.
Timeline 7timeline7A component with a stepper UI to guide through a process, featuring dynamic progress indication, navigational buttons, and transition animations.
Timeline 8timeline8A vertical timeline block, showcasing events with dates, displayed in a centered max-width container with decorative separators.
Timeline 9timeline9This component displays a vertical timeline of key events in artificial intelligence history, using cards with titles, dates, and content.
Todo 1todo1This component is a simple interactive Todo List that allows users to track tasks by toggling their completion status with visual feedback. It features task titles displayed with checkboxes, enabling users to easily mark tasks as complete or incomplete.
Todo 10todo10This component is a task management block that allows users to manage, organize, and prioritize tasks along with subtasks by their due dates, projects, and priorities. It features drag-and-drop functionality, task sorting, filtering options, and the ability for users to add, update, delete, and toggle task completion and star status for easy organization and tracking.
Todo 2todo2This component provides a drag-and-drop to-do list allowing users to reorder tasks using a grip handle and toggle their completion status. It utilizes the `@dnd-kit` library to manage drag-and-drop interactions and supports keyboard and pointer sensors for accessibility and ease of use.
Todo 3todo3This component allows users to manage a to-do list, featuring drag-and-drop reordering of tasks, completion toggles, and organization of tasks into active and collapsible completed sections. It includes interactive elements such as draggable icons, checkboxes, and animation effects to enhance user interaction while managing tasks.
Todo 4todo4This component is a drag-and-drop task management block that allows users to create, reorder, and mark tasks as completed. It features interactive elements such as add and cancel buttons, an input field for task titles, and visual indicators for task status.
Todo 5todo5This component provides a dynamic and interactive to-do list that supports creating, reordering, editing, and deleting tasks with a user-friendly drag-and-drop interface. It features task management capabilities, including toggling task completion status, with easy access to edit or delete actions through a dropdown menu.
Todo 6todo6This component provides a drag-and-drop-enabled to-do list, allowing users to create, reorder, filter, and sort tasks by priority or title. It features interactive elements for task management, such as checkboxes to mark completion, dropdowns for filtering by priority or starred status, and buttons to add new tasks.
Todo 7todo7This component provides an advanced to-do list management system, allowing users to create tasks with options for setting dates, priorities, reminders, and associating tasks with specific projects. It includes features like drag-and-drop reordering, filtering, and sorting tasks by different criteria, enhancing task organization and productivity.
Todo 8todo8This component provides a dynamic to-do list with features for managing tasks and subtasks, allowing users to expand, reorder, and track progress with drag-and-drop functionality. Users can mark tasks and subtasks as completed and add new subtasks with ease, enabling efficient task management and prioritization.
Todo 9todo9This component provides a dynamic to-do list with features for real-time search, tag management, and task reordering via drag-and-drop functionality. Users can add or remove multiple tags per task, filter tasks based on tags, and utilize a search function to quickly locate tasks.
Toggle Group Sizes 1toggle-group-toggle-group-sizes-1Small Toggle Group.
Toggle Group Sizes 2toggle-group-toggle-group-sizes-2Default Size Toggle Group.
Toggle Group Sizes 3toggle-group-toggle-group-sizes-3Large Toggle Group.
Toggle Group Standard 1toggle-group-toggle-group-standard-1Default Toggle Group.
Toggle Group Standard 2toggle-group-toggle-group-standard-2Outline Toggle Group.
Toggle Group Standard 3toggle-group-toggle-group-standard-3Single Selection Toggle Group.
Toggle Group Standard 4toggle-group-toggle-group-standard-4Disabled Toggle Group.
Toggle Sizes 1toggle-toggle-sizes-1Small Toggle.
Toggle Sizes 2toggle-toggle-sizes-2Default Size Toggle.
Toggle Sizes 3toggle-toggle-sizes-3Large Toggle.
Toggle Standard 1toggle-toggle-standard-1Default Toggle.
Toggle Standard 2toggle-toggle-standard-2Outline Toggle.
Toggle Standard 3toggle-toggle-standard-3Disabled Toggle.
Toggle Standard 4toggle-toggle-standard-4Toggle with Text.
Tooltip Content 1tooltip-tooltip-content-1Tooltip with Title and Description.
Tooltip Content 2tooltip-tooltip-content-2Tooltip with Icon.
Tooltip Content 3tooltip-tooltip-content-3Tooltip with Keyboard Shortcut.
Tooltip Content 4tooltip-tooltip-content-4Tooltip with Image.
Tooltip Standard 1tooltip-tooltip-standard-1Simple Tooltip.
Tooltip Standard 2tooltip-tooltip-standard-2Tooltip Positions.
Tooltip Standard 3tooltip-tooltip-standard-3Tooltip with Longer Text.
Tooltip Standard 4tooltip-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 1trust-strip1This component displays a set of trust indicators, each with an icon, a title, and an optional description, such as "Free Shipping" and "Secure Payment." It can be customized with different trust items and styled with additional CSS classes.
Trust Strip 2trust-strip2This component displays a trust indicator block that highlights a star rating, the number of customer reviews, and the total customer count, making it ideal for showcasing user feedback and credibility. Additionally, it includes recognitions from well-known press logos to further reinforce trust and social proof.
Trust Strip 3trust-strip3This component displays a list of certifications and guarantees, providing visual icons and descriptions for each to convey trust and authenticity. It allows customization by accepting optional props for different certifications, guarantees, and additional styling through the `className` prop.
Trust Strip 4trust-strip4This component displays trust indicators including a star rating with verified review count, feature icons with descriptions for services like free shipping and 24/7 support, and a verified seller badge. It is designed to enhance user trust and credibility perception by highlighting key benefits and seller authenticity.
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.
Waitlist 1waitlist1A component featuring a "Join the Waitlist" title, a description, an email input field, and a button. Includes avatars showing user count.
Waitlist 2waitlist2This component, "Waitlist2," is designed to facilitate user engagement by allowing users to join a waitlist and see how many others have signed up, complemented by a countdown timer until the launch date. It showcases features like an animated badge, a sign-up form for emails, display of user avatars, and a dynamic countdown timer, enhancing user interaction and anticipation for an upcoming launch.
Waitlist 3waitlist3The Waitlist3 component is designed to collect user sign-ups for an early access program, featuring a company logo, a descriptive badge, and a registration form with email input. It includes visuals of joined members and prominent company branding, allowing users to quickly engage and learn more about the offer through a call-to-action button.
Wishlist 1wishlist1This component is a wishlist block that displays a grid of saved items with options to add them to the cart, remove them, or be notified when out-of-stock items become available. It features price formatting, badges for price drops and stock status, and an empty state prompting users to continue shopping.
Wishlist 2wishlist2This component allows users to manage a wishlist by displaying a list of saved items, sorted by various criteria such as date added or price. It supports functionalities like sharing the list, removing items, and adding in-stock items to a cart.