S
shadcnblocks
/
shadcn-ui-blocks
/
blocks
Files
Code
Info
About 1 - Multi-Section Mission Values
about1
A multi-section about block with mission statement, values grid with icons, and image panels for company storytelling.
About 10 - Sticky Sidebar Company Profile
about10
A 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 Cards
about12
A 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 Profile
about13
A 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 Image
about14
A six-column about section with headline, full-width hero image, labeled intro text, avatar profile, and philosophy statement.
About 15 - Tilted Photo Profile Card
about15
A 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 Section
about16
A 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 Profile
about17
A seven-column profile section with role and timezone info, bio text, interactive tab navigation, and tab-controlled image display.
About 18 - Mission and Drive Sections
about18
A 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 Right
about19
A 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 Testimonial
about2
A 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 Images
about28
A 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 Achievements
about3
A 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 Grid
about4
A centered about section with six-image grid, two-column vision and creators text blocks, and muted CTA banner.
About 5 - Developer Platform Story
about5
A developer-focused about section with two-column intro, large image, tech logos, origin story, and milestone cards.
About 6 - Story and Workplace Photo Grid
about6
A two-column about section with story text and staggered photo grids showing team and workplace imagery.
About 7 - Product Story with Offset Images
about7
A narrative about section with offset image layout, product philosophy text, team photos, and careers CTA button.
About 8 - Fintech About with Stats Carousel
about8
A fintech-style about section with plus-sign pattern background, stats row, mission narrative, image carousel, and founding team.
About 9 - Developer Profile with Photos
about9
A 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 Form
accept-invite1
A two-column invitation acceptance screen with Google sign-in, email input form, welcome message, and footer links.
Accept Invite 2 - Centered Invite Card with Avatar
accept-invite2
A compact centered invitation card with host avatar initial, personalized message, and accept/decline buttons with expiration notice.
Accordion Form 1
accordion-accordion-form-1
Accordion containing form inputs organized by sections with icons.
Accordion Form 2
accordion-accordion-form-2
Accordion form with plus/minus trigger icons and section icons.
Accordion Multi Level 1
accordion-accordion-multi-level-1
Nested accordion with expandable child items using collapsible.
Accordion Multi Level 2
accordion-accordion-multi-level-2
Multi-level accordion with icons on parent items.
Accordion Multi Level 3
accordion-accordion-multi-level-3
Multi-level accordion with plus/minus triggers on parent items.
Accordion Multi Level 4
accordion-accordion-multi-level-4
Multi-level accordion with left-positioned plus/minus triggers.
Accordion Standard 1
accordion-accordion-standard-1
Basic accordion with collapsible items and default chevron trigger.
Accordion Standard 2
accordion-accordion-standard-2
Accordion with chevron icon positioned on the left side.
Accordion Standard 3
accordion-accordion-standard-3
Accordion with plus/minus icons instead of chevron trigger.
Accordion Standard 4
accordion-accordion-standard-4
Accordion with plus/minus trigger icons positioned on the left.
Accordion Standard 5
accordion-accordion-standard-5
Accordion with icon displayed next to each item title.
Accordion Standard 6
accordion-accordion-standard-6
Accordion with icons and plus/minus trigger icons.
Accordion Standard 7
accordion-accordion-standard-7
Accordion with icons, subtitles, and plus/minus triggers.
Accordion Subtitle 1
accordion-accordion-subtitle-1
Accordion items with subtitle text below each title.
Accordion Subtitle 2
accordion-accordion-subtitle-2
Accordion with subtitles and left-positioned icons.
Accordion Subtitle 3
accordion-accordion-subtitle-3
Accordion with subtitles and plus/minus trigger icons.
Accordion Subtitle 4
accordion-accordion-subtitle-4
Accordion with icons, subtitles, and default chevron triggers.
Accordion Tabs 1
accordion-accordion-tabs-1
Accordion styled as tabs with left-positioned plus/minus triggers.
Accordion Tabs 2
accordion-accordion-tabs-2
Accordion styled as tabs with default chevron triggers.
Accordion Tabs 3
accordion-accordion-tabs-3
Accordion styled as tabs with plus/minus trigger icons.
Accordion Tabs 4
accordion-accordion-tabs-4
Accordion styled as tabs with left-positioned chevron triggers.
Address Book 1 - Address book list with edit modes and default selection
address-book1
This 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 selection
address-book2
The 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
alert-alert-error-1
Error alert with title only.
Alert Error 2
alert-alert-error-2
Error alert with title and description text.
Alert Error 3
alert-alert-error-3
Error alert with title and action buttons.
Alert Error 4
alert-alert-error-4
Error alert with title, description, and action buttons.
Alert Error 5
alert-alert-error-5
Error alert with icon, title, description, and action buttons.
Alert Info 1
alert-alert-info-1
Info alert with title only.
Alert Info 2
alert-alert-info-2
Info alert with title and description text.
Alert Info 3
alert-alert-info-3
Info alert with title and action buttons.
Alert Info 4
alert-alert-info-4
Info alert with title, description, and action buttons.
Alert Info 5
alert-alert-info-5
Info alert with icon, title, description, and action buttons.
Alert Standard 1
alert-alert-standard-1
Standard alert with title only.
Alert Standard 2
alert-alert-standard-2
Standard alert with title and description text.
Alert Standard 3
alert-alert-standard-3
Standard alert with title and action buttons.
Alert Standard 4
alert-alert-standard-4
Standard alert with title, description, and action buttons.
Alert Standard 5
alert-alert-standard-5
Standard alert with icon, title, description, and action buttons.
Alert Success 1
alert-alert-success-1
Success alert with title only.
Alert Success 2
alert-alert-success-2
Success alert with title and description text.
Alert Success 3
alert-alert-success-3
Success alert with title and action buttons.
Alert Success 4
alert-alert-success-4
Success alert with title, description, and action buttons.
Alert Success 5
alert-alert-success-5
Success alert with icon, title, description, and action buttons.
Alert Warning 1
alert-alert-warning-1
Warning alert with title only.
Alert Warning 2
alert-alert-warning-2
Warning alert with title and description text.
Alert Warning 3
alert-alert-warning-3
Warning alert with title and action buttons.
Alert Warning 4
alert-alert-warning-4
Warning alert with title, description, and action buttons.
Alert Warning 5
alert-alert-warning-5
Warning alert with icon, title, description, and action buttons.
Alert Dialog Confirmation 1
alert-dialog-alert-dialog-confirmation-1
Alert dialog with confirmation message and cancel/continue actions.
Alert Dialog Confirmation 2
alert-dialog-alert-dialog-confirmation-2
Confirmation dialog with icon and warning message.
Alert Dialog Confirmation 3
alert-dialog-alert-dialog-confirmation-3
Confirmation dialog with detailed bulleted description list.
Alert Dialog Confirmation 4
alert-dialog-alert-dialog-confirmation-4
Confirmation dialog with custom-labeled action buttons.
Alert Dialog Confirmation 5
alert-dialog-alert-dialog-confirmation-5
Confirmation dialog with minimal short message.
Alert Dialog Confirmation 6
alert-dialog-alert-dialog-confirmation-6
Confirmation dialog with centered icon in colored circle.
Alert Dialog Custom Actions 1
alert-dialog-alert-dialog-custom-actions-1
Alert dialog with icon in action button.
Alert Dialog Custom Actions 2
alert-dialog-alert-dialog-custom-actions-2
Alert dialog with vertically stacked action buttons.
Alert Dialog Custom Actions 3
alert-dialog-alert-dialog-custom-actions-3
Alert dialog with mixed button styles in footer.
Alert Dialog Custom Actions 4
alert-dialog-alert-dialog-custom-actions-4
Alert dialog with file details and icon in action button.
Alert Dialog Custom Actions 5
alert-dialog-alert-dialog-custom-actions-5
Alert dialog with split action layout and draft button.
Alert Dialog Destructive 1
alert-dialog-alert-dialog-destructive-1
Destructive alert dialog for delete confirmation with red action button.
Alert Dialog Destructive 2
alert-dialog-alert-dialog-destructive-2
Destructive delete dialog with trash icon in header.
Alert Dialog Destructive 3
alert-dialog-alert-dialog-destructive-3
Destructive dialog with checkbox confirmation requirement.
Alert Dialog Destructive 4
alert-dialog-alert-dialog-destructive-4
Destructive dialog with highlighted consequence details list.
Alert Dialog Destructive 5
alert-dialog-alert-dialog-destructive-5
Destructive dialog with icon in action button.
Alert Dialog Destructive 6
alert-dialog-alert-dialog-destructive-6
Destructive dialog with warning badge in header.
Alert Dialog Destructive 7
alert-dialog-alert-dialog-destructive-7
Destructive dialog displaying item count and warning box.
Alert Dialog Form 1
alert-dialog-alert-dialog-form-1
Alert dialog with single text input field.
Alert Dialog Form 2
alert-dialog-alert-dialog-form-2
Alert dialog with multiple input fields including textarea.
Alert Dialog Form 3
alert-dialog-alert-dialog-form-3
Alert dialog with input and select dropdown fields.
Alert Dialog Form 4
alert-dialog-alert-dialog-form-4
Alert dialog with input field and helper description text.
Alert Dialog Form 5
alert-dialog-alert-dialog-form-5
Alert dialog with validation error state and disabled action.
Alert Dialog Form 6
alert-dialog-alert-dialog-form-6
Alert dialog with radio group for format selection.
Alert Dialog Form 7
alert-dialog-alert-dialog-form-7
Alert dialog with checkbox list for notification preferences.
Alert Dialog Informational 1
alert-dialog-alert-dialog-informational-1
Informational alert dialog displaying system update notice.
Alert Dialog Informational 2
alert-dialog-alert-dialog-informational-2
Informational dialog with info icon in header.
Alert Dialog Informational 3
alert-dialog-alert-dialog-informational-3
Informational dialog with scrollable long content.
Alert Dialog Informational 4
alert-dialog-alert-dialog-informational-4
Informational dialog with cancel and action buttons.
Alert Dialog Informational 5
alert-dialog-alert-dialog-informational-5
Informational dialog with centered icon and keyboard shortcut.
Alert Dialog Informational 6
alert-dialog-alert-dialog-informational-6
Informational dialog with status badge in header.
Alert Dialog Informational 7
alert-dialog-alert-dialog-informational-7
Informational dialog with highlighted feature cards.
Alert Dialog Success 1
alert-dialog-alert-dialog-success-1
Success alert dialog with positive confirmation message.
Alert Dialog Success 2
alert-dialog-alert-dialog-success-2
Success dialog with checkmark icon in header.
Alert Dialog Success 3
alert-dialog-alert-dialog-success-3
Success dialog with centered icon in colored circle.
Alert Dialog Success 4
alert-dialog-alert-dialog-success-4
Success dialog with numbered next steps list.
Alert Dialog Success 5
alert-dialog-alert-dialog-success-5
Success dialog with summary details in colored box.
Alert Dialog Success 6
alert-dialog-alert-dialog-success-6
Success dialog with cancel and action buttons.
Alert Dialog Success 7
alert-dialog-alert-dialog-success-7
Success dialog with celebration icon and achievement badge.
Application Shell 1 - Sidebar Shell with Breadcrumbs
application-shell1
A 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 Shell
application-shell10
A 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 Shell
application-shell11
A 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 switcher
application-shell12
Two-tier sidebar with collapsible panel, organization switcher, and animated transitions.
Application Shell 13 - Top navigation shell with dropdown menus and mobile sheet
application-shell13
Top navigation bar with dropdown menus, search field, organization switcher, and mobile bottom navigation.
Application Shell 14 - Crypto exchange shell with wallet and token menus
application-shell14
Cryptocurrency exchange interface with wallet menu, token favorites, notifications, and rounded navigation tabs.
Application Shell 2 - Inset Sidebar with Icon Collapse
application-shell2
An 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 Shell
application-shell3
An 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 Tabs
application-shell4
An 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 Shell
application-shell5
An 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 Shell
application-shell6
An 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 Shell
application-shell7
A 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 Shell
application-shell8
An 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 Shell
application-shell9
A 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
aspect-ratio-aspect-ratio-standard-1
Aspect ratio container with 16:9 widescreen ratio.
Aspect Ratio Standard 2
aspect-ratio-aspect-ratio-standard-2
Aspect ratio container with 4:3 traditional ratio.
Aspect Ratio Standard 3
aspect-ratio-aspect-ratio-standard-3
Aspect ratio container with 1:1 square ratio.
Aspect Ratio Standard 4
aspect-ratio-aspect-ratio-standard-4
Aspect ratio container with 21:9 ultrawide ratio.
Aspect Ratio Standard 5
aspect-ratio-aspect-ratio-standard-5
Aspect ratio container with 3:2 photography ratio.
Aspect Ratio Standard 6
aspect-ratio-aspect-ratio-standard-6
Aspect ratio container with 9:16 vertical mobile ratio.
Aspect Ratio Standard 7
aspect-ratio-aspect-ratio-standard-7
Aspect ratio container with 2:1 panoramic ratio.
Avatar Square 1
avatar-avatar-square-1
Avatar with rounded-lg corners instead of full circle.
Avatar Square 2
avatar-avatar-square-2
Square avatar with placeholder initials fallback.
Avatar Square 3
avatar-avatar-square-3
Square avatar with placeholder icon instead of image.
Avatar Square 4
avatar-avatar-square-4
Square avatar with green online status indicator badge.
Avatar Square 5
avatar-avatar-square-5
Square avatar with gray offline status indicator badge.
Avatar Square 6
avatar-avatar-square-6
Square avatar with blue verification check badge.
Avatar Square 7
avatar-avatar-square-7
Square avatar with red count indicator badge in top-right corner.
Avatar Standard 1
avatar-avatar-standard-1
Basic circular avatar with image and initials fallback.
Avatar Standard 10
avatar-avatar-standard-10
Extra large circular avatar with size-20 dimensions.
Avatar Standard 11
avatar-avatar-standard-11
Circular avatar with primary-colored border.
Avatar Standard 12
avatar-avatar-standard-12
Circular avatar with shadow-lg effect.
Avatar Standard 13
avatar-avatar-standard-13
Circular avatar with gradient fallback background.
Avatar Standard 14
avatar-avatar-standard-14
Circular avatar with yellow away status indicator badge.
Avatar Standard 15
avatar-avatar-standard-15
Circular avatar with red busy status indicator badge.
Avatar Standard 16
avatar-avatar-standard-16
Circular avatar with red do not disturb indicator badge.
Avatar Standard 17
avatar-avatar-standard-17
Circular avatar with hover scale and shadow effects.
Avatar Standard 18
avatar-avatar-standard-18
Circular avatar with loading spinner overlay.
Avatar Standard 19
avatar-avatar-standard-19
Circular avatar with red count badge in top-left corner.
Avatar Standard 2
avatar-avatar-standard-2
Circular avatar with placeholder initials fallback only.
Avatar Standard 20
avatar-avatar-standard-20
Circular avatar with red count badge in bottom-left corner.
Avatar Standard 21
avatar-avatar-standard-21
Circular avatar with blue colored border.
Avatar Standard 22
avatar-avatar-standard-22
Circular avatar with online indicator and count badge.
Avatar Standard 23
avatar-avatar-standard-23
Circular avatar wrapped in tooltip component.
Avatar Standard 24
avatar-avatar-standard-24
Circular avatar with animated pulsing green ring.
Avatar Standard 25
avatar-avatar-standard-25
Circular avatar with blue custom-colored fallback background.
Avatar Standard 26
avatar-avatar-standard-26
Circular avatar with primary-colored glow shadow effect.
Avatar Standard 27
avatar-avatar-standard-27
Circular avatar with destructive-colored error state fallback.
Avatar Standard 3
avatar-avatar-standard-3
Circular avatar with placeholder icon instead of image.
Avatar Standard 4
avatar-avatar-standard-4
Circular avatar with green online status indicator badge.
Avatar Standard 5
avatar-avatar-standard-5
Circular avatar with gray offline status indicator badge.
Avatar Standard 6
avatar-avatar-standard-6
Circular avatar with blue verification check badge.
Avatar Standard 7
avatar-avatar-standard-7
Circular avatar with red count indicator badge in top-right corner.
Avatar Standard 8
avatar-avatar-standard-8
Small circular avatar with size-6 dimensions.
Avatar Standard 9
avatar-avatar-standard-9
Large circular avatar with size-12 dimensions.
Avatar Group Animated 1
avatar-group-avatar-group-animated-1
Avatar group with animation on hover.
Avatar Group Border 1
avatar-group-avatar-group-border-1
Avatar group with border around each avatar.
Avatar Group Loose 1
avatar-group-avatar-group-loose-1
Avatar group with loose spacing between avatars.
Avatar Group Loose Border 1
avatar-group-avatar-group-loose-border-1
Avatar group with loose spacing and borders.
Avatar Group Max 1
avatar-group-avatar-group-max-1
Avatar group with max limit showing overflow count.
Avatar Group Standard 1
avatar-group-avatar-group-standard-1
Default avatar group with overlapping circular avatars.
Avatar Group Tight 1
avatar-group-avatar-group-tight-1
Avatar group with tight spacing between avatars.
Avatar Group Tight Border 1
avatar-group-avatar-group-tight-border-1
Avatar group with tight spacing and borders.
Avatar Group Tooltip 1
avatar-group-avatar-group-tooltip-1
Avatar group with tooltips showing names on hover.
Awards 1 - Awards table with linked rows
awards1
A 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 list
awards2
A 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 rows
awards3
A 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 subtitle
awards4
A 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 preview
awards5
A 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 pattern
background-pattern1
This 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 pattern
background-pattern10
This 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 Noise
background-pattern100
A 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 section
background-pattern11
This 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 Background
background-pattern111
A 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 Background
background-pattern112
A 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 Background
background-pattern113
A 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 Background
background-pattern115
A 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 Background
background-pattern116
A 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 Background
background-pattern117
A 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 fades
background-pattern12
This 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 fade
background-pattern13
This 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 fade
background-pattern14
This 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 pattern
background-pattern15
This 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 pattern
background-pattern16
This 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 pattern
background-pattern17
This 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 pattern
background-pattern18
This 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 pattern
background-pattern19
This 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 pattern
background-pattern2
This 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 emphasis
background-pattern20
This 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 emphasis
background-pattern21
This 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 emphasis
background-pattern22
This 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 mask
background-pattern23
The 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 fade
background-pattern24
This 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 left
background-pattern25
This 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 center
background-pattern26
This 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 center
background-pattern27
This 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 background
background-pattern28
This 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 background
background-pattern29
This 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 background
background-pattern3
This 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 background
background-pattern30
This 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 background
background-pattern31
This 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 fade
background-pattern32
This 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 fade
background-pattern33
This 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 top
background-pattern34
This 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 bottom
background-pattern35
This 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 fade
background-pattern36
A 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 fade
background-pattern37
This 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 edges
background-pattern38
This 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 background
background-pattern39
The 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 fade
background-pattern4
This 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 fade
background-pattern40
This 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 fade
background-pattern5
This 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 fade
background-pattern6
This 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 fade
background-pattern7
This 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 fade
background-pattern8
This 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 fade
background-pattern9
This 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 Background
background-pattern95
A 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 Noise
background-pattern96
A 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 Background
background-pattern97
A 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 Background
background-pattern98
A 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 Background
background-pattern99
A 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-badge-destructive-1
Destructive badge with text label.
Badge Destructive 2
badge-badge-destructive-2
Destructive badge with link.
Badge Destructive 3
badge-badge-destructive-3
Destructive badge with leading icon.
Badge Destructive 4
badge-badge-destructive-4
Destructive badge with trailing icon.
Badge Destructive 5
badge-badge-destructive-5
Destructive circular badge with count.
Badge Outline 1
badge-badge-outline-1
Outline badge with text label.
Badge Outline 2
badge-badge-outline-2
Outline badge with link.
Badge Outline 3
badge-badge-outline-3
Outline badge with leading icon.
Badge Outline 4
badge-badge-outline-4
Outline badge with trailing icon.
Badge Outline 5
badge-badge-outline-5
Outline circular badge with count.
Badge Secondary 1
badge-badge-secondary-1
Secondary badge with text label.
Badge Secondary 2
badge-badge-secondary-2
Secondary badge with link.
Badge Secondary 3
badge-badge-secondary-3
Secondary badge with leading icon.
Badge Secondary 4
badge-badge-secondary-4
Secondary badge with trailing icon.
Badge Secondary 5
badge-badge-secondary-5
Secondary circular badge with count.
Badge Standard 1
badge-badge-standard-1
Default badge with text label.
Badge Standard 2
badge-badge-standard-2
Default badge containing a clickable link.
Badge Standard 3
badge-badge-standard-3
Default badge with icon positioned on the left.
Badge Standard 4
badge-badge-standard-4
Default badge with icon positioned on the right.
Badge Standard 5
badge-badge-standard-5
Default circular badge displaying a numeric count.
Banner 1 - Full-width dismissible announcement bar
banner1
A 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 dismiss
banner2
A 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 button
banner3
A 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 dismiss
banner4
Full-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 link
banner5
Absolutely 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 avatars
banner6
Rounded floating banner with overlapping avatars, bold social-proof line, and a circular dismiss button beside the copy.
Banner 7 - Full-width banner with separator link
banner7
Dismissible full-width strip with message, vertical divider, learn-more link with arrow on desktop, and ghost close control.
Blog 1 - Latest posts grid with filters
blog1
Large 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 intro
blog11
Muted 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 times
blog12
Centered 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 overlays
blog13
Centered 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 posts
blog14
Centered 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 pills
blog16
Blog 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 filters
blog17
Centered 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 action
blog19
Related 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 controls
blog21
Horizontal 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 strip
blog22
Dark-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 header
blog23
Narrow 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 thumbnails
blog24
Centered 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 wordmark
blog26
Large 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 band
blog27
Top 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 tile
blog28
Centered 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 control
blog29
A 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 link
blog30
A 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-all
blog4
A 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 posts
blog5
A 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 cards
blog6
A 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 links
blog7
A 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 tags
blog8
A 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 table
blogpost1
A 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 sidebar
blogpost2
A 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 column
blogpost3
A 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 top
blogpost4
A 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 rail
blogpost5
A 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 hero
blogpost6
A 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 header
blogpost7
This 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 logos
book-a-demo1
This 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 testimonials
book-a-demo2
This 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 cards
book-a-demo3
The 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
border-button-border-button-basic
Breadcrumb Home Icon 1
breadcrumb-breadcrumb-home-icon-1
Breadcrumb with home icon and ellipsis for collapsed items.
Breadcrumb Home Icon 2
breadcrumb-breadcrumb-home-icon-2
Breadcrumb with home icon and dropdown menu.
Breadcrumb Home Icon 3
breadcrumb-breadcrumb-home-icon-3
Breadcrumb with home icon and icons for each item.
Breadcrumb Home Icon 4
breadcrumb-breadcrumb-home-icon-4
Breadcrumb with home icon wrapped in bordered container.
Breadcrumb Home Icon 5
breadcrumb-breadcrumb-home-icon-5
Breadcrumb with home icon and bullet separators.
Breadcrumb Home Icon 6
breadcrumb-breadcrumb-home-icon-6
Breadcrumb with home icon and slash separators.
Breadcrumb Home Icon 7
breadcrumb-breadcrumb-home-icon-7
Breadcrumb with home icon and select dropdown.
Breadcrumb Standard 1
breadcrumb-breadcrumb-standard-1
Breadcrumb navigation with ellipsis for collapsed items.
Breadcrumb Standard 2
breadcrumb-breadcrumb-standard-2
Breadcrumb with dropdown menu for intermediate items.
Breadcrumb Standard 3
breadcrumb-breadcrumb-standard-3
Breadcrumb with icons next to each navigation item.
Breadcrumb Standard 4
breadcrumb-breadcrumb-standard-4
Breadcrumb wrapped in bordered container.
Breadcrumb Standard 5
breadcrumb-breadcrumb-standard-5
Breadcrumb with bullet point separators.
Breadcrumb Standard 6
breadcrumb-breadcrumb-standard-6
Breadcrumb with slash icon separators.
Breadcrumb Standard 7
breadcrumb-breadcrumb-standard-7
Breadcrumb with select dropdown for navigation.
Button Destructive 1
button-button-destructive-1
Destructive variant button for dangerous actions.
Button Destructive 2
button-button-destructive-2
Destructive button with leading icon.
Button Destructive 3
button-button-destructive-3
Destructive button with trailing icon.
Button Destructive 4
button-button-destructive-4
Destructive button with rounded-full corners.
Button Destructive 5
button-button-destructive-5
Destructive button with loading spinner and disabled state.
Button Destructive 6
button-button-destructive-6
Destructive button with count badge indicator.
Button Destructive 7
button-button-destructive-7
Destructive button with keyboard shortcut indicator.
Button Link 1
button-button-link-1
Link variant button styled as text link.
Button Link 2
button-button-link-2
Link button with leading icon.
Button Link 3
button-button-link-3
Link button with trailing icon.
Button Link 4
button-button-link-4
Link button with rounded-full corners.
Button Link 5
button-button-link-5
Link button with loading spinner and disabled state.
Button Link 6
button-button-link-6
Link button with count badge indicator.
Button Link 7
button-button-link-7
Link button with keyboard shortcut indicator.
Button Outline 1
button-button-outline-1
Outline variant button with text label.
Button Outline 2
button-button-outline-2
Outline button with leading icon.
Button Outline 3
button-button-outline-3
Outline button with trailing icon.
Button Outline 4
button-button-outline-4
Outline button with rounded-full corners.
Button Outline 5
button-button-outline-5
Outline button with loading spinner and disabled state.
Button Outline 6
button-button-outline-6
Outline button with count badge indicator.
Button Outline 7
button-button-outline-7
Outline button with keyboard shortcut indicator.
Button Secondary 1
button-button-secondary-1
Secondary variant button with text label.
Button Secondary 2
button-button-secondary-2
Secondary button with leading icon.
Button Secondary 3
button-button-secondary-3
Secondary button with trailing icon.
Button Secondary 4
button-button-secondary-4
Secondary button with rounded-full corners.
Button Secondary 5
button-button-secondary-5
Secondary button with loading spinner and disabled state.
Button Secondary 6
button-button-secondary-6
Secondary button with count badge indicator.
Button Secondary 7
button-button-secondary-7
Secondary button with keyboard shortcut indicator.
Button Standard 1
button-button-standard-1
Default button with text label.
Button Standard 2
button-button-standard-2
Default button with leading icon.
Button Standard 3
button-button-standard-3
Default button with trailing icon.
Button Standard 4
button-button-standard-4
Default button with rounded-full corners.
Button Standard 5
button-button-standard-5
Default button with loading spinner and disabled state.
Button Standard 6
button-button-standard-6
Default button with count badge indicator.
Button Standard 7
button-button-standard-7
Default button with keyboard shortcut indicator.
Button Group Actions 1
button-group-button-group-actions-1
Button Group Actions 2
button-group-button-group-actions-2
Button Group Actions 3
button-group-button-group-actions-3
Button Group Actions 4
button-group-button-group-actions-4
Button Group Advanced 1
button-group-button-group-advanced-1
Button Group Advanced 2
button-group-button-group-advanced-2
Button Group Advanced 3
button-group-button-group-advanced-3
Button Group Advanced 4
button-group-button-group-advanced-4
Button Group Badges 1
button-group-button-group-badges-1
Button Group Badges 2
button-group-button-group-badges-2
Button Group Badges 3
button-group-button-group-badges-3
Button Group Badges 4
button-group-button-group-badges-4
Button Group Display 1
button-group-button-group-display-1
Button Group Display 2
button-group-button-group-display-2
Button Group Display 3
button-group-button-group-display-3
Button Group Display 4
button-group-button-group-display-4
Button Group Forms 1
button-group-button-group-forms-1
Button Group Forms 2
button-group-button-group-forms-2
Button Group Forms 3
button-group-button-group-forms-3
Button Group Forms 4
button-group-button-group-forms-4
Button Group Interactive 1
button-group-button-group-interactive-1
Button Group Interactive 2
button-group-button-group-interactive-2
Button Group Interactive 3
button-group-button-group-interactive-3
Button Group Interactive 4
button-group-button-group-interactive-4
Button Group Media 1
button-group-button-group-media-1
Button Group Media 2
button-group-button-group-media-2
Button Group Media 3
button-group-button-group-media-3
Button Group Media 4
button-group-button-group-media-4
Button Group Navigation 1
button-group-button-group-navigation-1
Button Group Navigation 2
button-group-button-group-navigation-2
Button Group Navigation 3
button-group-button-group-navigation-3
Button Group Patterns 1
button-group-button-group-patterns-1
Button Group Patterns 2
button-group-button-group-patterns-2
Button Group Patterns 3
button-group-button-group-patterns-3
Button Group Patterns 4
button-group-button-group-patterns-4
Button Group Standard 1
button-group-button-group-standard-1
Button Group Standard 2
button-group-button-group-standard-2
Button Group Standard 3
button-group-button-group-standard-3
Button Group Standard 4
button-group-button-group-standard-4
Calendar Dialog 1
calendar-calendar-dialog-1
Calendar Dialog 2
calendar-calendar-dialog-2
Calendar Dialog 3
calendar-calendar-dialog-3
Calendar Dialog 4
calendar-calendar-dialog-4
Calendar Dialog 5
calendar-calendar-dialog-5
Calendar Dialog 6
calendar-calendar-dialog-6
Calendar Dialog 7
calendar-calendar-dialog-7
Calendar Dialog 8
calendar-calendar-dialog-8
Calendar Standard 1
calendar-calendar-standard-1
Calendar Standard 2
calendar-calendar-standard-2
Calendar Standard 3
calendar-calendar-standard-3
Calendar Standard 4
calendar-calendar-standard-4
Calendar Standard 5
calendar-calendar-standard-5
Calendar Standard 6
calendar-calendar-standard-6
Calendar Standard 7
calendar-calendar-standard-7
Calendar Standard 8
calendar-calendar-standard-8
Card Standard 1
card-card-standard-1
Card Standard 2
card-card-standard-2
Card Standard 3
card-card-standard-3
Card Standard 4
card-card-standard-4
Careers 1 - Careers list grouped by department
careers1
A 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 frame
careers2
A 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 badges
careers3
A 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 sections
careers4
A 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 stack
careers5
A 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 cards
careers6
A 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 actions
careers7
Careers 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 department
careers8
Department 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 link
careers9
Gradient-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
carousel-carousel-standard-1
Carousel Standard 2
carousel-carousel-standard-2
Carousel Standard 3
carousel-carousel-standard-3
Carousel Standard 4
carousel-carousel-standard-4
Case Studies 1 - Case study grid with hover image cards
case-studies1
This 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 carousel
case-studies10
Two 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 heading
case-studies11
Static 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 cards
case-studies12
A 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 metrics
case-studies2
This 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 grid
case-studies3
This 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 CTA
case-studies4
This 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 testimonials
case-studies5
This 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 cards
case-studies6
A 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 time
case-studies8
Case 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 carousel
case-studies9
Case 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 sidebar
case-study1
This 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 avatars
case-study3
This 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 sidebar
case-study8
The 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 rail
changelog1
Stacked 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 timeline
changelog2
Centered 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 dots
changelog3
Each 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 line
changelog4
Large 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 footers
changelog5
Muted 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 actions
changelog6
Bordered 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 jumps
changelog8
Desktop 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 Card
chart-card1
A card containing an area chart with gradient fill, grid lines, and interactive tooltips.
Chart Card 10 - Stacked Bar Chart
chart-card10
A vertical stacked bar chart card showing multiple data series as segments within each bar.
Chart Card 11 - 100% Stacked Bar Chart
chart-card11
A horizontal 100% stacked bar chart showing proportional breakdown across categories.
Chart Card 12 - Stacked Bar with No Y-Axis
chart-card12
A minimal stacked bar chart with category labels only, no Y-axis for a cleaner look.
Chart Card 13 - Positive/Negative Bar Chart
chart-card13
A bar chart with values above and below zero, using different colors for positive and negative values.
Chart Card 14 - Range Area Chart
chart-card14
An area chart showing a min/max range band with an average line overlay.
Chart Card 15 - Waterfall Chart
chart-card15
A 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 Chart
chart-card16
A circular progress ring showing percentage completion toward a goal with centered value display.
Chart Card 17 - Semi-Circle Gauge
chart-card17
A speedometer-style half-circle gauge with needle indicator and colored performance zones.
Chart Card 18 - Multi-Ring Progress
chart-card18
Concentric progress rings showing multiple metrics simultaneously, inspired by fitness activity trackers.
Chart Card 19 - Radial Bar Chart
chart-card19
A circular bar chart with concentric bars of varying lengths representing different categories.
Chart Card 2 - Area Chart with Time Selector
chart-card2
An area chart card with tabs to switch between 7-day, 30-day, and 90-day time periods.
Chart Card 20 - Radar Chart
chart-card20
A radar/spider chart showing multiple dimensions as a polygon shape for multi-attribute comparison.
Chart Card 21 - Funnel Chart
chart-card21
A funnel visualization showing progressive conversion through stages with decreasing bar widths.
Chart Card 22 - Treemap Chart
chart-card22
A treemap visualization showing hierarchical data as nested rectangles sized by value.
Chart Card 23 - Scatter Plot
chart-card23
A scatter plot showing correlation between two variables as positioned dots.
Chart Card 24 - Bubble Chart
chart-card24
A bubble chart with variable-sized dots encoding three dimensions of data plus color for grouping.
Chart Card 25 - Chart with Target Line
chart-card25
An area chart with a horizontal reference line showing a target or benchmark value.
Chart Card 26 - Bullet Chart
chart-card26
A bullet chart showing actual value against a target with colored performance ranges in the background.
Chart Card 27 - Chart with Threshold Zones
chart-card27
An area chart with colored background zones indicating normal, warning, and critical threshold ranges.
Chart Card 3 - Bar Chart Card
chart-card3
A card containing a vertical bar chart with rounded tops and interactive tooltips.
Chart Card 4 - Horizontal Bar Chart Card
chart-card4
A card containing a horizontal bar chart with category labels on the left and values extending right.
Chart Card 5 - Donut Chart with Legend
chart-card5
A donut chart card with center stat display and a legend list showing category breakdowns.
Chart Card 6 - Multi-Line Comparison Chart
chart-card6
A line chart card comparing two data series with a legend, using solid and dashed lines.
Chart Card 7 - Chart Card with Footer Stats
chart-card7
An area chart card with a footer showing trend indicator and summary text.
Chart Card 8 - Grouped Bar Chart Card
chart-card8
A grouped bar chart card comparing two data series side by side with a legend.
Chart Card 9 - Stacked Area Chart
chart-card9
A stacked area chart card showing multiple data series layered to display composition over time.
Chart Area Axes
chart-chart-area-axes
Chart Area Default
chart-chart-area-default
Chart Area Gradient
chart-chart-area-gradient
Chart Area Icons
chart-chart-area-icons
Chart Area Interactive
chart-chart-area-interactive
Chart Area Legend
chart-chart-area-legend
Chart Area Linear
chart-chart-area-linear
Chart Area Stacked
chart-chart-area-stacked
Chart Area Stacked Expand
chart-chart-area-stacked-expand
Chart Area Step
chart-chart-area-step
Chart Bar Active
chart-chart-bar-active
Chart Bar Default
chart-chart-bar-default
Chart Bar Horizontal
chart-chart-bar-horizontal
Chart Bar Interactive
chart-chart-bar-interactive
Chart Bar Label
chart-chart-bar-label
Chart Bar Label Custom
chart-chart-bar-label-custom
Chart Bar Mixed
chart-chart-bar-mixed
Chart Bar Multiple
chart-chart-bar-multiple
Chart Bar Negative
chart-chart-bar-negative
Chart Bar Stacked
chart-chart-bar-stacked
Chart Line Default
chart-chart-line-default
Chart Line Dots
chart-chart-line-dots
Chart Line Dots Colors
chart-chart-line-dots-colors
Chart Line Dots Custom
chart-chart-line-dots-custom
Chart Line Interactive
chart-chart-line-interactive
Chart Line Label
chart-chart-line-label
Chart Line Label Custom
chart-chart-line-label-custom
Chart Line Linear
chart-chart-line-linear
Chart Line Multiple
chart-chart-line-multiple
Chart Line Step
chart-chart-line-step
Chart Pie Donut
chart-chart-pie-donut
Chart Pie Donut Active
chart-chart-pie-donut-active
Chart Pie Donut Text
chart-chart-pie-donut-text
Chart Pie Interactive
chart-chart-pie-interactive
Chart Pie Label
chart-chart-pie-label
Chart Pie Label Custom
chart-chart-pie-label-custom
Chart Pie Label List
chart-chart-pie-label-list
Chart Pie Legend
chart-chart-pie-legend
Chart Pie Separator None
chart-chart-pie-separator-none
Chart Pie Simple
chart-chart-pie-simple
Chart Pie Stacked
chart-chart-pie-stacked
Chart Radar Default
chart-chart-radar-default
Chart Radar Dots
chart-chart-radar-dots
Chart Radar Grid Circle
chart-chart-radar-grid-circle
Chart Radar Grid Circle Fill
chart-chart-radar-grid-circle-fill
Chart Radar Grid Circle No Lines
chart-chart-radar-grid-circle-no-lines
Chart Radar Grid Custom
chart-chart-radar-grid-custom
Chart Radar Grid Fill
chart-chart-radar-grid-fill
Chart Radar Grid None
chart-chart-radar-grid-none
Chart Radar Icons
chart-chart-radar-icons
Chart Radar Label Custom
chart-chart-radar-label-custom
Chart Radar Legend
chart-chart-radar-legend
Chart Radar Lines Only
chart-chart-radar-lines-only
Chart Radar Multiple
chart-chart-radar-multiple
Chart Radar Radius
chart-chart-radar-radius
Chart Radial Grid
chart-chart-radial-grid
Chart Radial Label
chart-chart-radial-label
Chart Radial Shape
chart-chart-radial-shape
Chart Radial Simple
chart-chart-radial-simple
Chart Radial Stacked
chart-chart-radial-stacked
Chart Radial Text
chart-chart-radial-text
Chart Tooltip Advanced
chart-chart-tooltip-advanced
Chart Tooltip Default
chart-chart-tooltip-default
Chart Tooltip Formatter
chart-chart-tooltip-formatter
Chart Tooltip Icons
chart-chart-tooltip-icons
Chart Tooltip Indicator Line
chart-chart-tooltip-indicator-line
Chart Tooltip Indicator None
chart-chart-tooltip-indicator-none
Chart Tooltip Label Custom
chart-chart-tooltip-label-custom
Chart Tooltip Label Formatter
chart-chart-tooltip-label-formatter
Chart Tooltip Label None
chart-chart-tooltip-label-none
Chart Group 1 - Two Charts Side by Side
chart-group1
A two-column layout with an area chart and bar chart displayed side by side.
Chart Group 10 - Infrastructure Monitoring View
chart-group10
A DevOps-style view with request volume chart and service health status panel.
Chart Group 11 - Revenue Chart with Date Range Picker
chart-group11
A card with a working date range picker that filters chart data and updates summary statistics.
Chart Group 12 - Full Dashboard with Date Controls
chart-group12
A 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 Calendar
chart-group13
An 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 Dashboard
chart-group14
A 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 Navigation
chart-group15
A 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 Charts
chart-group2
A layout with one large primary chart spanning full width and two smaller detail charts below.
Chart Group 3 - Main Chart with Weekly Trends
chart-group3
A main chart showing monthly trends with sparkline cards zooming into the last 7 days of key metrics.
Chart Group 4 - Simple Tab Chart View
chart-group4
A single card with tabs to switch between different chart visualizations of related metrics.
Chart Group 5 - Year over Year Comparison
chart-group5
A comparison layout with a dual-line chart and summary card showing year-over-year growth.
Chart Group 6 - Donut and Bar Chart Pair
chart-group6
A 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 Below
chart-group7
A section with a four-stat row above a full-width area chart.
Chart Group 8 - Bento Grid with Mixed Charts
chart-group8
A bento-style grid with four different chart types arranged in varying sizes.
Chart Group 9 - Dropdown Chart View
chart-group9
A card with a dropdown selector to switch between three different chart views showing various metrics.
Checkbox Standard 1
checkbox-checkbox-standard-1
Checkbox Standard 11
checkbox-checkbox-standard-11
Checkbox Standard 12
checkbox-checkbox-standard-12
Checkbox Standard 13
checkbox-checkbox-standard-13
Checkbox Standard 2
checkbox-checkbox-standard-2
Checkbox Standard 3
checkbox-checkbox-standard-3
Checkbox Standard 4
checkbox-checkbox-standard-4
Checkbox Standard 5
checkbox-checkbox-standard-5
Checkbox Standard 6
checkbox-checkbox-standard-6
Checkbox Standard 7
checkbox-checkbox-standard-7
Checkbox Standard 8
checkbox-checkbox-standard-8
Checkbox Standard 9
checkbox-checkbox-standard-9
Checkout 1 - Accordion checkout with cart and payment steps
checkout1
This 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 forms
checkout2
This 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 sections
checkout3
This 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 selection
checkout4
This 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 methods
checkout5
The 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 payment
checkout8
This 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.
Code Example 1 - Tabbed database query examples in multiple languages
code-example1
This 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 Stack
code-example11
A 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 Code
code-example14
A 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 Modes
code-example16
A 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 copy
code-example2
This 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 code
code-example3
This 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 preview
code-example4
This 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 tabs
code-example5
This 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 Snippets
code-example6
A 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
collapsible-collapsible-card-1
Collapsible Card 2
collapsible-collapsible-card-2
Collapsible Card 3
collapsible-collapsible-card-3
Collapsible Card 4
collapsible-collapsible-card-4
Collapsible Card 5
collapsible-collapsible-card-5
Collapsible Faq 1
collapsible-collapsible-faq-1
Collapsible Faq 2
collapsible-collapsible-faq-2
Collapsible Faq 3
collapsible-collapsible-faq-3
Collapsible Faq 4
collapsible-collapsible-faq-4
Collapsible Faq 5
collapsible-collapsible-faq-5
Collapsible Outline 1
collapsible-collapsible-outline-1
Collapsible Outline 2
collapsible-collapsible-outline-2
Collapsible Outline 3
collapsible-collapsible-outline-3
Collapsible Outline 4
collapsible-collapsible-outline-4
Collapsible Sidebar 1
collapsible-collapsible-sidebar-1
Collapsible Sidebar 2
collapsible-collapsible-sidebar-2
Collapsible Sidebar 3
collapsible-collapsible-sidebar-3
Collapsible Sidebar 4
collapsible-collapsible-sidebar-4
Collapsible Standard 1
collapsible-collapsible-standard-1
Collapsible Standard 2
collapsible-collapsible-standard-2
Collapsible Standard 3
collapsible-collapsible-standard-3
Collapsible Standard 4
collapsible-collapsible-standard-4
Collapsible Standard 5
collapsible-collapsible-standard-5
Combobox Custom Actions 1
combobox-combobox-custom-actions-1
Combobox Custom Actions 2
combobox-combobox-custom-actions-2
Combobox Custom Actions 3
combobox-combobox-custom-actions-3
Combobox Custom Actions 4
combobox-combobox-custom-actions-4
Combobox Custom Actions 5
combobox-combobox-custom-actions-5
Combobox Custom Actions 6
combobox-combobox-custom-actions-6
Combobox Custom Actions 7
combobox-combobox-custom-actions-7
Combobox Grouped 1
combobox-combobox-grouped-1
Combobox Grouped 2
combobox-combobox-grouped-2
Combobox Grouped 3
combobox-combobox-grouped-3
Combobox Grouped 4
combobox-combobox-grouped-4
Combobox Grouped 5
combobox-combobox-grouped-5
Combobox Grouped 6
combobox-combobox-grouped-6
Combobox Grouped 7
combobox-combobox-grouped-7
Combobox Multi Select 1
combobox-combobox-multi-select-1
Combobox Multi Select 2
combobox-combobox-multi-select-2
Combobox Multi Select 3
combobox-combobox-multi-select-3
Combobox Multi Select 4
combobox-combobox-multi-select-4
Combobox Multi Select 5
combobox-combobox-multi-select-5
Combobox Multi Select 6
combobox-combobox-multi-select-6
Combobox Multi Select 7
combobox-combobox-multi-select-7
Combobox Rich Content 1
combobox-combobox-rich-content-1
Combobox Rich Content 2
combobox-combobox-rich-content-2
Combobox Rich Content 3
combobox-combobox-rich-content-3
Combobox Rich Content 4
combobox-combobox-rich-content-4
Combobox Rich Content 5
combobox-combobox-rich-content-5
Combobox Rich Content 6
combobox-combobox-rich-content-6
Combobox Rich Content 7
combobox-combobox-rich-content-7
Combobox Standard 1
combobox-combobox-standard-1
Combobox Standard 2
combobox-combobox-standard-2
Combobox Standard 3
combobox-combobox-standard-3
Combobox Standard 4
combobox-combobox-standard-4
Combobox Standard 5
combobox-combobox-standard-5
Combobox Standard 6
combobox-combobox-standard-6
Combobox Standard 7
combobox-combobox-standard-7
Combobox With States 1
combobox-combobox-with-states-1
Combobox With States 2
combobox-combobox-with-states-2
Combobox With States 3
combobox-combobox-with-states-3
Combobox With States 4
combobox-combobox-with-states-4
Combobox With States 5
combobox-combobox-with-states-5
Combobox With States 6
combobox-combobox-with-states-6
Combobox With States 7
combobox-combobox-with-states-7
Command Dialog 1
command-command-dialog-1
Command Dialog 2
command-command-dialog-2
Command Dialog 3
command-command-dialog-3
Command Dialog 4
command-command-dialog-4
Command Dialog 5
command-command-dialog-5
Command Dialog 6
command-command-dialog-6
Command Dialog 7
command-command-dialog-7
Command Popover 1
command-command-popover-1
Command Popover 2
command-command-popover-2
Command Popover 3
command-command-popover-3
Command Popover 4
command-command-popover-4
Command Popover 5
command-command-popover-5
Command Popover 6
command-command-popover-6
Command Popover 7
command-command-popover-7
Command Standard 1
command-command-standard-1
Command Standard 2
command-command-standard-2
Command Standard 3
command-command-standard-3
Command Standard 4
command-command-standard-4
Command Standard 5
command-command-standard-5
Command Standard 6
command-command-standard-6
Command Standard 7
command-command-standard-7
Community 1 - Centered invite with logo and outline social buttons
community1
A 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 grid
community2
A 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 cards
community3
A 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 destinations
community4
A 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 links
community5
A 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 rings
community6
A 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 counts
community7
A 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 Form
companies-create1
A 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 Form
companies-create2
A 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 Form
companies-create3
A 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 Form
companies-create4
A 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 Dialog
companies-create5
A 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 Sheet
companies-detail1
A 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 Detail
companies-detail2
A 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 Table
companies-list1
A 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 Visibility
companies-list2
A 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 cart
compare-products1
This 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 pricing
compare-products2
This 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 actions
compare-products3
This 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 logos
compare1
A 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 benefits
compare10
A 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-ups
compare2
A 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 CTA
compare3
A 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 CTA
compare4
A 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 pill
compare5
A 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 table
compare6
A 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 tooltips
compare7
Centered 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 columns
compare8
Headline 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 below
compare9
Vendor 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 cards
compliance1
Outline 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 grid
compliance5
Bold 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 pillars
compliance6
Narrow 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 badges
compliance7
The 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 proof
contact1
A 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 links
contact10
A 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 links
contact11
A 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 form
contact14
A 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 inputs
contact16
A 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 proof
contact17
A 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 corners
contact18
A 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 image
contact19
A 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 links
contact2
A 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 form
contact20
A 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 form
contact21
A 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 contact
contact22
A 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 locator
contact23
A 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 grid
contact24
A 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 form
contact25
A 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 form
contact28
A 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 contact
contact29
A 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 offices
contact3
A 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 contact
contact30
A 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 contact
contact31
A 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 image
contact32
A 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 photo
contact33
A 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 card
contact34
A 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 image
contact35
A 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 carousel
contact4
A 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 form
contact5
A 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 hours
contact6
Stacked 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 cards
contact7
A 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 cards
contact8
A 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 grid
contact9
An 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 outline
content1
Narrative 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 grid
content2
Two-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 rail
content3
Knowledge-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 row
content4
Editorial 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
context-menu-context-menu-canvas-1
Context Menu Canvas 2
context-menu-context-menu-canvas-2
Context Menu Canvas 3
context-menu-context-menu-canvas-3
Context Menu Canvas 4
context-menu-context-menu-canvas-4
Context Menu Canvas 5
context-menu-context-menu-canvas-5
Context Menu File 1
context-menu-context-menu-file-1
Context Menu File 2
context-menu-context-menu-file-2
Context Menu File 3
context-menu-context-menu-file-3
Context Menu File 4
context-menu-context-menu-file-4
Context Menu File 5
context-menu-context-menu-file-5
Context Menu Standard 1
context-menu-context-menu-standard-1
Context Menu Standard 2
context-menu-context-menu-standard-2
Context Menu Standard 3
context-menu-context-menu-standard-3
Context Menu Standard 4
context-menu-context-menu-standard-4
Context Menu Standard 5
context-menu-context-menu-standard-5
Context Menu Standard 6
context-menu-context-menu-standard-6
Context Menu Standard 7
context-menu-context-menu-standard-7
Context Menu Table 1
context-menu-context-menu-table-1
Context Menu Table 2
context-menu-context-menu-table-2
Context Menu Table 3
context-menu-context-menu-table-3
Context Menu Table 4
context-menu-context-menu-table-4
Context Menu Table 5
context-menu-context-menu-table-5
Context Menu Text 1
context-menu-context-menu-text-1
Context Menu Text 2
context-menu-context-menu-text-2
Context Menu Text 3
context-menu-context-menu-text-3
Context Menu Text 4
context-menu-context-menu-text-4
Context Menu Text 5
context-menu-context-menu-text-5
Cta 1 - Card CTA with icon heading and trailing arrow
cta1
Bordered 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 buttons
cta10
Contained 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 action
cta11
Card-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 actions
cta12
Full-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 buttons
cta13
Accent 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 overlay
cta14
A 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 photo
cta15
Split 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 overlay
cta16
A 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 pattern
cta17
A 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 imagery
cta18
A 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 column
cta19
A 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 separators
cta20
A 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 shadow
cta21
A 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 aside
cta22
A 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 row
cta23
A 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 cards
cta26
A 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 photos
cta28
A 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 cards
cta3
A 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 action
cta30
A 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 arc
cta31
A 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 links
cta32
A 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 separator
cta34
A 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 stripe
cta35
A 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 action
cta36
A 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 action
cta37
A 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 action
cta38
A 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 action
cta39
A centered call to action inside a dashed rounded border with transparent fill, stacking heading, description, and buttons.
Cta 4 - Muted card with feature checklist
cta4
A 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 action
cta40
A 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 action
cta41
A 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 vignette
cta42
A 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 overlay
cta43
An 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 overlay
cta44
An 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 shadow
cta45
An 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 vignette
cta46
An 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 image
cta5
A 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 panels
cta6
A 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 action
cta7
An 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 Dashboard
dashboard1
A 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 Navigation
dashboard10
A 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 Heatmap
dashboard11
A 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 Map
dashboard12
A 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 Analytics
dashboard13
A 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 Panel
dashboard14
A 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 Widgets
dashboard15
A 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 Calendar
dashboard16
A 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 Calendar
dashboard17
A 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 Dashboard
dashboard18
A 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 Transactions
dashboard2
A 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 Sparklines
dashboard3
A 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 Orders
dashboard4
A 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 Transactions
dashboard5
A 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 Fulfillment
dashboard6
A 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 Chart
dashboard7
A 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 Dashboard
dashboard8
A 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 Dashboard
dashboard9
A 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
data-table-data-table-advanced-1
Data Table Advanced 2
data-table-data-table-advanced-2
Data Table Advanced 3
data-table-data-table-advanced-3
Data Table Advanced 4
data-table-data-table-advanced-4
Data Table Standard 1
data-table-data-table-standard-1
Data Table Standard 2
data-table-data-table-standard-2
Data Table Standard 3
data-table-data-table-standard-3
Data Table Standard 4
data-table-data-table-standard-4
Data Table 1 - Basic Data Table
data-table1
A 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 Table
data-table10
A 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 Table
data-table11
A 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 Table
data-table12
A 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 Table
data-table13
A 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 Table
data-table14
A 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 Table
data-table15
A 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 Table
data-table16
A 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 Table
data-table17
A 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 Table
data-table18
A 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 Table
data-table19
A 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 Table
data-table2
A data table section with visible cell borders, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
Data Table 20 - Resizable Columns Data Table
data-table20
A data table section with resizable columns via drag handles, sortable headers, and availability badges. Built with TanStack Table.
Data Table 21 - Column Management Data Table
data-table21
A 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 Table
data-table22
A 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 Table
data-table23
A 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 Table
data-table24
A 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 Table
data-table25
A 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 Controls
data-table26
A 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 Table
data-table27
A 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 Table
data-table28
A 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 Table
data-table29
A 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 Table
data-table3
A data table section with zebra-striped rows, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
Data Table 30 - Search Highlight Data Table
data-table30
A 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 Table
data-table31
A 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 Table
data-table32
A 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 Table
data-table4
A 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 Table
data-table5
A 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 Table
data-table6
A 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 Table
data-table7
A 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 Table
data-table8
A 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 Table
data-table9
A 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-date-picker-standard-1
Date Picker Standard 2
date-picker-date-picker-standard-2
Date Picker Standard 3
date-picker-date-picker-standard-3
Date Picker Standard 4
date-picker-date-picker-standard-4
Date Picker Standard 5
date-picker-date-picker-standard-5
Date Picker Standard 6
date-picker-date-picker-standard-6
Date Picker Standard 7
date-picker-date-picker-standard-7
Date Picker Standard 8
date-picker-date-picker-standard-8
Dialog Standard 1
dialog-dialog-standard-1
Dialog Standard 10
dialog-dialog-standard-10
Dialog Standard 11
dialog-dialog-standard-11
Dialog Standard 12
dialog-dialog-standard-12
Dialog Standard 13
dialog-dialog-standard-13
Dialog Standard 14
dialog-dialog-standard-14
Dialog Standard 15
dialog-dialog-standard-15
Dialog Standard 16
dialog-dialog-standard-16
Dialog Standard 17
dialog-dialog-standard-17
Dialog Standard 2
dialog-dialog-standard-2
Dialog Standard 3
dialog-dialog-standard-3
Dialog Standard 4
dialog-dialog-standard-4
Dialog Standard 5
dialog-dialog-standard-5
Dialog Standard 6
dialog-dialog-standard-6
Dialog Standard 7
dialog-dialog-standard-7
Dialog Standard 8
dialog-dialog-standard-8
Dialog Standard 9
dialog-dialog-standard-9
Download 1 - App store download cards
download1
A 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 downloads
download10
A 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 frame
download11
A 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-clipboard
download13
This 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 downloads
download2
A 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 Columns
download22
A 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 card
download3
A 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 icons
download4
A 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 snippets
download5
A 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 cards
download6
Lists 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 mockups
download7
Centered 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 matrix
download8
Client 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 strip
download9
A 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
drawer-drawer-bottom-1
Drawer Bottom 2
drawer-drawer-bottom-2
Drawer Bottom 3
drawer-drawer-bottom-3
Drawer Bottom 4
drawer-drawer-bottom-4
Drawer Bottom 5
drawer-drawer-bottom-5
Drawer Bottom 6
drawer-drawer-bottom-6
Drawer Bottom 7
drawer-drawer-bottom-7
Drawer Left 1
drawer-drawer-left-1
Drawer Left 2
drawer-drawer-left-2
Drawer Left 3
drawer-drawer-left-3
Drawer Left 4
drawer-drawer-left-4
Drawer Left 5
drawer-drawer-left-5
Drawer Right 1
drawer-drawer-right-1
Drawer Right 2
drawer-drawer-right-2
Drawer Right 3
drawer-drawer-right-3
Drawer Right 4
drawer-drawer-right-4
Drawer Right 5
drawer-drawer-right-5
Drawer Top 1
drawer-drawer-top-1
Drawer Top 2
drawer-drawer-top-2
Drawer Top 3
drawer-drawer-top-3
Drawer Top 4
drawer-drawer-top-4
Drawer Top 5
drawer-drawer-top-5
Dropdown Menu Actions 1
dropdown-menu-dropdown-menu-actions-1
Dropdown Menu Actions 2
dropdown-menu-dropdown-menu-actions-2
Dropdown Menu Actions 3
dropdown-menu-dropdown-menu-actions-3
Dropdown Menu Actions 4
dropdown-menu-dropdown-menu-actions-4
Dropdown Menu Actions 5
dropdown-menu-dropdown-menu-actions-5
Dropdown Menu Editor 1
dropdown-menu-dropdown-menu-editor-1
Dropdown Menu Editor 2
dropdown-menu-dropdown-menu-editor-2
Dropdown Menu Editor 3
dropdown-menu-dropdown-menu-editor-3
Dropdown Menu Editor 4
dropdown-menu-dropdown-menu-editor-4
Dropdown Menu Editor 5
dropdown-menu-dropdown-menu-editor-5
Dropdown Menu Profile 1
dropdown-menu-dropdown-menu-profile-1
Dropdown Menu Profile 2
dropdown-menu-dropdown-menu-profile-2
Dropdown Menu Profile 3
dropdown-menu-dropdown-menu-profile-3
Dropdown Menu Profile 4
dropdown-menu-dropdown-menu-profile-4
Dropdown Menu Profile 5
dropdown-menu-dropdown-menu-profile-5
Dropdown Menu Settings 1
dropdown-menu-dropdown-menu-settings-1
Dropdown Menu Settings 2
dropdown-menu-dropdown-menu-settings-2
Dropdown Menu Settings 3
dropdown-menu-dropdown-menu-settings-3
Dropdown Menu Settings 4
dropdown-menu-dropdown-menu-settings-4
Dropdown Menu Settings 5
dropdown-menu-dropdown-menu-settings-5
Dropdown Menu Standard 1
dropdown-menu-dropdown-menu-standard-1
Dropdown Menu Standard 2
dropdown-menu-dropdown-menu-standard-2
Dropdown Menu Standard 3
dropdown-menu-dropdown-menu-standard-3
Dropdown Menu Standard 4
dropdown-menu-dropdown-menu-standard-4
Dropdown Menu Standard 5
dropdown-menu-dropdown-menu-standard-5
Dropdown Menu Standard 6
dropdown-menu-dropdown-menu-standard-6
Dropdown Menu Standard 7
dropdown-menu-dropdown-menu-standard-7
Dropdown Menu Support 1
dropdown-menu-dropdown-menu-support-1
Dropdown Menu Support 2
dropdown-menu-dropdown-menu-support-2
Dropdown Menu Support 3
dropdown-menu-dropdown-menu-support-3
Ecommerce Footer 1 - Ecommerce footer with newsletter, language selector, and contact row
ecommerce-footer1
This 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 blocks
ecommerce-footer18
This 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 panel
ecommerce-footer19
This 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 icons
ecommerce-footer2
This 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 icons
ecommerce-footer20
This 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 payments
ecommerce-footer9
This 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 Cards
ecommerce-hero1
An 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 Hero
ecommerce-hero2
A 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 Carousel
ecommerce-hero3
A 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 Carousel
ecommerce-hero6
A 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 Detail
ecommerce-hero7
A 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 Hero
ecommerce-hero8
A 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 Navbar
ecommerce-navbar1
A 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 Navbar
ecommerce-navbar2
An 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-emoji-picker-basic
Emoji Picker Custom Trigger
emoji-picker-emoji-picker-custom-trigger
Emoji Picker Different Variants
emoji-picker-emoji-picker-different-variants
Emoji Picker In Form
emoji-picker-emoji-picker-in-form
Emoji Picker Text Trigger
emoji-picker-emoji-picker-text-trigger
Emoji Picker With Display
emoji-picker-emoji-picker-with-display
Empty Actions 1
empty-empty-actions-1
Empty Actions 2
empty-empty-actions-2
Empty Actions 3
empty-empty-actions-3
Empty Actions 4
empty-empty-actions-4
Empty Actions 5
empty-empty-actions-5
Empty Data 1
empty-empty-data-1
Empty Data 2
empty-empty-data-2
Empty Data 3
empty-empty-data-3
Empty Data 4
empty-empty-data-4
Empty Data 5
empty-empty-data-5
Empty Search 1
empty-empty-search-1
Empty Search 2
empty-empty-search-2
Empty Search 3
empty-empty-search-3
Empty Search 4
empty-empty-search-4
Empty Search 5
empty-empty-search-5
Empty Standard 1
empty-empty-standard-1
Empty Standard 2
empty-empty-standard-2
Empty Standard 3
empty-empty-standard-3
Empty Standard 4
empty-empty-standard-4
Empty Standard 5
empty-empty-standard-5
Empty Standard 6
empty-empty-standard-6
Empty Standard 7
empty-empty-standard-7
Experience 1 - Work history rows with CV download
experience1
Portfolio 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 column
experience2
Uses 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 control
experience3
Section 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 logos
experience5
Editorial 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 block
faq1
Narrow 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 header
faq10
FAQ 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 accordions
faq11
Two-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 sync
faq12
Categorized 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 cards
faq14
Centered 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 title
faq15
Centered 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 FAQ
faq16
Narrow 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 FAQ
faq17
Wide 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 rows
faq2
A 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 Layout
faq20
A two-column FAQ section with heading and contact link on the left, and categorized accordion questions on the right.
Faq 3 - Centered accordion FAQ
faq3
Centered section heading and intro paragraph above a single-column accordion of expandable questions and answers.
Faq 4 - Accordion FAQ with badge and support link
faq4
Accordion 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 header
faq5
FAQ 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 header
faq6
Two-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 CTA
faq7
Two-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 topics
faq8
Stacked 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 items
faq9
Bold 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 button
feature1
Split 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 borders
feature10
Small 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 images
feature101
Centered 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 images
feature102
Centered 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 header
feature103
Outlined 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 image
feature104
Medal 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 images
feature105
Centered 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 mobile
feature106
Four 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 cards
feature107
Responsive 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 panels
feature108
Centered 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 overlay
feature109
Two-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 button
feature11
Two-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 carousel
feature110
Centered 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 columns
feature111
Outline 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 intro
feature112
Centered 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 panels
feature113
Outline 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 carousels
feature114
A 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 badge
feature115
A 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 overlays
feature116
A 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 cards
feature117
A 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 row
feature118
A 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 image
feature119
An 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 rail
feature12
A 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 strip
feature120
A 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 copy
feature121
An 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 panel
feature122
A 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 features
feature123
A 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 column
feature124
A 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 panel
feature125
A 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 imagery
feature126
A 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 headers
feature127
A 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 blurbs
feature128
A 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 imagery
feature129
A 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 imagery
feature13
A 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 imagery
feature130
A 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 image
feature131
A 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 cards
feature132
A 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 column
feature133
A 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 tiles
feature134
A 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 cards
feature135
A 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 cards
feature136
A 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 rows
feature137
A 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 links
feature138
A 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 columns
feature139
A 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 media
feature14
Two 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 slides
feature140
A 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 testimonial
feature141
A 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 sidebar
feature142
A 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 spotlight
feature143
A 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 intro
feature144
A 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 imagery
feature145
A 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 headlines
feature146
A 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 text
feature147
Marketing 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 intro
feature148
Centered 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 backdrop
feature149
Full-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 tiles
feature15
A 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 imagery
feature150
A 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 badges
feature152
Centered 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 lines
feature153
A 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 badges
feature154
Full-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 preview
feature156
A 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 columns
feature157
Services-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 CTA
feature158
Three 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 link
feature159
Compact 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 icons
feature16
Three 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 artwork
feature160
Tabs 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 rail
feature161
Two-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 media
feature162
A 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 columns
feature163
Four 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 CTA
feature164
Two-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 matrix
feature166
Centered 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 rule
feature167
Outline 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 wells
feature168
Bordered 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 screenshots
feature169
Outline 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 intro
feature17
Optional 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 link
feature170
Outline 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 cards
feature171
Muted 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 dividers
feature172
A 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 stats
feature173
A 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 fades
feature174
Centered 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 pane
feature175
Intro 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 chart
feature176
Layered 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 six
feature18
Left-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 columns
feature180
Centered 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 badges
feature181
Left 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 actions
feature182
Centered 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 stats
feature183
Rounded 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 triggers
feature184
A 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 dots
feature186
A 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 line
feature187
A 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 thumbnails
feature188
A 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 images
feature189
A 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 checklist
feature19
A 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 thumbnails
feature190
A 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 accent
feature191
An 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 sync
feature192
Inside 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 layouts
feature193
A 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 buttons
feature194
A 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 panel
feature197
A 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 rows
feature198
Three 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 media
feature199
A 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 actions
feature2
A 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 link
feature20
A 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 lists
feature200
Three 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 tiles
feature202
A 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 rows
feature203
Four 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 CTA
feature204
One 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 imagery
feature205
Pill 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 tiles
feature206
A 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 separators
feature207
A 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 preview
feature209
A 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 cards
feature21
Intro 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 grid
feature210
Split 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 layouts
feature211
Muted 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 imagery
feature213
Centered 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 carousel
feature214
Centered 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 cards
feature215
Bold 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 grid
feature215a
Intro 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 copy
feature215b
Centered 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 controls
feature216
Tabbed 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 columns
feature217
Full-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 columns
feature217a
Contrast-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 backdrop
feature217b
Shared 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 edge
feature218
Top-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 layouts
feature219
Three 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 cards
feature22
Headline 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 video
feature220
Dotted 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 stats
feature220a
Centered 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 copy
feature220b
Three 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 dots
feature221
Header 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 pairs
feature222
Responsive 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 icons
feature224
Centered 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 panel
feature225
Centered 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 photo
feature227
Two-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 gallery
feature228
Muted 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 checklists
feature229
Wide 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 cards
feature23
Centered 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 icons
feature230
A 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 headline
feature231
A 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 cards
feature234
A 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 border
feature235
A 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 indicator
feature236
A 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 metrics
feature237
A 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 cards
feature238
A 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 tile
feature239
A 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 image
feature24
A 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 reveal
feature240
A 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 cards
feature241
A 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 controls
feature242
A 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 cards
feature243
A 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 frames
feature244
A 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 image
feature245
A 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 checklist
feature246
A 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 reveal
feature247
A 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 reveal
feature248
An 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 card
feature249
A 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 grids
feature25
A 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 nodes
feature250
A 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 beams
feature251
A 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 CTA
feature252
A 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 button
feature253
A 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 CTA
feature254
A 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 actions
feature255
A 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 cards
feature256
Two 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 sizes
feature257
A 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 badge
feature26
A 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 avatars
feature261
A 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 motion
feature266
A 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 marquee
feature267
A 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 card
feature268
A 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 card
feature269
A 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 row
feature27
An 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 stacks
feature270
A 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 backdrop
feature271
A 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 beams
feature272
A 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 reveals
feature274
A 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 copy
feature275
Centered 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 highlight
feature276
A 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 more
feature277
A 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 subhead
feature278
A 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 links
feature28
Two 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 stack
feature280
A 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 more
feature281
A 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 card
feature282
A 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 orbit
feature283
A 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 glow
feature284
A 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 marquees
feature285
A 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 stars
feature286
A 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 grid
feature287
A 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 previews
feature288
A 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 list
feature289
A 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 copy
feature29
A 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 column
feature292
A 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 sparkles
feature293
A 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 field
feature294
A 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 roles
feature295
A 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 overlays
feature297
Three 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 mockup
feature299
This 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 imagery
feature3
Up 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 column
feature30
A 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 pairs
feature31
Intro 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 cards
feature312
This 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 dialog
feature313
This 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 tile
feature314
This 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 testimonial
feature322
This 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 controls
feature323
This 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 columns
feature33
Upper 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 photography
feature34
Headline 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 Dividers
feature342
A 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 Dividers
feature343
A 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 Image
feature344
A 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 Image
feature345
A 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 Media
feature346
A 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 Media
feature347
A 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 Image
feature348
A 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 Cards
feature349
A 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 links
feature35
Oversized spanning headline beside three narrower columns each with title, body text, and chevron-accented outbound links.
Feature 350 - Centered Four Column Feature Grid
feature350
A centered label, heading, and description above a four-column grid of minimal icon stacks with circular badges.
Feature 351 - Left Aligned Four Column Features
feature351
A 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 Cards
feature352
A 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 Cards
feature353
A 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 Cards
feature354
A 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 Cards
feature355
A 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 Cards
feature356
A 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 Row
feature357
A centered heading and description above a three-column row of features with large thin-stroke standalone icons.
Feature 358 - No Intro Three Column Bordered Cards
feature358
A three-column grid of bordered feature cards with bordered square icon badges, no section heading or intro.
Feature 359 - Centered Two Column Accent Feature Cards
feature359
A 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 card
feature36
A 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 Grid
feature360
A 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 Features
feature361
A 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 Grid
feature362
A 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 CTA
feature363
A 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 Grid
feature364
A four-column grid of icon tiles with titles and descriptions, no section heading or borders.
Feature 365 - Minimal Three-Column Icon Grid
feature365
A three-column grid of icon tiles with circular badges, titles, and descriptions, no section heading or borders.
Feature 366 - Minimal Inline Icon Grid
feature366
A six-item inline icon grid with icons beside text, no section heading or borders.
Feature 367 - Minimal Centered Four-Column Grid
feature367
A four-column centered icon grid with circular badges, no section heading or borders.
Feature 368 - Minimal Centered Three-Column Grid
feature368
A three-column centered icon grid with circular badges, no section heading or borders.
Feature 369 - Minimal Naked Icon Grid
feature369
A six-item centered grid with bare icons and no icon backgrounds, section heading, or borders.
Feature 37 - Asymmetric bento grid with image tiles
feature37
A 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 tabs
feature370
A 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 Image
feature371
A 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 Media
feature372
A 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 Left
feature373
A 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 rail
feature374
A 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 image
feature375
A 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 grid
feature376
A 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 image
feature377
A 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 image
feature378
A 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 Icons
feature379
A 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 image
feature38
A 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 screens
feature380
A 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 carousel
feature381
Like 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 images
feature39
A 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 quote
feature4
A 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 addresses
feature41
Section 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 grid
feature42
Large 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 action
feature43
Centered 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 logos
feature44
Section 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 grid
feature5
One 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 tiles
feature50
Centered 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 imagery
feature51
Three 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 preview
feature52
Six 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 grid
feature53
Two-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 columns
feature54
Centered 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 button
feature55
A 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 cards
feature56
A 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 carousel
feature57
A 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 checklist
feature58
A 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 bento
feature59
A 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 image
feature6
A 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 copy
feature60
A 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 copy
feature61
A 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 rows
feature62
A 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 cards
feature63
A 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 pair
feature64
Outlined 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 rails
feature65
A 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 band
feature66
Leading 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 cards
feature67
Narrow 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 intro
feature68
Heading 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 accordions
feature69
Two-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 image
feature7
Two-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 accordions
feature70
Same 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 links
feature71
Upper 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 cards
feature72
Narrow-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 link
feature73
A 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 panels
feature74
Intro 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 tiles
feature75
Two-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 columns
feature76
Large 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 dots
feature77
Centered 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 link
feature78
Tab 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 rows
feature79
Centered 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 cards
feature8
Outline 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 links
feature80
Flex 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 more
feature81
Centered 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 separator
feature82
A 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 83
feature83
A component with a 2-column layout featuring badges, icons, and text to highlight flexible support and collaborative tools. Includes a decorative background effect.
Feature 85
feature85
A block highlighting features of a project management app with icons, titles, and descriptions arranged in up to 3 columns.
Feature 86
feature86
A three-column feature block with split heading, description, an icon list, an outline CTA, and a centered bordered four-by-three image in a muted tray on the right.
Feature 87
feature87
A block with headings, a feature list with icons, a CTA, and a large bleeding image spanning two columns on the right.
Feature 89
feature89
A component with a promotional section and 3-column feature display, incorporating text blocks, an image placeholder, and icons for efficiency, resource optimization, and simplified operations.
Feature 9
feature9
A component featuring a central title, description, badges, two textual cards, and an image in a three-column layout; includes "Read more" buttons.
Feature 90
feature90
A marketing component featuring a title, description, button, a row of logos, and a link to more integrations.
Feature 91
feature91
Two-column feature block, contrasting "Team Leads" and "Developers" with icons, links, and bordered list items.
Feature 92
feature92
A component showcasing tools integrations and social media links in a 3-column layout followed by a 6-icon row for connectivity options.
Feature 93
feature93
A component featuring staggered avatars and a 3-column layout with icons, highlighting customer care themes, and focusing on support, solutions, and feedback.
Feature 94
feature94
A component showcasing a title, a button, and a 4-column layout with cards, each containing images, titles, and text about different features.
Feature 95
feature95
A component with a badge, a title, and a paragraph, followed by a 4-column tabbed interface that switches content views.
Feature 97
feature97
A 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 98
feature98
A 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 99
feature99
A 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
field-field-advanced-1
Field Advanced 2
field-field-advanced-2
Field Advanced 3
field-field-advanced-3
Field Advanced 4
field-field-advanced-4
Field Advanced 5
field-field-advanced-5
Field Advanced 6
field-field-advanced-6
Field Advanced 7
field-field-advanced-7
Field Basic Inputs 1
field-field-basic-inputs-1
Field Basic Inputs 2
field-field-basic-inputs-2
Field Basic Inputs 3
field-field-basic-inputs-3
Field Basic Inputs 4
field-field-basic-inputs-4
Field Basic Inputs 5
field-field-basic-inputs-5
Field Layouts 1
field-field-layouts-1
Field Layouts 2
field-field-layouts-2
Field Layouts 3
field-field-layouts-3
Field Layouts 4
field-field-layouts-4
Field Layouts 5
field-field-layouts-5
Field Layouts 6
field-field-layouts-6
Field Selects 1
field-field-selects-1
Field Selects 2
field-field-selects-2
Field Selects 3
field-field-selects-3
Field Selects 4
field-field-selects-4
Field Selects 5
field-field-selects-5
Field Selects 6
field-field-selects-6
Field Selects 7
field-field-selects-7
Field Text Areas 1
field-field-text-areas-1
Field Text Areas 2
field-field-text-areas-2
Field Text Areas 3
field-field-text-areas-3
Field Text Areas 4
field-field-text-areas-4
Field Text Areas 5
field-field-text-areas-5
Field Text Areas 6
field-field-text-areas-6
Field Toggles 1
field-field-toggles-1
Field Toggles 2
field-field-toggles-2
Field Toggles 3
field-field-toggles-3
Field Toggles 4
field-field-toggles-4
Field Toggles 5
field-field-toggles-5
Field Toggles 6
field-field-toggles-6
Field Toggles 7
field-field-toggles-7
Field Mapping 1 - CSV Field Mapping Dialog
field-mapping1
A 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 Dialog
field-merging1
A 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 Dropzone
file-upload-file-upload-dropzone-1
Drag and drop file upload zone with visual feedback and file list.
File Upload Dropzone 2 - Dropzone with Inline Trigger
file-upload-file-upload-dropzone-2
Dropzone with inline trigger button integrated within dropzone area.
File Upload Dropzone 3 - Compact Dropzone
file-upload-file-upload-dropzone-3
Compact dropzone layout with horizontal arrangement for space efficiency.
File Upload Dropzone 4 - Image Dropzone
file-upload-file-upload-dropzone-4
Image-specific dropzone with primary color styling and file type restrictions.
File Upload Dropzone 5 - Document Dropzone
file-upload-file-upload-dropzone-5
Document-focused dropzone with styling optimized for document file uploads.
File Upload Dropzone 6 - Large Dropzone
file-upload-file-upload-dropzone-6
Large dropzone with expanded height and prominent visual design.
File Upload Form 1 - React Hook Form Integration
file-upload-file-upload-form-1
File upload integrated with React Hook Form and Zod validation for form handling.
File Upload Form 2 - Contact Form with Attachments
file-upload-file-upload-form-2
Contact form with file upload attachment field integrated into a complete form layout.
File Upload Form 3 - Required File Upload
file-upload-file-upload-form-3
File upload field marked as required with validation error display in form context.
File Upload Form 4 - Multiple File Upload Fields
file-upload-file-upload-form-4
Form with multiple file upload fields allowing different file types for different purposes.
File Upload List 1 - Vertical File List
file-upload-file-upload-list-1
File upload with vertical file list layout displaying files in a vertical stack.
File Upload List 2 - Horizontal File List
file-upload-file-upload-list-2
File upload with horizontal file list layout displaying files in a horizontal row.
File Upload List 3 - Compact File List
file-upload-file-upload-list-3
File upload with compact file list layout using smaller spacing and reduced padding.
File Upload List 4 - File List with Actions
file-upload-file-upload-list-4
File upload with file list displaying additional action buttons for preview and download.
File Upload List 5 - File List with Clear All
file-upload-file-upload-list-5
File upload with file list and clear all button to remove all files at once.
File Upload Preview 1 - Image Thumbnails
file-upload-file-upload-preview-1
File upload with image thumbnail previews showing visual previews of uploaded images.
File Upload Preview 2 - Grid Preview Layout
file-upload-file-upload-preview-2
File upload with grid layout preview showing multiple image thumbnails in a grid arrangement.
File Upload Preview 3 - Large Preview Modal
file-upload-file-upload-preview-3
File upload with large preview modal showing detailed file preview with metadata.
File Upload Preview 4 - File Type Icons
file-upload-file-upload-preview-4
File upload showing file type icons for different file types instead of image previews.
File Upload Preview 5 - Horizontal Scroll Preview
file-upload-file-upload-preview-5
File upload with horizontal scrolling preview layout for browsing multiple image thumbnails.
File Upload Progress 1 - Linear Progress
file-upload-file-upload-progress-1
File upload with linear progress bar showing upload progress for each file.
File Upload Progress 2 - Circular Progress
file-upload-file-upload-progress-2
File upload with circular progress indicator overlay on file preview thumbnails.
File Upload Progress 3 - Fill Progress
file-upload-file-upload-progress-3
File upload with fill progress variant showing bottom-to-top progress animation.
File Upload Progress 4 - Progress with Percentage
file-upload-file-upload-progress-4
File upload with progress percentage label and custom progress bar display.
File Upload Progress 5 - Upload Status Indicator
file-upload-file-upload-progress-5
File upload with status indicators showing spinner during upload and success or error states.
File Upload Special 1 - Avatar Upload
file-upload-file-upload-special-1
Avatar upload component with click-to-upload functionality and hover overlay effect.
File Upload Special 2 - Chat Input with Attachments
file-upload-file-upload-special-2
Chat input component with file attachment functionality integrated into message input.
File Upload Special 3 - Cover Image Upload
file-upload-file-upload-special-3
Cover image upload with aspect ratio preview and remove functionality.
File Upload Special 4 - Document Upload Card
file-upload-file-upload-special-4
Document upload card component with card layout and document-specific styling.
File Upload Special 5 - Avatar with Menu
file-upload-file-upload-special-5
Avatar upload with dropdown menu for upload and remove actions.
File Upload Special 6 - Gallery Image Add
file-upload-file-upload-special-6
Gallery image upload with grid layout and add button for multiple image selection.
File Upload Special 7 - Direct Upload with Status
file-upload-file-upload-special-7
Direct upload with automatic upload progress and status indicators showing success or error states.
File Upload Special 8 - Profile with Cover and Avatar
file-upload-file-upload-special-8
Profile component with both cover image and avatar upload functionality in a single layout.
File Upload Standard 1 - Simple Button Trigger
file-upload-file-upload-standard-1
File upload with button trigger for single file selection.
File Upload Standard 2 - File Upload with Label
file-upload-file-upload-standard-2
File upload component with label and file list display.
File Upload Standard 3 - Single File Upload
file-upload-file-upload-standard-3
File upload restricted to single file selection only.
File Upload Standard 4 - Multiple Files with Clear All
file-upload-file-upload-standard-4
Multiple file upload with clear all button to remove all files.
File Upload Standard 5 - Disabled State
file-upload-file-upload-standard-5
File upload component in disabled state showing non-interactive button.
File Upload Validation 1 - Images Only
file-upload-file-upload-validation-1
File upload restricted to image files only with validation error notifications.
File Upload Validation 2 - PDF Documents Only
file-upload-file-upload-validation-2
File upload restricted to PDF documents only with file type validation.
File Upload Validation 3 - File Size Limit
file-upload-file-upload-validation-3
File upload with strict file size limit of 1MB and size validation error messages.
File Upload Validation 4 - Max 2 Files
file-upload-file-upload-validation-4
File upload with maximum file count limit of 2 files and rejection notifications.
File Upload Validation 5 - Custom Validation
file-upload-file-upload-validation-5
File upload with custom validation rules including filename restrictions and size limits.
File Upload Validation 6 - Video Files Only
file-upload-file-upload-validation-6
File upload restricted to video files only with support for multiple video formats.
Footer 1
footer1
A component showcasing a footer layout with logos, navigation links across 4 columns, download buttons, and social icons.
Footer 10
footer10
A time-updating footer with 3 columns, displaying a copyright date, current London time, and an email. Features an auto-updating clock functionality.
Footer 11
footer11
A component with a logo, menu links across 3 columns, social media icons, and a large image. Offers product, company, and legal info sections.
Footer 12
footer12
A footer component with three sections for navigation links, social media, and legal text. Includes an image with external link indicators for social media.
Footer 13
footer13
This 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 14
footer14
A footer component with logo, newsletter, navigation links across three columns, and social icons. Includes a succinct company description and subscription form.
Footer 15
footer15
This 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 16
footer16
A footer component featuring logo, contact button, social icons, and navigation in accordion for smaller screens or columns layout.
Footer 17
footer17
A footer component with theme toggle, navigation links, social links, theme-specific logo, and a system status indicator.
Footer 18
footer18
A 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 19
footer19
A 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 2
footer2
A footer component with a logo and tagline, 1-4 columns of menu items, and a bottom row for copyright and policy links.
Footer 21
footer21
A footer component with navigation links, logo, slogan, social media buttons, and copyright info arranged in columns.
Footer 23
footer23
A footer component with a logo, description, link columns, and an animated globe. Includes 3 sections with navigational links and separators.
Footer 24
footer24
A footer component with a bold heading, sections for email, social links, phone, and navigation links. It also includes a design attribution.
Footer 25
footer25
A 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 27
footer27
A footer block with animated visibility, featuring a "Connect with Me" call-to-action, social links with hover effects, and copyright information.
Footer 28
footer28
This 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 29
footer29
Multi-column footer with newsletter subscription, navigation links, social icons, status badge, and theme toggle.
Footer 3
footer3
A footer component with a logo, navigation links in 2-5 columns, social icons, newsletter subscription form, and legal links.
Footer 30
footer30
A footer component showcasing contact info, navigation, social links, and legal terms in a multi-column layout, plus a prominent brand name display.
Footer 31
footer31
A 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 32
footer32
This 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 37
footer37
This 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 4
footer4
A footer component with a logo, social icons, link sections, a newsletter subscription, and legal links. GridLayout adapts to 6 columns on large screens.
Footer 49
footer49
This 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 5
footer5
A 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 Typography
footer50
A 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 Bar
footer51
A 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 Bar
footer52
A 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 Bar
footer53
A 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 Footer
footer54
A 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 Links
footer55
A 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 Column
footer56
A 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 First
footer57
A 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 Icons
footer58
A 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 Bar
footer59
A short vertical padding footer with logo, a single menu of inline links and social icons on one row, then copyright with legal links to its right on a second row.
Footer 6
footer6
A 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 Row
footer60
A 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 Meta
footer61
A 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 Footer
footer62
A minimal slim footer with a center-aligned logo on top, then one menu of links and optional social icons below.
Footer 7
footer7
A footer component with a logo, description, social icons, link sections, and legal info spread over two rows. Includes 3 columns of navigational links.
Footer 8
footer8
A footer component with a logo, description, social icons, link sections, newsletter signup, and copyright info arranged in a grid layout.
Footer 9
footer9
A 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-form-advanced-1
Form Advanced 2
form-form-advanced-2
Form Advanced 3
form-form-advanced-3
Form Advanced 4
form-form-advanced-4
Form Advanced 5
form-form-advanced-5
Form Advanced 6
form-form-advanced-6
Form Advanced 7
form-form-advanced-7
Form Basic Forms 1
form-form-basic-forms-1
Form Basic Forms 2
form-form-basic-forms-2
Form Basic Forms 3
form-form-basic-forms-3
Form Basic Forms 4
form-form-basic-forms-4
Form Basic Forms 5
form-form-basic-forms-5
Form Basic Forms 6
form-form-basic-forms-6
Form Basic Forms 7
form-form-basic-forms-7
Form Layouts 1
form-form-layouts-1
Form Layouts 2
form-form-layouts-2
Form Layouts 3
form-form-layouts-3
Form Layouts 4
form-form-layouts-4
Form Layouts 5
form-form-layouts-5
Form Layouts 6
form-form-layouts-6
Form Layouts 7
form-form-layouts-7
Form Multi Field 1
form-form-multi-field-1
Form Multi Field 2
form-form-multi-field-2
Form Multi Field 3
form-form-multi-field-3
Form Multi Field 4
form-form-multi-field-4
Form Multi Field 5
form-form-multi-field-5
Form Multi Field 6
form-form-multi-field-6
Form Multi Field 7
form-form-multi-field-7
Form Patterns 1
form-form-patterns-1
Form Patterns 2
form-form-patterns-2
Form Patterns 3
form-form-patterns-3
Form Patterns 4
form-form-patterns-4
Form Patterns 5
form-form-patterns-5
Form Patterns 6
form-form-patterns-6
Form Patterns 7
form-form-patterns-7
Form Validation 1
form-form-validation-1
Form Validation 2
form-form-validation-2
Form Validation 3
form-form-validation-3
Form Validation 4
form-form-validation-4
Form Validation 5
form-form-validation-5
Form Validation 6
form-form-validation-6
Form Validation 7
form-form-validation-7
Gallery 1
gallery1
A gallery block showcasing 3 case studies with dynamic resizing; includes images, logos, text, and interactive effects on mouse hover.
Gallery 10
gallery10
A testimonial carousel component with text content, navigation buttons, and progress indicator. It has a dual-column layout with quotes and images.
Gallery 11
gallery11
A 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 12
gallery12
A 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 13
gallery13
A 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 14
gallery14
A 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 15
gallery15
A gallery component showcasing services with carousel functionality, navigation buttons, and a progress indicator.
Gallery 16
gallery16
A 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 17
gallery17
A carousel component featuring an image gallery with navigation arrows and pagination dots. Each image scales and adjusts opacity on selection.
Gallery 18
gallery18
A card-carousel gallery with autoplay, displaying portraits with annotated names in a looping mode.
Gallery 19
gallery19
Component displays a carousel of images with overlay text & a "Know More" link. Offers animated entrances and card effects.
Gallery 20
gallery20
A gallery component displaying overlapping, draggable images with dynamic animation. Includes textual content and a button, all within a single column layout.
Gallery 21
gallery21
Interactive gallery component with image slider, effect animations, and a call-to-action button.
Gallery 22
gallery22
An 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 23
gallery23
Interactive gallery with expandable images and detailed captions on hover, featuring a statement and button on the left.
Gallery 24
gallery24
An interactive gallery block that showcases images with dynamic resizing and details on hover or click, including an "Add to Cart" button.
Gallery 25
gallery25
A 4-column animated image gallery, each column with varying image heights and animated transitions on view.
Gallery 26
gallery26
A gallery block with animated blur vignettes around images, arranged in a 5-column grid. Features image reveal animations on scroll.
Gallery 27
gallery27
A team carousel featuring images, names, and roles with navigation buttons, looping functionality. Displays items 2 on medium screens, 1/4 on large.
Gallery 28
gallery28
A gallery block featuring a carousel of curated interior design images with a centralized heading, description, and navigation buttons.
Gallery 29
gallery29
A 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 3
gallery3
A carousel component showcasing case studies with navigational arrows and dynamic scroll availability indicators, including images, titles, descriptions, and read more links.
Gallery 30
gallery30
An interactive gallery component with dynamically shuffled images that are draggable. Includes title and description.
Gallery 31
gallery31
A product showcase block with a dynamic grid layout of 1-4 columns, displaying items with hover effects, titles, and prices.
Gallery 32
gallery32
An interactive gallery component with dimension-variable, overlapping images and blur effect on hover. Contains descriptive text animations.
Gallery 33
gallery33
A 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 34
gallery34
A gallery component displaying items in up to 3 columns, featuring interactive image blur on hover and icons indicating different characteristics.
Gallery 35
gallery35
This 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 4
gallery4
A component showcasing a scrollable gallery with navigation buttons and indicators, featuring images, titles, and descriptions for each item.
Gallery 5
gallery5
A 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 6
gallery6
A carousel component with a heading, 'Book a demo' link, scrolling buttons, and dynamic content blocks comprising images, titles, and summaries.
Gallery 7
gallery7
A component that combines a 2-column text intro with a looping AI-themed image carousel. Unique feature: staggered image positions.
Gallery 8
gallery8
A carousel component displaying resources in 3 columns, featuring navigation, separators, and dynamic link icons.
Gallery 9
gallery9
A component with a heading, badge, and a carousel displaying images and texts with navigation indicators. Features clickable sections to scroll through content.
Help 1 - Category Cards Help Center
help1
A 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 Center
help2
A help center section with searchable FAQ accordion and contact support buttons for live chat, email, and phone.
Help 3 - Help Center Contact Form
help3
A help center section with searchable FAQ accordion featuring category tags, and a contact form below for submitting support requests.
Help 4 - Support Ticket Form
help4
A 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 right
hero1
A 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 strip
hero10
A 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 panel
hero100
A 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 logos
hero101
A 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 logos
hero103
A 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 preview
hero104
A hero with benefit checklist, paired CTAs, and a bento-style grid of preview tiles including video, charts, and photography.
Hero 107 - Portfolio hero with animated halo CTA
hero107
A 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 handset
hero108
A 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 image
hero11
A 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 logos
hero111
A 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 strip
hero112
A 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 backdrop
hero115
A 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 dialog
hero116
A 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 Strip
hero118
A 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 buttons
hero12
A 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 panel
hero123
A 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 card
hero125
A 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 stats
hero127
A 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 avatars
hero129
A 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 CTA
hero13
A 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 strip
hero134
A 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 dialog
hero135
A 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 bleed
hero136
A 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 banner
hero14
A 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 headline
hero141
A 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 143 - Download hero with cinematic backdrop and waitlist chip
hero143
A 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 tiles
hero144
A 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 titles
hero145
A 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 teaser
hero146
A 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 still
hero149
A 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 ratings
hero15
A 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 mosaic
hero151
A 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 trio
hero152
A 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 Email
hero154
A 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 headline
hero157
A 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 trio
hero158
A 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 photo
hero159
A 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 image
hero16
A 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 mockup
hero160
A 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 media
hero162
A 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 tile
hero163
A 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 teaser
hero164
A 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 lattice
hero165
A 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 button
hero166
A 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 photos
hero167
A 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 cards
hero168
A 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 shot
hero170
A 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 collage
hero171
Two-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-images
hero172
Two-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 dialog
hero173
Split 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 ribbon
hero174
Full-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-in
hero175
Centered 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 photos
hero177
Centered 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 stack
hero178
Split 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 frames
hero179
Split 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 preview
hero18
A 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 showcase
hero180
Centered 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 fallback
hero183
Outline 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 duo
hero185
Bordered 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 image
hero186
A 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 carousel
hero187
A 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 rail
hero190
Center 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 announcement
hero192
A 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 reels
hero194
Split 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 preview
hero195
Headline 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 form
hero196
Dotted 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 backdrop
hero197
Outline 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 left
hero2
A 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 carousel
hero20
A 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 mockup
hero200
Condensed 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 stage
hero201
Motion-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 panel
hero202
Text 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 lifts
hero203
Intro 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 tilt
hero204
Spark-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 unveil
hero205
Oversized 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 mockup
hero206
A 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 cards
hero207
Optional 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 image
hero21
A 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 carousel
hero210
A 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 marquee
hero211
A 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 band
hero212
A 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 preview
hero213
A 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 CTA
hero214
A 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 photo
hero215
A 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 globe
hero216
A 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 veil
hero218
A 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 logos
hero219
A 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 wordmark
hero220
A 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 type
hero221
A 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 crosshair
hero222
A 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 word
hero223
A 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 cloud
hero224
A 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 logos
hero225
A 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 tiles
hero226
A 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 mock
hero227
A 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 portraits
hero228
A 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 illustrations
hero229
A 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 carousel
hero230
A 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 strip
hero231
A 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 arcs
hero232
A 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 veil
hero233
A 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 card
hero234
A 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 card
hero234a
A 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 marquees
hero234b
A 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 columns
hero235
A 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 cloud
hero236
A 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 section
hero237
A 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 row
hero238
A 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 marquee
hero239
A 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 grid
hero24
A 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 marquee
hero240
A 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 footer
hero241
A 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 chart
hero242
A 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 frame
hero243
A 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 cards
hero244
A 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 CTAs
hero245
A 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 chart
hero246
A 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 CTAs
hero247
A 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 headline
hero248
A 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 Marquee
hero249
A 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 list
hero25
A 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 256 - Split hero with grid motif and feature strip
hero256
A 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 cards
hero258
A 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 panel
hero259
A 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 icons
hero26
A 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 list
hero261
A 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 Sidebar
hero262
A 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 below
hero263
A 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 picker
hero264
A 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 stack
hero265
A 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 thumbs
hero266
A 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 panel
hero267
A 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 left
hero268
A 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 left
hero269
A 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 CTA
hero27
A 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 line
hero270
A two-column hero with bordered landscape image, overlapping square inset, right-column copy, animated primary CTA, optional byline, and subtle dotted backdrop.
Hero 271 - Right-Bleed Inset Hero
hero271
Two-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 Grid
hero272
A 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 Carousel
hero273
A 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 slides
hero274
A 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 list
hero275
A 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 dots
hero276
A 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 slides
hero277
A 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 slides
hero278
A 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 grid
hero279
A 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 field
hero28
A 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 features
hero280
A 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 carousel
hero281
A 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 Edges
hero286
Editorial 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 Preview
hero288
A 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 capsule
hero29
A 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 Strip
hero290
A 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 Image
hero291
A 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 Preview
hero292
A 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 Band
hero294
A 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 Grid
hero295
A 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 photography
hero3
A 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 imagery
hero30
A 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 Features
hero301
A 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 Frame
hero302
Optional 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 Cards
hero304
Two-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 Grid
hero305
Magazine-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 preview
hero306
A 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 31 - Centered hero with geometric backdrop and floating tiles
hero31
A 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 masonry
hero32
A 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 photograph
hero33
A 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 image
hero34
A 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 CTAs
hero35
A 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 cards
hero36
An 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 stack
hero37
A 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 rectangles
hero38
A 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 collage
hero39
A 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 rating
hero4
A 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 marquee
hero40
A 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 columns
hero45
A 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 line
hero47
A 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 showcase
hero49
A 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 tile
hero5
A 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 screenshots
hero50
A 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 imagery
hero51
A 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 proof
hero53
A 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 link
hero55
A 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 chips
hero57
A 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 grid
hero58
A 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 CTAs
hero59
A 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 logos
hero6
A 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 word
hero60
A 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 cards
hero64
A 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 strip
hero67
Centered 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 row
hero68
A 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 CTA
hero7
A 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 button
hero70
A 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 CTAs
hero71
Warm 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 photography
hero74
A 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 rail
hero75
Two-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 preview
hero76
Centered 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 veil
hero78
Viewport 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 band
hero79
An 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 image
hero8
A 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 images
hero80
A 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 band
hero82
A 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 triptych
hero83
A 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 mockups
hero84
A 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 galleries
hero85
A 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 cutout
hero86
A 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 illustration
hero87
A 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 Hero
hero88
A 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 image
hero89
A 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 strip
hero9
A 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 avatars
hero90
A 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 video
hero91
A split-screen hero with uppercase tag, headline, twin CTAs, and a looping video inside a pill-shaped frame on wide layouts.
Hero 99 - Centered hero with pill link and asymmetric photo grid
hero99
A centered hero with changelog-style pill anchor, oversized headline, supporting copy, paired chevron buttons, and a three-column photo strip.
Hover Card Info 1
hover-card-hover-card-info-1
Hover Card Info 2
hover-card-hover-card-info-2
Hover Card Info 3
hover-card-hover-card-info-3
Hover Card Info 4
hover-card-hover-card-info-4
Hover Card Info 5
hover-card-hover-card-info-5
Hover Card Preview 1
hover-card-hover-card-preview-1
Hover Card Preview 2
hover-card-hover-card-preview-2
Hover Card Preview 3
hover-card-hover-card-preview-3
Hover Card Preview 4
hover-card-hover-card-preview-4
Hover Card Preview 5
hover-card-hover-card-preview-5
Hover Card Profile 1
hover-card-hover-card-profile-1
Hover Card Profile 2
hover-card-hover-card-profile-2
Hover Card Profile 3
hover-card-hover-card-profile-3
Hover Card Profile 4
hover-card-hover-card-profile-4
Hover Card Profile 5
hover-card-hover-card-profile-5
Hover Card Stats 1
hover-card-hover-card-stats-1
Hover Card Stats 2
hover-card-hover-card-stats-2
Hover Card Stats 3
hover-card-hover-card-stats-3
Hover Card Stats 4
hover-card-hover-card-stats-4
Hover Card Stats 5
hover-card-hover-card-stats-5
Incentives 1
incentives1
This 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 2
incentives2
This 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 6
incentives6
This 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 7
incentives7
This 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 1
industries1
This 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 2
industries2
This 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 3
industries3
This 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 4
industries4
This 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 1
input-group-input-group-ai-1
Input Group Ai 2
input-group-input-group-ai-2
Input Group Ai 3
input-group-input-group-ai-3
Input Group Ai 4
input-group-input-group-ai-4
Input Group Buttons 1
input-group-input-group-buttons-1
Input Group Buttons 2
input-group-input-group-buttons-2
Input Group Buttons 3
input-group-input-group-buttons-3
Input Group Buttons 4
input-group-input-group-buttons-4
Input Group Custom 1
input-group-input-group-custom-1
Input Group Custom 2
input-group-input-group-custom-2
Input Group Custom 3
input-group-input-group-custom-3
Input Group Custom 4
input-group-input-group-custom-4
Input Group Dropdown 1
input-group-input-group-dropdown-1
Input Group Dropdown 2
input-group-input-group-dropdown-2
Input Group Dropdown 3
input-group-input-group-dropdown-3
Input Group Dropdown 4
input-group-input-group-dropdown-4
Input Group Icons 1
input-group-input-group-icons-1
Input Group Icons 2
input-group-input-group-icons-2
Input Group Icons 3
input-group-input-group-icons-3
Input Group Icons 4
input-group-input-group-icons-4
Input Group Label 1
input-group-input-group-label-1
Input Group Label 2
input-group-input-group-label-2
Input Group Label 3
input-group-input-group-label-3
Input Group Label 4
input-group-input-group-label-4
Input Group Spinner 1
input-group-input-group-spinner-1
Input Group Spinner 2
input-group-input-group-spinner-2
Input Group Spinner 3
input-group-input-group-spinner-3
Input Group Spinner 4
input-group-input-group-spinner-4
Input Group Text 1
input-group-input-group-text-1
Input Group Text 2
input-group-input-group-text-2
Input Group Text 3
input-group-input-group-text-3
Input Group Text 4
input-group-input-group-text-4
Input Group Textarea 1
input-group-input-group-textarea-1
Input Group Textarea 2
input-group-input-group-textarea-2
Input Group Textarea 3
input-group-input-group-textarea-3
Input Group Textarea 4
input-group-input-group-textarea-4
Input Group Tooltip 1
input-group-input-group-tooltip-1
Input Group Tooltip 2
input-group-input-group-tooltip-2
Input Group Tooltip 3
input-group-input-group-tooltip-3
Input Special 1
input-input-special-1
Input Special 2
input-input-special-2
Input Special 3
input-input-special-3
Input Special 4
input-input-special-4
Input Special 5
input-input-special-5
Input Standard 1
input-input-standard-1
Input Standard 2
input-input-standard-2
Input Standard 3
input-input-standard-3
Input Standard 4
input-input-standard-4
Input Standard 5
input-input-standard-5
Input Standard 6
input-input-standard-6
Input Standard 7
input-input-standard-7
Input Types 1
input-input-types-1
Input Types 2
input-input-types-2
Input Types 3
input-input-types-3
Input Types 4
input-input-types-4
Input Types 5
input-input-types-5
Input Types 6
input-input-types-6
Input Types 7
input-input-types-7
Input Validation 1
input-input-validation-1
Input Validation 2
input-input-validation-2
Input Validation 3
input-input-validation-3
Input Validation 4
input-input-validation-4
Input Validation 5
input-input-validation-5
Input Otp Behavior 1
input-otp-input-otp-behavior-1
Input Otp Behavior 2
input-otp-input-otp-behavior-2
Input Otp Behavior 3
input-otp-input-otp-behavior-3
Input Otp Behavior 4
input-otp-input-otp-behavior-4
Input Otp Standard 1
input-otp-input-otp-standard-1
Input Otp Standard 2
input-otp-input-otp-standard-2
Input Otp Standard 3
input-otp-input-otp-standard-3
Input Otp Standard 4
input-otp-input-otp-standard-4
Input Otp Standard 5
input-otp-input-otp-standard-5
Input Otp States 1
input-otp-input-otp-states-1
Input Otp States 2
input-otp-input-otp-states-2
Input Otp States 3
input-otp-input-otp-states-3
Input Otp States 4
input-otp-input-otp-states-4
Input Otp Use Cases 1
input-otp-input-otp-use-cases-1
Input Otp Use Cases 2
input-otp-input-otp-use-cases-2
Input Otp Use Cases 3
input-otp-input-otp-use-cases-3
Input Otp Use Cases 4
input-otp-input-otp-use-cases-4
Input Otp Variants 1
input-otp-input-otp-variants-1
Input Otp Variants 2
input-otp-input-otp-variants-2
Input Otp Variants 3
input-otp-input-otp-variants-3
Integration 1
integration1
A component showcasing a collection of integration options with app icons, titles, and descriptions, arranged in up to two columns.
Integration 10
integration10
A component showcasing a list of integrations with titles, descriptions, and "Connect" buttons, arranged in a single column with a minimalist design.
Integration 11
integration11
A tabbed component showcasing categorized integrations with toggles for connection status and details button. Layout scales from 1 to 3 columns.
Integration 12
integration12
A component features platform integration with a list of 5 permissions. Includes two logo comparisons, title, description, and buttons for actions.
Integration 13
integration13
A component showcasing a collection of integrations with iconic apps, featuring hover-activated animation for emphasis and links for more details.
Integration 2
integration2
A component featuring a title, subtitle, a marquee of logos linking to various resources, and a discovery button.
Integration 3
integration3
A component showcasing a list of integrations with icons, titles, and descriptions arranged in a single column layout.
Integration 4
integration4
A component depicting global connectivity with a central title, supportive text, and graphical illustrations of interconnected nodes, accented by a large background image.
Integration 5
integration5
A component showcasing integration options with title, description, buttons, and a two-column layout with logos.
Integration 6
integration6
A 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 7
integration7
A component showcasing integration with various tools, featuring two column layout, icons, and descriptions. Unique for its customizable gradient placeholders.
Integration 8
integration8
A component featuring dual-direction marquee rows of logos, highlighted with fade edges.
Integration 9
integration9
A component displaying available integrations in a 1-4 column grid, featuring icons, titles, and descriptions.
Invite User 1 - User Table with Dialog Invite
invite-user1
A 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 Invite
invite-user2
A 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 Invite
invite-user3
A 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 Link
invite-user4
A user table with invite dialog featuring both email input with role selection and a shareable invite link with copy-to-clipboard functionality.
Item Interactive 1
item-item-interactive-1
Item Interactive 2
item-item-interactive-2
Item Layout 1
item-item-layout-1
Item Layout 2
item-item-layout-2
Item Layout 3
item-item-layout-3
Item Media 1
item-item-media-1
Item Media 2
item-item-media-2
Item Media 3
item-item-media-3
Item Standard 1
item-item-standard-1
Item Standard 2
item-item-standard-2
Kbd Arrow Keys 1
kbd-kbd-arrow-keys-1
Kbd Arrow Keys 2
kbd-kbd-arrow-keys-2
Kbd Arrow Keys 3
kbd-kbd-arrow-keys-3
Kbd Arrow Keys 4
kbd-kbd-arrow-keys-4
Kbd Function Keys 1
kbd-kbd-function-keys-1
Kbd Function Keys 2
kbd-kbd-function-keys-2
Kbd Function Keys 3
kbd-kbd-function-keys-3
Kbd Function Keys 4
kbd-kbd-function-keys-4
Kbd Function Keys 5
kbd-kbd-function-keys-5
Kbd Function Keys 6
kbd-kbd-function-keys-6
Kbd Platform Specific 1
kbd-kbd-platform-specific-1
Kbd Platform Specific 2
kbd-kbd-platform-specific-2
Kbd Platform Specific 3
kbd-kbd-platform-specific-3
Kbd Platform Specific 4
kbd-kbd-platform-specific-4
Kbd Platform Specific 5
kbd-kbd-platform-specific-5
Kbd Pressed State 1
kbd-kbd-pressed-state-1
Kbd Pressed State 2
kbd-kbd-pressed-state-2
Kbd Pressed State 3
kbd-kbd-pressed-state-3
Kbd Pressed State 4
kbd-kbd-pressed-state-4
Kbd Pressed State 5
kbd-kbd-pressed-state-5
Kbd Sequence 1
kbd-kbd-sequence-1
Kbd Sequence 2
kbd-kbd-sequence-2
Kbd Sequence 3
kbd-kbd-sequence-3
Kbd Sequence 4
kbd-kbd-sequence-4
Kbd Shortcut 1
kbd-kbd-shortcut-1
Kbd Shortcut 2
kbd-kbd-shortcut-2
Kbd Shortcut 3
kbd-kbd-shortcut-3
Kbd Shortcut 4
kbd-kbd-shortcut-4
Kbd Shortcut 5
kbd-kbd-shortcut-5
Kbd Sizes 1
kbd-kbd-sizes-1
Kbd Sizes 2
kbd-kbd-sizes-2
Kbd Sizes 3
kbd-kbd-sizes-3
Kbd Sizes 4
kbd-kbd-sizes-4
Kbd Sizes 5
kbd-kbd-sizes-5
Kbd With Icons 1
kbd-kbd-with-icons-1
Kbd With Icons 2
kbd-kbd-with-icons-2
Kbd With Icons 3
kbd-kbd-with-icons-3
Kbd With Icons 4
kbd-kbd-with-icons-4
Kbd With Icons 5
kbd-kbd-with-icons-5
Label Standard 1
label-label-standard-1
Label Standard 2
label-label-standard-2
Label Standard 3
label-label-standard-3
Label Standard 4
label-label-standard-4
Label Standard 5
label-label-standard-5
Label Standard 6
label-label-standard-6
Label Standard 7
label-label-standard-7
Label Standard 8
label-label-standard-8
Leaderboard 1 - Leaderboard with Progress Bars
leaderboard1
A ranked list card with progress bars showing relative values for each item.
Leaderboard 2 - Leaderboard with Avatars
leaderboard2
A ranked list card with user avatars, names, subtitles, and values for each position.
Leaderboard 3 - Leaderboard with Trends
leaderboard3
A ranked list card with trend indicators showing movement direction for each item.
List 1
list1
A component displaying a table with details on various projects, including icons, categories, descriptions, years, offers, and segments. It adapts to different screen widths.
List 2
list2
A component displaying a list of awards with icons, titles, categories, and descriptions. Includes headings and buttons to view details.
List 3
list3
A component showcasing career progression with two sections for experience and achievements, each detailed in a 3-column layout, interconnected with separators.
Live Purchase 1
live-purchase1
The 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 2
live-purchase2
This 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 3
live-purchase3
This 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 1
login1
A login block featuring logo, input fields for email and password, a login button, a Google signup button, and a signup link.
Login 2
login2
A 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 3
login3
A login block with logo, main heading, subheading, email/password inputs, remember me checkbox, forgot password link, login & google login buttons, and signup prompt.
Login 4
login4
A login form featuring email and password fields, "Remember me" checkbox & Google Login. Includes forgot password & signup links.
Login 5
login5
A 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 6
login6
A login form component with email and password fields, sign-in and Google sign-up buttons, links for account creation and password recovery.
Login 7
login7
A 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 9
login9
This 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 Download
logo-logo-right-click-download
Logo Standard
logo-logo-standard
Logo Wordmark
logo-logo-wordmark
Logos 1
logos1
A component displaying a title and a row of partner logos with adjustable gaps, featuring grayscale and partial opacity effects.
Logos 10
logos10
A 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 11
logos11
A component featuring dual carousels of logos, a central title, and action buttons, styled with patterns and lines.
Logos 12
logos12
A carousel component displaying logos with auto-scroll functionality, supporting dark mode inversion.
Logos 13
logos13
A 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 Marquee
logos17
A 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 Headline
logos18
A 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 Headline
logos19
An auto-scrolling logo carousel with side fades and no heading, matching the marquee behavior of the titled variant.
Logos 2
logos2
A 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 Marquees
logos20
A 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 Background
logos21
A static logo grid on a muted background with a centered heading and optional subtitle.
Logos 22 - Double Row Logo Grid Without Heading
logos22
A two-row static logo grid without any heading or subtitle text.
Logos 23 - Double Row Marquee Without Heading
logos23
Two alternating-direction logo marquee rows without any heading or subtitle text.
Logos 24 - Double Row Marquee With Muted Background
logos24
Two alternating-direction logo marquee rows on a muted background with a centered heading and optional subtitle.
Logos 25 - Double Row Marquee Constrained Width
logos25
Two alternating-direction logo marquee rows inside a constrained max-width container with heading and subtitle.
Logos 26 - Double Row Marquee Constrained Without Heading
logos26
Two alternating-direction logo marquee rows inside a constrained max-width container without any heading or subtitle.
Logos 27 - Six Column Logo Grid
logos27
A static six-column logo grid displaying up to twelve partner or client logos with a centered heading and subtitle.
Logos 28 - Four Column Logo Grid
logos28
A static four-column logo grid displaying up to twelve partner or client logos with a centered heading and subtitle.
Logos 29 - Three Column Logo Grid
logos29
A static three-column logo grid with a constrained width, displaying up to twelve logos with a centered heading and subtitle.
Logos 3
logos3
A 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 Heading
logos30
A minimal six-column static logo grid displaying up to twelve logos without any heading or subtitle.
Logos 31 - Four Column Logo Grid Without Heading
logos31
A minimal four-column static logo grid displaying up to twelve logos without any heading or subtitle.
Logos 32 - Six Column Logo Grid With Muted Background
logos32
A static six-column logo grid on a muted background with a centered heading and subtitle.
Logos 4
logos4
A 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 5
logos5
A dual-row logo showcase component, featuring 4 logos on the top row and 5 on the bottom, with hover effects and external links.
Logos 7
logos7
A component showcasing logos with a headline, organized in a horizontally scrolling ticker, featuring hover effects.
Logos 8
logos8
A logos showcase component with a title, subtitle, and a grid of logos from various companies, customizable via props.
Logos 9
logos9
A component showcasing product team endorsements and logos in carousels, with auto-scrolling functionality and dynamic column adjustments.
Menubar Standard 1
menubar-menubar-standard-1
Menubar Standard 10
menubar-menubar-standard-10
Menubar Standard 2
menubar-menubar-standard-2
Menubar Standard 3
menubar-menubar-standard-3
Menubar Standard 4
menubar-menubar-standard-4
Menubar Standard 5
menubar-menubar-standard-5
Menubar Standard 6
menubar-menubar-standard-6
Menubar Standard 7
menubar-menubar-standard-7
Menubar Standard 8
menubar-menubar-standard-8
Menubar Standard 9
menubar-menubar-standard-9
Navbar 1
navbar1
A navigational component with dynamic menus, offering desktop and mobile layouts, incorporating icons and accordion features for sub-menus.
Navbar 10
navbar10
A 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
navbar11
A component with a dynamic navbar, integrating desktop and mobile views with different button sets. It includes expandable menus for grouped items and icons alongside links.
Navbar 12
navbar12
A component featuring a logo, dual navigation modes for desktop/mobile, accented by icons, primary & secondary action buttons, wrapped in an adaptable UI.
Navbar 14
navbar14
An expandable navigation component featuring categorized links with icons, a logo, and action buttons. It transitions to an accordion layout on smaller screens.
Navbar 17
navbar17
A navigation component with dynamic indicator for active links and a mobile menu with an animated icon for toggling.
Navbar 18
navbar18
A navigation bar with logo, collapsible menus, and a login button. Layout adapts for mobile with a popover menu.
Navbar 2
navbar2
A dual-layout navigation block with dynamic accordion submenus for mobile and horizontal list for desktop, featuring authentication links and a slide-in menu.
Navbar 21
navbar21
A dynamic navigation component with animated menu toggling. Displays a logo, a menu toggle button, expanding to show main links and socials.
Navbar 22
navbar22
This 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 24
navbar24
A dynamic navbar component featuring an animated dock with interactive icons for navigation linked to different sections.
Navbar 29
navbar29
A 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
navbar3
A component featuring a dynamic, multi-layer navigation menu with submenu dropdowns for platform, use cases, developers, and resources, complete with images, links, badges, and a responsive mobile layout.
Navbar 33 - Floating Navbar with Dropdown Menu
navbar33
A floating fixed navbar with logo, navigation menu with dropdowns, and login button. Features glassmorphism styling and animated mobile hamburger menu.
Navbar 4
navbar4
A navigational component with six main categories, each expanding into detailed sub-menus including solutions, products, company information, customer stories, partner programs, and resources. Features interactive elements for a comprehensive exploration.
Navbar 5
navbar5
A navbar component with a logo, navigation menus, sign-in/start buttons, and a collapsible menu for smaller screens, featuring a 2-column layout for feature links.
Navbar 6
navbar6
A navigation component with a logo, desktop and mobile menus, dropdowns for complex items, and auth buttons. Features a toggled mobile menu.
Navbar 7
navbar7
A multifunctional navigation component featuring dropdown menus for solutions and resources, a platform category with logos, and authentication buttons. It includes a mobile-friendly menu triggered by an icon.
Navbar 8
navbar8
A navigation component with dynamic background change on scroll and a responsive mobile menu, featuring logo, links with hover images, and buttons.
Navbar 9
navbar9
A navigation bar with logo, link/button list, and mobile menu toggle. On mobile, features an accordion menu for navigation items.
Navigation Menu Complex 1
navigation-menu-navigation-menu-complex-1
Navigation Menu Complex 2
navigation-menu-navigation-menu-complex-2
Navigation Menu Complex 3
navigation-menu-navigation-menu-complex-3
Navigation Menu Complex 4
navigation-menu-navigation-menu-complex-4
Navigation Menu Complex 5
navigation-menu-navigation-menu-complex-5
Navigation Menu Features 1
navigation-menu-navigation-menu-features-1
Navigation Menu Features 2
navigation-menu-navigation-menu-features-2
Navigation Menu Features 3
navigation-menu-navigation-menu-features-3
Navigation Menu Features 4
navigation-menu-navigation-menu-features-4
Navigation Menu Features 5
navigation-menu-navigation-menu-features-5
Navigation Menu Marketing 1
navigation-menu-navigation-menu-marketing-1
Navigation Menu Marketing 2
navigation-menu-navigation-menu-marketing-2
Navigation Menu Marketing 3
navigation-menu-navigation-menu-marketing-3
Navigation Menu Marketing 4
navigation-menu-navigation-menu-marketing-4
Navigation Menu Marketing 5
navigation-menu-navigation-menu-marketing-5
Navigation Menu Standard 1
navigation-menu-navigation-menu-standard-1
Navigation Menu Standard 2
navigation-menu-navigation-menu-standard-2
Navigation Menu Standard 3
navigation-menu-navigation-menu-standard-3
Navigation Menu Standard 4
navigation-menu-navigation-menu-standard-4
Navigation Menu Standard 5
navigation-menu-navigation-menu-standard-5
Offer Modal 1
offer-modal1
This 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 4
offer-modal4
The 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 5
offer-modal5
This 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 Flow
onboarding1
A 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 Wizard
onboarding2
A modal onboarding flow with colorful step backgrounds, profile questions, goal checkboxes, account linking, extension promotion, and trial activation.
Order History 1
order-history1
This 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 2
order-history2
This 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 3
order-history3
This 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 4
order-history4
This 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 5
order-history5
This 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 1
order-summary1
This 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 2
order-summary2
This 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 3
order-summary3
This 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 4
order-summary4
This 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 5
order-summary5
This 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 6
order-summary6
This 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 1
pagination-pagination-advanced-1
Pagination Advanced 2
pagination-pagination-advanced-2
Pagination Advanced 3
pagination-pagination-advanced-3
Pagination Advanced 4
pagination-pagination-advanced-4
Pagination Advanced 5
pagination-pagination-advanced-5
Pagination Basic 1
pagination-pagination-basic-1
Pagination Basic 2
pagination-pagination-basic-2
Pagination Basic 3
pagination-pagination-basic-3
Pagination Basic 4
pagination-pagination-basic-4
Pagination Basic 5
pagination-pagination-basic-5
Pagination Navigation 1
pagination-pagination-navigation-1
Pagination Navigation 2
pagination-pagination-navigation-2
Pagination Navigation 3
pagination-pagination-navigation-3
Pagination Navigation 4
pagination-pagination-navigation-4
Pagination Sizes 1
pagination-pagination-sizes-1
Pagination Sizes 2
pagination-pagination-sizes-2
Pagination Sizes 3
pagination-pagination-sizes-3
Pagination Sizes 4
pagination-pagination-sizes-4
Pagination Sizes 5
pagination-pagination-sizes-5
Payment Methods 1
payment-methods1
This 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 2
payment-methods2
This 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 3
payment-methods3
This 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 4
payment-methods4
This 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.
Popover Standard 1
popover-popover-standard-1
Popover Standard 10
popover-popover-standard-10
Popover Standard 11
popover-popover-standard-11
Popover Standard 12
popover-popover-standard-12
Popover Standard 13
popover-popover-standard-13
Popover Standard 14
popover-popover-standard-14
Popover Standard 15
popover-popover-standard-15
Popover Standard 2
popover-popover-standard-2
Popover Standard 3
popover-popover-standard-3
Popover Standard 4
popover-popover-standard-4
Popover Standard 5
popover-popover-standard-5
Popover Standard 6
popover-popover-standard-6
Popover Standard 7
popover-popover-standard-7
Popover Standard 8
popover-popover-standard-8
Popover Standard 9
popover-popover-standard-9
Price Basic
price-price-basic
Price On Sale
price-price-on-sale
Pricing 1
pricing1
A pricing component showcasing 4 tiers with varying features, descriptions, and call-to-action buttons, displayed in a columnar layout with a heading section mentioning options and custom plan availability.
Pricing 10
pricing10
A 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 switch
pricing100
One centered pricing card with monthly and yearly switch, discount chip, dual buttons, and checklist rows.
Pricing 105 - Single plan wide muted panel
pricing105
Full-width muted surface splits narrative copy from a stacked checklist and single solid CTA.
Pricing 106 - Single plan split heading and card
pricing106
Two-column layout places section story and inline switch beside a bordered pricing card.
Pricing 107 - Single plan card with accent rail
pricing107
Card capped by a gradient rail includes corner switch row, badge-led title, and dot-led features.
Pricing 108 - Single plan split art panel and details
pricing108
Gradient art panel with optional plan artwork contrasts a detail column with switch, facts, and CTA.
Pricing 11
pricing11
A 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 billing
pricing110
Tabs swap monthly and yearly amounts inside one card while sharing a single checklist and CTA.
Pricing 117 - Single plan bracketed price display
pricing117
Oversized price sits inside corner bracket framing with prose grid for feature text below.
Pricing 118 - Single plan on inverted primary section
pricing118
Primary-tinted band wraps a light inset card that carries price, CTA, and two-column checks.
Pricing 12
pricing12
A component displaying add-on options in two sections: "featured" in a grid layout and "other" in a list layout, with prices and descriptions.
Pricing 13
pricing13
A component showcasing 3 add-on options, each with a title, description, and pricing/contact info. It features an image and introductory text.
Pricing 14
pricing14
A 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 15
pricing15
A 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 features
pricing16
Centered 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
pricing17
This component provides a detailed comparison of pricing plans, featuring two options: standard and premium, each with specific features and durations. Users can easily view and select their preferred plan based on transparent pricing, included features, and benefit descriptions, with the option to proceed via a prominent call-to-action button.
Pricing 2 - Classic two-plan pricing with billing switch
pricing2
Centered 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 dividers
pricing20
Heading and toggle for monthly or yearly rates, three columns with vertical dividers between them, icon next to each tier name, oversized prices, badge-style checks on features, and primary or secondary buttons.
Pricing 21
pricing21
A 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 switch
pricing22
Three cards in a row with a yearly switch on paid tiers tied to one shared state, thick primary border on the recommended tier, and check icons on features.
Pricing 23
pricing23
A 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 cards
pricing24
Center headline with one annual switch, three cards on the theme muted color, highlighted tier with primary ring offset and slight scale, and primary-tinted checks on features.
Pricing 26
pricing26
A component displaying 3 marketing plan options, highlighting one. Features badges, descriptions, and a call-to-action button for each plan.
Pricing 27
pricing27
A pricing component with a 3-column layout on XL screens, featuring a highlighted main card spanning 2 columns and a secondary card. Each card lists services, prices, and includes call-to-action buttons.
Pricing 28
pricing28
This 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 29
pricing29
A 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 rows
pricing3
Three columns with a billing switch, optional intro text, checks and dashed separators on feature rows, and feature blocks that appear only on wide layouts.
Pricing 30
pricing30
A 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 pill
pricing31
Three 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
pricing32
A pricing display component with a billing cycle toggle, savings info, and plan cards for different service tiers, highlighting a "most popular" option.
Pricing 33
pricing33
A 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 carousel
pricing34
Toggle 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 highlight
pricing35
Two 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 strip
pricing36
Two 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
pricing37
A premium plan showcase block with a title, subtitle, price, and features list followed by a button. Uses iconography for feature representation.
Pricing 38
pricing38
A marketing package selector with 3 options, highlighting features per plan. Includes alerts and clickable elements for user interaction.
Pricing 39
pricing39
This component is a pricing module that displays multiple pricing plans with adjustable features based on user-input through a slider. It includes detailed descriptions, pricing information, and feature lists for each plan, as well as interactive elements such as tooltips and buttons, making it easy to compare and choose the best plan.
Pricing 4 - Three-plan pricing with tabs and one highlighted column
pricing4
Monthly and yearly tabs above three tier columns with one muted highlighted column, badge labels from tier names, checks on features, and sans-serif price type.
Pricing 40
pricing40
A 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 switch
pricing41
Same 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 Table
pricing42
A 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 Countdown
pricing43
A 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 carousel
pricing44
Centered 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 table
pricing45
Three-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 table
pricing46
A 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 carousel
pricing47
Same 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 carousel
pricing48
Square 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 band
pricing49
One 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
pricing5
A pricing component with two plans, offering comparison across features in a table and emphasized call-to-actions. Provides a clear visual differentiation between plans.
Pricing 50 - Three-plan pricing with centered spotlight column
pricing50
Twelve-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 breakpoints
pricing52
Coverflow 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 pricing
pricing57
Monospace-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 Grid
pricing58
Left-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 Band
pricing59
Centered heading and rounded toggle above a single bordered container split into two plan columns with inner dividers, compact feature lists, and full-width buttons.
Pricing 6
pricing6
A 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 Pricing
pricing60
Monospace-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 Tabs
pricing61
Left-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 Ring
pricing62
Centered 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 Tabs
pricing63
Asymmetric 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 Accent
pricing64
Two 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 Cards
pricing66
Ultra-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 Contrast
pricing67
Centered 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 Section
pricing68
Tab-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 Control
pricing69
Centered 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 badge
pricing7
Centered 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 Ribbon
pricing71
Two 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 Cards
pricing72
Two 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 Surface
pricing73
Two 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 Badge
pricing74
Two 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 Switch
pricing75
Two 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 Badges
pricing76
Two-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 Separators
pricing78
Two-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 Pricing
pricing79
Two generously padded cards with extra-large border radius, tab-based billing toggle, and a highlighted second plan with a primary border and shadow.
Pricing 8
pricing8
A 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 Header
pricing80
A 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 Frame
pricing81
Two 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 Strip
pricing82
Two 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 toggle
pricing83
A 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 tiers
pricing84
Like 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 toggle
pricing85
Four 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 switch
pricing86
Four 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 switch
pricing87
A 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 strip
pricing88
Left-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 icons
pricing89
Centered heading and four bordered panels with oversized price, arrow CTA, mixed feature icons from data, and a floating pill on the highlighted tier.
Pricing 9
pricing9
A 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 toggle
pricing90
Centered 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 toggle
pricing91
Article-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 logos
pricing92
Two 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 shadow
pricing93
Four 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 emphasis
pricing94
Four 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 pricing
pricing95
Monospace-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 accents
pricing96
Four 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 billing
pricing97
Four 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 carousel
pricing98
Looping 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 lists
pricing99
Four pricing cards with billing toggle above separate per-plan feature checklists displayed in a matching grid below.
Process 1
process1
A 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 2
process2
A component visualizing a 4-step process with dynamic image transitions and a contact button, spread over 2 columns in a larger view.
Process 3
process3
A component showcasing a 5-step process with animated entries, structured layout, and shifting background colors for each step. Unique number positioning.
Process 4
process4
A 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 1
product-card1
This 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 10
product-card10
This 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 2
product-card2
This 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 Swatches
product-card21
A 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 Carousel
product-card22
A 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 Variants
product-card23
A 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 Variants
product-card24
A product card combining an image carousel with next and previous controls, react-hook-form and zod driven size and color groups with stock states, gradient color swatches, and sticky-feel add-to-cart with sale pricing.
Product Card 3
product-card3
This 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 4
product-card4
This 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 5
product-card5
This 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 6
product-card6
This 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 7
product-card7
This 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 8
product-card8
This 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 9
product-card9
This 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 1
product-categories1
This 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 2
product-categories2
This 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 3
product-categories3
This 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 4
product-categories4
This 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 5
product-categories5
This 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 1
product-detail1
This 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 10
product-detail10
This 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 2
product-detail2
This 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 3
product-detail3
This 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 4
product-detail4
This 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 5
product-detail5
This 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 6
product-detail6
This 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 7
product-detail7
This 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 8
product-detail8
This 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 9
product-detail9
This 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 1
product-gallery1
This 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 2
product-gallery2
This 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 3
product-gallery3
This 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 4
product-gallery4
The 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 7
product-gallery7
This 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 1
product-list1
This 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 10
product-list10
This 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 2
product-list2
This 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 3
product-list3
This 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 4
product-list4
This 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 5
product-list5
This 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 6
product-list6
This 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 7
product-list7
This 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 8
product-list8
This 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 9
product-list9
This 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 4
product-quick-view4
This 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 5
product-quick-view5
The 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 6
product-quick-view6
This 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 7
product-quick-view7
This 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 Dialog
product-quick-view8
A 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 1
product-specs1
This 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 2
product-specs2
This 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 1
progress-progress-basic-1
Progress Basic 2
progress-progress-basic-2
Progress Basic 3
progress-progress-basic-3
Progress Basic 4
progress-progress-basic-4
Progress Basic 5
progress-progress-basic-5
Progress Colored 1
progress-progress-colored-1
Progress Colored 2
progress-progress-colored-2
Progress Colored 3
progress-progress-colored-3
Progress Colored 4
progress-progress-colored-4
Progress Colored 5
progress-progress-colored-5
Progress Sizes 1
progress-progress-sizes-1
Progress Sizes 2
progress-progress-sizes-2
Progress Sizes 3
progress-progress-sizes-3
Progress Sizes 4
progress-progress-sizes-4
Progress Sizes 5
progress-progress-sizes-5
Progress With Label 1
progress-progress-with-label-1
Progress With Label 2
progress-progress-with-label-2
Progress With Label 3
progress-progress-with-label-3
Progress With Label 4
progress-progress-with-label-4
Progress With Label 5
progress-progress-with-label-5
Project 1
project1
A 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 10
project10
A 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 12
project12
A component with dynamic text animations, back button, detailed project information, and a large image; layout includes columns with animations for elements.
Project 13
project13
This 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.
Project13a
project13a
A visual storytelling component with a parallax hero section, project details, full-width images, and a concept overview. Uses staggered animations.
Project 14
project14
This 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 2
project2
A component displaying a project with a large title, metadata (year, category, client) in columns, an image, and descriptions, ending with a button.
Project2a
project2a
A 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.
Project2b
project2b
A 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.
Project2c
project2c
A project showcase component with dynamic text fields, a 3-column layout for metadata, an image preview, and detailed descriptions. Features an outlined contact button.
Project2d
project2d
A 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 4
project4
A 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.
Project4a
project4a
A 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.
Project4b
project4b
A component showcasing a brand identity project for a juice company, with sections on design process, challenges, and outcomes, complemented by images and text descriptions.
Project4c
project4c
A 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 5
project5
An 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.
Project5a
project5a
This 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.
Project5b
project5b
This component displays a project with a staggered fade-in animation, divided into two columns, including images, exhibition details, a description, and specific artwork information.
Project5c
project5c
This 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.
Project5d
project5d
An 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.
Project5e
project5e
A 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.
Project5f
project5f
A component displaying an art piece description, details, and images in a 2-column layout with fading animations and a booking button.
Project5g
project5g
An 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 6
project6
A component displaying a sticky description section alongside a grid of images, followed by another grid featuring project cards with hover effects.
Project6a
project6a
A component displaying an image collection with animated elements, project rows, and descriptive text. Features dynamic image scaling on hover.
Project 7
project7
A 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 8
project8
An animated block showcasing a fashion theme with large title, description, image, and credits. Features 1-2 columns and dynamic entry animations.
Project8a
project8a
A 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.
Project8b
project8b
A visually animated block with a title, subtitle, two-column layout featuring an image and detailed text descriptions, incorporating motion effects on load.
Project8c
project8c
A 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.
Project8d
project8d
A component showcasing a fashion project with animated visibility, a large title, a subtitle, an image, detailed descriptions, and credits spanning multiple columns.
Project8e
project8e
A two-section block featuring a fullscreen hero with animated text and a detailed content section in a 2-column layout with credits.
Project 9
project9
A dual-column component featuring a sticky narrative section with animated transitions and a gallery of monochrome images that enlarge on hover.
Projects 1
projects1
A 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 10
projects10
A gallery block with a 3-column layout displaying images that enlarge and reveal titles and descriptions on hover.
Projects 11
projects11
A dynamic image gallery with 1-3 columns featuring animated, hover-zoomed images.
Projects 12
projects12
An interactive gallery component with a 1-3 column layout, showcasing projects with hover animations and dynamic, motion-enhanced tooltips.
Projects 13
projects13
A component showcasing 4 projects with details: Title, Description, Launch Date & Image, in a 3-column layout emphasizing project highlights.
Projects 14
projects14
A 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 15
projects15
A component showcasing video projects with hover-play functionality, dynamic text overlays for studio names and titles, and a header section for exploration.
Projects15a
projects15a
A component displaying a grid of video sections, each showing a thumbnail that plays a video on hover, with project titles.
Projects15b
projects15b
A video gallery with a header and hover-to-play videos laid out in a 2-column grid, featuring project titles and studio names.
Projects15c
projects15c
A video gallery block with hover-play functionality, showcasing project titles and studio names over thumbnails.
Projects15d
projects15d
A component displays video projects in a 2x2 grid, with auto-play on hover, showing studio names and titles.
Projects15e
projects15e
A video carousel component displaying project thumbnails that play videos on hover, showcasing titles and studio names. Features navigation arrows and auto-pause.
Projects 16
projects16
A gallery component showcasing nature photos in two columns, with a descriptive heading and a discovery link button.
Projects 17
projects17
A carousel block showcasing projects with images, title, and location. Included are navigation buttons for scrolling through items.
Projects17a
projects17a
A component showcasing projects in a carousel with cinematic images, titles, categories, and dynamic navigation arrows.
Projects17b
projects17b
A carousel-based component showcasing projects with images, titles, categories, locations, years, and descriptions within cards. Includes navigational arrows and badges for category identification.
Projects 18
projects18
A 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 2
projects2
A 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 3
projects3
A 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 4
projects4
This component displays projects with a 2-column grid, including images, titles, categories, and dates. Features a large title and descriptive text section.
Projects 5
projects5
A gallery block showcasing 6 projects with animations, in 1 or 2 columns depending on screen size, including images and project details.
Projects 6
projects6
A gallery component with a 2-column layout showcasing 4 project cards that animate on hover and reveal details.
Projects 7
projects7
A 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 8
projects8
A component displaying items in a grid with 3 columns, featuring category filters and animations on item change.
Projects 9
projects9
A component displaying a 1 or 2-column grid of images with hover effects revealing titles and descriptions.
Promo Banner 1
promo-banner1
This 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 2
promo-banner2
This 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 3
promo-banner3
This 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 4
promo-banner4
This 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 5
promo-banner5
This 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 6
promo-banner6
This 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 7
promo-banner7
This 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 1
radio-group-radio-group-advanced-1
Radio Group Advanced 2
radio-group-radio-group-advanced-2
Radio Group Form 1
radio-group-radio-group-form-1
Radio Group Form 2
radio-group-radio-group-form-2
Radio Group Layout 1
radio-group-radio-group-layout-1
Radio Group Layout 2
radio-group-radio-group-layout-2
Radio Group Layout 3
radio-group-radio-group-layout-3
Radio Group Standard 1
radio-group-radio-group-standard-1
Radio Group Standard 2
radio-group-radio-group-standard-2
Rate Card 1
rate-card1
This 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 2
rate-card2
This 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 Basic
rating-rating-basic
Rating With Score
rating-rating-with-score
Resource 1
resource1
A 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 2
resource2
This 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 3
resource3
A 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 1
resources1
The 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 2
resources2
A 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 3
resources3
A component showcasing a featured post with an image and a list of resources, each with a date, category, and title, arranged in columns.
Resources 4
resources4
A component showcasing recent updates with a title, list items including titles, categories, avatars, dates, and interactive hover effects.
Resources 5
resources5
This 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 1
reviews1
This 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 18
reviews18
This 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 2
reviews2
This 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 23
reviews23
The 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 3
reviews3
This 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 4
reviews4
This 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 5
reviews5
This 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 6
reviews6
This 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 8
reviews8
This 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 9
reviews9
This 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 1
scroll-area-scroll-area-advanced-1
Scroll Area Advanced 2
scroll-area-scroll-area-advanced-2
Scroll Area Advanced 3
scroll-area-scroll-area-advanced-3
Scroll Area Layout 1
scroll-area-scroll-area-layout-1
Scroll Area Layout 2
scroll-area-scroll-area-layout-2
Scroll Area Layout 3
scroll-area-scroll-area-layout-3
Scroll Area Standard 1
scroll-area-scroll-area-standard-1
Scroll Area Standard 2
scroll-area-scroll-area-standard-2
Scrollable Tabslist Basic
scrollable-tabslist-scrollable-tabslist-basic
Separator Basic 1
separator-separator-basic-1
Separator Basic 2
separator-separator-basic-2
Separator Basic 3
separator-separator-basic-3
Separator Basic 4
separator-separator-basic-4
Separator Basic 5
separator-separator-basic-5
Separator Spacing 1
separator-separator-spacing-1
Separator Spacing 2
separator-separator-spacing-2
Separator Spacing 3
separator-separator-spacing-3
Separator Spacing 4
separator-separator-spacing-4
Separator Spacing 5
separator-separator-spacing-5
Separator Styled 1
separator-separator-styled-1
Separator Styled 2
separator-separator-styled-2
Separator Styled 3
separator-separator-styled-3
Separator Styled 4
separator-separator-styled-4
Separator Styled 5
separator-separator-styled-5
Separator With Text 1
separator-separator-with-text-1
Separator With Text 2
separator-separator-with-text-2
Separator With Text 3
separator-separator-with-text-3
Service 1
service1
A 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 2
service2
A 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 3
service3
A 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 4
service4
A 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 5
service5
A component showcasing UX/UI design services, with a 2:1 column layout. Features text descriptions, expertise stats, and related services with icons.
Service 6
service6
This component showcases UX/UI design services, expertise, and related offerings in a structured layout including icons and descriptions.
Service 7
service7
A 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 1
services1
A component displaying services in 1-2 columns, each service with a title, description, and list of features marked by check icons.
Services 10
services10
A 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
services11
A component showcasing services with a title and description on the left and clickable image cards to the right in a 1-2 column layout.
Services 12
services12
A component displaying featured services in a grid layout with a description panel, offering dynamic interaction for each service card.
Services 13
services13
A 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 14
services14
A 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 15
services15
A 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 16
services16
A 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 18
services18
A 3-column component displaying services with a large title, description, and interactive list. Includes progress indicators and "Get Started" CTA.
Services 19
services19
An animated table layout displaying service options with a unique feature of a cursor-following image that changes based on the hovered table row.
Services 20
services20
A 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 21
services21
A 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 3
services3
A component displaying four service categories, each with an icon, title, and list of services in a three-column layout.
Services 4
services4
A 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 5
services5
A 4-column component listing services with icons, titles, descriptions, and bullet points. Features a central 'Services' title and summary.
Services 6
services6
A component showcasing 4 services with icons, titles, descriptions, and items in a 1-2-4 column layout, featuring hover effects.
Services 7
services7
This component displays four services, each with an icon, title, description, and list of features, styled with rounded containers.
Services 8
services8
An interactive component lists services with accordions, including icons, titles, and descriptions. Features 2-column grid for in-depth details.
Services 9
services9
A 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 Search
settings-integrations1
A searchable integration gallery with category filter popover, compact integration cards showing logos and categories, and filtered results display.
Settings Integrations 2 - Integration List with Status
settings-integrations2
A 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 Grid
settings-integrations3
A 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 Badges
settings-integrations3a
A responsive integration settings grid displaying third-party service cards with connection status badges and hover interactions.
Settings Integrations 4 - Tabbed Integration Categories
settings-integrations4
A settings integrations panel with tabbed navigation to browse services by category, featuring connect/disconnect buttons and status badges.
Settings Integrations 5 - Toggle Switch Integration List
settings-integrations5
A compact integration settings panel with toggle switches for quick enable/disable of connected services.
Settings Integrations 6 - Integration Table with Actions
settings-integrations6
A table-based integration management view showing service status, sync times, and action buttons for settings and removal.
Settings Integrations 7 - Integration Cards with Footer Actions
settings-integrations7
A full-page integration browser with search, card-based layout featuring category labels and connect buttons in card footers.
Settings Integrations 8 - Sidebar Category Navigation
settings-integrations8
A two-column integration browser with category sidebar navigation and scrollable list of integration items.
Settings Integrations 9 - Connected Integrations with Activity
settings-integrations9
A management view for active integrations showing connection status, who connected them, and recent activity with dropdown actions.
Settings Members 1 - Members Table with Filters
settings-members1
A 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 Avatars
settings-members2
A vertical member list with avatars, role badges, dropdown actions, search input, and invite dialog with help link in subheading.
Settings Members 3 - Member Cards Grid
settings-members3
A responsive card grid displaying team members with avatars, color-coded role badges, join dates, and dropdown action menus.
Settings Members 4 - Members with Bulk Selection
settings-members4
A 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 Invites
settings-members5
A tabbed interface separating active members from pending invitations, with online status indicators, last active times, and invite expiration tracking.
Settings Notifications 1 - Simple Checkbox List
settings-notifications1
A minimal notification settings list with checkboxes for each notification type in a single vertical column.
Settings Notifications 2 - Simple Switch List
settings-notifications2
A minimal notification settings list with switch toggles for each notification type in a vertical stack.
Settings Notifications 3 - Grouped Categories with Switches
settings-notifications3
A notification settings section with notifications organized into labeled categories, each in a bordered card with switch toggles.
Settings Notifications 4 - Two-Channel Matrix Table
settings-notifications4
A notification settings table with Email and SMS checkbox columns for each notification type in a matrix layout.
Settings Profile 1 - Basic Profile Form
settings-profile1
A compact profile settings card with avatar upload, name, username, email, and bio fields.
Settings Profile 2 - Profile Form with Social Links
settings-profile2
A comprehensive profile settings form with personal info, work details, and social media links organized in sections.
Settings Profile 3 - Profile Settings with Cover Image
settings-profile3
A multi-card profile settings layout with cover image upload, avatar, basic info, and regional preferences.
Settings Profile 4 - Full Page Profile Editor
settings-profile4
A full-page profile editor with sidebar navigation, sectioned content, and sticky save bar.
Settings Profile 5 - Profile with Live Preview
settings-profile5
A two-column profile editor with live preview showing how changes appear to others in real-time.
Settings Profile 6 - Profile Setup Wizard
settings-profile6
A multi-step wizard for profile setup with progress indicator, back/next navigation, and review step.
Settings Profile 7 - Compact Inline Edit Profile
settings-profile7
A compact profile card with inline editing - click to edit fields, save on enter or blur.
Shader 1 - Raymarched 3D Shader
shader1
A full-screen shader background with raymarched 3D shapes, rotating scene, configurable color, and smooth volumetric lighting.
Shader 10 - Image Transition Shader
shader10
A 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 Bloom
shader11
A 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 Shader
shader12
A 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 Shader
shader13
A 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 Dither
shader14
A 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 Shader
shader15
A full-screen shader background with RGB prism effect, color acts as spectral mask, configurable color and time multiplier.
Shader 16 - Space Invaders Shader
shader16
A full-screen shader background with falling pixel-art invaders, expanding rings, configurable color, and time multiplier.
Shader 17 - Fluid Reveal Image
shader17
A 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 Shader
shader18
A 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 Shader
shader19
A full-screen shader background with glass rod refraction, 3D noise, RGB dispersion, and configurable background and object colors.
Shader 2 - Kaleidoscope Swirl Shader
shader2
A full-screen shader background with kaleidoscope-style rotating shapes, fractal-like patterns, configurable color, and time-based animation.
Shader 20 - Metaball Glass Shader
shader20
A full-screen shader background with glass rod refraction, two metaballs, configurable metaball and background colors.
Shader 3 - Mouse-Interactive Glass Shader
shader3
A full-screen shader background with glass refraction, circular shapes, mouse-following interaction, and configurable color.
Shader 4 - Chromatic Aberration Shader
shader4
A full-screen shader background with chromatic aberration, procedural organic scene, light streaks, and dark color palette.
Shader 5 - Raymarched Gyroid Sphere
shader5
A full-screen shader background with raymarched gyroid surface and sphere, neon volumetric lighting, and blue noise dither.
Shader 6 - Dithered Wave Shader
shader6
A full-screen shader background with cosine wave pattern, Bayer dither, and configurable foreground and background colors.
Shader 7 - Fluid Vector Field Shader
shader7
A full-screen shader background with fluid simulation, vector field visualization, arrow patterns, mouse interaction, and configurable color.
Shader 8 - Interactive Grid Shader
shader8
A full-screen shader background with ping-pong buffer, grid-based shapes (squares, crosses, lines), and mouse interaction.
Shader 9 - Glowing Torus with Mouse
shader9
A full-screen shader background with raymarched 3D torus, glow effect, mouse proximity highlight (red), and dark color palette.
Sheet Details 1
sheet-sheet-details-1
Sheet Details 2
sheet-sheet-details-2
Sheet Details 3
sheet-sheet-details-3
Sheet Details 4
sheet-sheet-details-4
Sheet Details 5
sheet-sheet-details-5
Sheet Form 1
sheet-sheet-form-1
Sheet Form 2
sheet-sheet-form-2
Sheet Form 3
sheet-sheet-form-3
Sheet Form 4
sheet-sheet-form-4
Sheet Form 5
sheet-sheet-form-5
Sheet Multi Section 1
sheet-sheet-multi-section-1
Sheet Multi Section 2
sheet-sheet-multi-section-2
Sheet Multi Section 3
sheet-sheet-multi-section-3
Sheet Multi Section 4
sheet-sheet-multi-section-4
Sheet Multi Section 5
sheet-sheet-multi-section-5
Sheet Navigation 1
sheet-sheet-navigation-1
Sheet Navigation 2
sheet-sheet-navigation-2
Sheet Navigation 3
sheet-sheet-navigation-3
Sheet Navigation 4
sheet-sheet-navigation-4
Sheet Navigation 5
sheet-sheet-navigation-5
Sheet Settings 1
sheet-sheet-settings-1
Sheet Settings 2
sheet-sheet-settings-2
Sheet Settings 3
sheet-sheet-settings-3
Sheet Settings 4
sheet-sheet-settings-4
Sheet Settings 5
sheet-sheet-settings-5
Sheet Standard 1
sheet-sheet-standard-1
Sheet Standard 2
sheet-sheet-standard-2
Sheet Standard 3
sheet-sheet-standard-3
Sheet Standard 4
sheet-sheet-standard-4
Shopping Cart 1
shopping-cart1
This 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 14
shopping-cart14
This 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 15
shopping-cart15
This 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 16
shopping-cart16
The 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 17
shopping-cart17
This 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 18
shopping-cart18
This 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 19
shopping-cart19
This 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 2
shopping-cart2
This 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 20
shopping-cart20
The 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 3
shopping-cart3
This 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 7
shopping-cart7
This 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 Groups
sidebar1
A simple sidebar with logo header, labeled navigation groups, footer links, and main content area with breadcrumbs and toggle button.
Sidebar 10
sidebar10
A sidebar10 component
Sidebar 11
sidebar11
A sidebar11 component
Sidebar 12
sidebar12
A sidebar12 component
Sidebar 13
sidebar13
A sidebar13 component
Sidebar 14
sidebar14
A sidebar14 component
Sidebar 15
sidebar15
A sidebar15 component
Sidebar 16
sidebar16
A sidebar16 component
Sidebar 17
sidebar17
A sidebar17 component
Sidebar 18
sidebar18
A sidebar18 component
Sidebar 19
sidebar19
A sidebar19 component
Sidebar 2 - Sidebar with Collapsible Submenus
sidebar2
A sidebar with collapsible navigation groups, nested submenu items with chevron indicators, and expandable project sections.
Sidebar 20
sidebar20
A sidebar20 component
Sidebar 21
sidebar21
A sidebar21 component
Sidebar 3 - Sidebar with Multiple Groups
sidebar3
A sidebar with multiple labeled navigation groups covering overview, projects, team, and workspace sections with footer utilities.
Sidebar 4 - Sidebar with Collapsible Groups
sidebar4
A sidebar with collapsible navigation groups that can expand/collapse entire sections, combining group labels with expandable content.
Sidebar 5 - Sidebar with Search Input
sidebar5
A sidebar with integrated search input in the header, collapsible navigation groups, and labeled sections for quick filtering.
Sidebar 6 - Sidebar with User Footer
sidebar6
A sidebar with user profile dropdown in the footer showing avatar, name, email, and account/logout options with collapsible navigation.
Sidebar 7 - Sidebar with Workspace Switcher
sidebar7
A sidebar with workspace/organization switcher dropdown in the header, allowing users to switch between different workspaces or teams.
Sidebar 8 - Sidebar Inset Variant
sidebar8
An inset sidebar variant that appears contained within the page with rounded corners, workspace switcher, user footer, and collapsible groups.
Sidebar 9
sidebar9
A sidebar9 component
Signup 1
signup1
A signup component featuring a logo, customizable headings, email and password fields, buttons for account creation and Google signup, and a login redirect.
Signup 10
signup10
A 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 2
signup2
A signup component with logo, headings, email/password inputs, and buttons for account creation and Google signup, arranged in a centered column layout.
Signup 3
signup3
A 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 4
signup4
A signup component featuring a logo, headings, email/password inputs, and social media signup options (Google, Facebook, Apple). Includes a 'login' link.
Signup 5
signup5
A 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 6
signup6
A signup component featuring email/password fields, Google signup, and a login redirect. Layout includes a centered form in a 400px column.
Signup 7
signup7
This 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 8
signup8
A 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 9
signup9
A signup component with Google signup option, email input, and a carousel of logos at the bottom.
Skeleton Card 1
skeleton-skeleton-card-1
Skeleton Card 2
skeleton-skeleton-card-2
Skeleton Card 3
skeleton-skeleton-card-3
Skeleton Card 4
skeleton-skeleton-card-4
Skeleton Card 5
skeleton-skeleton-card-5
Skeleton Content 1
skeleton-skeleton-content-1
Skeleton Content 2
skeleton-skeleton-content-2
Skeleton Content 3
skeleton-skeleton-content-3
Skeleton Content 4
skeleton-skeleton-content-4
Skeleton Content 5
skeleton-skeleton-content-5
Skeleton Form 1
skeleton-skeleton-form-1
Skeleton Form 2
skeleton-skeleton-form-2
Skeleton Form 3
skeleton-skeleton-form-3
Skeleton Form 4
skeleton-skeleton-form-4
Skeleton Form 5
skeleton-skeleton-form-5
Skeleton List 1
skeleton-skeleton-list-1
Skeleton List 2
skeleton-skeleton-list-2
Skeleton List 3
skeleton-skeleton-list-3
Skeleton List 4
skeleton-skeleton-list-4
Skeleton List 5
skeleton-skeleton-list-5
Skeleton Profile 1
skeleton-skeleton-profile-1
Skeleton Profile 2
skeleton-skeleton-profile-2
Skeleton Profile 3
skeleton-skeleton-profile-3
Skeleton Profile 4
skeleton-skeleton-profile-4
Skeleton Profile 5
skeleton-skeleton-profile-5
Skeleton Table 1
skeleton-skeleton-table-1
Skeleton Table 2
skeleton-skeleton-table-2
Skeleton Table 3
skeleton-skeleton-table-3
Skeleton Table 4
skeleton-skeleton-table-4
Skeleton Table 5
skeleton-skeleton-table-5
Skills 1
skills1
A 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 2
skills2
A 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 1
slider-slider-interactive-1
Slider Interactive 2
slider-slider-interactive-2
Slider Interactive 3
slider-slider-interactive-3
Slider Interactive 4
slider-slider-interactive-4
Slider Interactive 5
slider-slider-interactive-5
Slider Range 1
slider-slider-range-1
Slider Range 2
slider-slider-range-2
Slider Range 3
slider-slider-range-3
Slider Range 4
slider-slider-range-4
Slider Range 5
slider-slider-range-5
Slider Settings 1
slider-slider-settings-1
Slider Settings 2
slider-slider-settings-2
Slider Settings 3
slider-slider-settings-3
Slider Settings 4
slider-slider-settings-4
Slider Standard 1
slider-slider-standard-1
Slider Standard 2
slider-slider-standard-2
Slider Standard 3
slider-slider-standard-3
Slider Standard 4
slider-slider-standard-4
Slider Standard 5
slider-slider-standard-5
Slider Styled 1
slider-slider-styled-1
Slider Styled 2
slider-slider-styled-2
Slider Styled 3
slider-slider-styled-3
Slider Styled 4
slider-slider-styled-4
Slider Styled 5
slider-slider-styled-5
Slider Vertical 1
slider-slider-vertical-1
Slider Vertical 2
slider-slider-vertical-2
Slider Vertical 3
slider-slider-vertical-3
Slider Vertical 4
slider-slider-vertical-4
Slider Vertical 5
slider-slider-vertical-5
Social Media Trending 1 - Video Carousel Social Feed
social-media-trending1
A 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 Carousel
social-media-trending2
An 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 Grid
social-media-trending3
A 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 Feed
social-media-trending4
A 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 Card
social-media-trending5
A 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 1
sonner-sonner-content-1
Sonner Content 2
sonner-sonner-content-2
Sonner Content 3
sonner-sonner-content-3
Sonner Content 4
sonner-sonner-content-4
Sonner Content 5
sonner-sonner-content-5
Sonner Interactive 1
sonner-sonner-interactive-1
Sonner Interactive 2
sonner-sonner-interactive-2
Sonner Interactive 3
sonner-sonner-interactive-3
Sonner Interactive 4
sonner-sonner-interactive-4
Sonner Position 1
sonner-sonner-position-1
Sonner Position 2
sonner-sonner-position-2
Sonner Position 3
sonner-sonner-position-3
Sonner Position 4
sonner-sonner-position-4
Sonner Position 5
sonner-sonner-position-5
Sonner Position 6
sonner-sonner-position-6
Sonner Promise 1
sonner-sonner-promise-1
Sonner Promise 2
sonner-sonner-promise-2
Sonner Promise 3
sonner-sonner-promise-3
Sonner Promise 4
sonner-sonner-promise-4
Sonner Standard 1
sonner-sonner-standard-1
Sonner Standard 2
sonner-sonner-standard-2
Sonner Standard 3
sonner-sonner-standard-3
Sonner Standard 4
sonner-sonner-standard-4
Sonner Standard 5
sonner-sonner-standard-5
Spinner Applications 1
spinner-spinner-applications-1
Spinner Applications 2
spinner-spinner-applications-2
Spinner Applications 3
spinner-spinner-applications-3
Spinner Button 1
spinner-spinner-button-1
Spinner Button 2
spinner-spinner-button-2
Spinner Button 3
spinner-spinner-button-3
Spinner Button 4
spinner-spinner-button-4
Spinner Button 5
spinner-spinner-button-5
Spinner Inline 1
spinner-spinner-inline-1
Spinner Inline 2
spinner-spinner-inline-2
Spinner Inline 3
spinner-spinner-inline-3
Spinner Inline 4
spinner-spinner-inline-4
Spinner Standard 1
spinner-spinner-standard-1
Spinner Standard 2
spinner-spinner-standard-2
Spinner Standard 3
spinner-spinner-standard-3
Spinner Standard 4
spinner-spinner-standard-4
Spinner Standard 5
spinner-spinner-standard-5
Stats Card 1 - Metric Card with Trend
stats-card1
A compact metric card displaying a value with trend indicator showing percentage change and direction.
Stats Card 10 - Metric Card with Accent Border
stats-card10
A metric card with a colored left border accent and pill badge showing percentage change.
Stats Card 2 - Metric Card with Sparkline
stats-card2
A metric card with a sparkline area chart showing recent trend data below the main value.
Stats Card 3 - Metric Card with Progress
stats-card3
A metric card showing progress toward a goal with a progress bar and target value.
Stats Card 4 - Metric Card with Comparison
stats-card4
A metric card displaying current and previous period values side by side for easy comparison.
Stats Card 5 - Metric Card with Icon
stats-card5
A metric card with a colored icon badge in the header alongside the title and value.
Stats Card 6 - Metric Card with Breakdown
stats-card6
A metric card showing a total value with a breakdown list of contributing segments below.
Stats Card 7 - Metric Card with Donut
stats-card7
A metric card with a mini donut chart showing percentage completion alongside the value.
Stats Card 8 - Metric Card with Status
stats-card8
A metric card with a color-coded status indicator showing healthy, warning, or critical states.
Stats Card 9 - Metric Card with Toggle
stats-card9
A metric card with MRR/ARR toggle to switch between monthly and annual recurring revenue views.
Stats 1
stats1
A component displaying performance stats in 3 columns, highlighted by large numbers and explanatory texts, centered around platform efficiency gains.
Stats 10
stats10
A 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 11
stats11
A statistical block displaying achievements with a unique background gradient, 2-column layout for stats, and decorative circles in the backdrop.
Stats 12
stats12
This 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 13
stats13
A component showcasing animated bars comparing values, with tooltips and percentage indicators for enhanced visual analysis. Includes a candy-striped background.
Stats 14
stats14
A countdown display component with an animated timer, promotional text, and a call-to-action button. Features a decorated container with dotted accents.
Stats 15
stats15
Dynamic 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 16
stats16
A component displaying statistics with a title, subtitle, a dynamic line chart, and three key metrics.
Stats 17
stats17
A 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 18
stats18
A component featuring a central radar chart and a row of stats below, displaying numerical values and descriptions.
Stats 19
stats19
A component displaying "Milestones" with a 6-column layout; includes a sticky label and lists stats in 2:3 column ratios.
Stats 2
stats2
A 3-column block displaying platform insights with arrows and icons denoting trends and values, includes descriptive texts.
Stats 22 - Yearly Metrics With Ruler Timeline
stats22
Animated fiscal-year KPIs above a ruler-style baseline with default and secondary CTAs. Year pills stay in chronological order and use light horizontal motion when selected.
Stats 4
stats4
A 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 5
stats5
A component displays performance metrics in 3 columns, highlighting values with dynamic icons and bold percentage figures.
Stats 6
stats6
A component displaying platform performance metrics and two buttons. It features a bold title, 4 columns for statistics, and dynamic text sizing.
Stats 7
stats7
A 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 8
stats8
A stats display component with a heading, description, and link, followed by a 4-column layout for statistics.
Stats 9
stats9
This component displays statistics and four feature cards in a 2-column layout, highlighting benefits and key metrics.
Switch Cards 1
switch-switch-cards-1
Switch Cards 2
switch-switch-cards-2
Switch Cards 3
switch-switch-cards-3
Switch Cards 4
switch-switch-cards-4
Switch Icons 1
switch-switch-icons-1
Switch Icons 2
switch-switch-icons-2
Switch Icons 3
switch-switch-icons-3
Switch Labeled 1
switch-switch-labeled-1
Switch Labeled 2
switch-switch-labeled-2
Switch Labeled 3
switch-switch-labeled-3
Switch Labeled 4
switch-switch-labeled-4
Switch Square 1
switch-switch-square-1
Switch Square 2
switch-switch-square-2
Switch Square 3
switch-switch-square-3
Switch Square 4
switch-switch-square-4
Switch Standard 1
switch-switch-standard-1
Switch Standard 2
switch-switch-standard-2
Switch Standard 3
switch-switch-standard-3
Switch Standard 4
switch-switch-standard-4
Table Advanced 1
table-table-advanced-1
Table Advanced 2
table-table-advanced-2
Table Advanced 3
table-table-advanced-3
Table Advanced 4
table-table-advanced-4
Table Standard 1
table-table-standard-1
Table Standard 2
table-table-standard-2
Table Standard 3
table-table-standard-3
Table Standard 4
table-table-standard-4
Tabs Advanced 1
tabs-tabs-advanced-1
Tabs Advanced 2
tabs-tabs-advanced-2
Tabs Advanced 3
tabs-tabs-advanced-3
Tabs Content 1
tabs-tabs-content-1
Tabs Content 2
tabs-tabs-content-2
Tabs Content 3
tabs-tabs-content-3
Tabs Layout 1
tabs-tabs-layout-1
Tabs Layout 2
tabs-tabs-layout-2
Tabs Layout 3
tabs-tabs-layout-3
Tabs Standard 1
tabs-tabs-standard-1
Tabs Standard 2
tabs-tabs-standard-2
Team 1
team1
A team showcase component with a title, subtitle, description, and a grid of member avatars, names, and roles, supporting up to 4 columns.
Team 10
team10
A block displaying a team with a title, introduction, and button, followed by a multi-column layout of team members' avatars and roles.
Team 11
team11
This 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 12
team12
A team showcase component with staggered animation for each member's photo, including name and role. Displays info in two columns with adjustable gaps.
Team 13
team13
A component featuring a team carousel with animated images/animations for mobile and a grid layout for other devices.
Team 15
team15
This 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 2
team2
A 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 3
team3
A 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 Photos
team36
A simple team or investors grid with square photos, names, and roles/companies in a responsive 5-column layout.
Team 4
team4
A 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 5
team5
A 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 6
team6
A 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 7
team7
A 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 8
team8
A carousel component showcasing team members with images, roles, and years of experience. Includes navigation buttons and a separator.
Team 9
team9
A component showcasing team members with tabbed categorization and search functionality, displaying member details within a grid layout of up to 4 columns.
Testimonial 1
testimonial1
A testimonial block displaying client feedback with navigation buttons, responsive carousel for mobile, and a 4-column masonry layout for larger screens.
Testimonial 10
testimonial10
A testimonial block with a central quote, author's name, role, and avatar in a vertical layout.
Testimonial 11
testimonial11
A component displaying a testimonial section with a rating block, supporting multiple columns, and dynamic testimonial visibility based on screen size.
Testimonial 12
testimonial12
A component displaying carousel testimonials in a 3-column layout, featuring image+text on the left and detailed stats on the right.
Testimonial 13
testimonial13
A component featuring a testimonial with overlapping avatars and a quote, showcased on a single-column layout with centered text.
Testimonial 14
testimonial14
A carousel component showcasing testimonials, featuring text quotes, avatars, names, roles, and a 5-star rating system. Includes navigation dots for carousel control.
Testimonial 15
testimonial15
A component with a 2-column layout, showcasing a headline, description, button, company logos, and 4 personalized testimonials with avatars.
Testimonial 16
testimonial16
A component showcasing user testimonials in a grid with 2 columns, expandable content, and avatars.
Testimonial 17
testimonial17
A testimonial component with a dynamic carousel for mobile and a static 3-column layout for larger screens, showcasing user feedback and logos.
Testimonial 18
testimonial18
A testimonial component displaying a 5-star rating, a highlighted quote, and the author's avatar and details.
Testimonial 19
testimonial19
A carousel showcasing client testimonials with a 5-star rating system, client roles, and avatars. Features auto-scroll and multi-column layout.
Testimonial 2
testimonial2
This component displays a bold, centered message with overlapping avatars and a large "Get started for free" button underneath.
Testimonial 20
testimonial20
A two-column testimonial block with dashed borders, featuring quotes, avatars, and names. Decorated with sparkle icons at its corners.
Testimonial 21
testimonial21
A component showcasing expert testimonials with a header, badges, and a 3-column layout of cards containing logos, quotes, and author info.
Testimonial 23
testimonial23
A masonry layout component displaying customer testimonials with avatars, feedback, and dates. Includes a title, subtitle, and a "See More" button.
Testimonial 24
testimonial24
A component showcasing testimonials in a masonry layout with 1-3 columns, featuring user reviews, avatars, and star ratings. Includes reward cards with icons.
Testimonial 25
testimonial25
Testimonial carousel with navigation buttons, cards displaying quotes, authors, roles, companies, and images.
Testimonial 26
testimonial26
A testimonial carousel block with dynamic navigation dots and decorative background patterns. Displays quotes, authors, roles, and logos.
Testimonial 27
testimonial27
This 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 28
testimonial28
A carousel component showcasing testimonials with avatars, names, and comments. Each slide has a dashed border with plus icons at the corners.
Testimonial 29
testimonial29
A testimonial carousel block with auto-rotation, featuring individual avatars, names, roles, and quotes. Layout includes centered items and pagination dots.
Testimonial 3
testimonial3
A testimonial component with a quote, image logo, and author attribution centered in a bordered block with adjustable padding.
Testimonial 30
testimonial30
Dynamic 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 Cards
testimonial31
A testimonial section with heading, description, CTA button, and a horizontal carousel of photo cards featuring quotes and author info.
Testimonial 33 - Bento Featured Testimonial Grid
testimonial33
A 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 Cards
testimonial34
Puts 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 List
testimonial35
Left-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 Studies
testimonial36
A 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 Strip
testimonial37
A 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 Blocks
testimonial38
A 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 Rows
testimonial39
Testimonials in a horizontal snap scroll on small screens and a two-column grid on desktop, with case studies as image-plus-content rows, built with Shadcn UI and the testimonial-case-studies model.
Testimonial 4
testimonial4
A testimonial component with 1 large image & text block plus 3 smaller text cards, each featuring an avatar.
Testimonial 40 - Muted Surface With Portrait Case Cards
testimonial40
A 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 Edges
testimonial41
A 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 Columns
testimonial42
A testimonial carousel with left-aligned heading and navigation, four photo cards visible on large screens, square portraits, and faded edge masking.
Testimonial 6
testimonial6
A carousel showcasing testimonials with navigational controls, featuring a title, user quotes, and their avatars. Each slide shows 1-3 testimonials based on size.
Testimonial 7
testimonial7
A component showcasing two auto-scrolling carousels of client testimonials, with avatars, names, roles, and quotes, plus a section header.
Testimonial 8
testimonial8
A 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 9
testimonial9
A testimonials grid with dynamic columns, showcasing clients' feedback, names, roles, and avatars, along with a headline and subtext.
Textarea Form 1
textarea-textarea-form-1
Textarea Form 2
textarea-textarea-form-2
Textarea Form 3
textarea-textarea-form-3
Textarea Form 4
textarea-textarea-form-4
Textarea Form 5
textarea-textarea-form-5
Textarea Labeled 1
textarea-textarea-labeled-1
Textarea Labeled 2
textarea-textarea-labeled-2
Textarea Labeled 3
textarea-textarea-labeled-3
Textarea Labeled 4
textarea-textarea-labeled-4
Textarea Standard 1
textarea-textarea-standard-1
Textarea Standard 2
textarea-textarea-standard-2
Textarea Standard 3
textarea-textarea-standard-3
Textarea Standard 4
textarea-textarea-standard-4
Timeline 1
timeline1
A component presenting a 3-step process: "Data Integration," "Custom Configuration," and "Scale Your Business," each with icons, titles, and descriptions.
Timeline 10
timeline10
A timeline component with 4 columns, highlighting project phases with dates, titles, and descriptions, using animation to show current progress.
Timeline 11
timeline11
A 4-column timeline component showcasing phases with icons, dates, titles, and descriptions. Features an animated progress indicator.
Timeline 12
timeline12
An interactive timeline component with four tabs. Each tab reveals content on a different phase, including dates, descriptions, animated images, and a download button.
Timeline 13
timeline13
A component displaying a product launch timeline with 3 phases, progress bars, and durations. Features an animated timeline indicator.
Timeline 14
timeline14
A timeline component showcasing key milestones, uses intersection observer for active item highlight, includes sticky year indicator.
Timeline 2
timeline2
A 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 3
timeline3
A 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 4
timeline4
A component showcasing a step-by-step guide with alternating layout, custom badges, icons, and diagonal patterns.
Timeline 5
timeline5
A 2-column layout component featuring static content on the left and scrollable cards on the right, each with an icon, title, and description.
Timeline 6
timeline6
A 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 7
timeline7
A component with a stepper UI to guide through a process, featuring dynamic progress indication, navigational buttons, and transition animations.
Timeline 8
timeline8
A vertical timeline block, showcasing events with dates, displayed in a centered max-width container with decorative separators.
Timeline 9
timeline9
This component displays a vertical timeline of key events in artificial intelligence history, using cards with titles, dates, and content.
Todo 1
todo1
This 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 10
todo10
This 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 2
todo2
This 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 3
todo3
This 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 4
todo4
This 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 5
todo5
This 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 6
todo6
This 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 7
todo7
This 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 8
todo8
This 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 9
todo9
This 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 1
toggle-group-toggle-group-sizes-1
Toggle Group Sizes 2
toggle-group-toggle-group-sizes-2
Toggle Group Sizes 3
toggle-group-toggle-group-sizes-3
Toggle Group Standard 1
toggle-group-toggle-group-standard-1
Toggle Group Standard 2
toggle-group-toggle-group-standard-2
Toggle Group Standard 3
toggle-group-toggle-group-standard-3
Toggle Group Standard 4
toggle-group-toggle-group-standard-4
Toggle Sizes 1
toggle-toggle-sizes-1
Toggle Sizes 2
toggle-toggle-sizes-2
Toggle Sizes 3
toggle-toggle-sizes-3
Toggle Standard 1
toggle-toggle-standard-1
Toggle Standard 2
toggle-toggle-standard-2
Toggle Standard 3
toggle-toggle-standard-3
Toggle Standard 4
toggle-toggle-standard-4
Tooltip Content 1
tooltip-tooltip-content-1
Tooltip Content 2
tooltip-tooltip-content-2
Tooltip Content 3
tooltip-tooltip-content-3
Tooltip Content 4
tooltip-tooltip-content-4
Tooltip Standard 1
tooltip-tooltip-standard-1
Tooltip Standard 2
tooltip-tooltip-standard-2
Tooltip Standard 3
tooltip-tooltip-standard-3
Tooltip Standard 4
tooltip-tooltip-standard-4
Trust Strip 1
trust-strip1
This 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 2
trust-strip2
This 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 3
trust-strip3
This 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 4
trust-strip4
This 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 Card
user-profile1
A centered profile card with avatar, name, role, bio, and action buttons for messaging and following.
User Profile 10 - Portrait Profile Card
user-profile10
A profile card with large portrait image, verification badge, and follow button.
User Profile 11 - Full Image Profile Card
user-profile11
A profile card with full-bleed background image and overlay text.
User Profile 12 - Social Profile Card
user-profile12
A social media style profile card with cover image, avatar, bio, and engagement stats.
User Profile 13 - Freelancer Profile Card
user-profile13
A freelancer profile card with skills, rating, client count, and hourly rate.
User Profile 14 - Full-Bleed Freelancer Card
user-profile14
A dramatic freelancer card with full-bleed background image and gradient overlay.
User Profile 2 - Profile with Stats
user-profile2
A horizontal profile layout with avatar, name, role, social links, follower stats, and action buttons.
User Profile 3 - Full Profile with Cover
user-profile3
A detailed profile card with cover image, overlapping avatar, bio, location, join date, social links, stats, and skill badges.
User Profile 4 - Compact Inline Profile
user-profile4
A small pill-shaped profile chip with avatar, name, role, and status indicator for inline use.
User Profile 5 - Team Member Card
user-profile5
A compact team member card with gradient header, overlapping avatar, and contact action buttons.
User Profile 6 - Profile with Tabs
user-profile6
A profile card with tabbed sections for About, Experience, and Projects content.
User Profile 9 - Profile Dashboard
user-profile9
A full-width profile dashboard with cover image, stats cards showing metrics with change indicators.
Waitlist 1
waitlist1
A component featuring a "Join the Waitlist" title, a description, an email input field, and a button. Includes avatars showing user count.
Waitlist 2
waitlist2
This 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 3
waitlist3
The 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 1
wishlist1
This 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 2
wishlist2
This 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.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
About 1 - Multi-Section Mission Values
about1
A multi-section about block with mission statement, values grid with icons, and image panels for company storytelling.
About 10 - Sticky Sidebar Company Profile
about10
A 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 Cards
about12
A 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 Profile
about13
A 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 Image
about14
A six-column about section with headline, full-width hero image, labeled intro text, avatar profile, and philosophy statement.
About 15 - Tilted Photo Profile Card
about15
A 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 Section
about16
A 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 Profile
about17
A seven-column profile section with role and timezone info, bio text, interactive tab navigation, and tab-controlled image display.
About 18 - Mission and Drive Sections
about18
A 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 Right
about19
A 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 Testimonial
about2
A 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 Images
about28
A 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 Achievements
about3
A 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 Grid
about4
A centered about section with six-image grid, two-column vision and creators text blocks, and muted CTA banner.
About 5 - Developer Platform Story
about5
A developer-focused about section with two-column intro, large image, tech logos, origin story, and milestone cards.
About 6 - Story and Workplace Photo Grid
about6
A two-column about section with story text and staggered photo grids showing team and workplace imagery.
About 7 - Product Story with Offset Images
about7
A narrative about section with offset image layout, product philosophy text, team photos, and careers CTA button.
About 8 - Fintech About with Stats Carousel
about8
A fintech-style about section with plus-sign pattern background, stats row, mission narrative, image carousel, and founding team.
About 9 - Developer Profile with Photos
about9
A 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 Form
accept-invite1
A two-column invitation acceptance screen with Google sign-in, email input form, welcome message, and footer links.
Accept Invite 2 - Centered Invite Card with Avatar
accept-invite2
A compact centered invitation card with host avatar initial, personalized message, and accept/decline buttons with expiration notice.
Accordion Form 1
accordion-accordion-form-1
Accordion containing form inputs organized by sections with icons.
Accordion Form 2
accordion-accordion-form-2
Accordion form with plus/minus trigger icons and section icons.
Accordion Multi Level 1
accordion-accordion-multi-level-1
Nested accordion with expandable child items using collapsible.
Accordion Multi Level 2
accordion-accordion-multi-level-2
Multi-level accordion with icons on parent items.
Accordion Multi Level 3
accordion-accordion-multi-level-3
Multi-level accordion with plus/minus triggers on parent items.
Accordion Multi Level 4
accordion-accordion-multi-level-4
Multi-level accordion with left-positioned plus/minus triggers.
Accordion Standard 1
accordion-accordion-standard-1
Basic accordion with collapsible items and default chevron trigger.
Accordion Standard 2
accordion-accordion-standard-2
Accordion with chevron icon positioned on the left side.
Accordion Standard 3
accordion-accordion-standard-3
Accordion with plus/minus icons instead of chevron trigger.
Accordion Standard 4
accordion-accordion-standard-4
Accordion with plus/minus trigger icons positioned on the left.
Accordion Standard 5
accordion-accordion-standard-5
Accordion with icon displayed next to each item title.
Accordion Standard 6
accordion-accordion-standard-6
Accordion with icons and plus/minus trigger icons.
Accordion Standard 7
accordion-accordion-standard-7
Accordion with icons, subtitles, and plus/minus triggers.
Accordion Subtitle 1
accordion-accordion-subtitle-1
Accordion items with subtitle text below each title.
Accordion Subtitle 2
accordion-accordion-subtitle-2
Accordion with subtitles and left-positioned icons.
Accordion Subtitle 3
accordion-accordion-subtitle-3
Accordion with subtitles and plus/minus trigger icons.
Accordion Subtitle 4
accordion-accordion-subtitle-4
Accordion with icons, subtitles, and default chevron triggers.
Accordion Tabs 1
accordion-accordion-tabs-1
Accordion styled as tabs with left-positioned plus/minus triggers.
Accordion Tabs 2
accordion-accordion-tabs-2
Accordion styled as tabs with default chevron triggers.
Accordion Tabs 3
accordion-accordion-tabs-3
Accordion styled as tabs with plus/minus trigger icons.
Accordion Tabs 4
accordion-accordion-tabs-4
Accordion styled as tabs with left-positioned chevron triggers.
Address Book 1 - Address book list with edit modes and default selection
address-book1
This 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 selection
address-book2
The 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
alert-alert-error-1
Error alert with title only.
Alert Error 2
alert-alert-error-2
Error alert with title and description text.
Alert Error 3
alert-alert-error-3
Error alert with title and action buttons.
Alert Error 4
alert-alert-error-4
Error alert with title, description, and action buttons.
Alert Error 5
alert-alert-error-5
Error alert with icon, title, description, and action buttons.
Alert Info 1
alert-alert-info-1
Info alert with title only.
Alert Info 2
alert-alert-info-2
Info alert with title and description text.
Alert Info 3
alert-alert-info-3
Info alert with title and action buttons.
Alert Info 4
alert-alert-info-4
Info alert with title, description, and action buttons.
Alert Info 5
alert-alert-info-5
Info alert with icon, title, description, and action buttons.
Alert Standard 1
alert-alert-standard-1
Standard alert with title only.
Alert Standard 2
alert-alert-standard-2
Standard alert with title and description text.
Alert Standard 3
alert-alert-standard-3
Standard alert with title and action buttons.
Alert Standard 4
alert-alert-standard-4
Standard alert with title, description, and action buttons.
Alert Standard 5
alert-alert-standard-5
Standard alert with icon, title, description, and action buttons.
Alert Success 1
alert-alert-success-1
Success alert with title only.
Alert Success 2
alert-alert-success-2
Success alert with title and description text.
Alert Success 3
alert-alert-success-3
Success alert with title and action buttons.
Alert Success 4
alert-alert-success-4
Success alert with title, description, and action buttons.
Alert Success 5
alert-alert-success-5
Success alert with icon, title, description, and action buttons.
Alert Warning 1
alert-alert-warning-1
Warning alert with title only.
Alert Warning 2
alert-alert-warning-2
Warning alert with title and description text.
Alert Warning 3
alert-alert-warning-3
Warning alert with title and action buttons.
Alert Warning 4
alert-alert-warning-4
Warning alert with title, description, and action buttons.
Alert Warning 5
alert-alert-warning-5
Warning alert with icon, title, description, and action buttons.
Alert Dialog Confirmation 1
alert-dialog-alert-dialog-confirmation-1
Alert dialog with confirmation message and cancel/continue actions.
Alert Dialog Confirmation 2
alert-dialog-alert-dialog-confirmation-2
Confirmation dialog with icon and warning message.
Alert Dialog Confirmation 3
alert-dialog-alert-dialog-confirmation-3
Confirmation dialog with detailed bulleted description list.
Alert Dialog Confirmation 4
alert-dialog-alert-dialog-confirmation-4
Confirmation dialog with custom-labeled action buttons.
Alert Dialog Confirmation 5
alert-dialog-alert-dialog-confirmation-5
Confirmation dialog with minimal short message.
Alert Dialog Confirmation 6
alert-dialog-alert-dialog-confirmation-6
Confirmation dialog with centered icon in colored circle.
Alert Dialog Custom Actions 1
alert-dialog-alert-dialog-custom-actions-1
Alert dialog with icon in action button.
Alert Dialog Custom Actions 2
alert-dialog-alert-dialog-custom-actions-2
Alert dialog with vertically stacked action buttons.
Alert Dialog Custom Actions 3
alert-dialog-alert-dialog-custom-actions-3
Alert dialog with mixed button styles in footer.
Alert Dialog Custom Actions 4
alert-dialog-alert-dialog-custom-actions-4
Alert dialog with file details and icon in action button.
Alert Dialog Custom Actions 5
alert-dialog-alert-dialog-custom-actions-5
Alert dialog with split action layout and draft button.
Alert Dialog Destructive 1
alert-dialog-alert-dialog-destructive-1
Destructive alert dialog for delete confirmation with red action button.
Alert Dialog Destructive 2
alert-dialog-alert-dialog-destructive-2
Destructive delete dialog with trash icon in header.
Alert Dialog Destructive 3
alert-dialog-alert-dialog-destructive-3
Destructive dialog with checkbox confirmation requirement.
Alert Dialog Destructive 4
alert-dialog-alert-dialog-destructive-4
Destructive dialog with highlighted consequence details list.
Alert Dialog Destructive 5
alert-dialog-alert-dialog-destructive-5
Destructive dialog with icon in action button.
Alert Dialog Destructive 6
alert-dialog-alert-dialog-destructive-6
Destructive dialog with warning badge in header.
Alert Dialog Destructive 7
alert-dialog-alert-dialog-destructive-7
Destructive dialog displaying item count and warning box.
Alert Dialog Form 1
alert-dialog-alert-dialog-form-1
Alert dialog with single text input field.
Alert Dialog Form 2
alert-dialog-alert-dialog-form-2
Alert dialog with multiple input fields including textarea.
Alert Dialog Form 3
alert-dialog-alert-dialog-form-3
Alert dialog with input and select dropdown fields.
Alert Dialog Form 4
alert-dialog-alert-dialog-form-4
Alert dialog with input field and helper description text.
Alert Dialog Form 5
alert-dialog-alert-dialog-form-5
Alert dialog with validation error state and disabled action.
Alert Dialog Form 6
alert-dialog-alert-dialog-form-6
Alert dialog with radio group for format selection.
Alert Dialog Form 7
alert-dialog-alert-dialog-form-7
Alert dialog with checkbox list for notification preferences.
Alert Dialog Informational 1
alert-dialog-alert-dialog-informational-1
Informational alert dialog displaying system update notice.
Alert Dialog Informational 2
alert-dialog-alert-dialog-informational-2
Informational dialog with info icon in header.
Alert Dialog Informational 3
alert-dialog-alert-dialog-informational-3
Informational dialog with scrollable long content.
Alert Dialog Informational 4
alert-dialog-alert-dialog-informational-4
Informational dialog with cancel and action buttons.
Alert Dialog Informational 5
alert-dialog-alert-dialog-informational-5
Informational dialog with centered icon and keyboard shortcut.
Alert Dialog Informational 6
alert-dialog-alert-dialog-informational-6
Informational dialog with status badge in header.
Alert Dialog Informational 7
alert-dialog-alert-dialog-informational-7
Informational dialog with highlighted feature cards.
Alert Dialog Success 1
alert-dialog-alert-dialog-success-1
Success alert dialog with positive confirmation message.
Alert Dialog Success 2
alert-dialog-alert-dialog-success-2
Success dialog with checkmark icon in header.
Alert Dialog Success 3
alert-dialog-alert-dialog-success-3
Success dialog with centered icon in colored circle.
Alert Dialog Success 4
alert-dialog-alert-dialog-success-4
Success dialog with numbered next steps list.
Alert Dialog Success 5
alert-dialog-alert-dialog-success-5
Success dialog with summary details in colored box.
Alert Dialog Success 6
alert-dialog-alert-dialog-success-6
Success dialog with cancel and action buttons.
Alert Dialog Success 7
alert-dialog-alert-dialog-success-7
Success dialog with celebration icon and achievement badge.
Application Shell 1 - Sidebar Shell with Breadcrumbs
application-shell1
A 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 Shell
application-shell10
A 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 Shell
application-shell11
A 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 switcher
application-shell12
Two-tier sidebar with collapsible panel, organization switcher, and animated transitions.
Application Shell 13 - Top navigation shell with dropdown menus and mobile sheet
application-shell13
Top navigation bar with dropdown menus, search field, organization switcher, and mobile bottom navigation.
Application Shell 14 - Crypto exchange shell with wallet and token menus
application-shell14
Cryptocurrency exchange interface with wallet menu, token favorites, notifications, and rounded navigation tabs.
Application Shell 2 - Inset Sidebar with Icon Collapse
application-shell2
An 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 Shell
application-shell3
An 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 Tabs
application-shell4
An 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 Shell
application-shell5
An 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 Shell
application-shell6
An 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 Shell
application-shell7
A 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 Shell
application-shell8
An 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 Shell
application-shell9
A 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
aspect-ratio-aspect-ratio-standard-1
Aspect ratio container with 16:9 widescreen ratio.
Aspect Ratio Standard 2
aspect-ratio-aspect-ratio-standard-2
Aspect ratio container with 4:3 traditional ratio.
Aspect Ratio Standard 3
aspect-ratio-aspect-ratio-standard-3
Aspect ratio container with 1:1 square ratio.
Aspect Ratio Standard 4
aspect-ratio-aspect-ratio-standard-4
Aspect ratio container with 21:9 ultrawide ratio.
Aspect Ratio Standard 5
aspect-ratio-aspect-ratio-standard-5
Aspect ratio container with 3:2 photography ratio.
Aspect Ratio Standard 6
aspect-ratio-aspect-ratio-standard-6
Aspect ratio container with 9:16 vertical mobile ratio.
Aspect Ratio Standard 7
aspect-ratio-aspect-ratio-standard-7
Aspect ratio container with 2:1 panoramic ratio.
Avatar Square 1
avatar-avatar-square-1
Avatar with rounded-lg corners instead of full circle.
Avatar Square 2
avatar-avatar-square-2
Square avatar with placeholder initials fallback.
Avatar Square 3
avatar-avatar-square-3
Square avatar with placeholder icon instead of image.
Avatar Square 4
avatar-avatar-square-4
Square avatar with green online status indicator badge.
Avatar Square 5
avatar-avatar-square-5
Square avatar with gray offline status indicator badge.
Avatar Square 6
avatar-avatar-square-6
Square avatar with blue verification check badge.
Avatar Square 7
avatar-avatar-square-7
Square avatar with red count indicator badge in top-right corner.
Avatar Standard 1
avatar-avatar-standard-1
Basic circular avatar with image and initials fallback.
Avatar Standard 10
avatar-avatar-standard-10
Extra large circular avatar with size-20 dimensions.
Avatar Standard 11
avatar-avatar-standard-11
Circular avatar with primary-colored border.
Avatar Standard 12
avatar-avatar-standard-12
Circular avatar with shadow-lg effect.
Avatar Standard 13
avatar-avatar-standard-13
Circular avatar with gradient fallback background.
Avatar Standard 14
avatar-avatar-standard-14
Circular avatar with yellow away status indicator badge.
Avatar Standard 15
avatar-avatar-standard-15
Circular avatar with red busy status indicator badge.
Avatar Standard 16
avatar-avatar-standard-16
Circular avatar with red do not disturb indicator badge.
Avatar Standard 17
avatar-avatar-standard-17
Circular avatar with hover scale and shadow effects.
Avatar Standard 18
avatar-avatar-standard-18
Circular avatar with loading spinner overlay.
Avatar Standard 19
avatar-avatar-standard-19
Circular avatar with red count badge in top-left corner.
Avatar Standard 2
avatar-avatar-standard-2
Circular avatar with placeholder initials fallback only.
Avatar Standard 20
avatar-avatar-standard-20
Circular avatar with red count badge in bottom-left corner.
Avatar Standard 21
avatar-avatar-standard-21
Circular avatar with blue colored border.
Avatar Standard 22
avatar-avatar-standard-22
Circular avatar with online indicator and count badge.
Avatar Standard 23
avatar-avatar-standard-23
Circular avatar wrapped in tooltip component.
Avatar Standard 24
avatar-avatar-standard-24
Circular avatar with animated pulsing green ring.
Avatar Standard 25
avatar-avatar-standard-25
Circular avatar with blue custom-colored fallback background.
Avatar Standard 26
avatar-avatar-standard-26
Circular avatar with primary-colored glow shadow effect.
Avatar Standard 27
avatar-avatar-standard-27
Circular avatar with destructive-colored error state fallback.
Avatar Standard 3
avatar-avatar-standard-3
Circular avatar with placeholder icon instead of image.
Avatar Standard 4
avatar-avatar-standard-4
Circular avatar with green online status indicator badge.
Avatar Standard 5
avatar-avatar-standard-5
Circular avatar with gray offline status indicator badge.
Avatar Standard 6
avatar-avatar-standard-6
Circular avatar with blue verification check badge.
Avatar Standard 7
avatar-avatar-standard-7
Circular avatar with red count indicator badge in top-right corner.
Avatar Standard 8
avatar-avatar-standard-8
Small circular avatar with size-6 dimensions.
Avatar Standard 9
avatar-avatar-standard-9
Large circular avatar with size-12 dimensions.
Avatar Group Animated 1
avatar-group-avatar-group-animated-1
Avatar group with animation on hover.
Avatar Group Border 1
avatar-group-avatar-group-border-1
Avatar group with border around each avatar.
Avatar Group Loose 1
avatar-group-avatar-group-loose-1
Avatar group with loose spacing between avatars.
Avatar Group Loose Border 1
avatar-group-avatar-group-loose-border-1
Avatar group with loose spacing and borders.
Avatar Group Max 1
avatar-group-avatar-group-max-1
Avatar group with max limit showing overflow count.
Avatar Group Standard 1
avatar-group-avatar-group-standard-1
Default avatar group with overlapping circular avatars.
Avatar Group Tight 1
avatar-group-avatar-group-tight-1
Avatar group with tight spacing between avatars.
Avatar Group Tight Border 1
avatar-group-avatar-group-tight-border-1
Avatar group with tight spacing and borders.
Avatar Group Tooltip 1
avatar-group-avatar-group-tooltip-1
Avatar group with tooltips showing names on hover.
Awards 1 - Awards table with linked rows
awards1
A 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 list
awards2
A 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 rows
awards3
A 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 subtitle
awards4
A 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 preview
awards5
A 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 pattern
background-pattern1
This 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 pattern
background-pattern10
This 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 Noise
background-pattern100
A 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 section
background-pattern11
This 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 Background
background-pattern111
A 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 Background
background-pattern112
A 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 Background
background-pattern113
A 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 Background
background-pattern115
A 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 Background
background-pattern116
A 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 Background
background-pattern117
A 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 fades
background-pattern12
This 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 fade
background-pattern13
This 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 fade
background-pattern14
This 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 pattern
background-pattern15
This 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 pattern
background-pattern16
This 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 pattern
background-pattern17
This 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 pattern
background-pattern18
This 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 pattern
background-pattern19
This 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 pattern
background-pattern2
This 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 emphasis
background-pattern20
This 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 emphasis
background-pattern21
This 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 emphasis
background-pattern22
This 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 mask
background-pattern23
The 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 fade
background-pattern24
This 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 left
background-pattern25
This 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 center
background-pattern26
This 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 center
background-pattern27
This 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 background
background-pattern28
This 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 background
background-pattern29
This 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 background
background-pattern3
This 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 background
background-pattern30
This 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 background
background-pattern31
This 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 fade
background-pattern32
This 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 fade
background-pattern33
This 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 top
background-pattern34
This 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 bottom
background-pattern35
This 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 fade
background-pattern36
A 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 fade
background-pattern37
This 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 edges
background-pattern38
This 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 background
background-pattern39
The 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 fade
background-pattern4
This 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 fade
background-pattern40
This 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 fade
background-pattern5
This 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 fade
background-pattern6
This 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 fade
background-pattern7
This 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 fade
background-pattern8
This 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 fade
background-pattern9
This 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 Background
background-pattern95
A 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 Noise
background-pattern96
A 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 Background
background-pattern97
A 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 Background
background-pattern98
A 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 Background
background-pattern99
A 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-badge-destructive-1
Destructive badge with text label.
Badge Destructive 2
badge-badge-destructive-2
Destructive badge with link.
Badge Destructive 3
badge-badge-destructive-3
Destructive badge with leading icon.
Badge Destructive 4
badge-badge-destructive-4
Destructive badge with trailing icon.
Badge Destructive 5
badge-badge-destructive-5
Destructive circular badge with count.
Badge Outline 1
badge-badge-outline-1
Outline badge with text label.
Badge Outline 2
badge-badge-outline-2
Outline badge with link.
Badge Outline 3
badge-badge-outline-3
Outline badge with leading icon.
Badge Outline 4
badge-badge-outline-4
Outline badge with trailing icon.
Badge Outline 5
badge-badge-outline-5
Outline circular badge with count.
Badge Secondary 1
badge-badge-secondary-1
Secondary badge with text label.
Badge Secondary 2
badge-badge-secondary-2
Secondary badge with link.
Badge Secondary 3
badge-badge-secondary-3
Secondary badge with leading icon.
Badge Secondary 4
badge-badge-secondary-4
Secondary badge with trailing icon.
Badge Secondary 5
badge-badge-secondary-5
Secondary circular badge with count.
Badge Standard 1
badge-badge-standard-1
Default badge with text label.
Badge Standard 2
badge-badge-standard-2
Default badge containing a clickable link.
Badge Standard 3
badge-badge-standard-3
Default badge with icon positioned on the left.
Badge Standard 4
badge-badge-standard-4
Default badge with icon positioned on the right.
Badge Standard 5
badge-badge-standard-5
Default circular badge displaying a numeric count.
Banner 1 - Full-width dismissible announcement bar
banner1
A 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 dismiss
banner2
A 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 button
banner3
A 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 dismiss
banner4
Full-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 link
banner5
Absolutely 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 avatars
banner6
Rounded floating banner with overlapping avatars, bold social-proof line, and a circular dismiss button beside the copy.
Banner 7 - Full-width banner with separator link
banner7
Dismissible full-width strip with message, vertical divider, learn-more link with arrow on desktop, and ghost close control.
Blog 1 - Latest posts grid with filters
blog1
Large 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 intro
blog11
Muted 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 times
blog12
Centered 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 overlays
blog13
Centered 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 posts
blog14
Centered 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 pills
blog16
Blog 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 filters
blog17
Centered 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 action
blog19
Related 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 controls
blog21
Horizontal 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 strip
blog22
Dark-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 header
blog23
Narrow 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 thumbnails
blog24
Centered 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 wordmark
blog26
Large 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 band
blog27
Top 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 tile
blog28
Centered 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 control
blog29
A 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 link
blog30
A 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-all
blog4
A 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 posts
blog5
A 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 cards
blog6
A 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 links
blog7
A 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 tags
blog8
A 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 table
blogpost1
A 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 sidebar
blogpost2
A 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 column
blogpost3
A 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 top
blogpost4
A 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 rail
blogpost5
A 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 hero
blogpost6
A 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 header
blogpost7
This 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 logos
book-a-demo1
This 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 testimonials
book-a-demo2
This 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 cards
book-a-demo3
The 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
border-button-border-button-basic
Breadcrumb Home Icon 1
breadcrumb-breadcrumb-home-icon-1
Breadcrumb with home icon and ellipsis for collapsed items.
Breadcrumb Home Icon 2
breadcrumb-breadcrumb-home-icon-2
Breadcrumb with home icon and dropdown menu.
Breadcrumb Home Icon 3
breadcrumb-breadcrumb-home-icon-3
Breadcrumb with home icon and icons for each item.
Breadcrumb Home Icon 4
breadcrumb-breadcrumb-home-icon-4
Breadcrumb with home icon wrapped in bordered container.
Breadcrumb Home Icon 5
breadcrumb-breadcrumb-home-icon-5
Breadcrumb with home icon and bullet separators.
Breadcrumb Home Icon 6
breadcrumb-breadcrumb-home-icon-6
Breadcrumb with home icon and slash separators.
Breadcrumb Home Icon 7
breadcrumb-breadcrumb-home-icon-7
Breadcrumb with home icon and select dropdown.
Breadcrumb Standard 1
breadcrumb-breadcrumb-standard-1
Breadcrumb navigation with ellipsis for collapsed items.
Breadcrumb Standard 2
breadcrumb-breadcrumb-standard-2
Breadcrumb with dropdown menu for intermediate items.
Breadcrumb Standard 3
breadcrumb-breadcrumb-standard-3
Breadcrumb with icons next to each navigation item.
Breadcrumb Standard 4
breadcrumb-breadcrumb-standard-4
Breadcrumb wrapped in bordered container.
Breadcrumb Standard 5
breadcrumb-breadcrumb-standard-5
Breadcrumb with bullet point separators.
Breadcrumb Standard 6
breadcrumb-breadcrumb-standard-6
Breadcrumb with slash icon separators.
Breadcrumb Standard 7
breadcrumb-breadcrumb-standard-7
Breadcrumb with select dropdown for navigation.
Button Destructive 1
button-button-destructive-1
Destructive variant button for dangerous actions.
Button Destructive 2
button-button-destructive-2
Destructive button with leading icon.
Button Destructive 3
button-button-destructive-3
Destructive button with trailing icon.
Button Destructive 4
button-button-destructive-4
Destructive button with rounded-full corners.
Button Destructive 5
button-button-destructive-5
Destructive button with loading spinner and disabled state.
Button Destructive 6
button-button-destructive-6
Destructive button with count badge indicator.
Button Destructive 7
button-button-destructive-7
Destructive button with keyboard shortcut indicator.
Button Link 1
button-button-link-1
Link variant button styled as text link.
Button Link 2
button-button-link-2
Link button with leading icon.
Button Link 3
button-button-link-3
Link button with trailing icon.
Button Link 4
button-button-link-4
Link button with rounded-full corners.
Button Link 5
button-button-link-5
Link button with loading spinner and disabled state.
Button Link 6
button-button-link-6
Link button with count badge indicator.
Button Link 7
button-button-link-7
Link button with keyboard shortcut indicator.
Button Outline 1
button-button-outline-1
Outline variant button with text label.
Button Outline 2
button-button-outline-2
Outline button with leading icon.
Button Outline 3
button-button-outline-3
Outline button with trailing icon.
Button Outline 4
button-button-outline-4
Outline button with rounded-full corners.
Button Outline 5
button-button-outline-5
Outline button with loading spinner and disabled state.
Button Outline 6
button-button-outline-6
Outline button with count badge indicator.
Button Outline 7
button-button-outline-7
Outline button with keyboard shortcut indicator.
Button Secondary 1
button-button-secondary-1
Secondary variant button with text label.
Button Secondary 2
button-button-secondary-2
Secondary button with leading icon.
Button Secondary 3
button-button-secondary-3
Secondary button with trailing icon.
Button Secondary 4
button-button-secondary-4
Secondary button with rounded-full corners.
Button Secondary 5
button-button-secondary-5
Secondary button with loading spinner and disabled state.
Button Secondary 6
button-button-secondary-6
Secondary button with count badge indicator.
Button Secondary 7
button-button-secondary-7
Secondary button with keyboard shortcut indicator.
Button Standard 1
button-button-standard-1
Default button with text label.
Button Standard 2
button-button-standard-2
Default button with leading icon.
Button Standard 3
button-button-standard-3
Default button with trailing icon.
Button Standard 4
button-button-standard-4
Default button with rounded-full corners.
Button Standard 5
button-button-standard-5
Default button with loading spinner and disabled state.
Button Standard 6
button-button-standard-6
Default button with count badge indicator.
Button Standard 7
button-button-standard-7
Default button with keyboard shortcut indicator.
Button Group Actions 1
button-group-button-group-actions-1
Button Group Actions 2
button-group-button-group-actions-2
Button Group Actions 3
button-group-button-group-actions-3
Button Group Actions 4
button-group-button-group-actions-4
Button Group Advanced 1
button-group-button-group-advanced-1
Button Group Advanced 2
button-group-button-group-advanced-2
Button Group Advanced 3
button-group-button-group-advanced-3
Button Group Advanced 4
button-group-button-group-advanced-4
Button Group Badges 1
button-group-button-group-badges-1
Button Group Badges 2
button-group-button-group-badges-2
Button Group Badges 3
button-group-button-group-badges-3
Button Group Badges 4
button-group-button-group-badges-4
Button Group Display 1
button-group-button-group-display-1
Button Group Display 2
button-group-button-group-display-2
Button Group Display 3
button-group-button-group-display-3
Button Group Display 4
button-group-button-group-display-4
Button Group Forms 1
button-group-button-group-forms-1
Button Group Forms 2
button-group-button-group-forms-2
Button Group Forms 3
button-group-button-group-forms-3
Button Group Forms 4
button-group-button-group-forms-4
Button Group Interactive 1
button-group-button-group-interactive-1
Button Group Interactive 2
button-group-button-group-interactive-2
Button Group Interactive 3
button-group-button-group-interactive-3
Button Group Interactive 4
button-group-button-group-interactive-4
Button Group Media 1
button-group-button-group-media-1
Button Group Media 2
button-group-button-group-media-2
Button Group Media 3
button-group-button-group-media-3
Button Group Media 4
button-group-button-group-media-4
Button Group Navigation 1
button-group-button-group-navigation-1
Button Group Navigation 2
button-group-button-group-navigation-2
Button Group Navigation 3
button-group-button-group-navigation-3
Button Group Patterns 1
button-group-button-group-patterns-1
Button Group Patterns 2
button-group-button-group-patterns-2
Button Group Patterns 3
button-group-button-group-patterns-3
Button Group Patterns 4
button-group-button-group-patterns-4
Button Group Standard 1
button-group-button-group-standard-1
Button Group Standard 2
button-group-button-group-standard-2
Button Group Standard 3
button-group-button-group-standard-3
Button Group Standard 4
button-group-button-group-standard-4
Calendar Dialog 1
calendar-calendar-dialog-1
Calendar Dialog 2
calendar-calendar-dialog-2
Calendar Dialog 3
calendar-calendar-dialog-3
Calendar Dialog 4
calendar-calendar-dialog-4
Calendar Dialog 5
calendar-calendar-dialog-5
Calendar Dialog 6
calendar-calendar-dialog-6
Calendar Dialog 7
calendar-calendar-dialog-7
Calendar Dialog 8
calendar-calendar-dialog-8
Calendar Standard 1
calendar-calendar-standard-1
Calendar Standard 2
calendar-calendar-standard-2
Calendar Standard 3
calendar-calendar-standard-3
Calendar Standard 4
calendar-calendar-standard-4
Calendar Standard 5
calendar-calendar-standard-5
Calendar Standard 6
calendar-calendar-standard-6
Calendar Standard 7
calendar-calendar-standard-7
Calendar Standard 8
calendar-calendar-standard-8
Card Standard 1
card-card-standard-1
Card Standard 2
card-card-standard-2
Card Standard 3
card-card-standard-3
Card Standard 4
card-card-standard-4
Careers 1 - Careers list grouped by department
careers1
A 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 frame
careers2
A 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 badges
careers3
A 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 sections
careers4
A 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 stack
careers5
A 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 cards
careers6
A 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 actions
careers7
Careers 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 department
careers8
Department 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 link
careers9
Gradient-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
carousel-carousel-standard-1
Carousel Standard 2
carousel-carousel-standard-2
Carousel Standard 3
carousel-carousel-standard-3
Carousel Standard 4
carousel-carousel-standard-4
Case Studies 1 - Case study grid with hover image cards
case-studies1
This 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 carousel
case-studies10
Two 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 heading
case-studies11
Static 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 cards
case-studies12
A 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 metrics
case-studies2
This 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 grid
case-studies3
This 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 CTA
case-studies4
This 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 testimonials
case-studies5
This 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 cards
case-studies6
A 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 time
case-studies8
Case 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 carousel
case-studies9
Case 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 sidebar
case-study1
This 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 avatars
case-study3
This 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 sidebar
case-study8
The 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 rail
changelog1
Stacked 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 timeline
changelog2
Centered 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 dots
changelog3
Each 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 line
changelog4
Large 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 footers
changelog5
Muted 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 actions
changelog6
Bordered 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 jumps
changelog8
Desktop 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 Card
chart-card1
A card containing an area chart with gradient fill, grid lines, and interactive tooltips.
Chart Card 10 - Stacked Bar Chart
chart-card10
A vertical stacked bar chart card showing multiple data series as segments within each bar.
Chart Card 11 - 100% Stacked Bar Chart
chart-card11
A horizontal 100% stacked bar chart showing proportional breakdown across categories.
Chart Card 12 - Stacked Bar with No Y-Axis
chart-card12
A minimal stacked bar chart with category labels only, no Y-axis for a cleaner look.
Chart Card 13 - Positive/Negative Bar Chart
chart-card13
A bar chart with values above and below zero, using different colors for positive and negative values.
Chart Card 14 - Range Area Chart
chart-card14
An area chart showing a min/max range band with an average line overlay.
Chart Card 15 - Waterfall Chart
chart-card15
A 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 Chart
chart-card16
A circular progress ring showing percentage completion toward a goal with centered value display.
Chart Card 17 - Semi-Circle Gauge
chart-card17
A speedometer-style half-circle gauge with needle indicator and colored performance zones.
Chart Card 18 - Multi-Ring Progress
chart-card18
Concentric progress rings showing multiple metrics simultaneously, inspired by fitness activity trackers.
Chart Card 19 - Radial Bar Chart
chart-card19
A circular bar chart with concentric bars of varying lengths representing different categories.
Chart Card 2 - Area Chart with Time Selector
chart-card2
An area chart card with tabs to switch between 7-day, 30-day, and 90-day time periods.
Chart Card 20 - Radar Chart
chart-card20
A radar/spider chart showing multiple dimensions as a polygon shape for multi-attribute comparison.
Chart Card 21 - Funnel Chart
chart-card21
A funnel visualization showing progressive conversion through stages with decreasing bar widths.
Chart Card 22 - Treemap Chart
chart-card22
A treemap visualization showing hierarchical data as nested rectangles sized by value.
Chart Card 23 - Scatter Plot
chart-card23
A scatter plot showing correlation between two variables as positioned dots.
Chart Card 24 - Bubble Chart
chart-card24
A bubble chart with variable-sized dots encoding three dimensions of data plus color for grouping.
Chart Card 25 - Chart with Target Line
chart-card25
An area chart with a horizontal reference line showing a target or benchmark value.
Chart Card 26 - Bullet Chart
chart-card26
A bullet chart showing actual value against a target with colored performance ranges in the background.
Chart Card 27 - Chart with Threshold Zones
chart-card27
An area chart with colored background zones indicating normal, warning, and critical threshold ranges.
Chart Card 3 - Bar Chart Card
chart-card3
A card containing a vertical bar chart with rounded tops and interactive tooltips.
Chart Card 4 - Horizontal Bar Chart Card
chart-card4
A card containing a horizontal bar chart with category labels on the left and values extending right.
Chart Card 5 - Donut Chart with Legend
chart-card5
A donut chart card with center stat display and a legend list showing category breakdowns.
Chart Card 6 - Multi-Line Comparison Chart
chart-card6
A line chart card comparing two data series with a legend, using solid and dashed lines.
Chart Card 7 - Chart Card with Footer Stats
chart-card7
An area chart card with a footer showing trend indicator and summary text.
Chart Card 8 - Grouped Bar Chart Card
chart-card8
A grouped bar chart card comparing two data series side by side with a legend.
Chart Card 9 - Stacked Area Chart
chart-card9
A stacked area chart card showing multiple data series layered to display composition over time.
Chart Area Axes
chart-chart-area-axes
Chart Area Default
chart-chart-area-default
Chart Area Gradient
chart-chart-area-gradient
Chart Area Icons
chart-chart-area-icons
Chart Area Interactive
chart-chart-area-interactive
Chart Area Legend
chart-chart-area-legend
Chart Area Linear
chart-chart-area-linear
Chart Area Stacked
chart-chart-area-stacked
Chart Area Stacked Expand
chart-chart-area-stacked-expand
Chart Area Step
chart-chart-area-step
Chart Bar Active
chart-chart-bar-active
Chart Bar Default
chart-chart-bar-default
Chart Bar Horizontal
chart-chart-bar-horizontal
Chart Bar Interactive
chart-chart-bar-interactive
Chart Bar Label
chart-chart-bar-label
Chart Bar Label Custom
chart-chart-bar-label-custom
Chart Bar Mixed
chart-chart-bar-mixed
Chart Bar Multiple
chart-chart-bar-multiple
Chart Bar Negative
chart-chart-bar-negative
Chart Bar Stacked
chart-chart-bar-stacked
Chart Line Default
chart-chart-line-default
Chart Line Dots
chart-chart-line-dots
Chart Line Dots Colors
chart-chart-line-dots-colors
Chart Line Dots Custom
chart-chart-line-dots-custom
Chart Line Interactive
chart-chart-line-interactive
Chart Line Label
chart-chart-line-label
Chart Line Label Custom
chart-chart-line-label-custom
Chart Line Linear
chart-chart-line-linear
Chart Line Multiple
chart-chart-line-multiple
Chart Line Step
chart-chart-line-step
Chart Pie Donut
chart-chart-pie-donut
Chart Pie Donut Active
chart-chart-pie-donut-active
Chart Pie Donut Text
chart-chart-pie-donut-text
Chart Pie Interactive
chart-chart-pie-interactive
Chart Pie Label
chart-chart-pie-label
Chart Pie Label Custom
chart-chart-pie-label-custom
Chart Pie Label List
chart-chart-pie-label-list
Chart Pie Legend
chart-chart-pie-legend
Chart Pie Separator None
chart-chart-pie-separator-none
Chart Pie Simple
chart-chart-pie-simple
Chart Pie Stacked
chart-chart-pie-stacked
Chart Radar Default
chart-chart-radar-default
Chart Radar Dots
chart-chart-radar-dots
Chart Radar Grid Circle
chart-chart-radar-grid-circle
Chart Radar Grid Circle Fill
chart-chart-radar-grid-circle-fill
Chart Radar Grid Circle No Lines
chart-chart-radar-grid-circle-no-lines
Chart Radar Grid Custom
chart-chart-radar-grid-custom
Chart Radar Grid Fill
chart-chart-radar-grid-fill
Chart Radar Grid None
chart-chart-radar-grid-none
Chart Radar Icons
chart-chart-radar-icons
Chart Radar Label Custom
chart-chart-radar-label-custom
Chart Radar Legend
chart-chart-radar-legend
Chart Radar Lines Only
chart-chart-radar-lines-only
Chart Radar Multiple
chart-chart-radar-multiple
Chart Radar Radius
chart-chart-radar-radius
Chart Radial Grid
chart-chart-radial-grid
Chart Radial Label
chart-chart-radial-label
Chart Radial Shape
chart-chart-radial-shape
Chart Radial Simple
chart-chart-radial-simple
Chart Radial Stacked
chart-chart-radial-stacked
Chart Radial Text
chart-chart-radial-text
Chart Tooltip Advanced
chart-chart-tooltip-advanced
Chart Tooltip Default
chart-chart-tooltip-default
Chart Tooltip Formatter
chart-chart-tooltip-formatter
Chart Tooltip Icons
chart-chart-tooltip-icons
Chart Tooltip Indicator Line
chart-chart-tooltip-indicator-line
Chart Tooltip Indicator None
chart-chart-tooltip-indicator-none
Chart Tooltip Label Custom
chart-chart-tooltip-label-custom
Chart Tooltip Label Formatter
chart-chart-tooltip-label-formatter
Chart Tooltip Label None
chart-chart-tooltip-label-none
Chart Group 1 - Two Charts Side by Side
chart-group1
A two-column layout with an area chart and bar chart displayed side by side.
Chart Group 10 - Infrastructure Monitoring View
chart-group10
A DevOps-style view with request volume chart and service health status panel.
Chart Group 11 - Revenue Chart with Date Range Picker
chart-group11
A card with a working date range picker that filters chart data and updates summary statistics.
Chart Group 12 - Full Dashboard with Date Controls
chart-group12
A 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 Calendar
chart-group13
An 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 Dashboard
chart-group14
A 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 Navigation
chart-group15
A 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 Charts
chart-group2
A layout with one large primary chart spanning full width and two smaller detail charts below.
Chart Group 3 - Main Chart with Weekly Trends
chart-group3
A main chart showing monthly trends with sparkline cards zooming into the last 7 days of key metrics.
Chart Group 4 - Simple Tab Chart View
chart-group4
A single card with tabs to switch between different chart visualizations of related metrics.
Chart Group 5 - Year over Year Comparison
chart-group5
A comparison layout with a dual-line chart and summary card showing year-over-year growth.
Chart Group 6 - Donut and Bar Chart Pair
chart-group6
A 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 Below
chart-group7
A section with a four-stat row above a full-width area chart.
Chart Group 8 - Bento Grid with Mixed Charts
chart-group8
A bento-style grid with four different chart types arranged in varying sizes.
Chart Group 9 - Dropdown Chart View
chart-group9
A card with a dropdown selector to switch between three different chart views showing various metrics.
Checkbox Standard 1
checkbox-checkbox-standard-1
Checkbox Standard 11
checkbox-checkbox-standard-11
Checkbox Standard 12
checkbox-checkbox-standard-12
Checkbox Standard 13
checkbox-checkbox-standard-13
Checkbox Standard 2
checkbox-checkbox-standard-2
Checkbox Standard 3
checkbox-checkbox-standard-3
Checkbox Standard 4
checkbox-checkbox-standard-4
Checkbox Standard 5
checkbox-checkbox-standard-5
Checkbox Standard 6
checkbox-checkbox-standard-6
Checkbox Standard 7
checkbox-checkbox-standard-7
Checkbox Standard 8
checkbox-checkbox-standard-8
Checkbox Standard 9
checkbox-checkbox-standard-9
Checkout 1 - Accordion checkout with cart and payment steps
checkout1
This 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 forms
checkout2
This 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 sections
checkout3
This 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 selection
checkout4
This 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 methods
checkout5
The 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 payment
checkout8
This 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.
Code Example 1 - Tabbed database query examples in multiple languages
code-example1
This 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 Stack
code-example11
A 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 Code
code-example14
A 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 Modes
code-example16
A 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 copy
code-example2
This 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 code
code-example3
This 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 preview
code-example4
This 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 tabs
code-example5
This 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 Snippets
code-example6
A 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
collapsible-collapsible-card-1
Collapsible Card 2
collapsible-collapsible-card-2
Collapsible Card 3
collapsible-collapsible-card-3
Collapsible Card 4
collapsible-collapsible-card-4
Collapsible Card 5
collapsible-collapsible-card-5
Collapsible Faq 1
collapsible-collapsible-faq-1
Collapsible Faq 2
collapsible-collapsible-faq-2
Collapsible Faq 3
collapsible-collapsible-faq-3
Collapsible Faq 4
collapsible-collapsible-faq-4
Collapsible Faq 5
collapsible-collapsible-faq-5
Collapsible Outline 1
collapsible-collapsible-outline-1
Collapsible Outline 2
collapsible-collapsible-outline-2
Collapsible Outline 3
collapsible-collapsible-outline-3
Collapsible Outline 4
collapsible-collapsible-outline-4
Collapsible Sidebar 1
collapsible-collapsible-sidebar-1
Collapsible Sidebar 2
collapsible-collapsible-sidebar-2
Collapsible Sidebar 3
collapsible-collapsible-sidebar-3
Collapsible Sidebar 4
collapsible-collapsible-sidebar-4
Collapsible Standard 1
collapsible-collapsible-standard-1
Collapsible Standard 2
collapsible-collapsible-standard-2
Collapsible Standard 3
collapsible-collapsible-standard-3
Collapsible Standard 4
collapsible-collapsible-standard-4
Collapsible Standard 5
collapsible-collapsible-standard-5
Combobox Custom Actions 1
combobox-combobox-custom-actions-1
Combobox Custom Actions 2
combobox-combobox-custom-actions-2
Combobox Custom Actions 3
combobox-combobox-custom-actions-3
Combobox Custom Actions 4
combobox-combobox-custom-actions-4
Combobox Custom Actions 5
combobox-combobox-custom-actions-5
Combobox Custom Actions 6
combobox-combobox-custom-actions-6
Combobox Custom Actions 7
combobox-combobox-custom-actions-7
Combobox Grouped 1
combobox-combobox-grouped-1
Combobox Grouped 2
combobox-combobox-grouped-2
Combobox Grouped 3
combobox-combobox-grouped-3
Combobox Grouped 4
combobox-combobox-grouped-4
Combobox Grouped 5
combobox-combobox-grouped-5
Combobox Grouped 6
combobox-combobox-grouped-6
Combobox Grouped 7
combobox-combobox-grouped-7
Combobox Multi Select 1
combobox-combobox-multi-select-1
Combobox Multi Select 2
combobox-combobox-multi-select-2
Combobox Multi Select 3
combobox-combobox-multi-select-3
Combobox Multi Select 4
combobox-combobox-multi-select-4
Combobox Multi Select 5
combobox-combobox-multi-select-5
Combobox Multi Select 6
combobox-combobox-multi-select-6
Combobox Multi Select 7
combobox-combobox-multi-select-7
Combobox Rich Content 1
combobox-combobox-rich-content-1
Combobox Rich Content 2
combobox-combobox-rich-content-2
Combobox Rich Content 3
combobox-combobox-rich-content-3
Combobox Rich Content 4
combobox-combobox-rich-content-4
Combobox Rich Content 5
combobox-combobox-rich-content-5
Combobox Rich Content 6
combobox-combobox-rich-content-6
Combobox Rich Content 7
combobox-combobox-rich-content-7
Combobox Standard 1
combobox-combobox-standard-1
Combobox Standard 2
combobox-combobox-standard-2
Combobox Standard 3
combobox-combobox-standard-3
Combobox Standard 4
combobox-combobox-standard-4
Combobox Standard 5
combobox-combobox-standard-5
Combobox Standard 6
combobox-combobox-standard-6
Combobox Standard 7
combobox-combobox-standard-7
Combobox With States 1
combobox-combobox-with-states-1
Combobox With States 2
combobox-combobox-with-states-2
Combobox With States 3
combobox-combobox-with-states-3
Combobox With States 4
combobox-combobox-with-states-4
Combobox With States 5
combobox-combobox-with-states-5
Combobox With States 6
combobox-combobox-with-states-6
Combobox With States 7
combobox-combobox-with-states-7
Command Dialog 1
command-command-dialog-1
Command Dialog 2
command-command-dialog-2
Command Dialog 3
command-command-dialog-3
Command Dialog 4
command-command-dialog-4
Command Dialog 5
command-command-dialog-5
Command Dialog 6
command-command-dialog-6
Command Dialog 7
command-command-dialog-7
Command Popover 1
command-command-popover-1
Command Popover 2
command-command-popover-2
Command Popover 3
command-command-popover-3
Command Popover 4
command-command-popover-4
Command Popover 5
command-command-popover-5
Command Popover 6
command-command-popover-6
Command Popover 7
command-command-popover-7
Command Standard 1
command-command-standard-1
Command Standard 2
command-command-standard-2
Command Standard 3
command-command-standard-3
Command Standard 4
command-command-standard-4
Command Standard 5
command-command-standard-5
Command Standard 6
command-command-standard-6
Command Standard 7
command-command-standard-7
Community 1 - Centered invite with logo and outline social buttons
community1
A 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 grid
community2
A 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 cards
community3
A 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 destinations
community4
A 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 links
community5
A 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 rings
community6
A 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 counts
community7
A 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 Form
companies-create1
A 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 Form
companies-create2
A 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 Form
companies-create3
A 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 Form
companies-create4
A 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 Dialog
companies-create5
A 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 Sheet
companies-detail1
A 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 Detail
companies-detail2
A 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 Table
companies-list1
A 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 Visibility
companies-list2
A 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 cart
compare-products1
This 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 pricing
compare-products2
This 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 actions
compare-products3
This 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 logos
compare1
A 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 benefits
compare10
A 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-ups
compare2
A 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 CTA
compare3
A 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 CTA
compare4
A 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 pill
compare5
A 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 table
compare6
A 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 tooltips
compare7
Centered 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 columns
compare8
Headline 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 below
compare9
Vendor 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 cards
compliance1
Outline 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 grid
compliance5
Bold 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 pillars
compliance6
Narrow 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 badges
compliance7
The 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 proof
contact1
A 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 links
contact10
A 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 links
contact11
A 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 form
contact14
A 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 inputs
contact16
A 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 proof
contact17
A 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 corners
contact18
A 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 image
contact19
A 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 links
contact2
A 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 form
contact20
A 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 form
contact21
A 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 contact
contact22
A 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 locator
contact23
A 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 grid
contact24
A 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 form
contact25
A 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 form
contact28
A 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 contact
contact29
A 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 offices
contact3
A 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 contact
contact30
A 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 contact
contact31
A 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 image
contact32
A 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 photo
contact33
A 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 card
contact34
A 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 image
contact35
A 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 carousel
contact4
A 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 form
contact5
A 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 hours
contact6
Stacked 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 cards
contact7
A 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 cards
contact8
A 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 grid
contact9
An 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 outline
content1
Narrative 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 grid
content2
Two-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 rail
content3
Knowledge-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 row
content4
Editorial 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
context-menu-context-menu-canvas-1
Context Menu Canvas 2
context-menu-context-menu-canvas-2
Context Menu Canvas 3
context-menu-context-menu-canvas-3
Context Menu Canvas 4
context-menu-context-menu-canvas-4
Context Menu Canvas 5
context-menu-context-menu-canvas-5
Context Menu File 1
context-menu-context-menu-file-1
Context Menu File 2
context-menu-context-menu-file-2
Context Menu File 3
context-menu-context-menu-file-3
Context Menu File 4
context-menu-context-menu-file-4
Context Menu File 5
context-menu-context-menu-file-5
Context Menu Standard 1
context-menu-context-menu-standard-1
Context Menu Standard 2
context-menu-context-menu-standard-2
Context Menu Standard 3
context-menu-context-menu-standard-3
Context Menu Standard 4
context-menu-context-menu-standard-4
Context Menu Standard 5
context-menu-context-menu-standard-5
Context Menu Standard 6
context-menu-context-menu-standard-6
Context Menu Standard 7
context-menu-context-menu-standard-7
Context Menu Table 1
context-menu-context-menu-table-1
Context Menu Table 2
context-menu-context-menu-table-2
Context Menu Table 3
context-menu-context-menu-table-3
Context Menu Table 4
context-menu-context-menu-table-4
Context Menu Table 5
context-menu-context-menu-table-5
Context Menu Text 1
context-menu-context-menu-text-1
Context Menu Text 2
context-menu-context-menu-text-2
Context Menu Text 3
context-menu-context-menu-text-3
Context Menu Text 4
context-menu-context-menu-text-4
Context Menu Text 5
context-menu-context-menu-text-5
Cta 1 - Card CTA with icon heading and trailing arrow
cta1
Bordered 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 buttons
cta10
Contained 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 action
cta11
Card-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 actions
cta12
Full-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 buttons
cta13
Accent 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 overlay
cta14
A 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 photo
cta15
Split 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 overlay
cta16
A 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 pattern
cta17
A 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 imagery
cta18
A 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 column
cta19
A 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 separators
cta20
A 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 shadow
cta21
A 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 aside
cta22
A 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 row
cta23
A 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 cards
cta26
A 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 photos
cta28
A 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 cards
cta3
A 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 action
cta30
A 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 arc
cta31
A 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 links
cta32
A 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 separator
cta34
A 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 stripe
cta35
A 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 action
cta36
A 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 action
cta37
A 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 action
cta38
A 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 action
cta39
A centered call to action inside a dashed rounded border with transparent fill, stacking heading, description, and buttons.
Cta 4 - Muted card with feature checklist
cta4
A 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 action
cta40
A 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 action
cta41
A 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 vignette
cta42
A 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 overlay
cta43
An 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 overlay
cta44
An 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 shadow
cta45
An 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 vignette
cta46
An 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 image
cta5
A 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 panels
cta6
A 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 action
cta7
An 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 Dashboard
dashboard1
A 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 Navigation
dashboard10
A 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 Heatmap
dashboard11
A 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 Map
dashboard12
A 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 Analytics
dashboard13
A 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 Panel
dashboard14
A 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 Widgets
dashboard15
A 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 Calendar
dashboard16
A 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 Calendar
dashboard17
A 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 Dashboard
dashboard18
A 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 Transactions
dashboard2
A 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 Sparklines
dashboard3
A 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 Orders
dashboard4
A 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 Transactions
dashboard5
A 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 Fulfillment
dashboard6
A 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 Chart
dashboard7
A 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 Dashboard
dashboard8
A 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 Dashboard
dashboard9
A 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
data-table-data-table-advanced-1
Data Table Advanced 2
data-table-data-table-advanced-2
Data Table Advanced 3
data-table-data-table-advanced-3
Data Table Advanced 4
data-table-data-table-advanced-4
Data Table Standard 1
data-table-data-table-standard-1
Data Table Standard 2
data-table-data-table-standard-2
Data Table Standard 3
data-table-data-table-standard-3
Data Table Standard 4
data-table-data-table-standard-4
Data Table 1 - Basic Data Table
data-table1
A 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 Table
data-table10
A 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 Table
data-table11
A 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 Table
data-table12
A 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 Table
data-table13
A 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 Table
data-table14
A 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 Table
data-table15
A 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 Table
data-table16
A 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 Table
data-table17
A 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 Table
data-table18
A 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 Table
data-table19
A 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 Table
data-table2
A data table section with visible cell borders, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
Data Table 20 - Resizable Columns Data Table
data-table20
A data table section with resizable columns via drag handles, sortable headers, and availability badges. Built with TanStack Table.
Data Table 21 - Column Management Data Table
data-table21
A 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 Table
data-table22
A 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 Table
data-table23
A 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 Table
data-table24
A 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 Table
data-table25
A 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 Controls
data-table26
A 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 Table
data-table27
A 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 Table
data-table28
A 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 Table
data-table29
A 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 Table
data-table3
A data table section with zebra-striped rows, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
Data Table 30 - Search Highlight Data Table
data-table30
A 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 Table
data-table31
A 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 Table
data-table32
A 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 Table
data-table4
A 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 Table
data-table5
A 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 Table
data-table6
A 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 Table
data-table7
A 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 Table
data-table8
A 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 Table
data-table9
A 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-date-picker-standard-1
Date Picker Standard 2
date-picker-date-picker-standard-2
Date Picker Standard 3
date-picker-date-picker-standard-3
Date Picker Standard 4
date-picker-date-picker-standard-4
Date Picker Standard 5
date-picker-date-picker-standard-5
Date Picker Standard 6
date-picker-date-picker-standard-6
Date Picker Standard 7
date-picker-date-picker-standard-7
Date Picker Standard 8
date-picker-date-picker-standard-8
Dialog Standard 1
dialog-dialog-standard-1
Dialog Standard 10
dialog-dialog-standard-10
Dialog Standard 11
dialog-dialog-standard-11
Dialog Standard 12
dialog-dialog-standard-12
Dialog Standard 13
dialog-dialog-standard-13
Dialog Standard 14
dialog-dialog-standard-14
Dialog Standard 15
dialog-dialog-standard-15
Dialog Standard 16
dialog-dialog-standard-16
Dialog Standard 17
dialog-dialog-standard-17
Dialog Standard 2
dialog-dialog-standard-2
Dialog Standard 3
dialog-dialog-standard-3
Dialog Standard 4
dialog-dialog-standard-4
Dialog Standard 5
dialog-dialog-standard-5
Dialog Standard 6
dialog-dialog-standard-6
Dialog Standard 7
dialog-dialog-standard-7
Dialog Standard 8
dialog-dialog-standard-8
Dialog Standard 9
dialog-dialog-standard-9
Download 1 - App store download cards
download1
A 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 downloads
download10
A 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 frame
download11
A 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-clipboard
download13
This 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 downloads
download2
A 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 Columns
download22
A 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 card
download3
A 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 icons
download4
A 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 snippets
download5
A 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 cards
download6
Lists 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 mockups
download7
Centered 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 matrix
download8
Client 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 strip
download9
A 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
drawer-drawer-bottom-1
Drawer Bottom 2
drawer-drawer-bottom-2
Drawer Bottom 3
drawer-drawer-bottom-3
Drawer Bottom 4
drawer-drawer-bottom-4
Drawer Bottom 5
drawer-drawer-bottom-5
Drawer Bottom 6
drawer-drawer-bottom-6
Drawer Bottom 7
drawer-drawer-bottom-7
Drawer Left 1
drawer-drawer-left-1
Drawer Left 2
drawer-drawer-left-2
Drawer Left 3
drawer-drawer-left-3
Drawer Left 4
drawer-drawer-left-4
Drawer Left 5
drawer-drawer-left-5
Drawer Right 1
drawer-drawer-right-1
Drawer Right 2
drawer-drawer-right-2
Drawer Right 3
drawer-drawer-right-3
Drawer Right 4
drawer-drawer-right-4
Drawer Right 5
drawer-drawer-right-5
Drawer Top 1
drawer-drawer-top-1
Drawer Top 2
drawer-drawer-top-2
Drawer Top 3
drawer-drawer-top-3
Drawer Top 4
drawer-drawer-top-4
Drawer Top 5
drawer-drawer-top-5
Dropdown Menu Actions 1
dropdown-menu-dropdown-menu-actions-1
Dropdown Menu Actions 2
dropdown-menu-dropdown-menu-actions-2
Dropdown Menu Actions 3
dropdown-menu-dropdown-menu-actions-3
Dropdown Menu Actions 4
dropdown-menu-dropdown-menu-actions-4
Dropdown Menu Actions 5
dropdown-menu-dropdown-menu-actions-5
Dropdown Menu Editor 1
dropdown-menu-dropdown-menu-editor-1
Dropdown Menu Editor 2
dropdown-menu-dropdown-menu-editor-2
Dropdown Menu Editor 3
dropdown-menu-dropdown-menu-editor-3
Dropdown Menu Editor 4
dropdown-menu-dropdown-menu-editor-4
Dropdown Menu Editor 5
dropdown-menu-dropdown-menu-editor-5
Dropdown Menu Profile 1
dropdown-menu-dropdown-menu-profile-1
Dropdown Menu Profile 2
dropdown-menu-dropdown-menu-profile-2
Dropdown Menu Profile 3
dropdown-menu-dropdown-menu-profile-3
Dropdown Menu Profile 4
dropdown-menu-dropdown-menu-profile-4
Dropdown Menu Profile 5
dropdown-menu-dropdown-menu-profile-5
Dropdown Menu Settings 1
dropdown-menu-dropdown-menu-settings-1
Dropdown Menu Settings 2
dropdown-menu-dropdown-menu-settings-2
Dropdown Menu Settings 3
dropdown-menu-dropdown-menu-settings-3
Dropdown Menu Settings 4
dropdown-menu-dropdown-menu-settings-4
Dropdown Menu Settings 5
dropdown-menu-dropdown-menu-settings-5
Dropdown Menu Standard 1
dropdown-menu-dropdown-menu-standard-1
Dropdown Menu Standard 2
dropdown-menu-dropdown-menu-standard-2
Dropdown Menu Standard 3
dropdown-menu-dropdown-menu-standard-3
Dropdown Menu Standard 4
dropdown-menu-dropdown-menu-standard-4
Dropdown Menu Standard 5
dropdown-menu-dropdown-menu-standard-5
Dropdown Menu Standard 6
dropdown-menu-dropdown-menu-standard-6
Dropdown Menu Standard 7
dropdown-menu-dropdown-menu-standard-7
Dropdown Menu Support 1
dropdown-menu-dropdown-menu-support-1
Dropdown Menu Support 2
dropdown-menu-dropdown-menu-support-2
Dropdown Menu Support 3
dropdown-menu-dropdown-menu-support-3
Ecommerce Footer 1 - Ecommerce footer with newsletter, language selector, and contact row
ecommerce-footer1
This 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 blocks
ecommerce-footer18
This 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 panel
ecommerce-footer19
This 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 icons
ecommerce-footer2
This 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 icons
ecommerce-footer20
This 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 payments
ecommerce-footer9
This 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 Cards
ecommerce-hero1
An 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 Hero
ecommerce-hero2
A 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 Carousel
ecommerce-hero3
A 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 Carousel
ecommerce-hero6
A 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 Detail
ecommerce-hero7
A 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 Hero
ecommerce-hero8
A 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 Navbar
ecommerce-navbar1
A 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 Navbar
ecommerce-navbar2
An 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-emoji-picker-basic
Emoji Picker Custom Trigger
emoji-picker-emoji-picker-custom-trigger
Emoji Picker Different Variants
emoji-picker-emoji-picker-different-variants
Emoji Picker In Form
emoji-picker-emoji-picker-in-form
Emoji Picker Text Trigger
emoji-picker-emoji-picker-text-trigger
Emoji Picker With Display
emoji-picker-emoji-picker-with-display
Empty Actions 1
empty-empty-actions-1
Empty Actions 2
empty-empty-actions-2
Empty Actions 3
empty-empty-actions-3
Empty Actions 4
empty-empty-actions-4
Empty Actions 5
empty-empty-actions-5
Empty Data 1
empty-empty-data-1
Empty Data 2
empty-empty-data-2
Empty Data 3
empty-empty-data-3
Empty Data 4
empty-empty-data-4
Empty Data 5
empty-empty-data-5
Empty Search 1
empty-empty-search-1
Empty Search 2
empty-empty-search-2
Empty Search 3
empty-empty-search-3
Empty Search 4
empty-empty-search-4
Empty Search 5
empty-empty-search-5
Empty Standard 1
empty-empty-standard-1
Empty Standard 2
empty-empty-standard-2
Empty Standard 3
empty-empty-standard-3
Empty Standard 4
empty-empty-standard-4
Empty Standard 5
empty-empty-standard-5
Empty Standard 6
empty-empty-standard-6
Empty Standard 7
empty-empty-standard-7
Experience 1 - Work history rows with CV download
experience1
Portfolio 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 column
experience2
Uses 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 control
experience3
Section 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 logos
experience5
Editorial 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 block
faq1
Narrow 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 header
faq10
FAQ 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 accordions
faq11
Two-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 sync
faq12
Categorized 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 cards
faq14
Centered 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 title
faq15
Centered 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 FAQ
faq16
Narrow 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 FAQ
faq17
Wide 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 rows
faq2
A 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 Layout
faq20
A two-column FAQ section with heading and contact link on the left, and categorized accordion questions on the right.
Faq 3 - Centered accordion FAQ
faq3
Centered section heading and intro paragraph above a single-column accordion of expandable questions and answers.
Faq 4 - Accordion FAQ with badge and support link
faq4
Accordion 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 header
faq5
FAQ 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 header
faq6
Two-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 CTA
faq7
Two-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 topics
faq8
Stacked 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 items
faq9
Bold 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 button
feature1
Split 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 borders
feature10
Small 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 images
feature101
Centered 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 images
feature102
Centered 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 header
feature103
Outlined 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 image
feature104
Medal 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 images
feature105
Centered 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 mobile
feature106
Four 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 cards
feature107
Responsive 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 panels
feature108
Centered 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 overlay
feature109
Two-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 button
feature11
Two-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 carousel
feature110
Centered 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 columns
feature111
Outline 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 intro
feature112
Centered 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 panels
feature113
Outline 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 carousels
feature114
A 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 badge
feature115
A 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 overlays
feature116
A 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 cards
feature117
A 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 row
feature118
A 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 image
feature119
An 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 rail
feature12
A 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 strip
feature120
A 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 copy
feature121
An 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 panel
feature122
A 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 features
feature123
A 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 column
feature124
A 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 panel
feature125
A 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 imagery
feature126
A 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 headers
feature127
A 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 blurbs
feature128
A 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 imagery
feature129
A 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 imagery
feature13
A 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 imagery
feature130
A 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 image
feature131
A 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 cards
feature132
A 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 column
feature133
A 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 tiles
feature134
A 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 cards
feature135
A 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 cards
feature136
A 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 rows
feature137
A 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 links
feature138
A 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 columns
feature139
A 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 media
feature14
Two 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 slides
feature140
A 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 testimonial
feature141
A 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 sidebar
feature142
A 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 spotlight
feature143
A 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 intro
feature144
A 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 imagery
feature145
A 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 headlines
feature146
A 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 text
feature147
Marketing 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 intro
feature148
Centered 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 backdrop
feature149
Full-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 tiles
feature15
A 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 imagery
feature150
A 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 badges
feature152
Centered 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 lines
feature153
A 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 badges
feature154
Full-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 preview
feature156
A 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 columns
feature157
Services-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 CTA
feature158
Three 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 link
feature159
Compact 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 icons
feature16
Three 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 artwork
feature160
Tabs 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 rail
feature161
Two-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 media
feature162
A 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 columns
feature163
Four 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 CTA
feature164
Two-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 matrix
feature166
Centered 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 rule
feature167
Outline 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 wells
feature168
Bordered 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 screenshots
feature169
Outline 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 intro
feature17
Optional 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 link
feature170
Outline 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 cards
feature171
Muted 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 dividers
feature172
A 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 stats
feature173
A 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 fades
feature174
Centered 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 pane
feature175
Intro 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 chart
feature176
Layered 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 six
feature18
Left-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 columns
feature180
Centered 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 badges
feature181
Left 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 actions
feature182
Centered 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 stats
feature183
Rounded 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 triggers
feature184
A 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 dots
feature186
A 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 line
feature187
A 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 thumbnails
feature188
A 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 images
feature189
A 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 checklist
feature19
A 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 thumbnails
feature190
A 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 accent
feature191
An 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 sync
feature192
Inside 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 layouts
feature193
A 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 buttons
feature194
A 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 panel
feature197
A 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 rows
feature198
Three 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 media
feature199
A 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 actions
feature2
A 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 link
feature20
A 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 lists
feature200
Three 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 tiles
feature202
A 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 rows
feature203
Four 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 CTA
feature204
One 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 imagery
feature205
Pill 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 tiles
feature206
A 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 separators
feature207
A 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 preview
feature209
A 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 cards
feature21
Intro 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 grid
feature210
Split 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 layouts
feature211
Muted 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 imagery
feature213
Centered 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 carousel
feature214
Centered 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 cards
feature215
Bold 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 grid
feature215a
Intro 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 copy
feature215b
Centered 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 controls
feature216
Tabbed 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 columns
feature217
Full-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 columns
feature217a
Contrast-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 backdrop
feature217b
Shared 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 edge
feature218
Top-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 layouts
feature219
Three 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 cards
feature22
Headline 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 video
feature220
Dotted 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 stats
feature220a
Centered 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 copy
feature220b
Three 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 dots
feature221
Header 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 pairs
feature222
Responsive 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 icons
feature224
Centered 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 panel
feature225
Centered 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 photo
feature227
Two-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 gallery
feature228
Muted 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 checklists
feature229
Wide 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 cards
feature23
Centered 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 icons
feature230
A 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 headline
feature231
A 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 cards
feature234
A 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 border
feature235
A 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 indicator
feature236
A 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 metrics
feature237
A 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 cards
feature238
A 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 tile
feature239
A 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 image
feature24
A 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 reveal
feature240
A 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 cards
feature241
A 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 controls
feature242
A 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 cards
feature243
A 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 frames
feature244
A 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 image
feature245
A 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 checklist
feature246
A 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 reveal
feature247
A 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 reveal
feature248
An 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 card
feature249
A 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 grids
feature25
A 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 nodes
feature250
A 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 beams
feature251
A 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 CTA
feature252
A 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 button
feature253
A 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 CTA
feature254
A 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 actions
feature255
A 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 cards
feature256
Two 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 sizes
feature257
A 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 badge
feature26
A 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 avatars
feature261
A 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 motion
feature266
A 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 marquee
feature267
A 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 card
feature268
A 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 card
feature269
A 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 row
feature27
An 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 stacks
feature270
A 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 backdrop
feature271
A 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 beams
feature272
A 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 reveals
feature274
A 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 copy
feature275
Centered 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 highlight
feature276
A 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 more
feature277
A 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 subhead
feature278
A 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 links
feature28
Two 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 stack
feature280
A 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 more
feature281
A 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 card
feature282
A 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 orbit
feature283
A 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 glow
feature284
A 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 marquees
feature285
A 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 stars
feature286
A 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 grid
feature287
A 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 previews
feature288
A 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 list
feature289
A 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 copy
feature29
A 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 column
feature292
A 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 sparkles
feature293
A 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 field
feature294
A 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 roles
feature295
A 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 overlays
feature297
Three 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 mockup
feature299
This 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 imagery
feature3
Up 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 column
feature30
A 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 pairs
feature31
Intro 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 cards
feature312
This 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 dialog
feature313
This 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 tile
feature314
This 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 testimonial
feature322
This 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 controls
feature323
This 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 columns
feature33
Upper 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 photography
feature34
Headline 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 Dividers
feature342
A 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 Dividers
feature343
A 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 Image
feature344
A 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 Image
feature345
A 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 Media
feature346
A 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 Media
feature347
A 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 Image
feature348
A 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 Cards
feature349
A 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 links
feature35
Oversized spanning headline beside three narrower columns each with title, body text, and chevron-accented outbound links.
Feature 350 - Centered Four Column Feature Grid
feature350
A centered label, heading, and description above a four-column grid of minimal icon stacks with circular badges.
Feature 351 - Left Aligned Four Column Features
feature351
A 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 Cards
feature352
A 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 Cards
feature353
A 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 Cards
feature354
A 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 Cards
feature355
A 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 Cards
feature356
A 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 Row
feature357
A centered heading and description above a three-column row of features with large thin-stroke standalone icons.
Feature 358 - No Intro Three Column Bordered Cards
feature358
A three-column grid of bordered feature cards with bordered square icon badges, no section heading or intro.
Feature 359 - Centered Two Column Accent Feature Cards
feature359
A 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 card
feature36
A 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 Grid
feature360
A 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 Features
feature361
A 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 Grid
feature362
A 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 CTA
feature363
A 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 Grid
feature364
A four-column grid of icon tiles with titles and descriptions, no section heading or borders.
Feature 365 - Minimal Three-Column Icon Grid
feature365
A three-column grid of icon tiles with circular badges, titles, and descriptions, no section heading or borders.
Feature 366 - Minimal Inline Icon Grid
feature366
A six-item inline icon grid with icons beside text, no section heading or borders.
Feature 367 - Minimal Centered Four-Column Grid
feature367
A four-column centered icon grid with circular badges, no section heading or borders.
Feature 368 - Minimal Centered Three-Column Grid
feature368
A three-column centered icon grid with circular badges, no section heading or borders.
Feature 369 - Minimal Naked Icon Grid
feature369
A six-item centered grid with bare icons and no icon backgrounds, section heading, or borders.
Feature 37 - Asymmetric bento grid with image tiles
feature37
A 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 tabs
feature370
A 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 Image
feature371
A 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 Media
feature372
A 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 Left
feature373
A 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 rail
feature374
A 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 image
feature375
A 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 grid
feature376
A 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 image
feature377
A 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 image
feature378
A 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 Icons
feature379
A 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 image
feature38
A 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 screens
feature380
A 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 carousel
feature381
Like 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 images
feature39
A 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 quote
feature4
A 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 addresses
feature41
Section 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 grid
feature42
Large 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 action
feature43
Centered 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 logos
feature44
Section 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 grid
feature5
One 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 tiles
feature50
Centered 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 imagery
feature51
Three 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 preview
feature52
Six 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 grid
feature53
Two-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 columns
feature54
Centered 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 button
feature55
A 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 cards
feature56
A 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 carousel
feature57
A 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 checklist
feature58
A 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 bento
feature59
A 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 image
feature6
A 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 copy
feature60
A 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 copy
feature61
A 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 rows
feature62
A 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 cards
feature63
A 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 pair
feature64
Outlined 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 rails
feature65
A 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 band
feature66
Leading 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 cards
feature67
Narrow 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 intro
feature68
Heading 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 accordions
feature69
Two-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 image
feature7
Two-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 accordions
feature70
Same 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 links
feature71
Upper 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 cards
feature72
Narrow-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 link
feature73
A 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 panels
feature74
Intro 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 tiles
feature75
Two-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 columns
feature76
Large 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 dots
feature77
Centered 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 link
feature78
Tab 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 rows
feature79
Centered 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 cards
feature8
Outline 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 links
feature80
Flex 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 more
feature81
Centered 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 separator
feature82
A 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 83
feature83
A component with a 2-column layout featuring badges, icons, and text to highlight flexible support and collaborative tools. Includes a decorative background effect.
Feature 85
feature85
A block highlighting features of a project management app with icons, titles, and descriptions arranged in up to 3 columns.
Feature 86
feature86
A three-column feature block with split heading, description, an icon list, an outline CTA, and a centered bordered four-by-three image in a muted tray on the right.
Feature 87
feature87
A block with headings, a feature list with icons, a CTA, and a large bleeding image spanning two columns on the right.
Feature 89
feature89
A component with a promotional section and 3-column feature display, incorporating text blocks, an image placeholder, and icons for efficiency, resource optimization, and simplified operations.
Feature 9
feature9
A component featuring a central title, description, badges, two textual cards, and an image in a three-column layout; includes "Read more" buttons.
Feature 90
feature90
A marketing component featuring a title, description, button, a row of logos, and a link to more integrations.
Feature 91
feature91
Two-column feature block, contrasting "Team Leads" and "Developers" with icons, links, and bordered list items.
Feature 92
feature92
A component showcasing tools integrations and social media links in a 3-column layout followed by a 6-icon row for connectivity options.
Feature 93
feature93
A component featuring staggered avatars and a 3-column layout with icons, highlighting customer care themes, and focusing on support, solutions, and feedback.
Feature 94
feature94
A component showcasing a title, a button, and a 4-column layout with cards, each containing images, titles, and text about different features.
Feature 95
feature95
A component with a badge, a title, and a paragraph, followed by a 4-column tabbed interface that switches content views.
Feature 97
feature97
A 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 98
feature98
A 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 99
feature99
A 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
field-field-advanced-1
Field Advanced 2
field-field-advanced-2
Field Advanced 3
field-field-advanced-3
Field Advanced 4
field-field-advanced-4
Field Advanced 5
field-field-advanced-5
Field Advanced 6
field-field-advanced-6
Field Advanced 7
field-field-advanced-7
Field Basic Inputs 1
field-field-basic-inputs-1
Field Basic Inputs 2
field-field-basic-inputs-2
Field Basic Inputs 3
field-field-basic-inputs-3
Field Basic Inputs 4
field-field-basic-inputs-4
Field Basic Inputs 5
field-field-basic-inputs-5
Field Layouts 1
field-field-layouts-1
Field Layouts 2
field-field-layouts-2
Field Layouts 3
field-field-layouts-3
Field Layouts 4
field-field-layouts-4
Field Layouts 5
field-field-layouts-5
Field Layouts 6
field-field-layouts-6
Field Selects 1
field-field-selects-1
Field Selects 2
field-field-selects-2
Field Selects 3
field-field-selects-3
Field Selects 4
field-field-selects-4
Field Selects 5
field-field-selects-5
Field Selects 6
field-field-selects-6
Field Selects 7
field-field-selects-7
Field Text Areas 1
field-field-text-areas-1
Field Text Areas 2
field-field-text-areas-2
Field Text Areas 3
field-field-text-areas-3
Field Text Areas 4
field-field-text-areas-4
Field Text Areas 5
field-field-text-areas-5
Field Text Areas 6
field-field-text-areas-6
Field Toggles 1
field-field-toggles-1
Field Toggles 2
field-field-toggles-2
Field Toggles 3
field-field-toggles-3
Field Toggles 4
field-field-toggles-4
Field Toggles 5
field-field-toggles-5
Field Toggles 6
field-field-toggles-6
Field Toggles 7
field-field-toggles-7
Field Mapping 1 - CSV Field Mapping Dialog
field-mapping1
A 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 Dialog
field-merging1
A 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 Dropzone
file-upload-file-upload-dropzone-1
Drag and drop file upload zone with visual feedback and file list.
File Upload Dropzone 2 - Dropzone with Inline Trigger
file-upload-file-upload-dropzone-2
Dropzone with inline trigger button integrated within dropzone area.
File Upload Dropzone 3 - Compact Dropzone
file-upload-file-upload-dropzone-3
Compact dropzone layout with horizontal arrangement for space efficiency.
File Upload Dropzone 4 - Image Dropzone
file-upload-file-upload-dropzone-4
Image-specific dropzone with primary color styling and file type restrictions.
File Upload Dropzone 5 - Document Dropzone
file-upload-file-upload-dropzone-5
Document-focused dropzone with styling optimized for document file uploads.
File Upload Dropzone 6 - Large Dropzone
file-upload-file-upload-dropzone-6
Large dropzone with expanded height and prominent visual design.
File Upload Form 1 - React Hook Form Integration
file-upload-file-upload-form-1
File upload integrated with React Hook Form and Zod validation for form handling.
File Upload Form 2 - Contact Form with Attachments
file-upload-file-upload-form-2
Contact form with file upload attachment field integrated into a complete form layout.
File Upload Form 3 - Required File Upload
file-upload-file-upload-form-3
File upload field marked as required with validation error display in form context.
File Upload Form 4 - Multiple File Upload Fields
file-upload-file-upload-form-4
Form with multiple file upload fields allowing different file types for different purposes.
File Upload List 1 - Vertical File List
file-upload-file-upload-list-1
File upload with vertical file list layout displaying files in a vertical stack.
File Upload List 2 - Horizontal File List
file-upload-file-upload-list-2
File upload with horizontal file list layout displaying files in a horizontal row.
File Upload List 3 - Compact File List
file-upload-file-upload-list-3
File upload with compact file list layout using smaller spacing and reduced padding.
File Upload List 4 - File List with Actions
file-upload-file-upload-list-4
File upload with file list displaying additional action buttons for preview and download.
File Upload List 5 - File List with Clear All
file-upload-file-upload-list-5
File upload with file list and clear all button to remove all files at once.
File Upload Preview 1 - Image Thumbnails
file-upload-file-upload-preview-1
File upload with image thumbnail previews showing visual previews of uploaded images.
File Upload Preview 2 - Grid Preview Layout
file-upload-file-upload-preview-2
File upload with grid layout preview showing multiple image thumbnails in a grid arrangement.
File Upload Preview 3 - Large Preview Modal
file-upload-file-upload-preview-3
File upload with large preview modal showing detailed file preview with metadata.
File Upload Preview 4 - File Type Icons
file-upload-file-upload-preview-4
File upload showing file type icons for different file types instead of image previews.
File Upload Preview 5 - Horizontal Scroll Preview
file-upload-file-upload-preview-5
File upload with horizontal scrolling preview layout for browsing multiple image thumbnails.
File Upload Progress 1 - Linear Progress
file-upload-file-upload-progress-1
File upload with linear progress bar showing upload progress for each file.
File Upload Progress 2 - Circular Progress
file-upload-file-upload-progress-2
File upload with circular progress indicator overlay on file preview thumbnails.
File Upload Progress 3 - Fill Progress
file-upload-file-upload-progress-3
File upload with fill progress variant showing bottom-to-top progress animation.
File Upload Progress 4 - Progress with Percentage
file-upload-file-upload-progress-4
File upload with progress percentage label and custom progress bar display.
File Upload Progress 5 - Upload Status Indicator
file-upload-file-upload-progress-5
File upload with status indicators showing spinner during upload and success or error states.
File Upload Special 1 - Avatar Upload
file-upload-file-upload-special-1
Avatar upload component with click-to-upload functionality and hover overlay effect.
File Upload Special 2 - Chat Input with Attachments
file-upload-file-upload-special-2
Chat input component with file attachment functionality integrated into message input.
File Upload Special 3 - Cover Image Upload
file-upload-file-upload-special-3
Cover image upload with aspect ratio preview and remove functionality.
File Upload Special 4 - Document Upload Card
file-upload-file-upload-special-4
Document upload card component with card layout and document-specific styling.
File Upload Special 5 - Avatar with Menu
file-upload-file-upload-special-5
Avatar upload with dropdown menu for upload and remove actions.
File Upload Special 6 - Gallery Image Add
file-upload-file-upload-special-6
Gallery image upload with grid layout and add button for multiple image selection.
File Upload Special 7 - Direct Upload with Status
file-upload-file-upload-special-7
Direct upload with automatic upload progress and status indicators showing success or error states.
File Upload Special 8 - Profile with Cover and Avatar
file-upload-file-upload-special-8
Profile component with both cover image and avatar upload functionality in a single layout.
File Upload Standard 1 - Simple Button Trigger
file-upload-file-upload-standard-1
File upload with button trigger for single file selection.
File Upload Standard 2 - File Upload with Label
file-upload-file-upload-standard-2
File upload component with label and file list display.
File Upload Standard 3 - Single File Upload
file-upload-file-upload-standard-3
File upload restricted to single file selection only.
File Upload Standard 4 - Multiple Files with Clear All
file-upload-file-upload-standard-4
Multiple file upload with clear all button to remove all files.
File Upload Standard 5 - Disabled State
file-upload-file-upload-standard-5
File upload component in disabled state showing non-interactive button.
File Upload Validation 1 - Images Only
file-upload-file-upload-validation-1
File upload restricted to image files only with validation error notifications.
File Upload Validation 2 - PDF Documents Only
file-upload-file-upload-validation-2
File upload restricted to PDF documents only with file type validation.
File Upload Validation 3 - File Size Limit
file-upload-file-upload-validation-3
File upload with strict file size limit of 1MB and size validation error messages.
File Upload Validation 4 - Max 2 Files
file-upload-file-upload-validation-4
File upload with maximum file count limit of 2 files and rejection notifications.
File Upload Validation 5 - Custom Validation
file-upload-file-upload-validation-5
File upload with custom validation rules including filename restrictions and size limits.
File Upload Validation 6 - Video Files Only
file-upload-file-upload-validation-6
File upload restricted to video files only with support for multiple video formats.
Footer 1
footer1
A component showcasing a footer layout with logos, navigation links across 4 columns, download buttons, and social icons.
Footer 10
footer10
A time-updating footer with 3 columns, displaying a copyright date, current London time, and an email. Features an auto-updating clock functionality.
Footer 11
footer11
A component with a logo, menu links across 3 columns, social media icons, and a large image. Offers product, company, and legal info sections.
Footer 12
footer12
A footer component with three sections for navigation links, social media, and legal text. Includes an image with external link indicators for social media.
Footer 13
footer13
This 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 14
footer14
A footer component with logo, newsletter, navigation links across three columns, and social icons. Includes a succinct company description and subscription form.
Footer 15
footer15
This 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 16
footer16
A footer component featuring logo, contact button, social icons, and navigation in accordion for smaller screens or columns layout.
Footer 17
footer17
A footer component with theme toggle, navigation links, social links, theme-specific logo, and a system status indicator.
Footer 18
footer18
A 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 19
footer19
A 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 2
footer2
A footer component with a logo and tagline, 1-4 columns of menu items, and a bottom row for copyright and policy links.
Footer 21
footer21
A footer component with navigation links, logo, slogan, social media buttons, and copyright info arranged in columns.
Footer 23
footer23
A footer component with a logo, description, link columns, and an animated globe. Includes 3 sections with navigational links and separators.
Footer 24
footer24
A footer component with a bold heading, sections for email, social links, phone, and navigation links. It also includes a design attribution.
Footer 25
footer25
A 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 27
footer27
A footer block with animated visibility, featuring a "Connect with Me" call-to-action, social links with hover effects, and copyright information.
Footer 28
footer28
This 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 29
footer29
Multi-column footer with newsletter subscription, navigation links, social icons, status badge, and theme toggle.
Footer 3
footer3
A footer component with a logo, navigation links in 2-5 columns, social icons, newsletter subscription form, and legal links.
Footer 30
footer30
A footer component showcasing contact info, navigation, social links, and legal terms in a multi-column layout, plus a prominent brand name display.
Footer 31
footer31
A 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 32
footer32
This 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 37
footer37
This 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 4
footer4
A footer component with a logo, social icons, link sections, a newsletter subscription, and legal links. GridLayout adapts to 6 columns on large screens.
Footer 49
footer49
This 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 5
footer5
A 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 Typography
footer50
A 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 Bar
footer51
A 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 Bar
footer52
A 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 Bar
footer53
A 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 Footer
footer54
A 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 Links
footer55
A 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 Column
footer56
A 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 First
footer57
A 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 Icons
footer58
A 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 Bar
footer59
A short vertical padding footer with logo, a single menu of inline links and social icons on one row, then copyright with legal links to its right on a second row.
Footer 6
footer6
A 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 Row
footer60
A 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 Meta
footer61
A 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 Footer
footer62
A minimal slim footer with a center-aligned logo on top, then one menu of links and optional social icons below.
Footer 7
footer7
A footer component with a logo, description, social icons, link sections, and legal info spread over two rows. Includes 3 columns of navigational links.
Footer 8
footer8
A footer component with a logo, description, social icons, link sections, newsletter signup, and copyright info arranged in a grid layout.
Footer 9
footer9
A 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-form-advanced-1
Form Advanced 2
form-form-advanced-2
Form Advanced 3
form-form-advanced-3
Form Advanced 4
form-form-advanced-4
Form Advanced 5
form-form-advanced-5
Form Advanced 6
form-form-advanced-6
Form Advanced 7
form-form-advanced-7
Form Basic Forms 1
form-form-basic-forms-1
Form Basic Forms 2
form-form-basic-forms-2
Form Basic Forms 3
form-form-basic-forms-3
Form Basic Forms 4
form-form-basic-forms-4
Form Basic Forms 5
form-form-basic-forms-5
Form Basic Forms 6
form-form-basic-forms-6
Form Basic Forms 7
form-form-basic-forms-7
Form Layouts 1
form-form-layouts-1
Form Layouts 2
form-form-layouts-2
Form Layouts 3
form-form-layouts-3
Form Layouts 4
form-form-layouts-4
Form Layouts 5
form-form-layouts-5
Form Layouts 6
form-form-layouts-6
Form Layouts 7
form-form-layouts-7
Form Multi Field 1
form-form-multi-field-1
Form Multi Field 2
form-form-multi-field-2
Form Multi Field 3
form-form-multi-field-3
Form Multi Field 4
form-form-multi-field-4
Form Multi Field 5
form-form-multi-field-5
Form Multi Field 6
form-form-multi-field-6
Form Multi Field 7
form-form-multi-field-7
Form Patterns 1
form-form-patterns-1
Form Patterns 2
form-form-patterns-2
Form Patterns 3
form-form-patterns-3
Form Patterns 4
form-form-patterns-4
Form Patterns 5
form-form-patterns-5
Form Patterns 6
form-form-patterns-6
Form Patterns 7
form-form-patterns-7
Form Validation 1
form-form-validation-1
Form Validation 2
form-form-validation-2
Form Validation 3
form-form-validation-3
Form Validation 4
form-form-validation-4
Form Validation 5
form-form-validation-5
Form Validation 6
form-form-validation-6
Form Validation 7
form-form-validation-7
Gallery 1
gallery1
A gallery block showcasing 3 case studies with dynamic resizing; includes images, logos, text, and interactive effects on mouse hover.
Gallery 10
gallery10
A testimonial carousel component with text content, navigation buttons, and progress indicator. It has a dual-column layout with quotes and images.
Gallery 11
gallery11
A 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 12
gallery12
A 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 13
gallery13
A 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 14
gallery14
A 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 15
gallery15
A gallery component showcasing services with carousel functionality, navigation buttons, and a progress indicator.
Gallery 16
gallery16
A 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 17
gallery17
A carousel component featuring an image gallery with navigation arrows and pagination dots. Each image scales and adjusts opacity on selection.
Gallery 18
gallery18
A card-carousel gallery with autoplay, displaying portraits with annotated names in a looping mode.
Gallery 19
gallery19
Component displays a carousel of images with overlay text & a "Know More" link. Offers animated entrances and card effects.
Gallery 20
gallery20
A gallery component displaying overlapping, draggable images with dynamic animation. Includes textual content and a button, all within a single column layout.
Gallery 21
gallery21
Interactive gallery component with image slider, effect animations, and a call-to-action button.
Gallery 22
gallery22
An 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 23
gallery23
Interactive gallery with expandable images and detailed captions on hover, featuring a statement and button on the left.
Gallery 24
gallery24
An interactive gallery block that showcases images with dynamic resizing and details on hover or click, including an "Add to Cart" button.
Gallery 25
gallery25
A 4-column animated image gallery, each column with varying image heights and animated transitions on view.
Gallery 26
gallery26
A gallery block with animated blur vignettes around images, arranged in a 5-column grid. Features image reveal animations on scroll.
Gallery 27
gallery27
A team carousel featuring images, names, and roles with navigation buttons, looping functionality. Displays items 2 on medium screens, 1/4 on large.
Gallery 28
gallery28
A gallery block featuring a carousel of curated interior design images with a centralized heading, description, and navigation buttons.
Gallery 29
gallery29
A 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 3
gallery3
A carousel component showcasing case studies with navigational arrows and dynamic scroll availability indicators, including images, titles, descriptions, and read more links.
Gallery 30
gallery30
An interactive gallery component with dynamically shuffled images that are draggable. Includes title and description.
Gallery 31
gallery31
A product showcase block with a dynamic grid layout of 1-4 columns, displaying items with hover effects, titles, and prices.
Gallery 32
gallery32
An interactive gallery component with dimension-variable, overlapping images and blur effect on hover. Contains descriptive text animations.
Gallery 33
gallery33
A 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 34
gallery34
A gallery component displaying items in up to 3 columns, featuring interactive image blur on hover and icons indicating different characteristics.
Gallery 35
gallery35
This 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 4
gallery4
A component showcasing a scrollable gallery with navigation buttons and indicators, featuring images, titles, and descriptions for each item.
Gallery 5
gallery5
A 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 6
gallery6
A carousel component with a heading, 'Book a demo' link, scrolling buttons, and dynamic content blocks comprising images, titles, and summaries.
Gallery 7
gallery7
A component that combines a 2-column text intro with a looping AI-themed image carousel. Unique feature: staggered image positions.
Gallery 8
gallery8
A carousel component displaying resources in 3 columns, featuring navigation, separators, and dynamic link icons.
Gallery 9
gallery9
A component with a heading, badge, and a carousel displaying images and texts with navigation indicators. Features clickable sections to scroll through content.
Help 1 - Category Cards Help Center
help1
A 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 Center
help2
A help center section with searchable FAQ accordion and contact support buttons for live chat, email, and phone.
Help 3 - Help Center Contact Form
help3
A help center section with searchable FAQ accordion featuring category tags, and a contact form below for submitting support requests.
Help 4 - Support Ticket Form
help4
A 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 right
hero1
A 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 strip
hero10
A 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 panel
hero100
A 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 logos
hero101
A 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 logos
hero103
A 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 preview
hero104
A hero with benefit checklist, paired CTAs, and a bento-style grid of preview tiles including video, charts, and photography.
Hero 107 - Portfolio hero with animated halo CTA
hero107
A 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 handset
hero108
A 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 image
hero11
A 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 logos
hero111
A 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 strip
hero112
A 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 backdrop
hero115
A 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 dialog
hero116
A 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 Strip
hero118
A 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 buttons
hero12
A 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 panel
hero123
A 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 card
hero125
A 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 stats
hero127
A 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 avatars
hero129
A 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 CTA
hero13
A 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 strip
hero134
A 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 dialog
hero135
A 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 bleed
hero136
A 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 banner
hero14
A 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 headline
hero141
A 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 143 - Download hero with cinematic backdrop and waitlist chip
hero143
A 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 tiles
hero144
A 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 titles
hero145
A 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 teaser
hero146
A 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 still
hero149
A 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 ratings
hero15
A 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 mosaic
hero151
A 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 trio
hero152
A 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 Email
hero154
A 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 headline
hero157
A 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 trio
hero158
A 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 photo
hero159
A 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 image
hero16
A 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 mockup
hero160
A 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 media
hero162
A 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 tile
hero163
A 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 teaser
hero164
A 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 lattice
hero165
A 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 button
hero166
A 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 photos
hero167
A 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 cards
hero168
A 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 shot
hero170
A 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 collage
hero171
Two-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-images
hero172
Two-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 dialog
hero173
Split 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 ribbon
hero174
Full-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-in
hero175
Centered 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 photos
hero177
Centered 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 stack
hero178
Split 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 frames
hero179
Split 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 preview
hero18
A 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 showcase
hero180
Centered 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 fallback
hero183
Outline 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 duo
hero185
Bordered 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 image
hero186
A 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 carousel
hero187
A 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 rail
hero190
Center 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 announcement
hero192
A 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 reels
hero194
Split 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 preview
hero195
Headline 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 form
hero196
Dotted 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 backdrop
hero197
Outline 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 left
hero2
A 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 carousel
hero20
A 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 mockup
hero200
Condensed 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 stage
hero201
Motion-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 panel
hero202
Text 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 lifts
hero203
Intro 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 tilt
hero204
Spark-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 unveil
hero205
Oversized 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 mockup
hero206
A 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 cards
hero207
Optional 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 image
hero21
A 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 carousel
hero210
A 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 marquee
hero211
A 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 band
hero212
A 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 preview
hero213
A 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 CTA
hero214
A 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 photo
hero215
A 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 globe
hero216
A 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 veil
hero218
A 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 logos
hero219
A 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 wordmark
hero220
A 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 type
hero221
A 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 crosshair
hero222
A 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 word
hero223
A 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 cloud
hero224
A 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 logos
hero225
A 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 tiles
hero226
A 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 mock
hero227
A 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 portraits
hero228
A 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 illustrations
hero229
A 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 carousel
hero230
A 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 strip
hero231
A 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 arcs
hero232
A 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 veil
hero233
A 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 card
hero234
A 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 card
hero234a
A 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 marquees
hero234b
A 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 columns
hero235
A 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 cloud
hero236
A 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 section
hero237
A 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 row
hero238
A 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 marquee
hero239
A 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 grid
hero24
A 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 marquee
hero240
A 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 footer
hero241
A 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 chart
hero242
A 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 frame
hero243
A 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 cards
hero244
A 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 CTAs
hero245
A 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 chart
hero246
A 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 CTAs
hero247
A 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 headline
hero248
A 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 Marquee
hero249
A 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 list
hero25
A 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 256 - Split hero with grid motif and feature strip
hero256
A 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 cards
hero258
A 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 panel
hero259
A 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 icons
hero26
A 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 list
hero261
A 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 Sidebar
hero262
A 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 below
hero263
A 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 picker
hero264
A 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 stack
hero265
A 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 thumbs
hero266
A 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 panel
hero267
A 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 left
hero268
A 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 left
hero269
A 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 CTA
hero27
A 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 line
hero270
A two-column hero with bordered landscape image, overlapping square inset, right-column copy, animated primary CTA, optional byline, and subtle dotted backdrop.
Hero 271 - Right-Bleed Inset Hero
hero271
Two-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 Grid
hero272
A 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 Carousel
hero273
A 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 slides
hero274
A 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 list
hero275
A 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 dots
hero276
A 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 slides
hero277
A 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 slides
hero278
A 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 grid
hero279
A 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 field
hero28
A 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 features
hero280
A 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 carousel
hero281
A 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 Edges
hero286
Editorial 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 Preview
hero288
A 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 capsule
hero29
A 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 Strip
hero290
A 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 Image
hero291
A 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 Preview
hero292
A 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 Band
hero294
A 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 Grid
hero295
A 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 photography
hero3
A 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 imagery
hero30
A 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 Features
hero301
A 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 Frame
hero302
Optional 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 Cards
hero304
Two-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 Grid
hero305
Magazine-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 preview
hero306
A 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 31 - Centered hero with geometric backdrop and floating tiles
hero31
A 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 masonry
hero32
A 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 photograph
hero33
A 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 image
hero34
A 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 CTAs
hero35
A 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 cards
hero36
An 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 stack
hero37
A 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 rectangles
hero38
A 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 collage
hero39
A 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 rating
hero4
A 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 marquee
hero40
A 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 columns
hero45
A 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 line
hero47
A 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 showcase
hero49
A 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 tile
hero5
A 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 screenshots
hero50
A 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 imagery
hero51
A 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 proof
hero53
A 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 link
hero55
A 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 chips
hero57
A 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 grid
hero58
A 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 CTAs
hero59
A 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 logos
hero6
A 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 word
hero60
A 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 cards
hero64
A 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 strip
hero67
Centered 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 row
hero68
A 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 CTA
hero7
A 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 button
hero70
A 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 CTAs
hero71
Warm 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 photography
hero74
A 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 rail
hero75
Two-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 preview
hero76
Centered 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 veil
hero78
Viewport 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 band
hero79
An 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 image
hero8
A 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 images
hero80
A 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 band
hero82
A 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 triptych
hero83
A 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 mockups
hero84
A 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 galleries
hero85
A 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 cutout
hero86
A 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 illustration
hero87
A 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 Hero
hero88
A 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 image
hero89
A 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 strip
hero9
A 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 avatars
hero90
A 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 video
hero91
A split-screen hero with uppercase tag, headline, twin CTAs, and a looping video inside a pill-shaped frame on wide layouts.
Hero 99 - Centered hero with pill link and asymmetric photo grid
hero99
A centered hero with changelog-style pill anchor, oversized headline, supporting copy, paired chevron buttons, and a three-column photo strip.
Hover Card Info 1
hover-card-hover-card-info-1
Hover Card Info 2
hover-card-hover-card-info-2
Hover Card Info 3
hover-card-hover-card-info-3
Hover Card Info 4
hover-card-hover-card-info-4
Hover Card Info 5
hover-card-hover-card-info-5
Hover Card Preview 1
hover-card-hover-card-preview-1
Hover Card Preview 2
hover-card-hover-card-preview-2
Hover Card Preview 3
hover-card-hover-card-preview-3
Hover Card Preview 4
hover-card-hover-card-preview-4
Hover Card Preview 5
hover-card-hover-card-preview-5
Hover Card Profile 1
hover-card-hover-card-profile-1
Hover Card Profile 2
hover-card-hover-card-profile-2
Hover Card Profile 3
hover-card-hover-card-profile-3
Hover Card Profile 4
hover-card-hover-card-profile-4
Hover Card Profile 5
hover-card-hover-card-profile-5
Hover Card Stats 1
hover-card-hover-card-stats-1
Hover Card Stats 2
hover-card-hover-card-stats-2
Hover Card Stats 3
hover-card-hover-card-stats-3
Hover Card Stats 4
hover-card-hover-card-stats-4
Hover Card Stats 5
hover-card-hover-card-stats-5
Incentives 1
incentives1
This 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 2
incentives2
This 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 6
incentives6
This 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 7
incentives7
This 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 1
industries1
This 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 2
industries2
This 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 3
industries3
This 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 4
industries4
This 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 1
input-group-input-group-ai-1
Input Group Ai 2
input-group-input-group-ai-2
Input Group Ai 3
input-group-input-group-ai-3
Input Group Ai 4
input-group-input-group-ai-4
Input Group Buttons 1
input-group-input-group-buttons-1
Input Group Buttons 2
input-group-input-group-buttons-2
Input Group Buttons 3
input-group-input-group-buttons-3
Input Group Buttons 4
input-group-input-group-buttons-4
Input Group Custom 1
input-group-input-group-custom-1
Input Group Custom 2
input-group-input-group-custom-2
Input Group Custom 3
input-group-input-group-custom-3
Input Group Custom 4
input-group-input-group-custom-4
Input Group Dropdown 1
input-group-input-group-dropdown-1
Input Group Dropdown 2
input-group-input-group-dropdown-2
Input Group Dropdown 3
input-group-input-group-dropdown-3
Input Group Dropdown 4
input-group-input-group-dropdown-4
Input Group Icons 1
input-group-input-group-icons-1
Input Group Icons 2
input-group-input-group-icons-2
Input Group Icons 3
input-group-input-group-icons-3
Input Group Icons 4
input-group-input-group-icons-4
Input Group Label 1
input-group-input-group-label-1
Input Group Label 2
input-group-input-group-label-2
Input Group Label 3
input-group-input-group-label-3
Input Group Label 4
input-group-input-group-label-4
Input Group Spinner 1
input-group-input-group-spinner-1
Input Group Spinner 2
input-group-input-group-spinner-2
Input Group Spinner 3
input-group-input-group-spinner-3
Input Group Spinner 4
input-group-input-group-spinner-4
Input Group Text 1
input-group-input-group-text-1
Input Group Text 2
input-group-input-group-text-2
Input Group Text 3
input-group-input-group-text-3
Input Group Text 4
input-group-input-group-text-4
Input Group Textarea 1
input-group-input-group-textarea-1
Input Group Textarea 2
input-group-input-group-textarea-2
Input Group Textarea 3
input-group-input-group-textarea-3
Input Group Textarea 4
input-group-input-group-textarea-4
Input Group Tooltip 1
input-group-input-group-tooltip-1
Input Group Tooltip 2
input-group-input-group-tooltip-2
Input Group Tooltip 3
input-group-input-group-tooltip-3
Input Special 1
input-input-special-1
Input Special 2
input-input-special-2
Input Special 3
input-input-special-3
Input Special 4
input-input-special-4
Input Special 5
input-input-special-5
Input Standard 1
input-input-standard-1
Input Standard 2
input-input-standard-2
Input Standard 3
input-input-standard-3
Input Standard 4
input-input-standard-4
Input Standard 5
input-input-standard-5
Input Standard 6
input-input-standard-6
Input Standard 7
input-input-standard-7
Input Types 1
input-input-types-1
Input Types 2
input-input-types-2
Input Types 3
input-input-types-3
Input Types 4
input-input-types-4
Input Types 5
input-input-types-5
Input Types 6
input-input-types-6
Input Types 7
input-input-types-7
Input Validation 1
input-input-validation-1
Input Validation 2
input-input-validation-2
Input Validation 3
input-input-validation-3
Input Validation 4
input-input-validation-4
Input Validation 5
input-input-validation-5
Input Otp Behavior 1
input-otp-input-otp-behavior-1
Input Otp Behavior 2
input-otp-input-otp-behavior-2
Input Otp Behavior 3
input-otp-input-otp-behavior-3
Input Otp Behavior 4
input-otp-input-otp-behavior-4
Input Otp Standard 1
input-otp-input-otp-standard-1
Input Otp Standard 2
input-otp-input-otp-standard-2
Input Otp Standard 3
input-otp-input-otp-standard-3
Input Otp Standard 4
input-otp-input-otp-standard-4
Input Otp Standard 5
input-otp-input-otp-standard-5
Input Otp States 1
input-otp-input-otp-states-1
Input Otp States 2
input-otp-input-otp-states-2
Input Otp States 3
input-otp-input-otp-states-3
Input Otp States 4
input-otp-input-otp-states-4
Input Otp Use Cases 1
input-otp-input-otp-use-cases-1
Input Otp Use Cases 2
input-otp-input-otp-use-cases-2
Input Otp Use Cases 3
input-otp-input-otp-use-cases-3
Input Otp Use Cases 4
input-otp-input-otp-use-cases-4
Input Otp Variants 1
input-otp-input-otp-variants-1
Input Otp Variants 2
input-otp-input-otp-variants-2
Input Otp Variants 3
input-otp-input-otp-variants-3
Integration 1
integration1
A component showcasing a collection of integration options with app icons, titles, and descriptions, arranged in up to two columns.
Integration 10
integration10
A component showcasing a list of integrations with titles, descriptions, and "Connect" buttons, arranged in a single column with a minimalist design.
Integration 11
integration11
A tabbed component showcasing categorized integrations with toggles for connection status and details button. Layout scales from 1 to 3 columns.
Integration 12
integration12
A component features platform integration with a list of 5 permissions. Includes two logo comparisons, title, description, and buttons for actions.
Integration 13
integration13
A component showcasing a collection of integrations with iconic apps, featuring hover-activated animation for emphasis and links for more details.
Integration 2
integration2
A component featuring a title, subtitle, a marquee of logos linking to various resources, and a discovery button.
Integration 3
integration3
A component showcasing a list of integrations with icons, titles, and descriptions arranged in a single column layout.
Integration 4
integration4
A component depicting global connectivity with a central title, supportive text, and graphical illustrations of interconnected nodes, accented by a large background image.
Integration 5
integration5
A component showcasing integration options with title, description, buttons, and a two-column layout with logos.
Integration 6
integration6
A 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 7
integration7
A component showcasing integration with various tools, featuring two column layout, icons, and descriptions. Unique for its customizable gradient placeholders.
Integration 8
integration8
A component featuring dual-direction marquee rows of logos, highlighted with fade edges.
Integration 9
integration9
A component displaying available integrations in a 1-4 column grid, featuring icons, titles, and descriptions.
Invite User 1 - User Table with Dialog Invite
invite-user1
A 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 Invite
invite-user2
A 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 Invite
invite-user3
A 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 Link
invite-user4
A user table with invite dialog featuring both email input with role selection and a shareable invite link with copy-to-clipboard functionality.
Item Interactive 1
item-item-interactive-1
Item Interactive 2
item-item-interactive-2
Item Layout 1
item-item-layout-1
Item Layout 2
item-item-layout-2
Item Layout 3
item-item-layout-3
Item Media 1
item-item-media-1
Item Media 2
item-item-media-2
Item Media 3
item-item-media-3
Item Standard 1
item-item-standard-1
Item Standard 2
item-item-standard-2
Kbd Arrow Keys 1
kbd-kbd-arrow-keys-1
Kbd Arrow Keys 2
kbd-kbd-arrow-keys-2
Kbd Arrow Keys 3
kbd-kbd-arrow-keys-3
Kbd Arrow Keys 4
kbd-kbd-arrow-keys-4
Kbd Function Keys 1
kbd-kbd-function-keys-1
Kbd Function Keys 2
kbd-kbd-function-keys-2
Kbd Function Keys 3
kbd-kbd-function-keys-3
Kbd Function Keys 4
kbd-kbd-function-keys-4
Kbd Function Keys 5
kbd-kbd-function-keys-5
Kbd Function Keys 6
kbd-kbd-function-keys-6
Kbd Platform Specific 1
kbd-kbd-platform-specific-1
Kbd Platform Specific 2
kbd-kbd-platform-specific-2
Kbd Platform Specific 3
kbd-kbd-platform-specific-3
Kbd Platform Specific 4
kbd-kbd-platform-specific-4
Kbd Platform Specific 5
kbd-kbd-platform-specific-5
Kbd Pressed State 1
kbd-kbd-pressed-state-1
Kbd Pressed State 2
kbd-kbd-pressed-state-2
Kbd Pressed State 3
kbd-kbd-pressed-state-3
Kbd Pressed State 4
kbd-kbd-pressed-state-4
Kbd Pressed State 5
kbd-kbd-pressed-state-5
Kbd Sequence 1
kbd-kbd-sequence-1
Kbd Sequence 2
kbd-kbd-sequence-2
Kbd Sequence 3
kbd-kbd-sequence-3
Kbd Sequence 4
kbd-kbd-sequence-4
Kbd Shortcut 1
kbd-kbd-shortcut-1
Kbd Shortcut 2
kbd-kbd-shortcut-2
Kbd Shortcut 3
kbd-kbd-shortcut-3
Kbd Shortcut 4
kbd-kbd-shortcut-4
Kbd Shortcut 5
kbd-kbd-shortcut-5
Kbd Sizes 1
kbd-kbd-sizes-1
Kbd Sizes 2
kbd-kbd-sizes-2
Kbd Sizes 3
kbd-kbd-sizes-3
Kbd Sizes 4
kbd-kbd-sizes-4
Kbd Sizes 5
kbd-kbd-sizes-5
Kbd With Icons 1
kbd-kbd-with-icons-1
Kbd With Icons 2
kbd-kbd-with-icons-2
Kbd With Icons 3
kbd-kbd-with-icons-3
Kbd With Icons 4
kbd-kbd-with-icons-4
Kbd With Icons 5
kbd-kbd-with-icons-5
Label Standard 1
label-label-standard-1
Label Standard 2
label-label-standard-2
Label Standard 3
label-label-standard-3
Label Standard 4
label-label-standard-4
Label Standard 5
label-label-standard-5
Label Standard 6
label-label-standard-6
Label Standard 7
label-label-standard-7
Label Standard 8
label-label-standard-8
Leaderboard 1 - Leaderboard with Progress Bars
leaderboard1
A ranked list card with progress bars showing relative values for each item.
Leaderboard 2 - Leaderboard with Avatars
leaderboard2
A ranked list card with user avatars, names, subtitles, and values for each position.
Leaderboard 3 - Leaderboard with Trends
leaderboard3
A ranked list card with trend indicators showing movement direction for each item.
List 1
list1
A component displaying a table with details on various projects, including icons, categories, descriptions, years, offers, and segments. It adapts to different screen widths.
List 2
list2
A component displaying a list of awards with icons, titles, categories, and descriptions. Includes headings and buttons to view details.
List 3
list3
A component showcasing career progression with two sections for experience and achievements, each detailed in a 3-column layout, interconnected with separators.
Live Purchase 1
live-purchase1
The 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 2
live-purchase2
This 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 3
live-purchase3
This 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 1
login1
A login block featuring logo, input fields for email and password, a login button, a Google signup button, and a signup link.
Login 2
login2
A 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 3
login3
A login block with logo, main heading, subheading, email/password inputs, remember me checkbox, forgot password link, login & google login buttons, and signup prompt.
Login 4
login4
A login form featuring email and password fields, "Remember me" checkbox & Google Login. Includes forgot password & signup links.
Login 5
login5
A 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 6
login6
A login form component with email and password fields, sign-in and Google sign-up buttons, links for account creation and password recovery.
Login 7
login7
A 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 9
login9
This 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 Download
logo-logo-right-click-download
Logo Standard
logo-logo-standard
Logo Wordmark
logo-logo-wordmark
Logos 1
logos1
A component displaying a title and a row of partner logos with adjustable gaps, featuring grayscale and partial opacity effects.
Logos 10
logos10
A 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 11
logos11
A component featuring dual carousels of logos, a central title, and action buttons, styled with patterns and lines.
Logos 12
logos12
A carousel component displaying logos with auto-scroll functionality, supporting dark mode inversion.
Logos 13
logos13
A 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 Marquee
logos17
A 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 Headline
logos18
A 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 Headline
logos19
An auto-scrolling logo carousel with side fades and no heading, matching the marquee behavior of the titled variant.
Logos 2
logos2
A 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 Marquees
logos20
A 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 Background
logos21
A static logo grid on a muted background with a centered heading and optional subtitle.
Logos 22 - Double Row Logo Grid Without Heading
logos22
A two-row static logo grid without any heading or subtitle text.
Logos 23 - Double Row Marquee Without Heading
logos23
Two alternating-direction logo marquee rows without any heading or subtitle text.
Logos 24 - Double Row Marquee With Muted Background
logos24
Two alternating-direction logo marquee rows on a muted background with a centered heading and optional subtitle.
Logos 25 - Double Row Marquee Constrained Width
logos25
Two alternating-direction logo marquee rows inside a constrained max-width container with heading and subtitle.
Logos 26 - Double Row Marquee Constrained Without Heading
logos26
Two alternating-direction logo marquee rows inside a constrained max-width container without any heading or subtitle.
Logos 27 - Six Column Logo Grid
logos27
A static six-column logo grid displaying up to twelve partner or client logos with a centered heading and subtitle.
Logos 28 - Four Column Logo Grid
logos28
A static four-column logo grid displaying up to twelve partner or client logos with a centered heading and subtitle.
Logos 29 - Three Column Logo Grid
logos29
A static three-column logo grid with a constrained width, displaying up to twelve logos with a centered heading and subtitle.
Logos 3
logos3
A 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 Heading
logos30
A minimal six-column static logo grid displaying up to twelve logos without any heading or subtitle.
Logos 31 - Four Column Logo Grid Without Heading
logos31
A minimal four-column static logo grid displaying up to twelve logos without any heading or subtitle.
Logos 32 - Six Column Logo Grid With Muted Background
logos32
A static six-column logo grid on a muted background with a centered heading and subtitle.
Logos 4
logos4
A 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 5
logos5
A dual-row logo showcase component, featuring 4 logos on the top row and 5 on the bottom, with hover effects and external links.
Logos 7
logos7
A component showcasing logos with a headline, organized in a horizontally scrolling ticker, featuring hover effects.
Logos 8
logos8
A logos showcase component with a title, subtitle, and a grid of logos from various companies, customizable via props.
Logos 9
logos9
A component showcasing product team endorsements and logos in carousels, with auto-scrolling functionality and dynamic column adjustments.
Menubar Standard 1
menubar-menubar-standard-1
Menubar Standard 10
menubar-menubar-standard-10
Menubar Standard 2
menubar-menubar-standard-2
Menubar Standard 3
menubar-menubar-standard-3
Menubar Standard 4
menubar-menubar-standard-4
Menubar Standard 5
menubar-menubar-standard-5
Menubar Standard 6
menubar-menubar-standard-6
Menubar Standard 7
menubar-menubar-standard-7
Menubar Standard 8
menubar-menubar-standard-8
Menubar Standard 9
menubar-menubar-standard-9
Navbar 1
navbar1
A navigational component with dynamic menus, offering desktop and mobile layouts, incorporating icons and accordion features for sub-menus.
Navbar 10
navbar10
A 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
navbar11
A component with a dynamic navbar, integrating desktop and mobile views with different button sets. It includes expandable menus for grouped items and icons alongside links.
Navbar 12
navbar12
A component featuring a logo, dual navigation modes for desktop/mobile, accented by icons, primary & secondary action buttons, wrapped in an adaptable UI.
Navbar 14
navbar14
An expandable navigation component featuring categorized links with icons, a logo, and action buttons. It transitions to an accordion layout on smaller screens.
Navbar 17
navbar17
A navigation component with dynamic indicator for active links and a mobile menu with an animated icon for toggling.
Navbar 18
navbar18
A navigation bar with logo, collapsible menus, and a login button. Layout adapts for mobile with a popover menu.
Navbar 2
navbar2
A dual-layout navigation block with dynamic accordion submenus for mobile and horizontal list for desktop, featuring authentication links and a slide-in menu.
Navbar 21
navbar21
A dynamic navigation component with animated menu toggling. Displays a logo, a menu toggle button, expanding to show main links and socials.
Navbar 22
navbar22
This 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 24
navbar24
A dynamic navbar component featuring an animated dock with interactive icons for navigation linked to different sections.
Navbar 29
navbar29
A 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
navbar3
A component featuring a dynamic, multi-layer navigation menu with submenu dropdowns for platform, use cases, developers, and resources, complete with images, links, badges, and a responsive mobile layout.
Navbar 33 - Floating Navbar with Dropdown Menu
navbar33
A floating fixed navbar with logo, navigation menu with dropdowns, and login button. Features glassmorphism styling and animated mobile hamburger menu.
Navbar 4
navbar4
A navigational component with six main categories, each expanding into detailed sub-menus including solutions, products, company information, customer stories, partner programs, and resources. Features interactive elements for a comprehensive exploration.
Navbar 5
navbar5
A navbar component with a logo, navigation menus, sign-in/start buttons, and a collapsible menu for smaller screens, featuring a 2-column layout for feature links.
Navbar 6
navbar6
A navigation component with a logo, desktop and mobile menus, dropdowns for complex items, and auth buttons. Features a toggled mobile menu.
Navbar 7
navbar7
A multifunctional navigation component featuring dropdown menus for solutions and resources, a platform category with logos, and authentication buttons. It includes a mobile-friendly menu triggered by an icon.
Navbar 8
navbar8
A navigation component with dynamic background change on scroll and a responsive mobile menu, featuring logo, links with hover images, and buttons.
Navbar 9
navbar9
A navigation bar with logo, link/button list, and mobile menu toggle. On mobile, features an accordion menu for navigation items.
Navigation Menu Complex 1
navigation-menu-navigation-menu-complex-1
Navigation Menu Complex 2
navigation-menu-navigation-menu-complex-2
Navigation Menu Complex 3
navigation-menu-navigation-menu-complex-3
Navigation Menu Complex 4
navigation-menu-navigation-menu-complex-4
Navigation Menu Complex 5
navigation-menu-navigation-menu-complex-5
Navigation Menu Features 1
navigation-menu-navigation-menu-features-1
Navigation Menu Features 2
navigation-menu-navigation-menu-features-2
Navigation Menu Features 3
navigation-menu-navigation-menu-features-3
Navigation Menu Features 4
navigation-menu-navigation-menu-features-4
Navigation Menu Features 5
navigation-menu-navigation-menu-features-5
Navigation Menu Marketing 1
navigation-menu-navigation-menu-marketing-1
Navigation Menu Marketing 2
navigation-menu-navigation-menu-marketing-2
Navigation Menu Marketing 3
navigation-menu-navigation-menu-marketing-3
Navigation Menu Marketing 4
navigation-menu-navigation-menu-marketing-4
Navigation Menu Marketing 5
navigation-menu-navigation-menu-marketing-5
Navigation Menu Standard 1
navigation-menu-navigation-menu-standard-1
Navigation Menu Standard 2
navigation-menu-navigation-menu-standard-2
Navigation Menu Standard 3
navigation-menu-navigation-menu-standard-3
Navigation Menu Standard 4
navigation-menu-navigation-menu-standard-4
Navigation Menu Standard 5
navigation-menu-navigation-menu-standard-5
Offer Modal 1
offer-modal1
This 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 4
offer-modal4
The 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 5
offer-modal5
This 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 Flow
onboarding1
A 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 Wizard
onboarding2
A modal onboarding flow with colorful step backgrounds, profile questions, goal checkboxes, account linking, extension promotion, and trial activation.
Order History 1
order-history1
This 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 2
order-history2
This 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 3
order-history3
This 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 4
order-history4
This 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 5
order-history5
This 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 1
order-summary1
This 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 2
order-summary2
This 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 3
order-summary3
This 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 4
order-summary4
This 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 5
order-summary5
This 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 6
order-summary6
This 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 1
pagination-pagination-advanced-1
Pagination Advanced 2
pagination-pagination-advanced-2
Pagination Advanced 3
pagination-pagination-advanced-3
Pagination Advanced 4
pagination-pagination-advanced-4
Pagination Advanced 5
pagination-pagination-advanced-5
Pagination Basic 1
pagination-pagination-basic-1
Pagination Basic 2
pagination-pagination-basic-2
Pagination Basic 3
pagination-pagination-basic-3
Pagination Basic 4
pagination-pagination-basic-4
Pagination Basic 5
pagination-pagination-basic-5
Pagination Navigation 1
pagination-pagination-navigation-1
Pagination Navigation 2
pagination-pagination-navigation-2
Pagination Navigation 3
pagination-pagination-navigation-3
Pagination Navigation 4
pagination-pagination-navigation-4
Pagination Sizes 1
pagination-pagination-sizes-1
Pagination Sizes 2
pagination-pagination-sizes-2
Pagination Sizes 3
pagination-pagination-sizes-3
Pagination Sizes 4
pagination-pagination-sizes-4
Pagination Sizes 5
pagination-pagination-sizes-5
Payment Methods 1
payment-methods1
This 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 2
payment-methods2
This 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 3
payment-methods3
This 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 4
payment-methods4
This 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.
Popover Standard 1
popover-popover-standard-1
Popover Standard 10
popover-popover-standard-10
Popover Standard 11
popover-popover-standard-11
Popover Standard 12
popover-popover-standard-12
Popover Standard 13
popover-popover-standard-13
Popover Standard 14
popover-popover-standard-14
Popover Standard 15
popover-popover-standard-15
Popover Standard 2
popover-popover-standard-2
Popover Standard 3
popover-popover-standard-3
Popover Standard 4
popover-popover-standard-4
Popover Standard 5
popover-popover-standard-5
Popover Standard 6
popover-popover-standard-6
Popover Standard 7
popover-popover-standard-7
Popover Standard 8
popover-popover-standard-8
Popover Standard 9
popover-popover-standard-9
Price Basic
price-price-basic
Price On Sale
price-price-on-sale
Pricing 1
pricing1
A pricing component showcasing 4 tiers with varying features, descriptions, and call-to-action buttons, displayed in a columnar layout with a heading section mentioning options and custom plan availability.
Pricing 10
pricing10
A 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 switch
pricing100
One centered pricing card with monthly and yearly switch, discount chip, dual buttons, and checklist rows.
Pricing 105 - Single plan wide muted panel
pricing105
Full-width muted surface splits narrative copy from a stacked checklist and single solid CTA.
Pricing 106 - Single plan split heading and card
pricing106
Two-column layout places section story and inline switch beside a bordered pricing card.
Pricing 107 - Single plan card with accent rail
pricing107
Card capped by a gradient rail includes corner switch row, badge-led title, and dot-led features.
Pricing 108 - Single plan split art panel and details
pricing108
Gradient art panel with optional plan artwork contrasts a detail column with switch, facts, and CTA.
Pricing 11
pricing11
A 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 billing
pricing110
Tabs swap monthly and yearly amounts inside one card while sharing a single checklist and CTA.
Pricing 117 - Single plan bracketed price display
pricing117
Oversized price sits inside corner bracket framing with prose grid for feature text below.
Pricing 118 - Single plan on inverted primary section
pricing118
Primary-tinted band wraps a light inset card that carries price, CTA, and two-column checks.
Pricing 12
pricing12
A component displaying add-on options in two sections: "featured" in a grid layout and "other" in a list layout, with prices and descriptions.
Pricing 13
pricing13
A component showcasing 3 add-on options, each with a title, description, and pricing/contact info. It features an image and introductory text.
Pricing 14
pricing14
A 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 15
pricing15
A 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 features
pricing16
Centered 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
pricing17
This component provides a detailed comparison of pricing plans, featuring two options: standard and premium, each with specific features and durations. Users can easily view and select their preferred plan based on transparent pricing, included features, and benefit descriptions, with the option to proceed via a prominent call-to-action button.
Pricing 2 - Classic two-plan pricing with billing switch
pricing2
Centered 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 dividers
pricing20
Heading and toggle for monthly or yearly rates, three columns with vertical dividers between them, icon next to each tier name, oversized prices, badge-style checks on features, and primary or secondary buttons.
Pricing 21
pricing21
A 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 switch
pricing22
Three cards in a row with a yearly switch on paid tiers tied to one shared state, thick primary border on the recommended tier, and check icons on features.
Pricing 23
pricing23
A 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 cards
pricing24
Center headline with one annual switch, three cards on the theme muted color, highlighted tier with primary ring offset and slight scale, and primary-tinted checks on features.
Pricing 26
pricing26
A component displaying 3 marketing plan options, highlighting one. Features badges, descriptions, and a call-to-action button for each plan.
Pricing 27
pricing27
A pricing component with a 3-column layout on XL screens, featuring a highlighted main card spanning 2 columns and a secondary card. Each card lists services, prices, and includes call-to-action buttons.
Pricing 28
pricing28
This 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 29
pricing29
A 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 rows
pricing3
Three columns with a billing switch, optional intro text, checks and dashed separators on feature rows, and feature blocks that appear only on wide layouts.
Pricing 30
pricing30
A 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 pill
pricing31
Three 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
pricing32
A pricing display component with a billing cycle toggle, savings info, and plan cards for different service tiers, highlighting a "most popular" option.
Pricing 33
pricing33
A 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 carousel
pricing34
Toggle 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 highlight
pricing35
Two 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 strip
pricing36
Two 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
pricing37
A premium plan showcase block with a title, subtitle, price, and features list followed by a button. Uses iconography for feature representation.
Pricing 38
pricing38
A marketing package selector with 3 options, highlighting features per plan. Includes alerts and clickable elements for user interaction.
Pricing 39
pricing39
This component is a pricing module that displays multiple pricing plans with adjustable features based on user-input through a slider. It includes detailed descriptions, pricing information, and feature lists for each plan, as well as interactive elements such as tooltips and buttons, making it easy to compare and choose the best plan.
Pricing 4 - Three-plan pricing with tabs and one highlighted column
pricing4
Monthly and yearly tabs above three tier columns with one muted highlighted column, badge labels from tier names, checks on features, and sans-serif price type.
Pricing 40
pricing40
A 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 switch
pricing41
Same 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 Table
pricing42
A 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 Countdown
pricing43
A 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 carousel
pricing44
Centered 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 table
pricing45
Three-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 table
pricing46
A 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 carousel
pricing47
Same 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 carousel
pricing48
Square 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 band
pricing49
One 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
pricing5
A pricing component with two plans, offering comparison across features in a table and emphasized call-to-actions. Provides a clear visual differentiation between plans.
Pricing 50 - Three-plan pricing with centered spotlight column
pricing50
Twelve-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 breakpoints
pricing52
Coverflow 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 pricing
pricing57
Monospace-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 Grid
pricing58
Left-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 Band
pricing59
Centered heading and rounded toggle above a single bordered container split into two plan columns with inner dividers, compact feature lists, and full-width buttons.
Pricing 6
pricing6
A 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 Pricing
pricing60
Monospace-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 Tabs
pricing61
Left-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 Ring
pricing62
Centered 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 Tabs
pricing63
Asymmetric 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 Accent
pricing64
Two 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 Cards
pricing66
Ultra-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 Contrast
pricing67
Centered 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 Section
pricing68
Tab-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 Control
pricing69
Centered 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 badge
pricing7
Centered 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 Ribbon
pricing71
Two 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 Cards
pricing72
Two 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 Surface
pricing73
Two 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 Badge
pricing74
Two 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 Switch
pricing75
Two 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 Badges
pricing76
Two-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 Separators
pricing78
Two-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 Pricing
pricing79
Two generously padded cards with extra-large border radius, tab-based billing toggle, and a highlighted second plan with a primary border and shadow.
Pricing 8
pricing8
A 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 Header
pricing80
A 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 Frame
pricing81
Two 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 Strip
pricing82
Two 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 toggle
pricing83
A 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 tiers
pricing84
Like 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 toggle
pricing85
Four 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 switch
pricing86
Four 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 switch
pricing87
A 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 strip
pricing88
Left-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 icons
pricing89
Centered heading and four bordered panels with oversized price, arrow CTA, mixed feature icons from data, and a floating pill on the highlighted tier.
Pricing 9
pricing9
A 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 toggle
pricing90
Centered 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 toggle
pricing91
Article-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 logos
pricing92
Two 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 shadow
pricing93
Four 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 emphasis
pricing94
Four 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 pricing
pricing95
Monospace-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 accents
pricing96
Four 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 billing
pricing97
Four 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 carousel
pricing98
Looping 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 lists
pricing99
Four pricing cards with billing toggle above separate per-plan feature checklists displayed in a matching grid below.
Process 1
process1
A 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 2
process2
A component visualizing a 4-step process with dynamic image transitions and a contact button, spread over 2 columns in a larger view.
Process 3
process3
A component showcasing a 5-step process with animated entries, structured layout, and shifting background colors for each step. Unique number positioning.
Process 4
process4
A 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 1
product-card1
This 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 10
product-card10
This 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 2
product-card2
This 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 Swatches
product-card21
A 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 Carousel
product-card22
A 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 Variants
product-card23
A 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 Variants
product-card24
A product card combining an image carousel with next and previous controls, react-hook-form and zod driven size and color groups with stock states, gradient color swatches, and sticky-feel add-to-cart with sale pricing.
Product Card 3
product-card3
This 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 4
product-card4
This 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 5
product-card5
This 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 6
product-card6
This 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 7
product-card7
This 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 8
product-card8
This 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 9
product-card9
This 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 1
product-categories1
This 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 2
product-categories2
This 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 3
product-categories3
This 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 4
product-categories4
This 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 5
product-categories5
This 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 1
product-detail1
This 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 10
product-detail10
This 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 2
product-detail2
This 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 3
product-detail3
This 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 4
product-detail4
This 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 5
product-detail5
This 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 6
product-detail6
This 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 7
product-detail7
This 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 8
product-detail8
This 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 9
product-detail9
This 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 1
product-gallery1
This 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 2
product-gallery2
This 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 3
product-gallery3
This 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 4
product-gallery4
The 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 7
product-gallery7
This 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 1
product-list1
This 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 10
product-list10
This 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 2
product-list2
This 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 3
product-list3
This 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 4
product-list4
This 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 5
product-list5
This 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 6
product-list6
This 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 7
product-list7
This 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 8
product-list8
This 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 9
product-list9
This 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 4
product-quick-view4
This 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 5
product-quick-view5
The 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 6
product-quick-view6
This 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 7
product-quick-view7
This 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 Dialog
product-quick-view8
A 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 1
product-specs1
This 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 2
product-specs2
This 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 1
progress-progress-basic-1
Progress Basic 2
progress-progress-basic-2
Progress Basic 3
progress-progress-basic-3
Progress Basic 4
progress-progress-basic-4
Progress Basic 5
progress-progress-basic-5
Progress Colored 1
progress-progress-colored-1
Progress Colored 2
progress-progress-colored-2
Progress Colored 3
progress-progress-colored-3
Progress Colored 4
progress-progress-colored-4
Progress Colored 5
progress-progress-colored-5
Progress Sizes 1
progress-progress-sizes-1
Progress Sizes 2
progress-progress-sizes-2
Progress Sizes 3
progress-progress-sizes-3
Progress Sizes 4
progress-progress-sizes-4
Progress Sizes 5
progress-progress-sizes-5
Progress With Label 1
progress-progress-with-label-1
Progress With Label 2
progress-progress-with-label-2
Progress With Label 3
progress-progress-with-label-3
Progress With Label 4
progress-progress-with-label-4
Progress With Label 5
progress-progress-with-label-5
Project 1
project1
A 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 10
project10
A 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 12
project12
A component with dynamic text animations, back button, detailed project information, and a large image; layout includes columns with animations for elements.
Project 13
project13
This 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.
Project13a
project13a
A visual storytelling component with a parallax hero section, project details, full-width images, and a concept overview. Uses staggered animations.
Project 14
project14
This 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 2
project2
A component displaying a project with a large title, metadata (year, category, client) in columns, an image, and descriptions, ending with a button.
Project2a
project2a
A 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.
Project2b
project2b
A 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.
Project2c
project2c
A project showcase component with dynamic text fields, a 3-column layout for metadata, an image preview, and detailed descriptions. Features an outlined contact button.
Project2d
project2d
A 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 4
project4
A 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.
Project4a
project4a
A 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.
Project4b
project4b
A component showcasing a brand identity project for a juice company, with sections on design process, challenges, and outcomes, complemented by images and text descriptions.
Project4c
project4c
A 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 5
project5
An 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.
Project5a
project5a
This 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.
Project5b
project5b
This component displays a project with a staggered fade-in animation, divided into two columns, including images, exhibition details, a description, and specific artwork information.
Project5c
project5c
This 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.
Project5d
project5d
An 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.
Project5e
project5e
A 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.
Project5f
project5f
A component displaying an art piece description, details, and images in a 2-column layout with fading animations and a booking button.
Project5g
project5g
An 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 6
project6
A component displaying a sticky description section alongside a grid of images, followed by another grid featuring project cards with hover effects.
Project6a
project6a
A component displaying an image collection with animated elements, project rows, and descriptive text. Features dynamic image scaling on hover.
Project 7
project7
A 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 8
project8
An animated block showcasing a fashion theme with large title, description, image, and credits. Features 1-2 columns and dynamic entry animations.
Project8a
project8a
A 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.
Project8b
project8b
A visually animated block with a title, subtitle, two-column layout featuring an image and detailed text descriptions, incorporating motion effects on load.
Project8c
project8c
A 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.
Project8d
project8d
A component showcasing a fashion project with animated visibility, a large title, a subtitle, an image, detailed descriptions, and credits spanning multiple columns.
Project8e
project8e
A two-section block featuring a fullscreen hero with animated text and a detailed content section in a 2-column layout with credits.
Project 9
project9
A dual-column component featuring a sticky narrative section with animated transitions and a gallery of monochrome images that enlarge on hover.
Projects 1
projects1
A 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 10
projects10
A gallery block with a 3-column layout displaying images that enlarge and reveal titles and descriptions on hover.
Projects 11
projects11
A dynamic image gallery with 1-3 columns featuring animated, hover-zoomed images.
Projects 12
projects12
An interactive gallery component with a 1-3 column layout, showcasing projects with hover animations and dynamic, motion-enhanced tooltips.
Projects 13
projects13
A component showcasing 4 projects with details: Title, Description, Launch Date & Image, in a 3-column layout emphasizing project highlights.
Projects 14
projects14
A 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 15
projects15
A component showcasing video projects with hover-play functionality, dynamic text overlays for studio names and titles, and a header section for exploration.
Projects15a
projects15a
A component displaying a grid of video sections, each showing a thumbnail that plays a video on hover, with project titles.
Projects15b
projects15b
A video gallery with a header and hover-to-play videos laid out in a 2-column grid, featuring project titles and studio names.
Projects15c
projects15c
A video gallery block with hover-play functionality, showcasing project titles and studio names over thumbnails.
Projects15d
projects15d
A component displays video projects in a 2x2 grid, with auto-play on hover, showing studio names and titles.
Projects15e
projects15e
A video carousel component displaying project thumbnails that play videos on hover, showcasing titles and studio names. Features navigation arrows and auto-pause.
Projects 16
projects16
A gallery component showcasing nature photos in two columns, with a descriptive heading and a discovery link button.
Projects 17
projects17
A carousel block showcasing projects with images, title, and location. Included are navigation buttons for scrolling through items.
Projects17a
projects17a
A component showcasing projects in a carousel with cinematic images, titles, categories, and dynamic navigation arrows.
Projects17b
projects17b
A carousel-based component showcasing projects with images, titles, categories, locations, years, and descriptions within cards. Includes navigational arrows and badges for category identification.
Projects 18
projects18
A 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 2
projects2
A 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 3
projects3
A 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 4
projects4
This component displays projects with a 2-column grid, including images, titles, categories, and dates. Features a large title and descriptive text section.
Projects 5
projects5
A gallery block showcasing 6 projects with animations, in 1 or 2 columns depending on screen size, including images and project details.
Projects 6
projects6
A gallery component with a 2-column layout showcasing 4 project cards that animate on hover and reveal details.
Projects 7
projects7
A 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 8
projects8
A component displaying items in a grid with 3 columns, featuring category filters and animations on item change.
Projects 9
projects9
A component displaying a 1 or 2-column grid of images with hover effects revealing titles and descriptions.
Promo Banner 1
promo-banner1
This 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 2
promo-banner2
This 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 3
promo-banner3
This 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 4
promo-banner4
This 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 5
promo-banner5
This 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 6
promo-banner6
This 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 7
promo-banner7
This 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 1
radio-group-radio-group-advanced-1
Radio Group Advanced 2
radio-group-radio-group-advanced-2
Radio Group Form 1
radio-group-radio-group-form-1
Radio Group Form 2
radio-group-radio-group-form-2
Radio Group Layout 1
radio-group-radio-group-layout-1
Radio Group Layout 2
radio-group-radio-group-layout-2
Radio Group Layout 3
radio-group-radio-group-layout-3
Radio Group Standard 1
radio-group-radio-group-standard-1
Radio Group Standard 2
radio-group-radio-group-standard-2
Rate Card 1
rate-card1
This 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 2
rate-card2
This 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 Basic
rating-rating-basic
Rating With Score
rating-rating-with-score
Resource 1
resource1
A 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 2
resource2
This 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 3
resource3
A 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 1
resources1
The 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 2
resources2
A 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 3
resources3
A component showcasing a featured post with an image and a list of resources, each with a date, category, and title, arranged in columns.
Resources 4
resources4
A component showcasing recent updates with a title, list items including titles, categories, avatars, dates, and interactive hover effects.
Resources 5
resources5
This 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 1
reviews1
This 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 18
reviews18
This 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 2
reviews2
This 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 23
reviews23
The 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 3
reviews3
This 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 4
reviews4
This 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 5
reviews5
This 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 6
reviews6
This 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 8
reviews8
This 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 9
reviews9
This 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 1
scroll-area-scroll-area-advanced-1
Scroll Area Advanced 2
scroll-area-scroll-area-advanced-2
Scroll Area Advanced 3
scroll-area-scroll-area-advanced-3
Scroll Area Layout 1
scroll-area-scroll-area-layout-1
Scroll Area Layout 2
scroll-area-scroll-area-layout-2
Scroll Area Layout 3
scroll-area-scroll-area-layout-3
Scroll Area Standard 1
scroll-area-scroll-area-standard-1
Scroll Area Standard 2
scroll-area-scroll-area-standard-2
Scrollable Tabslist Basic
scrollable-tabslist-scrollable-tabslist-basic
Separator Basic 1
separator-separator-basic-1
Separator Basic 2
separator-separator-basic-2
Separator Basic 3
separator-separator-basic-3
Separator Basic 4
separator-separator-basic-4
Separator Basic 5
separator-separator-basic-5
Separator Spacing 1
separator-separator-spacing-1
Separator Spacing 2
separator-separator-spacing-2
Separator Spacing 3
separator-separator-spacing-3
Separator Spacing 4
separator-separator-spacing-4
Separator Spacing 5
separator-separator-spacing-5
Separator Styled 1
separator-separator-styled-1
Separator Styled 2
separator-separator-styled-2
Separator Styled 3
separator-separator-styled-3
Separator Styled 4
separator-separator-styled-4
Separator Styled 5
separator-separator-styled-5
Separator With Text 1
separator-separator-with-text-1
Separator With Text 2
separator-separator-with-text-2
Separator With Text 3
separator-separator-with-text-3
Service 1
service1
A 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 2
service2
A 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 3
service3
A 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 4
service4
A 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 5
service5
A component showcasing UX/UI design services, with a 2:1 column layout. Features text descriptions, expertise stats, and related services with icons.
Service 6
service6
This component showcases UX/UI design services, expertise, and related offerings in a structured layout including icons and descriptions.
Service 7
service7
A 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 1
services1
A component displaying services in 1-2 columns, each service with a title, description, and list of features marked by check icons.
Services 10
services10
A 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
services11
A component showcasing services with a title and description on the left and clickable image cards to the right in a 1-2 column layout.
Services 12
services12
A component displaying featured services in a grid layout with a description panel, offering dynamic interaction for each service card.
Services 13
services13
A 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 14
services14
A 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 15
services15
A 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 16
services16
A 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 18
services18
A 3-column component displaying services with a large title, description, and interactive list. Includes progress indicators and "Get Started" CTA.
Services 19
services19
An animated table layout displaying service options with a unique feature of a cursor-following image that changes based on the hovered table row.
Services 20
services20
A 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 21
services21
A 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 3
services3
A component displaying four service categories, each with an icon, title, and list of services in a three-column layout.
Services 4
services4
A 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 5
services5
A 4-column component listing services with icons, titles, descriptions, and bullet points. Features a central 'Services' title and summary.
Services 6
services6
A component showcasing 4 services with icons, titles, descriptions, and items in a 1-2-4 column layout, featuring hover effects.
Services 7
services7
This component displays four services, each with an icon, title, description, and list of features, styled with rounded containers.
Services 8
services8
An interactive component lists services with accordions, including icons, titles, and descriptions. Features 2-column grid for in-depth details.
Services 9
services9
A 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 Search
settings-integrations1
A searchable integration gallery with category filter popover, compact integration cards showing logos and categories, and filtered results display.
Settings Integrations 2 - Integration List with Status
settings-integrations2
A 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 Grid
settings-integrations3
A 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 Badges
settings-integrations3a
A responsive integration settings grid displaying third-party service cards with connection status badges and hover interactions.
Settings Integrations 4 - Tabbed Integration Categories
settings-integrations4
A settings integrations panel with tabbed navigation to browse services by category, featuring connect/disconnect buttons and status badges.
Settings Integrations 5 - Toggle Switch Integration List
settings-integrations5
A compact integration settings panel with toggle switches for quick enable/disable of connected services.
Settings Integrations 6 - Integration Table with Actions
settings-integrations6
A table-based integration management view showing service status, sync times, and action buttons for settings and removal.
Settings Integrations 7 - Integration Cards with Footer Actions
settings-integrations7
A full-page integration browser with search, card-based layout featuring category labels and connect buttons in card footers.
Settings Integrations 8 - Sidebar Category Navigation
settings-integrations8
A two-column integration browser with category sidebar navigation and scrollable list of integration items.
Settings Integrations 9 - Connected Integrations with Activity
settings-integrations9
A management view for active integrations showing connection status, who connected them, and recent activity with dropdown actions.
Settings Members 1 - Members Table with Filters
settings-members1
A 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 Avatars
settings-members2
A vertical member list with avatars, role badges, dropdown actions, search input, and invite dialog with help link in subheading.
Settings Members 3 - Member Cards Grid
settings-members3
A responsive card grid displaying team members with avatars, color-coded role badges, join dates, and dropdown action menus.
Settings Members 4 - Members with Bulk Selection
settings-members4
A 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 Invites
settings-members5
A tabbed interface separating active members from pending invitations, with online status indicators, last active times, and invite expiration tracking.
Settings Notifications 1 - Simple Checkbox List
settings-notifications1
A minimal notification settings list with checkboxes for each notification type in a single vertical column.
Settings Notifications 2 - Simple Switch List
settings-notifications2
A minimal notification settings list with switch toggles for each notification type in a vertical stack.
Settings Notifications 3 - Grouped Categories with Switches
settings-notifications3
A notification settings section with notifications organized into labeled categories, each in a bordered card with switch toggles.
Settings Notifications 4 - Two-Channel Matrix Table
settings-notifications4
A notification settings table with Email and SMS checkbox columns for each notification type in a matrix layout.
Settings Profile 1 - Basic Profile Form
settings-profile1
A compact profile settings card with avatar upload, name, username, email, and bio fields.
Settings Profile 2 - Profile Form with Social Links
settings-profile2
A comprehensive profile settings form with personal info, work details, and social media links organized in sections.
Settings Profile 3 - Profile Settings with Cover Image
settings-profile3
A multi-card profile settings layout with cover image upload, avatar, basic info, and regional preferences.
Settings Profile 4 - Full Page Profile Editor
settings-profile4
A full-page profile editor with sidebar navigation, sectioned content, and sticky save bar.
Settings Profile 5 - Profile with Live Preview
settings-profile5
A two-column profile editor with live preview showing how changes appear to others in real-time.
Settings Profile 6 - Profile Setup Wizard
settings-profile6
A multi-step wizard for profile setup with progress indicator, back/next navigation, and review step.
Settings Profile 7 - Compact Inline Edit Profile
settings-profile7
A compact profile card with inline editing - click to edit fields, save on enter or blur.
Shader 1 - Raymarched 3D Shader
shader1
A full-screen shader background with raymarched 3D shapes, rotating scene, configurable color, and smooth volumetric lighting.
Shader 10 - Image Transition Shader
shader10
A 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 Bloom
shader11
A 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 Shader
shader12
A 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 Shader
shader13
A 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 Dither
shader14
A 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 Shader
shader15
A full-screen shader background with RGB prism effect, color acts as spectral mask, configurable color and time multiplier.
Shader 16 - Space Invaders Shader
shader16
A full-screen shader background with falling pixel-art invaders, expanding rings, configurable color, and time multiplier.
Shader 17 - Fluid Reveal Image
shader17
A 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 Shader
shader18
A 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 Shader
shader19
A full-screen shader background with glass rod refraction, 3D noise, RGB dispersion, and configurable background and object colors.
Shader 2 - Kaleidoscope Swirl Shader
shader2
A full-screen shader background with kaleidoscope-style rotating shapes, fractal-like patterns, configurable color, and time-based animation.
Shader 20 - Metaball Glass Shader
shader20
A full-screen shader background with glass rod refraction, two metaballs, configurable metaball and background colors.
Shader 3 - Mouse-Interactive Glass Shader
shader3
A full-screen shader background with glass refraction, circular shapes, mouse-following interaction, and configurable color.
Shader 4 - Chromatic Aberration Shader
shader4
A full-screen shader background with chromatic aberration, procedural organic scene, light streaks, and dark color palette.
Shader 5 - Raymarched Gyroid Sphere
shader5
A full-screen shader background with raymarched gyroid surface and sphere, neon volumetric lighting, and blue noise dither.
Shader 6 - Dithered Wave Shader
shader6
A full-screen shader background with cosine wave pattern, Bayer dither, and configurable foreground and background colors.
Shader 7 - Fluid Vector Field Shader
shader7
A full-screen shader background with fluid simulation, vector field visualization, arrow patterns, mouse interaction, and configurable color.
Shader 8 - Interactive Grid Shader
shader8
A full-screen shader background with ping-pong buffer, grid-based shapes (squares, crosses, lines), and mouse interaction.
Shader 9 - Glowing Torus with Mouse
shader9
A full-screen shader background with raymarched 3D torus, glow effect, mouse proximity highlight (red), and dark color palette.
Sheet Details 1
sheet-sheet-details-1
Sheet Details 2
sheet-sheet-details-2
Sheet Details 3
sheet-sheet-details-3
Sheet Details 4
sheet-sheet-details-4
Sheet Details 5
sheet-sheet-details-5
Sheet Form 1
sheet-sheet-form-1
Sheet Form 2
sheet-sheet-form-2
Sheet Form 3
sheet-sheet-form-3
Sheet Form 4
sheet-sheet-form-4
Sheet Form 5
sheet-sheet-form-5
Sheet Multi Section 1
sheet-sheet-multi-section-1
Sheet Multi Section 2
sheet-sheet-multi-section-2
Sheet Multi Section 3
sheet-sheet-multi-section-3
Sheet Multi Section 4
sheet-sheet-multi-section-4
Sheet Multi Section 5
sheet-sheet-multi-section-5
Sheet Navigation 1
sheet-sheet-navigation-1
Sheet Navigation 2
sheet-sheet-navigation-2
Sheet Navigation 3
sheet-sheet-navigation-3
Sheet Navigation 4
sheet-sheet-navigation-4
Sheet Navigation 5
sheet-sheet-navigation-5
Sheet Settings 1
sheet-sheet-settings-1
Sheet Settings 2
sheet-sheet-settings-2
Sheet Settings 3
sheet-sheet-settings-3
Sheet Settings 4
sheet-sheet-settings-4
Sheet Settings 5
sheet-sheet-settings-5
Sheet Standard 1
sheet-sheet-standard-1
Sheet Standard 2
sheet-sheet-standard-2
Sheet Standard 3
sheet-sheet-standard-3
Sheet Standard 4
sheet-sheet-standard-4
Shopping Cart 1
shopping-cart1
This 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 14
shopping-cart14
This 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 15
shopping-cart15
This 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 16
shopping-cart16
The 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 17
shopping-cart17
This 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 18
shopping-cart18
This 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 19
shopping-cart19
This 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 2
shopping-cart2
This 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 20
shopping-cart20
The 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 3
shopping-cart3
This 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 7
shopping-cart7
This 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 Groups
sidebar1
A simple sidebar with logo header, labeled navigation groups, footer links, and main content area with breadcrumbs and toggle button.
Sidebar 10
sidebar10
A sidebar10 component
Sidebar 11
sidebar11
A sidebar11 component
Sidebar 12
sidebar12
A sidebar12 component
Sidebar 13
sidebar13
A sidebar13 component
Sidebar 14
sidebar14
A sidebar14 component
Sidebar 15
sidebar15
A sidebar15 component
Sidebar 16
sidebar16
A sidebar16 component
Sidebar 17
sidebar17
A sidebar17 component
Sidebar 18
sidebar18
A sidebar18 component
Sidebar 19
sidebar19
A sidebar19 component
Sidebar 2 - Sidebar with Collapsible Submenus
sidebar2
A sidebar with collapsible navigation groups, nested submenu items with chevron indicators, and expandable project sections.
Sidebar 20
sidebar20
A sidebar20 component
Sidebar 21
sidebar21
A sidebar21 component
Sidebar 3 - Sidebar with Multiple Groups
sidebar3
A sidebar with multiple labeled navigation groups covering overview, projects, team, and workspace sections with footer utilities.
Sidebar 4 - Sidebar with Collapsible Groups
sidebar4
A sidebar with collapsible navigation groups that can expand/collapse entire sections, combining group labels with expandable content.
Sidebar 5 - Sidebar with Search Input
sidebar5
A sidebar with integrated search input in the header, collapsible navigation groups, and labeled sections for quick filtering.
Sidebar 6 - Sidebar with User Footer
sidebar6
A sidebar with user profile dropdown in the footer showing avatar, name, email, and account/logout options with collapsible navigation.
Sidebar 7 - Sidebar with Workspace Switcher
sidebar7
A sidebar with workspace/organization switcher dropdown in the header, allowing users to switch between different workspaces or teams.
Sidebar 8 - Sidebar Inset Variant
sidebar8
An inset sidebar variant that appears contained within the page with rounded corners, workspace switcher, user footer, and collapsible groups.
Sidebar 9
sidebar9
A sidebar9 component
Signup 1
signup1
A signup component featuring a logo, customizable headings, email and password fields, buttons for account creation and Google signup, and a login redirect.
Signup 10
signup10
A 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 2
signup2
A signup component with logo, headings, email/password inputs, and buttons for account creation and Google signup, arranged in a centered column layout.
Signup 3
signup3
A 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 4
signup4
A signup component featuring a logo, headings, email/password inputs, and social media signup options (Google, Facebook, Apple). Includes a 'login' link.
Signup 5
signup5
A 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 6
signup6
A signup component featuring email/password fields, Google signup, and a login redirect. Layout includes a centered form in a 400px column.
Signup 7
signup7
This 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 8
signup8
A 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 9
signup9
A signup component with Google signup option, email input, and a carousel of logos at the bottom.
Skeleton Card 1
skeleton-skeleton-card-1
Skeleton Card 2
skeleton-skeleton-card-2
Skeleton Card 3
skeleton-skeleton-card-3
Skeleton Card 4
skeleton-skeleton-card-4
Skeleton Card 5
skeleton-skeleton-card-5
Skeleton Content 1
skeleton-skeleton-content-1
Skeleton Content 2
skeleton-skeleton-content-2
Skeleton Content 3
skeleton-skeleton-content-3
Skeleton Content 4
skeleton-skeleton-content-4
Skeleton Content 5
skeleton-skeleton-content-5
Skeleton Form 1
skeleton-skeleton-form-1
Skeleton Form 2
skeleton-skeleton-form-2
Skeleton Form 3
skeleton-skeleton-form-3
Skeleton Form 4
skeleton-skeleton-form-4
Skeleton Form 5
skeleton-skeleton-form-5
Skeleton List 1
skeleton-skeleton-list-1
Skeleton List 2
skeleton-skeleton-list-2
Skeleton List 3
skeleton-skeleton-list-3
Skeleton List 4
skeleton-skeleton-list-4
Skeleton List 5
skeleton-skeleton-list-5
Skeleton Profile 1
skeleton-skeleton-profile-1
Skeleton Profile 2
skeleton-skeleton-profile-2
Skeleton Profile 3
skeleton-skeleton-profile-3
Skeleton Profile 4
skeleton-skeleton-profile-4
Skeleton Profile 5
skeleton-skeleton-profile-5
Skeleton Table 1
skeleton-skeleton-table-1
Skeleton Table 2
skeleton-skeleton-table-2
Skeleton Table 3
skeleton-skeleton-table-3
Skeleton Table 4
skeleton-skeleton-table-4
Skeleton Table 5
skeleton-skeleton-table-5
Skills 1
skills1
A 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 2
skills2
A 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 1
slider-slider-interactive-1
Slider Interactive 2
slider-slider-interactive-2
Slider Interactive 3
slider-slider-interactive-3
Slider Interactive 4
slider-slider-interactive-4
Slider Interactive 5
slider-slider-interactive-5
Slider Range 1
slider-slider-range-1
Slider Range 2
slider-slider-range-2
Slider Range 3
slider-slider-range-3
Slider Range 4
slider-slider-range-4
Slider Range 5
slider-slider-range-5
Slider Settings 1
slider-slider-settings-1
Slider Settings 2
slider-slider-settings-2
Slider Settings 3
slider-slider-settings-3
Slider Settings 4
slider-slider-settings-4
Slider Standard 1
slider-slider-standard-1
Slider Standard 2
slider-slider-standard-2
Slider Standard 3
slider-slider-standard-3
Slider Standard 4
slider-slider-standard-4
Slider Standard 5
slider-slider-standard-5
Slider Styled 1
slider-slider-styled-1
Slider Styled 2
slider-slider-styled-2
Slider Styled 3
slider-slider-styled-3
Slider Styled 4
slider-slider-styled-4
Slider Styled 5
slider-slider-styled-5
Slider Vertical 1
slider-slider-vertical-1
Slider Vertical 2
slider-slider-vertical-2
Slider Vertical 3
slider-slider-vertical-3
Slider Vertical 4
slider-slider-vertical-4
Slider Vertical 5
slider-slider-vertical-5
Social Media Trending 1 - Video Carousel Social Feed
social-media-trending1
A 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 Carousel
social-media-trending2
An 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 Grid
social-media-trending3
A 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 Feed
social-media-trending4
A 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 Card
social-media-trending5
A 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 1
sonner-sonner-content-1
Sonner Content 2
sonner-sonner-content-2
Sonner Content 3
sonner-sonner-content-3
Sonner Content 4
sonner-sonner-content-4
Sonner Content 5
sonner-sonner-content-5
Sonner Interactive 1
sonner-sonner-interactive-1
Sonner Interactive 2
sonner-sonner-interactive-2
Sonner Interactive 3
sonner-sonner-interactive-3
Sonner Interactive 4
sonner-sonner-interactive-4
Sonner Position 1
sonner-sonner-position-1
Sonner Position 2
sonner-sonner-position-2
Sonner Position 3
sonner-sonner-position-3
Sonner Position 4
sonner-sonner-position-4
Sonner Position 5
sonner-sonner-position-5
Sonner Position 6
sonner-sonner-position-6
Sonner Promise 1
sonner-sonner-promise-1
Sonner Promise 2
sonner-sonner-promise-2
Sonner Promise 3
sonner-sonner-promise-3
Sonner Promise 4
sonner-sonner-promise-4
Sonner Standard 1
sonner-sonner-standard-1
Sonner Standard 2
sonner-sonner-standard-2
Sonner Standard 3
sonner-sonner-standard-3
Sonner Standard 4
sonner-sonner-standard-4
Sonner Standard 5
sonner-sonner-standard-5
Spinner Applications 1
spinner-spinner-applications-1
Spinner Applications 2
spinner-spinner-applications-2
Spinner Applications 3
spinner-spinner-applications-3
Spinner Button 1
spinner-spinner-button-1
Spinner Button 2
spinner-spinner-button-2
Spinner Button 3
spinner-spinner-button-3
Spinner Button 4
spinner-spinner-button-4
Spinner Button 5
spinner-spinner-button-5
Spinner Inline 1
spinner-spinner-inline-1
Spinner Inline 2
spinner-spinner-inline-2
Spinner Inline 3
spinner-spinner-inline-3
Spinner Inline 4
spinner-spinner-inline-4
Spinner Standard 1
spinner-spinner-standard-1
Spinner Standard 2
spinner-spinner-standard-2
Spinner Standard 3
spinner-spinner-standard-3
Spinner Standard 4
spinner-spinner-standard-4
Spinner Standard 5
spinner-spinner-standard-5
Stats Card 1 - Metric Card with Trend
stats-card1
A compact metric card displaying a value with trend indicator showing percentage change and direction.
Stats Card 10 - Metric Card with Accent Border
stats-card10
A metric card with a colored left border accent and pill badge showing percentage change.
Stats Card 2 - Metric Card with Sparkline
stats-card2
A metric card with a sparkline area chart showing recent trend data below the main value.
Stats Card 3 - Metric Card with Progress
stats-card3
A metric card showing progress toward a goal with a progress bar and target value.
Stats Card 4 - Metric Card with Comparison
stats-card4
A metric card displaying current and previous period values side by side for easy comparison.
Stats Card 5 - Metric Card with Icon
stats-card5
A metric card with a colored icon badge in the header alongside the title and value.
Stats Card 6 - Metric Card with Breakdown
stats-card6
A metric card showing a total value with a breakdown list of contributing segments below.
Stats Card 7 - Metric Card with Donut
stats-card7
A metric card with a mini donut chart showing percentage completion alongside the value.
Stats Card 8 - Metric Card with Status
stats-card8
A metric card with a color-coded status indicator showing healthy, warning, or critical states.
Stats Card 9 - Metric Card with Toggle
stats-card9
A metric card with MRR/ARR toggle to switch between monthly and annual recurring revenue views.
Stats 1
stats1
A component displaying performance stats in 3 columns, highlighted by large numbers and explanatory texts, centered around platform efficiency gains.
Stats 10
stats10
A 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 11
stats11
A statistical block displaying achievements with a unique background gradient, 2-column layout for stats, and decorative circles in the backdrop.
Stats 12
stats12
This 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 13
stats13
A component showcasing animated bars comparing values, with tooltips and percentage indicators for enhanced visual analysis. Includes a candy-striped background.
Stats 14
stats14
A countdown display component with an animated timer, promotional text, and a call-to-action button. Features a decorated container with dotted accents.
Stats 15
stats15
Dynamic 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 16
stats16
A component displaying statistics with a title, subtitle, a dynamic line chart, and three key metrics.
Stats 17
stats17
A 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 18
stats18
A component featuring a central radar chart and a row of stats below, displaying numerical values and descriptions.
Stats 19
stats19
A component displaying "Milestones" with a 6-column layout; includes a sticky label and lists stats in 2:3 column ratios.
Stats 2
stats2
A 3-column block displaying platform insights with arrows and icons denoting trends and values, includes descriptive texts.
Stats 22 - Yearly Metrics With Ruler Timeline
stats22
Animated fiscal-year KPIs above a ruler-style baseline with default and secondary CTAs. Year pills stay in chronological order and use light horizontal motion when selected.
Stats 4
stats4
A 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 5
stats5
A component displays performance metrics in 3 columns, highlighting values with dynamic icons and bold percentage figures.
Stats 6
stats6
A component displaying platform performance metrics and two buttons. It features a bold title, 4 columns for statistics, and dynamic text sizing.
Stats 7
stats7
A 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 8
stats8
A stats display component with a heading, description, and link, followed by a 4-column layout for statistics.
Stats 9
stats9
This component displays statistics and four feature cards in a 2-column layout, highlighting benefits and key metrics.
Switch Cards 1
switch-switch-cards-1
Switch Cards 2
switch-switch-cards-2
Switch Cards 3
switch-switch-cards-3
Switch Cards 4
switch-switch-cards-4
Switch Icons 1
switch-switch-icons-1
Switch Icons 2
switch-switch-icons-2
Switch Icons 3
switch-switch-icons-3
Switch Labeled 1
switch-switch-labeled-1
Switch Labeled 2
switch-switch-labeled-2
Switch Labeled 3
switch-switch-labeled-3
Switch Labeled 4
switch-switch-labeled-4
Switch Square 1
switch-switch-square-1
Switch Square 2
switch-switch-square-2
Switch Square 3
switch-switch-square-3
Switch Square 4
switch-switch-square-4
Switch Standard 1
switch-switch-standard-1
Switch Standard 2
switch-switch-standard-2
Switch Standard 3
switch-switch-standard-3
Switch Standard 4
switch-switch-standard-4
Table Advanced 1
table-table-advanced-1
Table Advanced 2
table-table-advanced-2
Table Advanced 3
table-table-advanced-3
Table Advanced 4
table-table-advanced-4
Table Standard 1
table-table-standard-1
Table Standard 2
table-table-standard-2
Table Standard 3
table-table-standard-3
Table Standard 4
table-table-standard-4
Tabs Advanced 1
tabs-tabs-advanced-1
Tabs Advanced 2
tabs-tabs-advanced-2
Tabs Advanced 3
tabs-tabs-advanced-3
Tabs Content 1
tabs-tabs-content-1
Tabs Content 2
tabs-tabs-content-2
Tabs Content 3
tabs-tabs-content-3
Tabs Layout 1
tabs-tabs-layout-1
Tabs Layout 2
tabs-tabs-layout-2
Tabs Layout 3
tabs-tabs-layout-3
Tabs Standard 1
tabs-tabs-standard-1
Tabs Standard 2
tabs-tabs-standard-2
Team 1
team1
A team showcase component with a title, subtitle, description, and a grid of member avatars, names, and roles, supporting up to 4 columns.
Team 10
team10
A block displaying a team with a title, introduction, and button, followed by a multi-column layout of team members' avatars and roles.
Team 11
team11
This 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 12
team12
A team showcase component with staggered animation for each member's photo, including name and role. Displays info in two columns with adjustable gaps.
Team 13
team13
A component featuring a team carousel with animated images/animations for mobile and a grid layout for other devices.
Team 15
team15
This 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 2
team2
A 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 3
team3
A 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 Photos
team36
A simple team or investors grid with square photos, names, and roles/companies in a responsive 5-column layout.
Team 4
team4
A 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 5
team5
A 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 6
team6
A 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 7
team7
A 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 8
team8
A carousel component showcasing team members with images, roles, and years of experience. Includes navigation buttons and a separator.
Team 9
team9
A component showcasing team members with tabbed categorization and search functionality, displaying member details within a grid layout of up to 4 columns.
Testimonial 1
testimonial1
A testimonial block displaying client feedback with navigation buttons, responsive carousel for mobile, and a 4-column masonry layout for larger screens.
Testimonial 10
testimonial10
A testimonial block with a central quote, author's name, role, and avatar in a vertical layout.
Testimonial 11
testimonial11
A component displaying a testimonial section with a rating block, supporting multiple columns, and dynamic testimonial visibility based on screen size.
Testimonial 12
testimonial12
A component displaying carousel testimonials in a 3-column layout, featuring image+text on the left and detailed stats on the right.
Testimonial 13
testimonial13
A component featuring a testimonial with overlapping avatars and a quote, showcased on a single-column layout with centered text.
Testimonial 14
testimonial14
A carousel component showcasing testimonials, featuring text quotes, avatars, names, roles, and a 5-star rating system. Includes navigation dots for carousel control.
Testimonial 15
testimonial15
A component with a 2-column layout, showcasing a headline, description, button, company logos, and 4 personalized testimonials with avatars.
Testimonial 16
testimonial16
A component showcasing user testimonials in a grid with 2 columns, expandable content, and avatars.
Testimonial 17
testimonial17
A testimonial component with a dynamic carousel for mobile and a static 3-column layout for larger screens, showcasing user feedback and logos.
Testimonial 18
testimonial18
A testimonial component displaying a 5-star rating, a highlighted quote, and the author's avatar and details.
Testimonial 19
testimonial19
A carousel showcasing client testimonials with a 5-star rating system, client roles, and avatars. Features auto-scroll and multi-column layout.
Testimonial 2
testimonial2
This component displays a bold, centered message with overlapping avatars and a large "Get started for free" button underneath.
Testimonial 20
testimonial20
A two-column testimonial block with dashed borders, featuring quotes, avatars, and names. Decorated with sparkle icons at its corners.
Testimonial 21
testimonial21
A component showcasing expert testimonials with a header, badges, and a 3-column layout of cards containing logos, quotes, and author info.
Testimonial 23
testimonial23
A masonry layout component displaying customer testimonials with avatars, feedback, and dates. Includes a title, subtitle, and a "See More" button.
Testimonial 24
testimonial24
A component showcasing testimonials in a masonry layout with 1-3 columns, featuring user reviews, avatars, and star ratings. Includes reward cards with icons.
Testimonial 25
testimonial25
Testimonial carousel with navigation buttons, cards displaying quotes, authors, roles, companies, and images.
Testimonial 26
testimonial26
A testimonial carousel block with dynamic navigation dots and decorative background patterns. Displays quotes, authors, roles, and logos.
Testimonial 27
testimonial27
This 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 28
testimonial28
A carousel component showcasing testimonials with avatars, names, and comments. Each slide has a dashed border with plus icons at the corners.
Testimonial 29
testimonial29
A testimonial carousel block with auto-rotation, featuring individual avatars, names, roles, and quotes. Layout includes centered items and pagination dots.
Testimonial 3
testimonial3
A testimonial component with a quote, image logo, and author attribution centered in a bordered block with adjustable padding.
Testimonial 30
testimonial30
Dynamic 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 Cards
testimonial31
A testimonial section with heading, description, CTA button, and a horizontal carousel of photo cards featuring quotes and author info.
Testimonial 33 - Bento Featured Testimonial Grid
testimonial33
A 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 Cards
testimonial34
Puts 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 List
testimonial35
Left-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 Studies
testimonial36
A 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 Strip
testimonial37
A 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 Blocks
testimonial38
A 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 Rows
testimonial39
Testimonials in a horizontal snap scroll on small screens and a two-column grid on desktop, with case studies as image-plus-content rows, built with Shadcn UI and the testimonial-case-studies model.
Testimonial 4
testimonial4
A testimonial component with 1 large image & text block plus 3 smaller text cards, each featuring an avatar.
Testimonial 40 - Muted Surface With Portrait Case Cards
testimonial40
A 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 Edges
testimonial41
A 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 Columns
testimonial42
A testimonial carousel with left-aligned heading and navigation, four photo cards visible on large screens, square portraits, and faded edge masking.
Testimonial 6
testimonial6
A carousel showcasing testimonials with navigational controls, featuring a title, user quotes, and their avatars. Each slide shows 1-3 testimonials based on size.
Testimonial 7
testimonial7
A component showcasing two auto-scrolling carousels of client testimonials, with avatars, names, roles, and quotes, plus a section header.
Testimonial 8
testimonial8
A 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 9
testimonial9
A testimonials grid with dynamic columns, showcasing clients' feedback, names, roles, and avatars, along with a headline and subtext.
Textarea Form 1
textarea-textarea-form-1
Textarea Form 2
textarea-textarea-form-2
Textarea Form 3
textarea-textarea-form-3
Textarea Form 4
textarea-textarea-form-4
Textarea Form 5
textarea-textarea-form-5
Textarea Labeled 1
textarea-textarea-labeled-1
Textarea Labeled 2
textarea-textarea-labeled-2
Textarea Labeled 3
textarea-textarea-labeled-3
Textarea Labeled 4
textarea-textarea-labeled-4
Textarea Standard 1
textarea-textarea-standard-1
Textarea Standard 2
textarea-textarea-standard-2
Textarea Standard 3
textarea-textarea-standard-3
Textarea Standard 4
textarea-textarea-standard-4
Timeline 1
timeline1
A component presenting a 3-step process: "Data Integration," "Custom Configuration," and "Scale Your Business," each with icons, titles, and descriptions.
Timeline 10
timeline10
A timeline component with 4 columns, highlighting project phases with dates, titles, and descriptions, using animation to show current progress.
Timeline 11
timeline11
A 4-column timeline component showcasing phases with icons, dates, titles, and descriptions. Features an animated progress indicator.
Timeline 12
timeline12
An interactive timeline component with four tabs. Each tab reveals content on a different phase, including dates, descriptions, animated images, and a download button.
Timeline 13
timeline13
A component displaying a product launch timeline with 3 phases, progress bars, and durations. Features an animated timeline indicator.
Timeline 14
timeline14
A timeline component showcasing key milestones, uses intersection observer for active item highlight, includes sticky year indicator.
Timeline 2
timeline2
A 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 3
timeline3
A 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 4
timeline4
A component showcasing a step-by-step guide with alternating layout, custom badges, icons, and diagonal patterns.
Timeline 5
timeline5
A 2-column layout component featuring static content on the left and scrollable cards on the right, each with an icon, title, and description.
Timeline 6
timeline6
A 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 7
timeline7
A component with a stepper UI to guide through a process, featuring dynamic progress indication, navigational buttons, and transition animations.
Timeline 8
timeline8
A vertical timeline block, showcasing events with dates, displayed in a centered max-width container with decorative separators.
Timeline 9
timeline9
This component displays a vertical timeline of key events in artificial intelligence history, using cards with titles, dates, and content.
Todo 1
todo1
This 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 10
todo10
This 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 2
todo2
This 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 3
todo3
This 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 4
todo4
This 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 5
todo5
This 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 6
todo6
This 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 7
todo7
This 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 8
todo8
This 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 9
todo9
This 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 1
toggle-group-toggle-group-sizes-1
Toggle Group Sizes 2
toggle-group-toggle-group-sizes-2
Toggle Group Sizes 3
toggle-group-toggle-group-sizes-3
Toggle Group Standard 1
toggle-group-toggle-group-standard-1
Toggle Group Standard 2
toggle-group-toggle-group-standard-2
Toggle Group Standard 3
toggle-group-toggle-group-standard-3
Toggle Group Standard 4
toggle-group-toggle-group-standard-4
Toggle Sizes 1
toggle-toggle-sizes-1
Toggle Sizes 2
toggle-toggle-sizes-2
Toggle Sizes 3
toggle-toggle-sizes-3
Toggle Standard 1
toggle-toggle-standard-1
Toggle Standard 2
toggle-toggle-standard-2
Toggle Standard 3
toggle-toggle-standard-3
Toggle Standard 4
toggle-toggle-standard-4
Tooltip Content 1
tooltip-tooltip-content-1
Tooltip Content 2
tooltip-tooltip-content-2
Tooltip Content 3
tooltip-tooltip-content-3
Tooltip Content 4
tooltip-tooltip-content-4
Tooltip Standard 1
tooltip-tooltip-standard-1
Tooltip Standard 2
tooltip-tooltip-standard-2
Tooltip Standard 3
tooltip-tooltip-standard-3
Tooltip Standard 4
tooltip-tooltip-standard-4
Trust Strip 1
trust-strip1
This 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 2
trust-strip2
This 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 3
trust-strip3
This 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 4
trust-strip4
This 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 Card
user-profile1
A centered profile card with avatar, name, role, bio, and action buttons for messaging and following.
User Profile 10 - Portrait Profile Card
user-profile10
A profile card with large portrait image, verification badge, and follow button.
User Profile 11 - Full Image Profile Card
user-profile11
A profile card with full-bleed background image and overlay text.
User Profile 12 - Social Profile Card
user-profile12
A social media style profile card with cover image, avatar, bio, and engagement stats.
User Profile 13 - Freelancer Profile Card
user-profile13
A freelancer profile card with skills, rating, client count, and hourly rate.
User Profile 14 - Full-Bleed Freelancer Card
user-profile14
A dramatic freelancer card with full-bleed background image and gradient overlay.
User Profile 2 - Profile with Stats
user-profile2
A horizontal profile layout with avatar, name, role, social links, follower stats, and action buttons.
User Profile 3 - Full Profile with Cover
user-profile3
A detailed profile card with cover image, overlapping avatar, bio, location, join date, social links, stats, and skill badges.
User Profile 4 - Compact Inline Profile
user-profile4
A small pill-shaped profile chip with avatar, name, role, and status indicator for inline use.
User Profile 5 - Team Member Card
user-profile5
A compact team member card with gradient header, overlapping avatar, and contact action buttons.
User Profile 6 - Profile with Tabs
user-profile6
A profile card with tabbed sections for About, Experience, and Projects content.
User Profile 9 - Profile Dashboard
user-profile9
A full-width profile dashboard with cover image, stats cards showing metrics with change indicators.
Waitlist 1
waitlist1
A component featuring a "Join the Waitlist" title, a description, an email input field, and a button. Includes avatars showing user count.
Waitlist 2
waitlist2
This 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 3
waitlist3
The 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 1
wishlist1
This 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 2
wishlist2
This 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.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information