S
shadcnblocks
/
shadcn-ui-blocks
/
blocks
Files
Code
Info
About
about1
A multi-section about block with mission statement, values grid with icons, and image panels for company storytelling.
About
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
about13
A six-column about section with large story headline, team intro text, avatar profile card, philosophy paragraph, and full-width image.
About
about14
A six-column about section with headline, full-width hero image, labeled intro text, avatar profile, and philosophy statement.
About
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
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
about17
A seven-column profile section with role and timezone info, bio text, interactive tab navigation, and tab-controlled image display.
About
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
about19
A seven-column about section with large bordered image on the left and headline, text, quote attribution with avatar on the right.
About
about2
A comprehensive about block with centered intro, asymmetric image grid, stats section, logo strip, and benefit cards with testimonial.
About
about28
A two-column about section with alternating image and text blocks, featuring staggered image pairs and multi-paragraph text with optional CTA.
About
about3
A two-column about section with main image, breakout card, logo strip, and achievements stats grid on muted background.
About
about4
A centered about section with six-image grid, two-column vision and creators text blocks, and muted CTA banner.
About
about5
A developer-focused about section with two-column intro, large image, tech logos, origin story, and milestone cards.
About
about6
A two-column about section with story text and staggered photo grids showing team and workplace imagery.
About
about7
A narrative about section with offset image layout, product philosophy text, team photos, and careers CTA button.
About
about8
A fintech-style about section with plus-sign pattern background, stats row, mission narrative, image carousel, and founding team.
About
about9
A personal profile section with large team photo, role and location info with flag icon, bio text, and secondary workspace image.
Accept-invite
accept-invite1
A two-column invitation acceptance screen with Google sign-in, email input form, welcome message, and footer links.
Accept-invite
accept-invite2
A compact centered invitation card with host avatar initial, personalized message, and accept/decline buttons with expiration notice.
Accordion/accordion-form-
accordion-accordion-form-1
A accordion/accordion-form- example
Accordion/accordion-form-
accordion-accordion-form-2
A accordion/accordion-form- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-1
A accordion/accordion-multi-level- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-2
A accordion/accordion-multi-level- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-3
A accordion/accordion-multi-level- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-4
A accordion/accordion-multi-level- example
Accordion/accordion-standard-
accordion-accordion-standard-1
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-2
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-3
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-4
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-5
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-6
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-7
A accordion/accordion-standard- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-1
A accordion/accordion-subtitle- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-2
A accordion/accordion-subtitle- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-3
A accordion/accordion-subtitle- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-4
A accordion/accordion-subtitle- example
Accordion/accordion-tabs-
accordion-accordion-tabs-1
A accordion/accordion-tabs- example
Accordion/accordion-tabs-
accordion-accordion-tabs-2
A accordion/accordion-tabs- example
Accordion/accordion-tabs-
accordion-accordion-tabs-3
A accordion/accordion-tabs- example
Accordion/accordion-tabs-
accordion-accordion-tabs-4
A accordion/accordion-tabs- example
Address-book
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
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/alert-error-
alert-alert-error-1
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-2
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-3
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-4
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-5
A alert/alert-error- example
Alert/alert-info-
alert-alert-info-1
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-2
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-3
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-4
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-5
A alert/alert-info- example
Alert/alert-standard-
alert-alert-standard-1
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-2
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-3
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-4
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-5
A alert/alert-standard- example
Alert/alert-success-
alert-alert-success-1
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-2
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-3
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-4
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-5
A alert/alert-success- example
Alert/alert-warning-
alert-alert-warning-1
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-2
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-3
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-4
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-5
A alert/alert-warning- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-1
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-2
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-3
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-4
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-5
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-6
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-1
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-2
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-3
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-4
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-5
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-1
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-2
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-3
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-4
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-5
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-6
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-7
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-1
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-2
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-3
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-4
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-5
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-6
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-7
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-1
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-2
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-3
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-4
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-5
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-6
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-7
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-1
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-2
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-3
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-4
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-5
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-6
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-7
A alert-dialog/alert-dialog-success- example
Application-shell
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
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
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
application-shell12
Two-tier sidebar with collapsible panel, organization switcher, and animated transitions.
Application-shell
application-shell13
Top navigation bar with dropdown menus, search field, organization switcher, and mobile bottom navigation.
Application-shell
application-shell14
Cryptocurrency exchange interface with wallet menu, token favorites, notifications, and rounded navigation tabs.
Application-shell
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
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
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
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
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
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
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
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/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-1
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-2
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-3
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-4
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-5
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-6
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-7
A aspect-ratio/aspect-ratio-standard- example
Avatar/avatar-square-
avatar-avatar-square-1
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-2
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-3
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-4
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-5
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-6
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-7
A avatar/avatar-square- example
Avatar/avatar-standard-
avatar-avatar-standard-1
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-10
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-11
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-12
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-13
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-14
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-15
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-16
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-17
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-18
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-19
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-2
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-20
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-21
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-22
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-23
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-24
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-25
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-26
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-27
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-3
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-4
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-5
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-6
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-7
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-8
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-9
A avatar/avatar-standard- example
Avatar-group/avatar-group-animated-
avatar-group-avatar-group-animated-1
A avatar-group/avatar-group-animated- example
Avatar-group/avatar-group-border-
avatar-group-avatar-group-border-1
A avatar-group/avatar-group-border- example
Avatar-group/avatar-group-loose-
avatar-group-avatar-group-loose-1
A avatar-group/avatar-group-loose- example
Avatar-group/avatar-group-loose-border-
avatar-group-avatar-group-loose-border-1
A avatar-group/avatar-group-loose-border- example
Avatar-group/avatar-group-max-
avatar-group-avatar-group-max-1
A avatar-group/avatar-group-max- example
Avatar-group/avatar-group-standard-
avatar-group-avatar-group-standard-1
A avatar-group/avatar-group-standard- example
Avatar-group/avatar-group-tight-
avatar-group-avatar-group-tight-1
A avatar-group/avatar-group-tight- example
Avatar-group/avatar-group-tight-border-
avatar-group-avatar-group-tight-border-1
A avatar-group/avatar-group-tight-border- example
Avatar-group/avatar-group-tooltip-
avatar-group-avatar-group-tooltip-1
A avatar-group/avatar-group-tooltip- example
Awards
awards1
A component displaying a "Milestones" heading and a table listing awards with names, descriptions, and years, across 5 columns.
Awards
awards2
An awards listing component with a 2 column grid layout, displaying award titles and years across two sections.
Awards
awards3
An awards list component with a hover animation, featuring award titles, categories, and years. Uses colored indicators per award.
Awards
awards4
A component displays awards in a table with details like logo, name, nomination, and year, with a large title and a date range subtitle.
Awards
awards5
A component displays a list of awards in a 6-column layout with interactive elements that reveal award images on hover.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Badge/badge-destructive-
badge-badge-destructive-1
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-2
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-3
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-4
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-5
A badge/badge-destructive- example
Badge/badge-outline-
badge-badge-outline-1
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-2
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-3
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-4
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-5
A badge/badge-outline- example
Badge/badge-secondary-
badge-badge-secondary-1
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-2
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-3
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-4
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-5
A badge/badge-secondary- example
Badge/badge-standard-
badge-badge-standard-1
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-2
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-3
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-4
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-5
A badge/badge-standard- example
Banner
banner1
A dismissible banner component with a title, description, external link, and close button. It spans full width with a shadow border.
Banner
banner2
An alert component with dismissible functionality, featuring a title, description, and button. It shows an icon, supports hidden on mobile devices.
Banner
banner3
A subscription block featuring a title, description, email input, and subscribe button. Includes a dismissible icon and adapts layout between single and multi-column views.
Banner
banner4
An informational banner component with a title, description, and link button. Includes an icon and close function.
Banner
banner5
A dismissible banner component with an icon, title, description, and external link button. Features a close button, adapts layout from column to row on wider screens.
Banner
banner6
A dismissible banner featuring overlapping avatars, a text description, and a close button.
Banner
banner7
A dismissible banner with a promotional message, vertical separator, and "Learn More" link. Features a close button.
Blog
blog1
A component with a blog posts layout, featuring a category filter and a 1-3 column grid of posts with summaries, images, and labels.
Blog
blog11
A component with a sticky header displaying "Blog Posts" and navigation links, beside a 2-column grid of blog entries featuring images and titles.
Blog
blog12
A blog preview block with a header, three article cards in a 3-column layout, and a "View All Blogs" button. Each card includes an image, title, summary, author avatar, and read time.
Blog
blog13
A component showcasing a collection of articles with an introductory badge, title, description, and a link to view all. Features a 3-column layout of articles with images, badges, titles, publish dates, and read more links.
Blog
blog14
A blog component showcasing 1 main post in a 2-column layout and 3 popular posts in a 3-column layout, featuring images, categories, and summaries.
Blog
blog16
A blog section showcasing articles with dates, titles, categories, and team logos in a 4-column layout, featuring hover effects and navigation icons.
Blog
blog17
A component showcases blog articles with filtering. Layout includes an article display area (3-column wide) and a category filter sidebar (1-column), plus introductory text. Features dynamic filtering by category.
Blog
blog19
This component displays a block titled "Related articles" with a button to see all articles. It features a 1 to 4 column grid layout of article summaries.
Blog
blog21
A carousel component displaying blog posts with navigation arrows, tags, and a "View All Articles" button.
Blog
blog22
A blog component showcasing a featured post with image, title, and author avatar followed by a list of secondary posts in a two-column layout with images.
Blog
blog23
A component displaying a tagline, heading, and description at the top, followed by a series of articles with images, labels, authors, dates, and summaries, ending with a "View all" button.
Blog
blog24
A component displaying a collection of blog posts with images, titles, summaries, labels, authors, and dates, plus a view-all button.
Blog
blog26
A component displaying a featured post with an image, summary, and tags, alongside a list of latest posts with their titles, authors, and tags. It's structured in a two-column layout with dynamic text effects.
Blog
blog27
A component displaying blog articles with filters, featuring a breadcrumb navigator, an email form, and a "Load More" button, arranged in up to three columns.
Blog
blog28
A component displaying five tech blog posts in a grid with adaptive column counts based on screen size, featuring prominent display for the first post.
Blog
blog29
A component displaying blog posts with dates, titles, content snippets, tags, and a link icon. Each post is separated by a line.
Blog
blog30
A component displaying blog posts in a column layout, including images, titles, dates, and descriptions. Features a "Read" button with an arrow icon.
Blog
blog4
A blog component with a header, "View all posts" button, and a grid layout (up to 3 columns) displaying posts with image, label, title, summary, author avatar, and publish date.
Blog
blog5
A blog component showcasing posts in a grid layout with image, label, title, summary, and author info. Includes a header with a title and optional button.
Blog
blog6
A blog display component with a headline, intro text, and a grid of posts (up to 3 columns). It features images, badges, authors' avatars, and pagination.
Blog
blog7
A blog showcase block with a header, description, and 3-column grid of posts, featuring images, titles, summaries, and read-more links.
Blog
blog8
A component displaying blog posts in a grid with images, summaries, tags, and author details. Features include text hover effects and a read-more link.
Blogpost
blogpost1
A blog post component featuring title, author with avatar, publication date, and content including images, alerts, and a table.
Blogpost
blogpost2
A component with a sticky aside featuring a back link, title, and author's avatar, paired with a main article including an image and text content.
Blogpost
blogpost3
A component featuring a central article with dynamic side navigation and a call-to-action block, including images, tables, and alerts. It's structured in a 3-column layout for larger displays.
Blogpost
blogpost4
A component displaying an article with breadcrumbs, author details, and sections with dynamic navigation. It features sticky social share icons and a "Back to top" button.
Blogpost
blogpost5
A blog post component with dynamic navigation highlighting active sections, breadcrumbs, author info, and social share buttons. Layout includes an 8:3 column split for content and sidebar.
Blogpost
blogpost6
A blog post component with dynamic breadcrumb navigation, author bio, social sharing, and interactive chapter selection.
Blogpost
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
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
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
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/border-button-basic
border-button-border-button-basic
A border-button/border-button-basic example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-1
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-2
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-3
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-4
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-5
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-6
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-7
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-1
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-2
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-3
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-4
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-5
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-6
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-7
A breadcrumb/breadcrumb-standard- example
Button/button-destructive-
button-button-destructive-1
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-2
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-3
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-4
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-5
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-6
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-7
A button/button-destructive- example
Button/button-link-
button-button-link-1
A button/button-link- example
Button/button-link-
button-button-link-2
A button/button-link- example
Button/button-link-
button-button-link-3
A button/button-link- example
Button/button-link-
button-button-link-4
A button/button-link- example
Button/button-link-
button-button-link-5
A button/button-link- example
Button/button-link-
button-button-link-6
A button/button-link- example
Button/button-link-
button-button-link-7
A button/button-link- example
Button/button-outline-
button-button-outline-1
A button/button-outline- example
Button/button-outline-
button-button-outline-2
A button/button-outline- example
Button/button-outline-
button-button-outline-3
A button/button-outline- example
Button/button-outline-
button-button-outline-4
A button/button-outline- example
Button/button-outline-
button-button-outline-5
A button/button-outline- example
Button/button-outline-
button-button-outline-6
A button/button-outline- example
Button/button-outline-
button-button-outline-7
A button/button-outline- example
Button/button-secondary-
button-button-secondary-1
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-2
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-3
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-4
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-5
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-6
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-7
A button/button-secondary- example
Button/button-standard-
button-button-standard-1
A button/button-standard- example
Button/button-standard-
button-button-standard-2
A button/button-standard- example
Button/button-standard-
button-button-standard-3
A button/button-standard- example
Button/button-standard-
button-button-standard-4
A button/button-standard- example
Button/button-standard-
button-button-standard-5
A button/button-standard- example
Button/button-standard-
button-button-standard-6
A button/button-standard- example
Button/button-standard-
button-button-standard-7
A button/button-standard- example
Button-group/button-group-actions-
button-group-button-group-actions-1
A button-group/button-group-actions- example
Button-group/button-group-actions-
button-group-button-group-actions-2
A button-group/button-group-actions- example
Button-group/button-group-actions-
button-group-button-group-actions-3
A button-group/button-group-actions- example
Button-group/button-group-actions-
button-group-button-group-actions-4
A button-group/button-group-actions- example
Button-group/button-group-advanced-
button-group-button-group-advanced-1
A button-group/button-group-advanced- example
Button-group/button-group-advanced-
button-group-button-group-advanced-2
A button-group/button-group-advanced- example
Button-group/button-group-advanced-
button-group-button-group-advanced-3
A button-group/button-group-advanced- example
Button-group/button-group-advanced-
button-group-button-group-advanced-4
A button-group/button-group-advanced- example
Button-group/button-group-badges-
button-group-button-group-badges-1
A button-group/button-group-badges- example
Button-group/button-group-badges-
button-group-button-group-badges-2
A button-group/button-group-badges- example
Button-group/button-group-badges-
button-group-button-group-badges-3
A button-group/button-group-badges- example
Button-group/button-group-badges-
button-group-button-group-badges-4
A button-group/button-group-badges- example
Button-group/button-group-display-
button-group-button-group-display-1
A button-group/button-group-display- example
Button-group/button-group-display-
button-group-button-group-display-2
A button-group/button-group-display- example
Button-group/button-group-display-
button-group-button-group-display-3
A button-group/button-group-display- example
Button-group/button-group-display-
button-group-button-group-display-4
A button-group/button-group-display- example
Button-group/button-group-forms-
button-group-button-group-forms-1
A button-group/button-group-forms- example
Button-group/button-group-forms-
button-group-button-group-forms-2
A button-group/button-group-forms- example
Button-group/button-group-forms-
button-group-button-group-forms-3
A button-group/button-group-forms- example
Button-group/button-group-forms-
button-group-button-group-forms-4
A button-group/button-group-forms- example
Button-group/button-group-interactive-
button-group-button-group-interactive-1
A button-group/button-group-interactive- example
Button-group/button-group-interactive-
button-group-button-group-interactive-2
A button-group/button-group-interactive- example
Button-group/button-group-interactive-
button-group-button-group-interactive-3
A button-group/button-group-interactive- example
Button-group/button-group-interactive-
button-group-button-group-interactive-4
A button-group/button-group-interactive- example
Button-group/button-group-media-
button-group-button-group-media-1
A button-group/button-group-media- example
Button-group/button-group-media-
button-group-button-group-media-2
A button-group/button-group-media- example
Button-group/button-group-media-
button-group-button-group-media-3
A button-group/button-group-media- example
Button-group/button-group-media-
button-group-button-group-media-4
A button-group/button-group-media- example
Button-group/button-group-navigation-
button-group-button-group-navigation-1
A button-group/button-group-navigation- example
Button-group/button-group-navigation-
button-group-button-group-navigation-2
A button-group/button-group-navigation- example
Button-group/button-group-navigation-
button-group-button-group-navigation-3
A button-group/button-group-navigation- example
Button-group/button-group-patterns-
button-group-button-group-patterns-1
A button-group/button-group-patterns- example
Button-group/button-group-patterns-
button-group-button-group-patterns-2
A button-group/button-group-patterns- example
Button-group/button-group-patterns-
button-group-button-group-patterns-3
A button-group/button-group-patterns- example
Button-group/button-group-patterns-
button-group-button-group-patterns-4
A button-group/button-group-patterns- example
Button-group/button-group-standard-
button-group-button-group-standard-1
A button-group/button-group-standard- example
Button-group/button-group-standard-
button-group-button-group-standard-2
A button-group/button-group-standard- example
Button-group/button-group-standard-
button-group-button-group-standard-3
A button-group/button-group-standard- example
Button-group/button-group-standard-
button-group-button-group-standard-4
A button-group/button-group-standard- example
Calendar/calendar-dialog-
calendar-calendar-dialog-1
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-2
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-3
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-4
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-5
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-6
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-7
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-8
A calendar/calendar-dialog- example
Calendar/calendar-standard-
calendar-calendar-standard-1
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-2
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-3
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-4
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-5
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-6
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-7
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-8
A calendar/calendar-standard- example
Card/card-standard-
card-card-standard-1
A card/card-standard- example
Card/card-standard-
card-card-standard-2
A card/card-standard- example
Card/card-standard-
card-card-standard-3
A card/card-standard- example
Card/card-standard-
card-card-standard-4
A card/card-standard- example
Careers
careers1
A component displaying career opportunities by department, with clickable roles that reveal more via an arrow icon animation.
Careers
careers2
A component showcasing job openings with a header, grid layout (single column expanding to four on large screens) for each job, including title, type, location, and an apply button.
Careers
careers3
A block displaying job openings by category, with titles, descriptions, locations, and links. Uses badges for categories and icons for location/navigation.
Careers
careers4
A component displaying job openings with categories, titles, and locations, styled with a central heading and grid layout for job listings.
Careers
careers5
A component displaying job openings with titles, categories, descriptions, and details on type and location. It has a header and lists jobs in a single column.
Careers
careers6
A dual-column block showcasing job openings with badges for categories and icons for job types and locations.
Careers
careers7
A component listing job categories and jobs with titles, locations, and "View listing" buttons in a structured layout.
Careers
careers8
A dynamic job listing component with a filter for departments, displaying job categories and openings in grids up to 3 columns wide.
Careers
careers9
A component listing job openings with department, role, location, and a link, featuring a heading, introduction, and a call-to-action for unsolicited applications.
Carousel/carousel-standard-
carousel-carousel-standard-1
A carousel/carousel-standard- example
Carousel/carousel-standard-
carousel-carousel-standard-2
A carousel/carousel-standard- example
Carousel/carousel-standard-
carousel-carousel-standard-3
A carousel/carousel-standard- example
Carousel/carousel-standard-
carousel-carousel-standard-4
A carousel/carousel-standard- example
Case-studies
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
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
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
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
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-study
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
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
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
changelog1
A component displaying a changelog with entries including version info, date, and details. Features badges, buttons, and conditional rendering of lists and images.
Changelog
changelog2
A changelog component with a title, NEW badge, description, email signup, and dated entries with images, headlines, and text links.
Changelog
changelog3
A component displaying updates with sections for dates, tags (e.g., 'Maintenance'), and content including images. Uses a two-column layout on desktop.
Changelog
changelog4
A changelog component with social links, a scroll progress indicator, and two updates sections featuring avatars, dates, large text headers, and detailed lists.
Changelog
changelog5
A component that displays changelogs with features like a sticky timeline navigation, vertical separators, and scroll-spy functionality for active section highlighting.
Changelog
changelog6
A changelog component displays updates with dialogs for detailed view, including versions, dates, images, contributors, and excerpts. Features tooltip actions.
Changelog
changelog8
A component displaying a changelog with a scrollspy sidebar. Features dynamic scroll highlighting & smooth navigation to sections.
Chart-card
chart-card1
A card containing an area chart with gradient fill, grid lines, and interactive tooltips.
Chart-card
chart-card10
A vertical stacked bar chart card showing multiple data series as segments within each bar.
Chart-card
chart-card11
A horizontal 100% stacked bar chart showing proportional breakdown across categories.
Chart-card
chart-card12
A minimal stacked bar chart with category labels only, no Y-axis for a cleaner look.
Chart-card
chart-card13
A bar chart with values above and below zero, using different colors for positive and negative values.
Chart-card
chart-card14
An area chart showing a min/max range band with an average line overlay.
Chart-card
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
chart-card16
A circular progress ring showing percentage completion toward a goal with centered value display.
Chart-card
chart-card17
A speedometer-style half-circle gauge with needle indicator and colored performance zones.
Chart-card
chart-card18
Concentric progress rings showing multiple metrics simultaneously, inspired by fitness activity trackers.
Chart-card
chart-card19
A circular bar chart with concentric bars of varying lengths representing different categories.
Chart-card
chart-card2
An area chart card with tabs to switch between 7-day, 30-day, and 90-day time periods.
Chart-card
chart-card20
A radar/spider chart showing multiple dimensions as a polygon shape for multi-attribute comparison.
Chart-card
chart-card21
A funnel visualization showing progressive conversion through stages with decreasing bar widths.
Chart-card
chart-card22
A treemap visualization showing hierarchical data as nested rectangles sized by value.
Chart-card
chart-card23
A scatter plot showing correlation between two variables as positioned dots.
Chart-card
chart-card24
A bubble chart with variable-sized dots encoding three dimensions of data plus color for grouping.
Chart-card
chart-card25
An area chart with a horizontal reference line showing a target or benchmark value.
Chart-card
chart-card26
A bullet chart showing actual value against a target with colored performance ranges in the background.
Chart-card
chart-card27
An area chart with colored background zones indicating normal, warning, and critical threshold ranges.
Chart-card
chart-card3
A card containing a vertical bar chart with rounded tops and interactive tooltips.
Chart-card
chart-card4
A card containing a horizontal bar chart with category labels on the left and values extending right.
Chart-card
chart-card5
A donut chart card with center stat display and a legend list showing category breakdowns.
Chart-card
chart-card6
A line chart card comparing two data series with a legend, using solid and dashed lines.
Chart-card
chart-card7
An area chart card with a footer showing trend indicator and summary text.
Chart-card
chart-card8
A grouped bar chart card comparing two data series side by side with a legend.
Chart-card
chart-card9
A stacked area chart card showing multiple data series layered to display composition over time.
Chart/chart-area-axes
chart-chart-area-axes
A chart/chart-area-axes example
Chart/chart-area-default
chart-chart-area-default
A chart/chart-area-default example
Chart/chart-area-gradient
chart-chart-area-gradient
A chart/chart-area-gradient example
Chart/chart-area-icons
chart-chart-area-icons
A chart/chart-area-icons example
Chart/chart-area-interactive
chart-chart-area-interactive
A chart/chart-area-interactive example
Chart/chart-area-legend
chart-chart-area-legend
A chart/chart-area-legend example
Chart/chart-area-linear
chart-chart-area-linear
A chart/chart-area-linear example
Chart/chart-area-stacked
chart-chart-area-stacked
A chart/chart-area-stacked example
Chart/chart-area-stacked-expand
chart-chart-area-stacked-expand
A chart/chart-area-stacked-expand example
Chart/chart-area-step
chart-chart-area-step
A chart/chart-area-step example
Chart/chart-bar-active
chart-chart-bar-active
A chart/chart-bar-active example
Chart/chart-bar-default
chart-chart-bar-default
A chart/chart-bar-default example
Chart/chart-bar-horizontal
chart-chart-bar-horizontal
A chart/chart-bar-horizontal example
Chart/chart-bar-interactive
chart-chart-bar-interactive
A chart/chart-bar-interactive example
Chart/chart-bar-label
chart-chart-bar-label
A chart/chart-bar-label example
Chart/chart-bar-label-custom
chart-chart-bar-label-custom
A chart/chart-bar-label-custom example
Chart/chart-bar-mixed
chart-chart-bar-mixed
A chart/chart-bar-mixed example
Chart/chart-bar-multiple
chart-chart-bar-multiple
A chart/chart-bar-multiple example
Chart/chart-bar-negative
chart-chart-bar-negative
A chart/chart-bar-negative example
Chart/chart-bar-stacked
chart-chart-bar-stacked
A chart/chart-bar-stacked example
Chart/chart-line-default
chart-chart-line-default
A chart/chart-line-default example
Chart/chart-line-dots
chart-chart-line-dots
A chart/chart-line-dots example
Chart/chart-line-dots-colors
chart-chart-line-dots-colors
A chart/chart-line-dots-colors example
Chart/chart-line-dots-custom
chart-chart-line-dots-custom
A chart/chart-line-dots-custom example
Chart/chart-line-interactive
chart-chart-line-interactive
A chart/chart-line-interactive example
Chart/chart-line-label
chart-chart-line-label
A chart/chart-line-label example
Chart/chart-line-label-custom
chart-chart-line-label-custom
A chart/chart-line-label-custom example
Chart/chart-line-linear
chart-chart-line-linear
A chart/chart-line-linear example
Chart/chart-line-multiple
chart-chart-line-multiple
A chart/chart-line-multiple example
Chart/chart-line-step
chart-chart-line-step
A chart/chart-line-step example
Chart/chart-pie-donut
chart-chart-pie-donut
A chart/chart-pie-donut example
Chart/chart-pie-donut-active
chart-chart-pie-donut-active
A chart/chart-pie-donut-active example
Chart/chart-pie-donut-text
chart-chart-pie-donut-text
A chart/chart-pie-donut-text example
Chart/chart-pie-interactive
chart-chart-pie-interactive
A chart/chart-pie-interactive example
Chart/chart-pie-label
chart-chart-pie-label
A chart/chart-pie-label example
Chart/chart-pie-label-custom
chart-chart-pie-label-custom
A chart/chart-pie-label-custom example
Chart/chart-pie-label-list
chart-chart-pie-label-list
A chart/chart-pie-label-list example
Chart/chart-pie-legend
chart-chart-pie-legend
A chart/chart-pie-legend example
Chart/chart-pie-separator-none
chart-chart-pie-separator-none
A chart/chart-pie-separator-none example
Chart/chart-pie-simple
chart-chart-pie-simple
A chart/chart-pie-simple example
Chart/chart-pie-stacked
chart-chart-pie-stacked
A chart/chart-pie-stacked example
Chart/chart-radar-default
chart-chart-radar-default
A chart/chart-radar-default example
Chart/chart-radar-dots
chart-chart-radar-dots
A chart/chart-radar-dots example
Chart/chart-radar-grid-circle
chart-chart-radar-grid-circle
A chart/chart-radar-grid-circle example
Chart/chart-radar-grid-circle-fill
chart-chart-radar-grid-circle-fill
A chart/chart-radar-grid-circle-fill example
Chart/chart-radar-grid-circle-no-lines
chart-chart-radar-grid-circle-no-lines
A chart/chart-radar-grid-circle-no-lines example
Chart/chart-radar-grid-custom
chart-chart-radar-grid-custom
A chart/chart-radar-grid-custom example
Chart/chart-radar-grid-fill
chart-chart-radar-grid-fill
A chart/chart-radar-grid-fill example
Chart/chart-radar-grid-none
chart-chart-radar-grid-none
A chart/chart-radar-grid-none example
Chart/chart-radar-icons
chart-chart-radar-icons
A chart/chart-radar-icons example
Chart/chart-radar-label-custom
chart-chart-radar-label-custom
A chart/chart-radar-label-custom example
Chart/chart-radar-legend
chart-chart-radar-legend
A chart/chart-radar-legend example
Chart/chart-radar-lines-only
chart-chart-radar-lines-only
A chart/chart-radar-lines-only example
Chart/chart-radar-multiple
chart-chart-radar-multiple
A chart/chart-radar-multiple example
Chart/chart-radar-radius
chart-chart-radar-radius
A chart/chart-radar-radius example
Chart/chart-radial-grid
chart-chart-radial-grid
A chart/chart-radial-grid example
Chart/chart-radial-label
chart-chart-radial-label
A chart/chart-radial-label example
Chart/chart-radial-shape
chart-chart-radial-shape
A chart/chart-radial-shape example
Chart/chart-radial-simple
chart-chart-radial-simple
A chart/chart-radial-simple example
Chart/chart-radial-stacked
chart-chart-radial-stacked
A chart/chart-radial-stacked example
Chart/chart-radial-text
chart-chart-radial-text
A chart/chart-radial-text example
Chart/chart-tooltip-advanced
chart-chart-tooltip-advanced
A chart/chart-tooltip-advanced example
Chart/chart-tooltip-default
chart-chart-tooltip-default
A chart/chart-tooltip-default example
Chart/chart-tooltip-formatter
chart-chart-tooltip-formatter
A chart/chart-tooltip-formatter example
Chart/chart-tooltip-icons
chart-chart-tooltip-icons
A chart/chart-tooltip-icons example
Chart/chart-tooltip-indicator-line
chart-chart-tooltip-indicator-line
A chart/chart-tooltip-indicator-line example
Chart/chart-tooltip-indicator-none
chart-chart-tooltip-indicator-none
A chart/chart-tooltip-indicator-none example
Chart/chart-tooltip-label-custom
chart-chart-tooltip-label-custom
A chart/chart-tooltip-label-custom example
Chart/chart-tooltip-label-formatter
chart-chart-tooltip-label-formatter
A chart/chart-tooltip-label-formatter example
Chart/chart-tooltip-label-none
chart-chart-tooltip-label-none
A chart/chart-tooltip-label-none example
Chart-group
chart-group1
A two-column layout with an area chart and bar chart displayed side by side.
Chart-group
chart-group10
A DevOps-style view with request volume chart and service health status panel.
Chart-group
chart-group11
A card with a working date range picker that filters chart data and updates summary statistics.
Chart-group
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
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
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
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
chart-group2
A layout with one large primary chart spanning full width and two smaller detail charts below.
Chart-group
chart-group3
A main chart showing monthly trends with sparkline cards zooming into the last 7 days of key metrics.
Chart-group
chart-group4
A single card with tabs to switch between different chart visualizations of related metrics.
Chart-group
chart-group5
A comparison layout with a dual-line chart and summary card showing year-over-year growth.
Chart-group
chart-group6
A two-column layout with a donut chart showing device breakdown and a horizontal bar chart showing browser usage.
Chart-group
chart-group7
A section with a four-stat row above a full-width area chart.
Chart-group
chart-group8
A bento-style grid with four different chart types arranged in varying sizes.
Chart-group
chart-group9
A card with a dropdown selector to switch between three different chart views showing various metrics.
Checkbox/checkbox-standard-
checkbox-checkbox-standard-1
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-11
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-12
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-13
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-2
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-3
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-4
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-5
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-6
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-7
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-8
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-9
A checkbox/checkbox-standard- example
Checkout
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
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
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
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
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
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
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
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
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
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
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.
Collapsible/collapsible-card-
collapsible-collapsible-card-1
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-2
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-3
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-4
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-5
A collapsible/collapsible-card- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-1
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-2
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-3
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-4
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-5
A collapsible/collapsible-faq- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-1
A collapsible/collapsible-outline- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-2
A collapsible/collapsible-outline- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-3
A collapsible/collapsible-outline- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-4
A collapsible/collapsible-outline- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-1
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-2
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-3
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-4
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-1
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-2
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-3
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-4
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-5
A collapsible/collapsible-standard- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-1
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-2
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-3
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-4
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-5
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-6
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-7
A combobox/combobox-custom-actions- example
Combobox/combobox-grouped-
combobox-combobox-grouped-1
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-2
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-3
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-4
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-5
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-6
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-7
A combobox/combobox-grouped- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-1
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-2
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-3
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-4
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-5
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-6
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-7
A combobox/combobox-multi-select- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-1
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-2
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-3
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-4
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-5
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-6
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-7
A combobox/combobox-rich-content- example
Combobox/combobox-standard-
combobox-combobox-standard-1
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-2
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-3
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-4
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-5
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-6
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-7
A combobox/combobox-standard- example
Combobox/combobox-with-states-
combobox-combobox-with-states-1
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-2
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-3
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-4
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-5
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-6
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-7
A combobox/combobox-with-states- example
Command/command-dialog-
command-command-dialog-1
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-2
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-3
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-4
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-5
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-6
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-7
A command/command-dialog- example
Command/command-popover-
command-command-popover-1
A command/command-popover- example
Command/command-popover-
command-command-popover-2
A command/command-popover- example
Command/command-popover-
command-command-popover-3
A command/command-popover- example
Command/command-popover-
command-command-popover-4
A command/command-popover- example
Command/command-popover-
command-command-popover-5
A command/command-popover- example
Command/command-popover-
command-command-popover-6
A command/command-popover- example
Command/command-popover-
command-command-popover-7
A command/command-popover- example
Command/command-standard-
command-command-standard-1
A command/command-standard- example
Command/command-standard-
command-command-standard-2
A command/command-standard- example
Command/command-standard-
command-command-standard-3
A command/command-standard- example
Command/command-standard-
command-command-standard-4
A command/command-standard- example
Command/command-standard-
command-command-standard-5
A command/command-standard- example
Command/command-standard-
command-command-standard-6
A command/command-standard- example
Command/command-standard-
command-command-standard-7
A command/command-standard- example
Community
community1
A component featuring a logo, a call-to-action for joining a community, and social buttons for Twitter, GitHub, and Discord.
Community
community2
A component showcasing 4 social platform links in a 1-2-4 column layout, encouraging community engagement through actions like follow, connect, contribute, and join.
Community
community3
A component showcasing a community invitation with social icons, descriptions, and a 1-3 column layout of cards for different platforms.
Community
community4
A component with a title, description, and a grid of links to social platforms, each with an icon, a unique color background, headings, and descriptions.
Community
community5
A component featuring a GitHub profile card with stats (stars, forks, contributors), decorative grid pattern, and links to social media (Discord, Twitter, LinkedIn).
Community
community6
A component featuring cards for social platform links, each with icons, titles, and descriptions, organized in a variable-column layout.
Community
community7
A component showcasing social media platforms in a 3-column layout, with icons, links, online status, and follower counts.
Companies-create
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
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
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
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
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
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
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
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
companies-list2
A data table with TanStack Table featuring sortable columns, row selection, search filtering, column visibility toggle, and add company button.
Compare-products
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
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
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
compare1
A comparative block showcasing features between two entities in a 3-column layout with icons to highlight specific traits.
Compare
compare10
A component contrasting "Legacy" vs "New" features in a two-column layout, highlighting issues with old tools and advantages of modern solutions, using symbols and separators.
Compare
compare2
A component comparing two products, highlighting features using icons and text. Layout includes a central title, product feature lists in 2 columns, and detailed analysis sections.
Compare
compare3
A 3-column comparison block showcasing features between two options, highlighted with icons and badges for visual differentiation.
Compare
compare4
A comparison component contrasting traditional vs cloud-native approaches across multiple metrics with hover-to-highlight functionality and a "Get Started" button.
Compare
compare5
A component displays two options with images, text, and buttons, split across two columns, and features an "OR" marker centrally between columns.
Compare
compare6
A component displaying a comparative analysis of models in a table with tabs for model selection. Features statue indicators and fixed columns.
Compare
compare7
A comparison table component with 3 columns highlighting features of two frameworks with tooltips for additional info.
Compare
compare8
A comparison component showcasing features with icons, descriptions, and status indicators for two frameworks, including tooltips for certain features.
Compare
compare9
A comparative component showcases metrics & technical analysis of 3 models with status indicators, hover effects on data rows, and a detailed breakdown of each model's performance in a grid layout.
Compliance
compliance1
A two-column component featuring compliance and security features, highlighted with badges, images, and outlined sections for automated audit trails, monitoring, and reporting.
Compliance
compliance5
A component displays enterprise compliance details, with a bold title, a paragraph, 4 badges in 2 or 4 columns depending on device, and a 'Learn more' button.
Compliance
compliance6
A component showcasing compliance features with a title, description, and two rows of icons with text. The first row highlights four certifications in a grid, and the second row presents three key benefits with icons.
Compliance
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
contact1
A component with a two-column layout, integrating a promotional header, bullet points with icons, overlapping avatars, company logos, and a detailed form for demo booking.
Contact
contact10
A component featuring a contact form with a title, decorative dashed line separator, address/email/social links, and an inquiry form with fields for name, email, company, employee count, and message.
Contact
contact11
A component featuring a contact form with fields for personal and company details, alongside sections for corporate information, email contacts, and social media links.
Contact
contact14
A two-column contact component with avatar, contact details, and form fields for name & phone, plus a button.
Contact
contact16
A contact component with a title, descriptive text, links for phone and email, and a form with name, email, and message input fields, plus a submit button.
Contact
contact17
A contact form component with 2 columns; one for form input, including text and select fields, and another for process steps and company logos. Includes FAQs and resources links.
Contact
contact18
A contact component with an email link, support features listed, and a form with fields for name, optional phone, email, message, and a submit button.
Contact
contact19
A contact component with a two-column layout; one for text and buttons, and one for a full-height image. Features bold headings, a contact number, email, and a "Get in touch" button with an icon.
Contact
contact2
A contact component with a title, description, and details column, plus a message form; includes fields for names, email, subject, and message.
Contact
contact20
A contact component with a heading, subtext, and a 3-column layout for contact info and a form. Features inputs, a select menu, and a submit button.
Contact
contact3
A contact component with a heading, two buttons, and sections for support, sales, inquiries, verification, and global offices. Uses icons and grid layouts.
Contact
contact4
A contact component with a title, introduction, 3-column layout for different contact options, and a carousel showcasing locations with maps and details.
Contact
contact5
A contact form block with a title, description, fields for name, email, phone, and message, a privacy policy checkbox, and a submit button.
Contact
contact6
A contact form component with two columns: one for direct contact info using icons and one for a submission form.
Contact
contact7
A contact block with title, description, and 3 columns for email, address, and phone, each with icons.
Contact
contact8
A component featuring a "Contact" header, subtext, an image, email addresses, and office locations in a 2-column layout with styled divs.
Contact
contact9
A component with a contact form and methods listed in columns, featuring input fields, checkboxes, and buttons for submissions alongside icons for email, phone, and office directions.
Content
content1
A storytelling component featuring an interactive sidebar that highlights active content sections as a user scrolls. It spans 3 columns, with narrative content and illustrations dominating 2/3 of the layout.
Content
content2
A component showcasing a content management system's features, types, and instructions on adding or managing content, with 2-column layout for content types and alert features.
Content
content3
A component with a breadcrumb navigation, heading, subtext, buttons, a sidebar with topics, and a main content area divided into a 5-column layout, including images, texts, a table, an alert, and dynamic on-page navigation highlighting visible sections.
Content
content4
A content block with navigation links to sections, an interactive 'back to top' button, using dynamic highlighting for section visibility. It includes a breadcrumb, author info, and images laid out in a grid and column format.
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-1
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-2
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-3
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-4
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-5
A context-menu/context-menu-canvas- example
Context-menu/context-menu-file-
context-menu-context-menu-file-1
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-2
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-3
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-4
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-5
A context-menu/context-menu-file- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-1
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-2
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-3
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-4
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-5
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-6
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-7
A context-menu/context-menu-standard- example
Context-menu/context-menu-table-
context-menu-context-menu-table-1
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-2
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-3
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-4
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-5
A context-menu/context-menu-table- example
Context-menu/context-menu-text-
context-menu-context-menu-text-1
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-2
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-3
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-4
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-5
A context-menu/context-menu-text- example
Cta
cta1
A component features a card split into text and image sections, with a call-to-action button and decorative icons.
Cta
cta10
A call-to-action component with a heading, description, and optional primary and secondary buttons arranged in a single column that becomes a row on larger screens.
Cta
cta11
A component with heading, description, and up to two buttons, arranged vertically with emphasis styling.
Cta
cta12
A call-to-action block featuring a heading, description, email input field, and a subscribe button arranged in a column, centered.
Cta
cta13
A component with a call-to-action, a title, text, email input, and a subscription button. Features a privacy policy link. Layout adjusts across sizes.
Cta
cta14
A component featuring a full-width background image with a dark overlay, centered text, and two buttons. It includes a bold title, a description, and offers a free trial.
Cta
cta15
A component featuring a call to action with gradient background, text, and buttons on one side, and an image with a subtle overlay effect on the other. Designed in a two-column layout that adjusts to single column on smaller screens.
Cta
cta16
A component featuring a centered call-to-action with a decorative icon, a bold headline, and two buttons. It's set against a darkened full-width background image.
Cta
cta17
A centered call-to-action block with a patterned background, featuring a large title, a descriptive paragraph, and two large buttons for actions.
Cta
cta18
A call-to-action component with two columns: text (with a title and buttons) on one side, and unique, angled placeholder images on the other.
Cta
cta19
A component featuring enterprise solution highlights, with a badge, heading, text, and action buttons on one side. The other side contains links to documentation and demos, divided by a separator.
Cta
cta20
A call-to-action block with centered text, a large button labeled "Get Started," flanked by separators, within a single-column layout.
Cta
cta21
A component with a large background image, overlayed by centered text and a large button, featuring an arrow icon.
Cta
cta22
A component features a 3-column layout, with the first two columns merged to showcase an app download CTA and mockups, and the third column for email subscriptions.
Cta
cta23
A component with a newsletter subscription form, badge, heading, description, and features list, styled with icons and varying text sizes.
Cta
cta26
A component featuring a full-width image background, overlaid with a call-to-action (CTA) message and a large button. Below, two detailed information blocks are displayed side-by-side, each with an icon, title, and description.
Cta
cta27
A dual-column block featuring a bold headline, two sub-sections with large titles, buttons for actions, and layered images with a phone mockup.
Cta
cta28
A component featuring a dual-column layout with text, a list, and a button in one column, and layered images in the other. It highlights enterprise solutions.
Cta
cta3
A 2-column component featuring a call-to-action with buttons and two card links for documentation and getting started guides, adorned with icons.
Cta
cta30
This component displays overlapping avatars, a bold title, a descriptive paragraph, and a featured button with a playful tagline next to a custom line graphic.
Cta
cta31
A component displaying a title, subtitle, and a CTA button, surrounded by logos arranged in a semi-circle, with a gradient background.
Cta
cta32
This component is designed to promote engagement by showcasing a compelling heading, supportive description, and two action buttons for user interaction. It also displays key statistics in a visually appealing grid format to highlight significant achievements or features.
Cta
cta4
A call-to-action block with a title, description, button, and list of features. Uses a 2-column layout within a larger container.
Cta
cta5
A component featuring an image and a call-to-action (CTA) side by side in a two-column layout, with an appealing button and engaging text.
Cta
cta6
A component showcases a dynamic call-to-action with text, a button, and shifting overlaid blocks as a unique visual feature in a two-column layout.
Cta
cta7
A two-column call-to-action component featuring bullet points with checkmarks and a "Get Started" button, decorated with a geometric background.
Data-table/data-table-advanced-
data-table-data-table-advanced-1
A data-table/data-table-advanced- example
Data-table/data-table-advanced-
data-table-data-table-advanced-2
A data-table/data-table-advanced- example
Data-table/data-table-advanced-
data-table-data-table-advanced-3
A data-table/data-table-advanced- example
Data-table/data-table-advanced-
data-table-data-table-advanced-4
A data-table/data-table-advanced- example
Data-table/data-table-standard-
data-table-data-table-standard-1
A data-table/data-table-standard- example
Data-table/data-table-standard-
data-table-data-table-standard-2
A data-table/data-table-standard- example
Data-table/data-table-standard-
data-table-data-table-standard-3
A data-table/data-table-standard- example
Data-table/data-table-standard-
data-table-data-table-standard-4
A data-table/data-table-standard- example
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
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
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
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
data-table13
A data table section with tabbed status filters showing counts, global search input, and full pagination. Built with TanStack Table.
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
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
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
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
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
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
data-table2
A data table section with visible cell borders, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
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
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
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
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
data-table24
A data table section with transactions grouped by date, hidden column headers, and currency-formatted amounts. Built with TanStack Table.
Data-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
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
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
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
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
data-table3
A data table section with zebra-striped rows, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
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
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
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
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
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
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
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
data-table8
A data table section with sortable columns, single-column text filter input, and full pagination controls. Built with TanStack Table.
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/date-picker-standard-
date-picker-date-picker-standard-1
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-2
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-3
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-4
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-5
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-6
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-7
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-8
A date-picker/date-picker-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-1
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-10
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-11
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-12
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-13
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-14
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-15
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-16
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-17
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-2
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-3
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-4
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-5
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-6
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-7
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-8
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-9
A dialog/dialog-standard- example
Download
download1
A component with a heading and description, containing three cards for different platforms (desktop, iOS, android) each with titles, subtitles, descriptions, and download options.
Download
download10
A component promoting software downloads, subdivided into 3 columns for Desktop, Mobile, and Web versions with respective download options.
Download
download11
A component displaying a download section with options for .MSI and .EXE files, Windows compatibility info, and dynamic bordered images.
Download
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
download2
A component displaying download options for desktop, iOS, and Android, alongside descriptions and buttons/links for each platform, arranged in a three-column layout.
Download
download3
A component displaying a download card with a logo, a heading, a description, version, file size, system requirements, download and view buttons, and trust indicators.
Download
download4
A component showcasing a professional suite download with features, version details, and download options in a two-column layout within a main card.
Download
download5
A component providing options to download software, with tabs for Linux, MacOS, and a waitlist for Windows. Features version selection and size details.
Download
download6
A component displaying download options for different software versions and platforms, highlighting the latest version with a badge. Offers a two-column layout for platform links.
Download
download7
A component showcasing app download options with a bold title, a badge, and stylized placeholders for 3 phones, arranged dynamically by screen width.
Download
download8
This component displays a download block with a featured image, a title, an auto-detect download button with its last update date, and a list of download options for various platforms categorized in a 2-column layout.
Download
download9
A component for software downloads showcases features, buy/download options, platform compatibility icons in 2 columns.
Drawer/drawer-bottom-
drawer-drawer-bottom-1
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-2
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-3
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-4
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-5
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-6
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-7
A drawer/drawer-bottom- example
Drawer/drawer-left-
drawer-drawer-left-1
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-2
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-3
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-4
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-5
A drawer/drawer-left- example
Drawer/drawer-right-
drawer-drawer-right-1
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-2
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-3
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-4
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-5
A drawer/drawer-right- example
Drawer/drawer-top-
drawer-drawer-top-1
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-2
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-3
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-4
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-5
A drawer/drawer-top- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-1
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-2
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-3
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-4
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-5
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-1
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-2
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-3
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-4
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-5
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-1
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-2
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-3
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-4
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-5
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-1
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-2
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-3
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-4
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-5
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-1
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-2
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-3
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-4
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-5
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-6
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-7
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-support-
dropdown-menu-dropdown-menu-support-1
A dropdown-menu/dropdown-menu-support- example
Dropdown-menu/dropdown-menu-support-
dropdown-menu-dropdown-menu-support-2
A dropdown-menu/dropdown-menu-support- example
Dropdown-menu/dropdown-menu-support-
dropdown-menu-dropdown-menu-support-3
A dropdown-menu/dropdown-menu-support- example
Ecommerce-footer
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
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
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
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.
Emoji-picker/emoji-picker-basic
emoji-picker-emoji-picker-basic
A emoji-picker/emoji-picker-basic example
Emoji-picker/emoji-picker-custom-trigger
emoji-picker-emoji-picker-custom-trigger
A emoji-picker/emoji-picker-custom-trigger example
Emoji-picker/emoji-picker-different-variants
emoji-picker-emoji-picker-different-variants
A emoji-picker/emoji-picker-different-variants example
Emoji-picker/emoji-picker-in-form
emoji-picker-emoji-picker-in-form
A emoji-picker/emoji-picker-in-form example
Emoji-picker/emoji-picker-text-trigger
emoji-picker-emoji-picker-text-trigger
A emoji-picker/emoji-picker-text-trigger example
Emoji-picker/emoji-picker-with-display
emoji-picker-emoji-picker-with-display
A emoji-picker/emoji-picker-with-display example
Empty/empty-actions-
empty-empty-actions-1
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-2
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-3
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-4
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-5
A empty/empty-actions- example
Empty/empty-data-
empty-empty-data-1
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-2
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-3
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-4
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-5
A empty/empty-data- example
Empty/empty-search-
empty-empty-search-1
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-2
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-3
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-4
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-5
A empty/empty-search- example
Empty/empty-standard-
empty-empty-standard-1
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-2
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-3
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-4
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-5
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-6
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-7
A empty/empty-standard- example
Experience
experience1
A component listing experiences with download CV button, 3-column layout for period, title/description, and company.
Experience
experience2
A component showcasing professional experiences in a 6-column layout with sticky summary and contact on the left and detailed list on the right.
Experience
experience3
A component displaying professional experience with a title, introduction text, download resume button, last updated date, and a list of job positions with descriptions and periods.
Experience
experience5
A component displays work experience entries in a 2-column layout, with logos, roles, companies, periods, and descriptions.
Faq
faq1
An accordion-style FAQ component with a customizable heading and list of questions and answers.
Faq
faq10
An FAQ component with a title, intro text, and accordion-style questions. It includes a badge icon and a bordered layout.
Faq
faq11
An FAQ component with a column for inquiry intro and a column for categories. Features collapsible accordions for answers.
Faq
faq12
An FAQ component displaying questions under categories with a clickable sidebar for navigation. Features include dynamic active state updates and smooth scrolling.
Faq
faq14
An FAQ component with a central heading, a subtitle, and grouped questions within collapsible cards, each representing a category. Includes a decorative background.
Faq
faq15
An FAQ component with a title and a 2-column layout of items, each featuring an icon, heading, and description.
Faq
faq16
An accordion-style FAQ block with a title and expandable question items, set in a centered layout with a max-width.
Faq
faq17
A component comprising FAQs with an accordion layout, personal profile section, and a contact link. Features a 5-column layout, customizable questions, answers, and profile info.
Faq
faq2
A FAQ component displaying questions and answers in a column, with a customizable heading and dynamic content.
Faq
faq20
A two-column FAQ section with heading and contact link on the left, and categorized accordion questions on the right.
Faq
faq3
A FAQ component with collapsible questions, a support section with avatars and a contact button.
Faq
faq4
A component showcasing an FAQ section with expandable answers, highlighted by badges and separators, and includes a support contact link.
Faq
faq5
A FAQ component with a badge, heading, and description at the top, followed by a list of questions and answers presented in a single-column layout. Each item features a numeric label.
Faq
faq6
A component showcasing FAQs in a two-column layout, each entry numbered and containing a question and answer. Includes a headline and descriptive subtext at the top.
Faq
faq7
A 2-column FAQ block featuring a title, a supportive call-to-action with an external link, and a multi-expand accordion of questions and answers.
Faq
faq8
An FAQ component with collapsible sections for "General" and "Billing" questions, each with their own set of questions and answers. It has a 3-column layout on wider screens.
Faq
faq9
An FAQ component featuring a title and an expandable accordion with multiple items to display questions and answers.
Feature
feature1
A block with a 2-column layout featuring a title, description, two buttons, and an image.
Feature
feature10
A block titled "Why Us?" with a subtitle, arranged in up to 4 columns featuring icons for Performance, Innovation, Quality, and Accessibility, each with a brief description.
Feature
feature101
A layout showcasing capabilities with a title, description, and 5 feature blocks in a 3-column grid. Unique elements include icons, hover animations on images, and varied block sizing.
Feature
feature102
A component displaying a title, a brief description, and 3 features with images. Each feature includes a number indicator, title, and description.
Feature
feature103
A component showcasing core capabilities with a badge, a heading, and links in a 2-column layout expanding to 3 columns. Features interactive elements and an arrow icon.
Feature
feature104
A component featuring a header with an outlined badge, a title, a paragraph, a placeholder image, and six sections with icons and texts in a 3-column layout.
Feature
feature105
A component featuring tabs with icons and text, each tab showing a different image.
Feature
feature106
A component showcasing features in an accordion for narrow screens and tabs for wider screens, each with icons, titles, and images.
Feature
feature107
A component featuring a badge and six linked blocks showcasing tools, each with an image, title, description, and a "Visit Website" call-to-action.
Feature
feature108
A tabbed component with 3 tabs, each displaying a title, description, badge, a button with text, and an image. Layout includes two columns in larger views.
Feature
feature109
A two-column layout block, featuring an outlined badge, large headings, descriptive text, and a button with an icon in the first column. The second column showcases an image with overlay text, including an avatar badge and a link.
Feature
feature11
A component with an image on one side, and descriptive text with a bulleted list on the other. Includes a headline, paragraph, and a button.
Feature
feature110
A component featuring badges, a carousel with avatars, and descriptive text blocks, structured in a 2-column layout, each containing dynamic, premium, and structured content blocks.
Feature
feature111
A component showcasing features with 2 columns, badges, headings, descriptions, links, and images. Unique for its centered content and outlined badges.
Feature
feature112
This component displays a section with a title, subtitle, and a link followed by a 3-column layout of cards, each featuring an image, title, and link.
Feature
feature113
A tabbed component with 3 options, integrating text, badges, buttons, and images, showcasing different features. Each tab has a 2-column layout for content and visuals.
Feature
feature114
A component featuring dual-column layout with avatars, a heading, stats, and vertically auto-scrolling carousels showcasing features.
Feature
feature115
A block showcasing 6 key features with badges, headings, descriptions, and images. Laid out in up to 3 columns, it includes customizable cards for each feature.
Feature
feature116
This component displays a title, subtitle, and a grid of images (3 columns, 2 rows) with hover effects and call-to-action links.
Feature
feature117
A 3-column component showcasing features with images, hover effects, icons, and links for exploring more.
Feature
feature118
A feature block highlighting workflow tools with a header, 3 columns of benefits/stats, and a contact prompt. Uses icons and a placeholder image.
Feature
feature119
A component featuring a badge, a title, a 3-column layout of steps, and an image. Each column details a step with a numbered badge and text.
Feature
feature12
A feature block using a carousel to display slides on various topics. Includes a progress bar and navigation buttons.
Feature
feature120
A component showcasing business tools with a 2-column layout, avatars, quotes, action button, and a 4-column stats grid.
Feature
feature121
A component displays features in a grid, each with an icon, title, and description. Interactive blocks reveal descriptions on click.
Feature
feature122
A component with a grid layout of feature blocks, including a prominent highlighted block with a call-to-action button and an image. It uses icons and hover effects.
Feature
feature123
A component with a title and text block on one side, and a column of features with titles and descriptions on the other. Features highlighted by a color gradient bar.
Feature
feature124
A dual-section block featuring a text column with a heading, description, checklist, and button, alongside an image column with a decorative background pattern and gradient overlays.
Feature
feature125
A component with a dual-column layout, highlighting features and an illustrative image, includes a list with checkmarks and a button.
Feature
feature126
An accordion-style component displays key features with titles, descriptions, and images. Allows toggling between sections to reveal content and images.
Feature
feature127
This block showcases utilities with dynamic grid visuals and descriptive cards, detailing features through icons, titles, and texts alongside faded image backgrounds.
Feature
feature128
A component featuring a title, a subtext, and a 2-3 column layout of items, each with an icon and a description.
Feature
feature129
A tabbed component showcasing integrations like Slack & Google Drive, featuring descriptions, images, and "Learn more" links. Has a title and subtitle.
Feature
feature13
A component showcases a heading and 2-column layout of features with title, subtitle, description, and image. Unique for using images as visual endpoints in each feature card.
Feature
feature130
A component showcasing business integrations with 3 segments, including icons, titles, and text. Features a 3-column layout with images.
Feature
feature131
This component displays core features using an accordion layout for text and a dynamic image section, where selecting a text tab changes the displayed image.
Feature
feature132
A component displaying a welcome message, a description, a "Get Started" button, and a 4-column layout of items with images, titles, and descriptions.
Feature
feature133
A component featuring three sections highlighting business integrations with icons, titles, and descriptions. Layout includes a main header and a 3-column section beneath it.
Feature
feature134
This component displays a feature section with an outline badge, a title, a subtitle, and a 3-column layout of clickable feature cards, each with titles, descriptions, icons, and images.
Feature
feature135
A component showcasing core features and highlights with icons, titles, and descriptions in a two-column layout.
Feature
feature136
A component featuring a productivity tools overview with stats (installs, active users, etc.), and 3 benefits. Layout includes a 2-column section with an image and a 3-column grid for benefits.
Feature
feature137
A component displays values/principles in 2 sections: 4 with images, 4 with icons, in a mix of single and dual-column layouts.
Feature
feature138
A component featuring three sections, each with an image and text side-by-side, headers, and a "Learn more" link. Alternates image/text order between sections.
Feature
feature139
A component featuring a badge, a heading, a paragraph, an image, and a 4-column grid of items with numbers, titles, and descriptions.
Feature
feature14
A two-column component featuring secure payments and automated invoicing, with text descriptions and check-marked features, complemented by numbered image placeholders.
Feature
feature140
A carousel block displaying items with titles, descriptions, and images in a flex layout, includes previous and next controls. Each item combines text and a full-width image.
Feature
feature141
A component with a title, description, a 3x3 grid with a central image, a highlighted message, a badge, divider, testimonial, and attribution.
Feature
feature142
A grid-based component with a unique layout, featuring an image and text in a stylized block with border details, accompanied by a list with icons and a badge.
Feature
feature143
A component showcasing features with a badge & a grid layout. Utilizes a 3x3 grid for visuals, lists features with icons, and emphasizes modern design.
Feature
feature144
A component featuring a central heading, a description, and three Cards, each with an image, a title, and a Badge. The Cards display in a single column for mobile and in rows for larger screens.
Feature
feature145
A component featuring a customizable accordion for showcasing features with text and images, including a dynamic image display area that updates based on accordion selection.
Feature
feature146
A component featuring title sections, text descriptions, and images across two rows with unique dashed border decorations.
Feature
feature147
A component showcasing integrations in a grid layout; features a heading, subheading, and 3-column grid of cards with images, titles, and descriptions.
Feature
feature148
This component displays a title, description, and a grid of 6 cards, each containing an image, title, and description, arranged in 1-3 columns based on screen size.
Feature
feature149
A component featuring dual interactive panels with a central decorative divider, expanding on hover. Each contains a button, heading, and text, against a backdrop image with gradient overlays.
Feature
feature15
A component with a title/description header and a 2-column grid of features, each with icons, titles, and text.
Feature
feature150
A component showcasing 2 CRM solutions with hover effects, images, and a "Learn More" or "Get Started" button.
Feature
feature152
A component featuring a central title and message, with clickable icons arranged in a staggered layout. Visual enhancements include overlaid decorative circles and gradient effects.
Feature
feature153
A carousel component displaying key features of various platforms, allowing users to navigate through items with previous and next buttons. Each item presents an image, title, description, and a list of detailed info.
Feature
feature154
A component featuring dual infinite sliders with badges for features like Integrations, Automation, etc., inside a styled section with a gradient and wave overlay.
Feature
feature156
A component displaying tabs with 3 columns, featuring dynamic visual content for software development themes upon tab selection.
Feature
feature157
A component displaying a "Services" header, a large title, and 2 columns each featuring an image, title, and description.
Feature
feature158
A component displaying three key features with images & descriptions, centered titles, and a "View More" button. Each feature is in a column within a row for desktops.
Feature
feature159
A 4-column component displaying icons with titles and text descriptions. Includes a "See all" link on the last item.
Feature
feature16
A component featuring a three-column layout, each with icons (Timer, ZoomIn, Zap) for "Performance", "Quality", and "Innovation", with descriptions.
Feature
feature160
A tabbed component with 4 items, each with an icon, title, and description. Clicking a tab shows a related image. Uses a grid layout for tabs.
Feature
feature161
A 2-column component featuring a title, text, buttons, and a row of logos with decorative border accents.
Feature
feature162
A component featuring 1 row with text and an image, followed by 2 more images below, each in a rounded border.
Feature
feature163
A component with a 5-column grid layout, featuring 4 blocks each with text, images, and varying column spans. Unique rounded image integration.
Feature
feature164
This component consists of a tabbed gallery (with 3 items) alongside descriptive text and a 'Learn more' button, arranged in a two-column layout.
Feature
feature166
A component displaying a main heading, description, and four features in a 3:2 column layout, each with a title, description, and image.
Feature
feature167
A feature presentation block with tabs for "Smart Task Management," "Automated Scheduling," and "Personalized Insights." Includes badges, animated tab indicators, and images for each feature.
Feature
feature168
A component that showcases 3 productivity features with titles, descriptions, and visuals in a 3-column layout, including a highlighted "Features" Badge and a main heading.
Feature
feature169
A component with tabs for features like scheduling and analytics, each with an icon, title, description, and image. Includes decorative accessories.
Feature
feature17
A component showcasing 6 core features with icons, using a 2-column grid layout, including a heading and subheading.
Feature
feature170
This component displays "Our Core Values" with a badge and a call-to-action link, followed by a three-column grid of icons and texts detailing each value.
Feature
feature171
A modern layout featuring a top slogan, a section for team habits, and 3 image-based feature cards, linked by dashed lines.
Feature
feature172
A feature block splits into a 2-item top grid and a 3-item bottom grid, offering detailed insights and visuals for solutions. Unique image alignments highlight offerings.
Feature
feature173
A component showcasing metrics with icons in a 3-column layout, highlighting improvements in bugs, notifications, and chaos. Features gradient cards.
Feature
feature174
A component showcasing features across a grid layout with dynamic fading effects; includes titles, descriptions, and images.
Feature
feature175
This component displays features using tabs with vertical orientation, switches images and descriptions onClick, includes custom icons.
Feature
feature176
A component displaying analytical data through cards, badges, progress bars, and charts, organized in a two-column grid. Features include performance evaluations, skill badges, data metrics, and interactive elements.
Feature
feature18
A grid of customizable UI feature cards, each with an icon, title, description, and a "Learn more" link, arranged in up to 3 columns.
Feature
feature180
A component contrasting two scenarios with/without a product through icons and text in a 2-column layout, highlighting benefits and downfalls.
Feature
feature181
A component showcasing four key features in a grid layout. Each card has a large masked index number, feature details, and a time badge.
Feature
feature182
A component showcasing three feature cards with images, titles, descriptions, and icons, plus a section with two action buttons and a descriptive heading.
Feature
feature183
A component featuring a trendy hero area with an overlaid phone image, SVG patterning, and two info cards, plus a row of three stat cards below.
Feature
feature184
A component displaying features with interactive tabs and images. Uses a 2-column layout, including a dynamic image and detailed tabs for each feature. Includes buttons.
Feature
feature186
A tabbed component displaying features with icons, descriptions, and images. It toggles between three key features, each with its visual and text content.
Feature
feature187
A component displays a 3-step process with titles and descriptions in a three-column layout. Each step is uniquely marked and connected by a visual guide.
Feature
feature188
A component displaying 3 resources with titles, descriptions, and images, structured in a bordered container with horizontal dividers.
Feature
feature189
This component showcases a 2-column layout: overlapping images on the left and a content section with a headline, feature list, and button on the right.
Feature
feature19
A component displaying tabs each with a title, description, list of features, and an image, arranged in a 2-column layout for larger screens.
Feature
feature190
A component displaying a grid of features with images, titles, and descriptions. It includes a title, introductory text, and a button. Grid scales from 1 to 3 columns.
Feature
feature191
A component featuring a highlighted message and a 3-column layout of cards, each card displaying a sequence badge, a title, description, and image.
Feature
feature192
An accordion component presenting features with selectable items on one side and corresponding images on the other. It includes dynamic image display based on selection.
Feature
feature193
A component showcasing features with dynamic layouts, multi-column grid, and decorative background gradients. Includes title, descriptions, and images.
Feature
feature194
A component showcasing 4 unique features with icons in a 4-column layout, each with a description and "Learn more" link.
Feature
feature195
A component featuring a 2-column layout with pricing details, benefits, and CTA buttons. Includes subtle background patterns and hover effects on buttons.
Feature
feature197
This component displays features in an accordion with dynamic image updates. Layout includes 2 columns, interactive tabs on the left, image preview on the right.
Feature
feature198
A component showcasing 3 cards with icons, titles, and descriptions, each highlighting unique software benefits. Positioned dynamically for visual interest.
Feature
feature199
A component displaying a dynamic list of features with images - 3:2 column split, scrolls to highlight features.
Feature
feature2
A dual-column component with an image on one side, and text content with two buttons on the other. Features customizable title, description, image, and buttons.
Feature
feature20
A component showcasing a collection of utilities (like Integrations, Apps, etc.) with a header section that includes a title and a "Learn more" link. It features a two-column texts layout and a grid of cards (1, 2, or 3 columns based on screen size) that display the utility title, description, and image.
Feature
feature200
A component displaying 3 columns of features, each with icons, titles, and lists, distinguished by unique background gradients.
Feature
feature202
A component showcasing 7 architectural solutions each with an icon, title, and description, arranged in a 3-column grid format, with one covering two columns.
Feature
feature203
A component displaying 4 cards in a 2-column grid, each with an icon, title, description, and a list of features with check icons.
Feature
feature204
A split layout component with an image on one side and text areas alongside features on the other, including a call-to-action button and icons.
Feature
feature205
A two-column component featuring interactive tabs (Efficiency, Collaboration, Insights) with descriptive text and related images showcasing benefits.
Feature
feature206
A component featuring a title, description, and a grid of images paired with texts to explain various features. Grid adjusts from 2 to 4 columns.
Feature
feature207
A component showcasing a 3-step workflow with titles, descriptions, and separators, styled in 2 columns for larger screens.
Feature
feature209
A gallery component with a text and button panel on left and image carousel on right, including image thumbnails for selection and a patterned background overlay.
Feature
feature21
A component showcasing utility features with icons, badges, and cards in a two-column layout, incorporating headings, paragraphs, and images.
Feature
feature210
A component showcasing templates with headlines and a 4-column grid of icons, each detailing a different feature with links.
Feature
feature211
A component showcasing features with tabs. Includes icons, titles, summaries, and different image layouts per tab.
Feature
feature213
A component showcasing features through tabs, detailing functionality with related images and summaries. Includes a main title, 3 tabbed descriptions, and images set in a 16:9 aspect ratio.
Feature
feature214
A carousel showcasing AI-powered features with autoplaying video cards on hover, including icons and brief descriptions.
Feature
feature215
A carousel component showcasing AI editing features with video previews, titles, and summaries. Each carousel card plays its video on hover.
Feature215a
feature215a
A component showcasing a grid of cards with videos, icons, and texts. Features hover-to-play videos and links.
Feature215b
feature215b
A component featuring a collection of horizontal cards, each with a video, icon, title, summary, and link. Cards activate video on hover.
Feature
feature216
A navigational component with colored icon tabs for different features, summary texts, and changing images on tab selection, plus next/prev buttons.
Feature
feature217
A component focused on inclusive design features, with a two-column layout for a header and an image, followed by a three-column section showcasing features with icons, titles, and summaries.
Feature217a
feature217a
A component displaying 3 columns of features, each with an icon, title, and summary focused on accessibility. It includes a header with a title, paragraph, and an image within an aspect ratio block against a dynamic background.
Feature217b
feature217b
This component showcases three accessibility features with icons in a 3-column layout, including titles and summaries, against a dynamic background.
Feature
feature218
A component featuring two columns with a 1:2 ratio, showcasing a promotional message and a call-to-action button on the left, and an image with a unique fade effect on the right.
Feature
feature219
A component displays a 3-column grid of stylized cards, each with a title, summary, and unique image layout variant. Icons are optionally included.
Feature
feature22
A component featuring a 3-column layout with a title, lists of features, and 3 showcases including images and descriptions of block functionalities.
Feature
feature220
A component showcasing user stats, a customer testimonial with avatar, and an autoplaying video in a 2-column layout. It includes styled text and a button.
Feature220a
feature220a
A component featuring badges, headings, text, a large button, and a video. It includes stats in a 3-column layout, a dotted background pattern, and primary color highlights.
Feature220b
feature220b
A component showcases statistics and a video/content layout. It has a 2-column grid with stats at the top, a video on the left, and descriptive content on the right.
Feature
feature221
A component showcasing 4 unique features in a 2-column layout with gradient badges, detailed descriptions, and a "Learn More" button. It includes a prominent title and subtitle.
Feature
feature222
A component displaying a grid of cards with images, titles, stats, and a "Read Story" button. Cards are dynamically populated from a list.
Feature
feature224
A component showcasing AI features in nature via a carousel, each slide displaying a title, icon, and description with a vibrant background.
Feature
feature225
A component displaying AI features with interactive tabs; includes title, description, icons, and images across a 1-to-4 column grid.
Feature
feature227
A 2-column block featuring a large title, descriptive text, and bullet points with icons on one side, and an image with overlaid gradients on the other.
Feature
feature228
A component showcasing smart home features with a 2-column layout: one side highlights benefits (intuitive lighting, security, ecosystem integration, social connectivity) with icons, the other displays images.
Feature
feature229
A component with 3 columns, listing features under "Security," "Integration & APIs," and "Support" categories, each with their icons and items marked by check icons.
Feature
feature23
A module showcasing 3 features with images, titles, descriptions, and 'Learn more' links in a 3-column layout.
Feature
feature230
A component showcasing cloud service benefits using a large header, description, and 4 feature callouts with icons, arranged in a 4:6 column layout.
Feature
feature231
A component showcasing 4 features and a call-to-action, split into 2 columns on larger screens. Each feature is numbered and detailed.
Feature
feature234
This component features a headline, a row of cards with hover effects, and two buttons. Cards dynamically adjust visibility and overlap on different screen sizes.
Feature
feature235
A component displays UI blocks with flickering image animations and a stylized border effect. It includes descriptive text and buttons, within a dual-column layout.
Feature
feature236
This component displays a centralized promotional message for a website builder with interactive elements, including animated buttons and dynamic borders, spanning multiple text sizes and has animated ping effects.
Feature
feature237
This component displays a grid of cards detailing system features, each with metrics, status, and deployment info. Two-column layout on medium screens.
Feature
feature238
A component showcasing a title, description, buttons for sign-up and demo, and three animated, overlapping cards with hover effects.
Feature
feature239
A component showcasing a dual-column layout with interactive badges, buttons, and a promotional section with a dynamic background image, aimed at highlighting copy-paste UI blocks.
Feature
feature24
A component showcasing UI components with a title, description, and placeholder image. Includes a "Learn more" link and icons. Two-column layout for text.
Feature
feature240
A carousel component showcasing services with images, titles, and descriptions. Items reveal further details on hover. Navigation arrows are provided.
Feature
feature241
A component displaying a header and a grid of cards, each with an icon, title, and description about team features. Grid has 2 columns. Cards animate on hover.
Feature
feature242
A carousel block with testimonials, navigation arrows, and a current indicator, featuring interactive elements and overlaid text on images.
Feature
feature243
A component displaying a vertical timeline layout of steps, each with an icon, title, and description. It uses cards for step details.
Feature
feature244
A component showcasing a carousel of feature cards with images, titles, and descriptions. Each card is within a dotted container.
Feature
feature245
A component showcasing eight feature highlights with animated text and decorative slashes, centered around a single card image, structured in a dual-column layout.
Feature
feature246
This block features a sign-up form with a dynamic list of benefits and an illustrative image. Includes a bold headline, 4 listed advantages with icons, and an input button combination for email sign-ups.
Feature
feature247
A component featuring a TextReveal block centered within a section, using a single-column layout with a max width. It highlights a key message or feature.
Feature
feature248
A centered text reveal component with a dark background, featuring a motivational message, adaptable to large screens up to 86rem wide.
Feature
feature249
A component displaying a large, animated title with gradient and a below image, structured in a single column layout.
Feature
feature25
A component with three content sections and a headline area, using 4-column layout for items, and checkmarks for list-style.
Feature
feature250
A component displaying a title, subtitle, and an animated, interactive illustration with networked CPUs and dynamic beams connecting them, laid out in a flexible column or row arrangement depending on screen size.
Feature
feature251
A component featuring four cards with animations, icons, and text for showcasing features such as workflows, task tracking, and integrations.
Feature
feature252
A component with a visual ripple effect, encapsulating a header, a subtext, and a button within a bordered, rounded container.
Feature
feature253
A component featuring a title, text, and button on the left with a globe animation on the right in a two-column layout with a unique rotating arrow icon on the button hover.
Feature
feature254
Interactive block with layered orbiting circles of images, a central message "Connecting Devs," and a call-to-action button.
Feature
feature255
A component displaying a list of top contributors with images, titles, and descriptions. Includes a header with a "View all" button.
Feature
feature256
A component displaying developer tools and guides, with two distinct sections. Tools section has a 2-3 column layout with icons; Guides use a 1-2 column format with text.
Feature
feature257
A component displays tools in cards with categories, logos, names. Columns adjust from 1 to 3 based on the display size. Unique hover effects.
Feature
feature26
A component displaying 6 features with icons, titles, and descriptions in a grid of up to 3 columns.
Feature
feature261
A component featuring a grid layout with varying content blocks, including image backgrounds, statistics, pricing, and avatar groupings, aimed at promoting design quality, efficiency, and a premium library.
Feature
feature266
A component showcasing a "FRAGMENTS OF LIGHT & STILLNESS" collection with a three-column grid of cards featuring image tooltips, staggered animations, and a hover effect enhancing visual context.
Feature
feature267
A dual-column block featuring an animated 3D marquee with images, a subscription input form, and dynamic text sections, highlighted by an icon.
Feature
feature268
A component showing a title, description, two buttons, a list of features with icons, and a 3D-animated card displaying an image and a button. It uses a two-column layout on large screens.
Feature
feature269
A feature block lists 12 advantages with icons in a two-column grid and highlights services with an image in an adjacent visual card.
Feature
feature27
A component featuring an "Overview" badge, centered title, and text, followed by two columns of images with captions, and a full-width image with a caption.
Feature
feature270
A component displaying customizable feature blocks with images, titles, and descriptions in a grid of 2 or 3 columns, depending on screen size.
Feature
feature271
A component showcasing features with an animated background, a central title, a labeled introduction, and a two-column list, each with an icon and a description.
Feature
feature272
A 3-step guide block with a centered title, intro text, and a grid of 3 columns each detailing a step. Features arrows pointing between steps.
Feature
feature274
A component displaying a title, a text paragraph, and a grid of 4 animated cards that reveal information on hover.
Feature
feature275
A component showcasing "Secrets Behind Success" with a central title, a description, and a 3-column layout of interactive cards that reveal details on hover.
Feature
feature276
A component displaying a 3-column grid of cards for features like "Plug & Play", "Customizable", each with an icon, title, and description. It highlights a card on hover.
Feature
feature277
A 4-column grid feature block with interactive cards displaying titles, descriptions, icons, and "Read More" buttons. Cards reveal a colored background on hover.
Feature
feature278
A component showcasing 6 feature cards with icons, titles, and descriptions that highlight unique qualities, arranged in a grid up to 3 columns wide, with a dynamic hover effect.
Feature
feature28
A two-column component featuring image placeholders, badges, and "learn more" links with right-pointing chevrons.
Feature
feature280
A layout showcasing user testimonials and a feature list with a title, separated into two columns, including checkboxes for features.
Feature
feature281
A testimonial display component featuring an animated card stack with user feedback, adjustable through attributes like offset and scale. Includes a "Read More" button.
Feature
feature282
A 2-column component featuring an interactive encryption card and detailed text on encryption technology, with security highlights listed using bullet-like icons.
Feature
feature283
A component with an interactive image gallery, headline, text, and button. Features draggable, animate-on-scroll images with hover effects.
Feature
feature284
A grid component displaying features with images, titles, descriptions, and badges. Incorporates a glowing effect on hover. GridLayout varies from 1-4 columns.
Feature
feature285
A component with a 2-column layout featuring a brand logo, title, text, and button on one side and dual vertical marquees with interactive images on the other. Unique for image blur on hover.
Feature
feature286
A component featuring an intro, 3 cards with glowing stars, pricing, and a "View All" button. Each card has "Add to cart" functionality and displays collection names and prices.
Feature
feature287
A component displaying a title and a grid of cards (4 columns wide on larger screens, fewer on smaller). Each card includes a glowing stars effect, a title, and text. A button below the grid invites user interaction.
Feature
feature288
A component featuring a central text block with embedded clickable previews, housed within a single column layout, emphasizing the ease of integration and customization.
Feature
feature289
A component featuring a large title and a tech stack list with clickable links, arranged in a 2-column layout with adjustable gap sizes.
Feature
feature29
A component with a 2-column layout including images and text blocks, showcasing features via placeholders and descriptions.
Feature
feature292
A component featuring a hiring tag, a large title with dynamic highlighting, a brief description, and an email signup form alongside a full-cover image in a two-column layout.
Feature
feature293
A subscription component with a headline, description, email input, button, and animated background. It spans the full screen, contains two columns in the input area, and features dynamic sparkles.
Feature
feature294
This component showcases 5 features with icons, titles, and descriptions, arranged in up to 3 columns, and includes a sparkle effect background.
Feature
feature295
This component displays projects with filters for categories and roles, and a toggle to show all. It features a 1-3 column grid of project cards.
Feature
feature297
A three-column component showcasing features with images, numerical identifiers, and titles. Each column enlarges the image on hover.
Feature
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
feature3
A component showcasing a 3-column layout of cards, each featuring an icon, title, text, and image, adaptable to 1 or 2 columns on smaller screens.
Feature
feature30
A component featuring a 3-column layout with 2 images and a text block, showcasing a blend of aesthetics and information.
Feature
feature31
A component featuring a central message with 2 columns below, mixing images and text. Includes headings, paragraphs, and links. Unique for its text-image alternating layout.
Feature
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
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
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
feature32
A component with a title and a 3-column layout for testimonials, one large featured testimonial spans two columns and rows.
Feature
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
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
feature33
This component displays a main title, a subtitle, an image, and a three-column layout of cards, each containing a title, text, and link.
Feature
feature34
This component displays a heading, a subheading, and a 3-column layout with a mix of images, texts, and a grid showcasing numeric values and icons.
Feature
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
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
feature35
A 4-column component with a large title spans 2 rows, followed by 3 content blocks, each with a title, text, and link. An arrow icon accents links.
Feature
feature36
A component with a 3-column layout for case studies, featuring one larger highlighted card and five smaller ones, each with a title, badge for the larger card, and a "Continue reading" link.
Feature
feature37
A component with a 5-column grid layout, featuring 4 blocks with images and text descriptions, 2 columns wide for the first and last, 3 for the middle two. Each has a rounded, accent-colored background.
Feature
feature38
A component showcasing a heading, text, a button, and a list with icons next to headings. Features a large image beside the text content.
Feature
feature39
A feature block with a heading and a 3-column layout, each containing an image, title, description, and link.
Feature
feature4
A component featuring a main title, a card with text and an oversized image, and a 2-column layout with another card and a quote box.
Feature
feature41
A component with a title and a 5-column layout that displays 4 colored blocks, each containing a location name and address.
Feature
feature42
A component showcasing core values in a 3-column layout, with a large header spanning two rows and 4 smaller sections for individual values.
Feature
feature43
A component showcasing 6 reasons with icons, titles, and descriptions in a 3-column grid for "Why Work With Us?".
Feature
feature44
A component displaying a grid of integration options with images and descriptions, adaptable from 1 to 3 columns.
Feature
feature5
A component with a 3-column layout on large screens, shrinking to 2 and then 1 column. Features 2 cards, one double the width of the other, each with icons, text, and images.
Feature
feature50
A component with a central message and a button, followed by a grid of 3 visual blocks, each with text and "Learn more" buttons. One spans full-width, others take half.
Feature
feature51
A tabbed component with 3 options featuring icons. Toggles content display with images.
Feature
feature52
A component featuring tabbed navigation with icons and titles, transitioning to different content images on selection.
Feature
feature53
A component displaying a grid of logos and titles, transitioning from 2 to 4 columns, with unique numbering for each item.
Feature
feature54
A tabbed component showcasing features with images and subfeatures. Includes 5 tabs, images for each feature, and a 3-column layout for subfeatures.
Feature
feature55
A centered feature block with a title, description, and button. Uses a single-column layout with adjustable text sizes.
Feature
feature56
A component displaying a primary feature block followed by a 3-column layout, each containing a feature description and image.
Feature
feature57
A component showcasing a feature list with an image carousel. It has selectable tabs that scroll images into view and update dynamically.
Feature
feature58
A component displays an image alongside a list of 3 features, each with an icon, title, and description, laid out in a 2-column grid.
Feature
feature59
A component presenting a main feature with a large description and image, followed by three smaller feature blocks with descriptions and images, organized in a 2-column layout.
Feature
feature6
A 2-column layout component featuring an icon, a bold headline, descriptive text, a list with checkmarks, and a full-width image.
Feature
feature60
A component with a two-column layout featuring an image on one side and text content on the other, including a large header and detailed description.
Feature
feature61
A two-column layout component with an image on the left and descriptive text on the right, featuring large padding and text emphasis adjustments at different sizes.
Feature
feature62
A three-row component featuring alternating image-text layouts with descriptive text blocks and images in bordered, rounded frames.
Feature
feature63
A component showcasing a group of 6 features, each with a title, description, and image, arranged in up to 3 columns.
Feature
feature64
A component displaying a "Coming Soon" badge, a title, a descriptive paragraph, and two feature blocks in a 7-column grid, with the first block spanning 4 columns and the second 3 columns.
Feature
feature65
A component featuring a grid of four columns, displaying categorized items with expandable sections for detailed content and tags. Each item includes an icon, title, and customizable color bar.
Feature
feature66
A component featuring a title and a 2-column grid of large, hover-zoom image cards with overlaid text and logos, scaling to 1-column on smaller screens.
Feature
feature67
A component displaying a group title and a 2-column grid of 6 feature cards, each with an icon, title, and description.
Feature
feature68
A component that showcases six features with icons, titles, and descriptions in a 1-2-3 column layout, with an introductory section.
Feature
feature69
A carousel component with an image slider and a side list detailing features. It evolves around dynamically updating content based on user interaction.
Feature
feature7
A 2-column component with a full-width image and a text block featuring an icon, a bold title, descriptive text, and a list with checkmarks.
Feature
feature70
A carousel-based component showcasing features with descriptions, navigable by interactive list items. Layout includes an image carousel and a detailed description list on two columns.
Feature
feature71
A component featuring a central text block with a tagline, title, and description, followed by action buttons. It includes a grid layout with images, metrics, and interactive elements in 4 columns.
Feature
feature72
A component showcasing features with a heading, description, demo link, and a grid of feature cards, including images and texts, structured in up to 2 columns.
Feature
feature73
A component displays a heading, description, and a link followed by a grid of features with images, each detailing a specific capability. Two-column layout for larger screens, single for smaller.
Feature
feature74
A component with a title, description, and 2-column grid each hosting an image and text describing different features, with a "Book a demo" link.
Feature
feature75
A component with a title and text on one side; three action blocks on the other, each with a tagline, description, and a "Learn more" button.
Feature
feature76
A component showcasing a UI Library's features in a grid layout with 4 columns. Includes icons, titles, and descriptions for each feature.
Feature
feature77
This component showcases two key features with icons, titles, and descriptions, arranged in a 2-column grid with a decorative border.
Feature
feature78
Feature block with tabs, showcasing three features, each with an image, title, description. Features a demo link with an animated arrow icon.
Feature
feature79
A feature block with a tagline, title, and description, followed by a grid of one main and three smaller linked feature items, each with hover effects and directional arrows.
Feature
feature8
A component featuring a title and two cards for showcasing features, each with "Learn more" links and logos.
Feature
feature80
A component displaying an image next to descriptive text, links with icons, and overlapping avatars, arranged in a flex layout with a 2-column format for widescreens.
Feature
feature81
A component showcasing a feature group with a tagline, title, and description. Includes a 4-column grid with clickable images and "Read more" links.
Feature
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
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
feature85
A block highlighting features of a project management app with icons, titles, and descriptions arranged in up to 3 columns.
Feature
feature86
A 3-column layout component with a semi-transparent overlay, featuring a badge, texts, a separator, and a video demo link on the left, and a video placeholder image spanning 2 columns on the right.
Feature
feature87
A block featuring badges, headings, lists, and an image. It's structured in a 3-column grid with text and icons on the left, and a large image spanning two columns on the right.
Feature
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
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
feature90
A marketing component featuring a title, description, button, a row of logos, and a link to more integrations.
Feature
feature91
Two-column feature block, contrasting "Team Leads" and "Developers" with icons, links, and bordered list items.
Feature
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
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
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
feature95
A component with a badge, a title, and a paragraph, followed by a 4-column tabbed interface that switches content views.
Feature
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
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
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/field-advanced-
field-field-advanced-1
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-2
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-3
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-4
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-5
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-6
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-7
A field/field-advanced- example
Field/field-basic-inputs-
field-field-basic-inputs-1
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-2
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-3
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-4
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-5
A field/field-basic-inputs- example
Field/field-layouts-
field-field-layouts-1
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-2
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-3
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-4
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-5
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-6
A field/field-layouts- example
Field/field-selects-
field-field-selects-1
A field/field-selects- example
Field/field-selects-
field-field-selects-2
A field/field-selects- example
Field/field-selects-
field-field-selects-3
A field/field-selects- example
Field/field-selects-
field-field-selects-4
A field/field-selects- example
Field/field-selects-
field-field-selects-5
A field/field-selects- example
Field/field-selects-
field-field-selects-6
A field/field-selects- example
Field/field-selects-
field-field-selects-7
A field/field-selects- example
Field/field-text-areas-
field-field-text-areas-1
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-2
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-3
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-4
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-5
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-6
A field/field-text-areas- example
Field/field-toggles-
field-field-toggles-1
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-2
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-3
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-4
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-5
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-6
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-7
A field/field-toggles- example
Field-mapping
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
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/file-upload-dropzone-
file-upload-file-upload-dropzone-1
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-2
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-3
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-4
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-5
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-6
A file-upload/file-upload-dropzone- example
File-upload/file-upload-form-
file-upload-file-upload-form-1
A file-upload/file-upload-form- example
File-upload/file-upload-form-
file-upload-file-upload-form-2
A file-upload/file-upload-form- example
File-upload/file-upload-form-
file-upload-file-upload-form-3
A file-upload/file-upload-form- example
File-upload/file-upload-form-
file-upload-file-upload-form-4
A file-upload/file-upload-form- example
File-upload/file-upload-list-
file-upload-file-upload-list-1
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-2
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-3
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-4
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-5
A file-upload/file-upload-list- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-1
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-2
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-3
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-4
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-5
A file-upload/file-upload-preview- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-1
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-2
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-3
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-4
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-5
A file-upload/file-upload-progress- example
File-upload/file-upload-special-
file-upload-file-upload-special-1
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-2
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-3
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-4
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-5
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-6
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-7
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-8
A file-upload/file-upload-special- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-1
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-2
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-3
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-4
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-5
A file-upload/file-upload-standard- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-1
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-2
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-3
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-4
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-5
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-6
A file-upload/file-upload-validation- example
Footer
footer1
A component showcasing a footer layout with logos, navigation links across 4 columns, download buttons, and social icons.
Footer
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
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
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
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
footer14
A footer component with logo, newsletter, navigation links across three columns, and social icons. Includes a succinct company description and subscription form.
Footer
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
footer16
A footer component featuring logo, contact button, social icons, and navigation in accordion for smaller screens or columns layout.
Footer
footer17
A footer component with theme toggle, navigation links, social links, theme-specific logo, and a system status indicator.
Footer
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
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
footer23
A footer component with a logo, description, link columns, and an animated globe. Includes 3 sections with navigational links and separators.
Footer
footer24
A footer component with a bold heading, sections for email, social links, phone, and navigation links. It also includes a design attribution.
Footer
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
footer27
A footer block with animated visibility, featuring a "Connect with Me" call-to-action, social links with hover effects, and copyright information.
Footer
footer3
A footer component with a logo, navigation links in 2-5 columns, social icons, newsletter subscription form, and legal links.
Footer
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
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
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
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
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
footer50
A footer with centered CTA section, navigation links, social links, and a large gradient brand wordmark at the bottom.
Footer
footer6
A footer component with a logo, description, navigation links across two columns, a newsletter sign-up form, and copyright/terms section.
Footer
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
footer8
A footer component with a logo, description, social icons, link sections, newsletter signup, and copyright info arranged in a grid layout.
Footer
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/form-advanced-
form-form-advanced-1
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-2
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-3
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-4
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-5
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-6
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-7
A form/form-advanced- example
Form/form-basic-forms-
form-form-basic-forms-1
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-2
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-3
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-4
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-5
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-6
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-7
A form/form-basic-forms- example
Form/form-layouts-
form-form-layouts-1
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-2
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-3
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-4
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-5
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-6
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-7
A form/form-layouts- example
Form/form-multi-field-
form-form-multi-field-1
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-2
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-3
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-4
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-5
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-6
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-7
A form/form-multi-field- example
Form/form-patterns-
form-form-patterns-1
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-2
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-3
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-4
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-5
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-6
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-7
A form/form-patterns- example
Form/form-validation-
form-form-validation-1
A form/form-validation- example
Form/form-validation-
form-form-validation-2
A form/form-validation- example
Form/form-validation-
form-form-validation-3
A form/form-validation- example
Form/form-validation-
form-form-validation-4
A form/form-validation- example
Form/form-validation-
form-form-validation-5
A form/form-validation- example
Form/form-validation-
form-form-validation-6
A form/form-validation- example
Form/form-validation-
form-form-validation-7
A form/form-validation- example
Gallery
gallery1
A gallery block showcasing 3 case studies with dynamic resizing; includes images, logos, text, and interactive effects on mouse hover.
Gallery
gallery10
A testimonial carousel component with text content, navigation buttons, and progress indicator. It has a dual-column layout with quotes and images.
Gallery
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
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
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
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
gallery15
A gallery component showcasing services with carousel functionality, navigation buttons, and a progress indicator.
Gallery
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
gallery17
A carousel component featuring an image gallery with navigation arrows and pagination dots. Each image scales and adjusts opacity on selection.
Gallery
gallery18
A card-carousel gallery with autoplay, displaying portraits with annotated names in a looping mode.
Gallery
gallery19
Component displays a carousel of images with overlay text & a "Know More" link. Offers animated entrances and card effects.
Gallery
gallery20
A gallery component displaying overlapping, draggable images with dynamic animation. Includes textual content and a button, all within a single column layout.
Gallery
gallery21
Interactive gallery component with image slider, effect animations, and a call-to-action button.
Gallery
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
gallery23
Interactive gallery with expandable images and detailed captions on hover, featuring a statement and button on the left.
Gallery
gallery24
An interactive gallery block that showcases images with dynamic resizing and details on hover or click, including an "Add to Cart" button.
Gallery
gallery25
A 4-column animated image gallery, each column with varying image heights and animated transitions on view.
Gallery
gallery26
A gallery block with animated blur vignettes around images, arranged in a 5-column grid. Features image reveal animations on scroll.
Gallery
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
gallery28
A gallery block featuring a carousel of curated interior design images with a centralized heading, description, and navigation buttons.
Gallery
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
gallery3
A carousel component showcasing case studies with navigational arrows and dynamic scroll availability indicators, including images, titles, descriptions, and read more links.
Gallery
gallery30
An interactive gallery component with dynamically shuffled images that are draggable. Includes title and description.
Gallery
gallery31
A product showcase block with a dynamic grid layout of 1-4 columns, displaying items with hover effects, titles, and prices.
Gallery
gallery32
An interactive gallery component with dimension-variable, overlapping images and blur effect on hover. Contains descriptive text animations.
Gallery
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
gallery34
A gallery component displaying items in up to 3 columns, featuring interactive image blur on hover and icons indicating different characteristics.
Gallery
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
gallery4
A component showcasing a scrollable gallery with navigation buttons and indicators, featuring images, titles, and descriptions for each item.
Gallery
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
gallery6
A carousel component with a heading, 'Book a demo' link, scrolling buttons, and dynamic content blocks comprising images, titles, and summaries.
Gallery
gallery7
A component that combines a 2-column text intro with a looping AI-themed image carousel. Unique feature: staggered image positions.
Gallery
gallery8
A carousel component displaying resources in 3 columns, featuring navigation, separators, and dynamic link icons.
Gallery
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
help1
This component serves as a Help Center interface, featuring a search bar for inquiries, categorized help topics, and a list of popular topics with quick access links. It provides users with essential resources such as order tracking, shipping details, payment information, and account settings, along with a call-to-action button for contacting support.
Help
help2
This component, named Help2, provides an FAQ and support interface with searchable questions and categorized answers to assist users in finding solutions to common inquiries. It also includes options to contact support via live chat, email, or phone for further assistance.
Hero
hero1
A promotional component with an option for a badge, a heading, a description, two buttons, and an image. Features a 2-column layout, customizable elements, and icons for links.
Hero
hero10
A promotional hero block with a background pattern, featuring a badge, a heading, a paragraph, two buttons, and a section showcasing logos.
Hero
hero100
A component featuring a 2-column layout, with text and a call-to-action button on one side and an image on the other. Unique for its visual layering effect.
Hero
hero101
A component with a promotional header, featuring a title, description, start button, and demo video button that triggers a modal with a video player. It also displays partner logos below.
Hero
hero103
A component with a split layout containing text and CTA buttons on one side, and a layered image gallery on the other, followed by a logo carousel.
Hero
hero104
A component showcasing an interactive layout with a catchy headline, description, action buttons, benefits list, and a creative grid of images and data visualization with a video popup feature.
Hero
hero107
A component with a dual-column layout, featuring an attention-grabbing headline, a decorative button with unique animation, and a side image embellished with a "Hire Me" call-to-action button.
Hero
hero108
A component featuring a large title about earning from real estate, a list of benefits with check icons, and a 'Start Now' button. Includes an image section on the right.
Hero
hero11
A hero component with a center-aligned title, description, and button above a full-width image placeholder. Features a logo and uses a single-column layout.
Hero
hero111
A component showcases an email form, heading, description, features like "No Credit Card Required," 3 placeholder images with different aspect ratios, and a grid of fictional company logos.
Hero
hero112
A component showcases tutorials with a video dialog, user join counter, course stats, and membership CTA. It uses a two-column layout with icons and avatars.
Hero
hero115
A component featuring a centered section with an icon, heading, description, button with an icon, optional trust text, and a large image. Includes a decorative, layered circular backdrop.
Hero
hero116
A content block with a video pop-up feature, including a headline, subtext, and two action buttons, enriched with interactive image placements.
Hero
hero12
A promotional component with a unique radial gradient background, a centered layout featuring a logo, a bold title with styled text, body text, two call-to-action buttons, and a showcase area for technology logos with hover effects.
Hero
hero123
A component with a 2-column layout: text with a button on one side and an image within an aspect ratio container on the other. Features a muted background.
Hero
hero125
Component features a 2-column layout with a focus on returns management. Includes icons, a big title, a paragraph, and a button. The right column showcases an image with exchange options.
Hero
hero127
A component displaying a marketing degree promotion, featuring an interactive news badge, a bold title with highlighted keywords, two call-to-action buttons, and a section with user testimonials through avatars and stats on active users and episodes.
Hero
hero129
This component features a two-column layout with a bold headline, text content, buttons including one with an icon, overlapping avatars, and a unique phone image showcase with a 3D effect.
Hero
hero13
A component featuring a badge with an icon, a large headline, a supporting text paragraph, and two buttons—one solid, one outlined with an icon.
Hero
hero134
Marketing component with a video popup, call-to-action buttons, and brand logos. Features a headline, description, and image.
Hero
hero135
A component with a section for customer stories and a video. It has a 2-column layout with text-badges, headlines, paragraphs, and a play button overlaying a looped video. A dialog for fullscreen video playback is included.
Hero
hero136
A component showcasing a large header, descriptive text, two buttons, logos of trusted companies, and a uniquely styled image display with an asymmetrical background design.
Hero
hero14
A carousel component showing tech logos with commands. Includes auto-cycle, fade transitions, and manual selection. Displays 3-6 items per view.
Hero
hero141
A component with a video background, featuring a central column for text, a call-to-action button, and a 5-star rating.
Hero
hero143
This component features a centered column layout with a headline, a descriptive text, two button options for downloading or joining a waitlist, version information, and system requirements. It also includes a decorative, animated download button and a background video.
Hero
hero144
A component featuring a 2-row layout of app icons (5 on the top, 4 on the bottom) and a centered title with a description beneath. Each app icon is styled with a unique visual effect.
Hero
hero145
This component displays a full-width background with a dynamic, animated heading that changes text over time and includes a description with buttons for user actions.
Hero
hero146
A component featuring an attention-grabbing headline and brief description with a gradient "Get Started" button, followed by a teaser section for a video presentation. The video section includes a unique hover effect on the play button and a modal dialog for playback.
Hero
hero149
A component featuring a headline, description, buttons for a demo and video, benefits list, and a large image with unique background patterns. Includes a video dialog.
Hero
hero15
A component featuring a central slogan, description, singular primary action, and icons displaying ratings from various platforms.
Hero
hero151
A component featuring a title, description, large button, overlapping avatars with quotes, and a 2x2 grid of images incorporating unique aspect ratios and placements.
Hero
hero152
This component features a centered column with a trusted badge, a bold heading, a descriptive paragraph, and two buttons. It also includes an angled 3-image composition.
Hero
hero157
A hero component with a full-width background, features a tagline, a large heading, a descriptive text, and a button leading to projects. Utilizes overlay for text prominence.
Hero
hero158
A component with a two-column layout featuring a bold headline, paragraph, animated button, and a grid of 3 images with varying sizes and rounded corners.
Hero
hero159
A 2-column component with an emphasis on financial services. Features a bold headline, descriptive text, interactive button with hover effect, and complementary images.
Hero
hero16
A component featuring a central column with a bold heading, a text block, and two buttons, above an image with a gradient mask.
Hero
hero160
This component displays an overlay text and buttons on an image backdrop with an aspect-ratio image below. Features a badge with an award, a gradient headline, a subtext, and action buttons. Also includes a small text with icons.
Hero
hero162
A component featuring a 2-column layout with a prominent headline, subtext, and button on one side, and a grid of images and testimonials on the other.
Hero
hero163
A component featuring a title, subtitle, and a 2-4 column grid of images and a testimonial, with images in rounded containers.
Hero
hero164
A component showcasing a dual-column layout with a pitch and a playable video teaser. The left column has text and sign-up, while the right shows an image. Features a popup for video.
Hero
hero165
A two-column layout with dynamic image composition on one side and compelling headings on the other, featuring customized aspect ratios and image placements.
Hero
hero166
A 2-column layout block with animated images on one side and text elements, including a headline, paragraph, and button on the other.
Hero
hero167
A dual-column component with text and buttons in one and dynamic images in the other, featuring outlined buttons that change on hover, and images within aspect ratios.
Hero
hero168
This component displays a hero section with a headline, introductory text, and a 'Get Started' button. It features an arrangement of images on one side, within a layout that spans across columns.
Hero
hero170
A component featuring a headline, a subtext, buttons for app download and GitHub star, integration options with icons, and a video preview with decorative dots.
Hero
hero171
This component displays a hero section with two main blocks: content with text, buttons, avatars, and stats on the left, and a grid layout with vector graphics and images on the right. It includes a modal video dialog.
Hero
hero172
A two-column component with a heading, text, email submission form, and unique visual elements. The left column showcases the title, descriptive text, a form for email input with a "Get Started" button, and bullet points with checks. The right column features creative, overlapping images with dynamic shapes and icons for visual interest.
Hero
hero173
A component displaying text, images in overlapped layout with buttons for action & video modal. Uses 2-column grid, with a dynamic video pop-up.
Hero
hero174
A hero block showcasing a central message with a background image, featuring a title, a descriptive paragraph, and a button. Below is a bar with location details and an arrow button.
Hero
hero175
A block featuring a promo link, a bold title with a highlight, a descriptive paragraph, and buttons for action and demo with icons. Includes a semi-transparent overlay.
Hero
hero177
A component featuring an app rating badge, a bold headline, descriptive text, list of benefits, call-to-action buttons, and two images in distinct aspect ratios.
Hero
hero178
A two-column block with text elements & layered images, featuring dynamic text sizes and aspect-ratio controlled images.
Hero
hero179
A component with a 2-column layout. The left column contains text layers, and the right has overlapping images with unique aspect ratios.
Hero
hero18
A component with a centered title, text, two buttons, and a main image, flanked by decorative icons in a symmetric layout.
Hero
hero180
A component with a title, description, two buttons, and a complex image layout with overlay effects and gradient backgrounds.
Hero
hero183
A component featuring a premium badge, a bold title with descriptive text, buttons for actions, and a grid of images with decorative lines transitioning into a carousel for smaller views.
Hero
hero185
A component with two columns; one for a headline, subtext, and a large image, the other features two images and descriptive text emphasizing productivity and collaboration.
Hero
hero186
A component with two columns: Main content on left with title, description, and buttons; Features list on right with icons. Includes an image below.
Hero
hero187
A dual-section component with a gradient border. Features text block, 4 distinct features with icons, two buttons, and a carousel with auto-play and slide indication.
Hero187a
hero187a
A component featuring a carousel with auto-play functionality, a section with text content, and a grid layout displaying four features with icons. Includes navigation buttons.
Hero187b
hero187b
A split-layout component with a carousel and descriptive content. Features auto-playing carousel images with indicators and a section highlighting key features with icons.
Hero
hero190
A component with text, a button, and decorative patterns, flanked by bordered sections. It features a prominent heading, subtext, and a styled button with an icon.
Hero
hero192
A hero component featuring a beta badge, a headline, a subtext, two buttons, and a placeholder image. It includes a call-to-action link with an arrow icon.
Hero
hero194
This component features a dual-layout block with a text section and a vertical carousel of images. The text section includes a main heading, a paragraph, and a button with an icon. The image carousel presents team photos that auto-scroll. In larger views, multiple image carousels with slightly rotated images appear side by side.
Hero
hero195
A dynamic component featuring a header with a title, description, and buttons, below which tabs display images with an animated border effect.
Hero
hero196
A component with an email form, announcement badge, headline, descriptive text, and a tabbed interface showcasing features through icons and images.
Hero
hero197
A component featuring a dotted background, a badge with a sparkle icon, a large gradient text headline, a description, and two buttons side by side on smaller screens and stacked on larger screens.
Hero
hero2
A component with a 2-column layout, featuring an image on one side and a mix of badge, headline, paragraph, and buttons on the other. It includes styled buttons and a badge with an icon.
Hero
hero20
A carousel-linked accordion block with a 2-column layout: icons & FAQs on the left, images rotating in sync on the right. Unique features include timed content transition and interactive FAQ accordion.
Hero
hero200
A component showcasing a centered introductory text with a button and a dynamic phone mockup animation, structured in a single-column layout.
Hero
hero201
A component featuring centered titles, description, and buttons over a background with two animated spinning images on opposite ends.
Hero
hero202
A component featuring a 2-column layout with dynamic text and image, highlighting a bold headline with a gradient effect, and interactive buttons including a rotating action on hover.
Hero
hero203
A component showcasing a title, description, sign-up button, and two visual content blocks with hover effects, dates, titles, and a "See All" link.
Hero
hero204
This component displays a hero section with centered text, an email sign-up form, and two animated phone mockups. It includes headings, a paragraph, and input/button for sign-up.
Hero
hero205
This component showcases a hero section with a large headline, professional information, CTA buttons, and an animated card. It utilizes icons and a custom animation for visual appeal.
Hero
hero206
This component features a title, subtitle, avatars with a badge indicating trust from 10k+ users, and a browser mockup to showcase URLs.
Hero
hero21
A component with a headline, description, badges, buttons for actions & demo, and a call-to-action link. Includes an image beneath text content. Uses 2 columns and rounded design elements.
Hero
hero210
A carousel component with animated image display, customizable autoplay, and unique coverflow effect. It features dynamic opacity transitions, includes a headline, subtext, and a button with hover scaling.
Hero
hero211
A component featuring a hero block with a motivational title, a text block, an image carousel with pagination, a "Get Started" button with a unique pop-up text animation, and a marquee of cards at the bottom.
Hero
hero212
Animated image carousel with auto-switching feature & a unique marquee with cards. Includes a central button & decorative elements.
Hero
hero213
An image carousel with auto-transition, text content, and icon links. Features a unique SVG mask and animated image transitions.
Hero
hero214
An animated gallery component cycling through portraits with a main headline. It features auto-changing images, and a masked layout with a "Contact Us" button.
Hero
hero215
A component featuring a large title and paragraph, alongside a 'Contact Us' button and right-aligned image. Unique for its overlaid text and button on a full viewport height background.
Hero
hero216
This component displays a centered message and button with animated meteors and a large globe graphic. Column layout, uses shifting arrow button animation.
Hero
hero218
A component featuring an animated, centralized headline with a supportive tagline above. Includes visually dynamic, particle background and a button with an icon that animates on hover. Uses 3D text animation for emphasis.
Hero
hero219
A dynamic hero block featuring animated text, a particle effect background, and multiple vertical marquees with icons. It includes an engaging headline and a blurred white background overlay.
Hero
hero220
A component displaying fullscreen video-text inside a semi-transparent image background, with animated text scaling effect.
Hero
hero221
A component featuring animated text over a video, with a centered tagline below. Includes a button with an animated arrow icon.
Hero
hero222
A component displaying dynamic text with mouse tracking cursor effects, utilizing animated elements and a center-aligned layout with a background image.
Hero
hero223
A component featuring a centered headline with shadow text effect, background animation, and two action buttons, all within a radial gradient mask.
Hero
hero224
A component with a headline, text, two buttons, and an image cloud. It's a split layout with text on one side and images on the other.
Hero
hero225
A component displaying animated circles populated with tech icons and a central text message, accompanied by a call-to-action button.
Hero
hero226
A carousel component with autoplay functionality, displaying images and text. Includes navigational dots and a "Try it for free" button.
Hero
hero227
A component featuring icons with text, a bold animated headline, a paragraph, dual buttons, and a phone mockup animation.
Hero
hero228
A component showcasing a carousel of testimonials with dynamic rotation effect and custom scrollbar animation. Displays names below images.
Hero
hero229
A component with animated buttons and text over dynamic illustrations, arranged centrally in a full-screen overlay.
Hero
hero230
A marketing component with customizable buttons, a title, a descriptive paragraph, a dual-carousel display for logos and images, and fading edges for carousel overflow.
Hero
hero231
A component with dual content sections: text/buttons on the left and a rotating carousel of images/logos on the right. Includes customizable buttons and dynamic image presentation.
Hero
hero232
A component featuring centered text and buttons within a full-screen background, complemented by animated SVG illustrations on sides.
Hero
hero233
A hero component with a text banner, animated background lines, and buttons, featuring a central title with special text effects and call-to-action buttons.
Hero
hero234
A dynamic gallery component with animated, looping image rows moving in opposite directions, featuring interactive images that scale on hover, gradient edge masks, and a centered promotional message with a button.
Hero234a
hero234a
Animated image gallery with dynamic text overlay and interactive button. Four-column, infinite scroll horizontal flip, ellipse masking for edge softening.
Hero234b
hero234b
A dynamic gallery component with 5 continuously auto-scrolling columns of images, showcasing varying image dimensions. Includes interactive scaling and rotation on hover.
Hero
hero236
A component features a dynamic, interactive 3D cloud of icons and statistics highlighting key metrics. It splits into two main sections: one side lists achievements using icons and numbers, and the other displays a rotating, interactive cloud of technology icons.
Hero
hero237
A component featuring a split layout with a "Why Us?" pitch, key stats, and orbiting tech logos on one side, and dynamic circular orbit animations on the other.
Hero
hero238
A visually engaging component displaying premium benefits with animation. Includes heading, two buttons, and a list with icons. Two-column layout on large screens, single-column on smaller. Unique fading animated note card on the right.
Hero
hero239
A component featuring a marquee with images, centered text, and two buttons. It includes a heading, a subtext, and a unique 3D marquee at the bottom.
Hero
hero24
A marketing block with an image, title, button, and 4 columns highlighting features with icons.
Hero
hero240
A component featuring a 3D marquee of images, an email subscription form, and a section with a custom logo and descriptive text.
Hero
hero241
A component showcasing launch-ready interfaces, featuring a title, descriptive text, two buttons, and metrics on developer trust and time saving, with a gradient background.
Hero
hero242
A split-layout component featuring a text area with a heading, paragraphs, buttons, and a list of features on one side, and a bar chart displaying data on the other.
Hero
hero243
A component featuring a dynamic headline, a descriptive paragraph with a CTA button, and a 3-column summary with icons.
Hero
hero244
A component featuring a two-column layout: one for promotional content including a header, text, and buttons; the other showcases draggable cards with images and titles.
Hero
hero245
A component with a hiring banner, central slogan, supporting text, download buttons, and dynamic background.antal panels fadeIn based on device.
Hero
hero246
Data visualization block featuring a chart with trends over time, surrounded by a title, a summary, interactive buttons, and unique background patterns.
Hero
hero247
The Hero247 component presents a visually appealing introductory block featuring an animated avatar, a headline, and dual call-to-action buttons that emphasize engagement. This component includes customizable button options and variants, with motion effects applied to both text and image elements for dynamic content presentation.
Hero
hero248
A component showcasing a team section with dynamic tooltips over names, a large title, description, and a call-to-action button. Incorporates a 2-column layout with rotating tooltips for team members.
Hero
hero25
A hero block featuring a centered title, subtitle, customizable buttons, and a list highlighting 3 key benefits with icons.
Hero
hero256
The component features a prominent hero block that includes a dynamic heading, a badge, and call-to-action buttons for easy user interaction. It also integrates a features section with interactive cards highlighting key functionalities, each accompanied by icons and descriptions, aiming to streamline workflows and provide insightful analytics.
Hero
hero258
This component serves as a promotional block with an announcement, a prominent heading, descriptive text, a call-to-action button, and also highlights various brand logos and featured cards. It is built using React and styled with Tailwind CSS, incorporating interactive animations to enhance user engagement.
Hero
hero259
This component provides a dynamic and interactive block featuring a company header with logo and navigation links, a content section with a heading and action button, and a footer presenting additional company information. It also incorporates a visually appealing animated background utilizing canvas and dithering effects for enhanced user engagement.
Hero
hero26
A component featuring a promotional message with an introductory badge link, a large headline, a detailed description integrating icons, and two large buttons for actions.
Hero
hero261
A two-column hero with headline, description, and CTAs on the left, and a vertical features list with icons on the right, separated by a dashed line accent.
Hero
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
hero27
A component with a decorative background, a large, interactive 3-column heading, a subheading, descriptive text, and a button. Features hover effects on headings and button.
Hero
hero28
A component featuring a background pattern, centered title, subtitle, and button, with decorative icons.
Hero
hero29
A welcome block with centered text, two call-to-action buttons, a 5-star rating display, and a large image placeholder. Features a detailed background design.
Hero
hero3
A component featuring text, star ratings with avatars, and buttons. It employs a 2-column layout with large image display. Unique elements include overlapped avatars and star ratings.
Hero
hero30
A hero block with 2 columns; left has text and buttons, right features a main image with a mesh background. Unique mesh and layered image presentation.
Hero
hero31
A component featuring a welcome message, a description, two buttons, and dynamic overlapping blocks with varying dimensions. Incorporates a complex background design.
Hero
hero32
A component with a background layer, a left section displaying a heading, description, and button, and a right section with rows of integration icons.
Hero
hero33
A two-column block featuring text, buttons, and pricing info on one side and a full-cover image on the other. Includes a title, introductory text, and styled buttons.
Hero
hero34
A component featuring a 2-column layout, with a text section including a title, paragraph, and buttons on one side, and a full-width image on the other.
Hero
hero35
A 2-column block with a text section including a title, paragraph, and buttons, and a geometric patterned section with unique border details.
Hero
hero36
A component showcasing 3 cards in a row, highlighting features like "Product Design," "Development," and "Marketing," with images, descriptions, and "See more" links. Includes a title, a badge stating "New Release," and a description above the cards.
Hero
hero37
A component featuring a center-aligned text block with a "New Release" announcement, headline, and descriptive text, followed by primary and secondary buttons. Includes a decorative background of spiraled dots and three angled, overlapping blocks beneath.
Hero
hero38
A 2-column component; left has text and buttons, right displays geometric art and shapes.
Hero
hero39
A component with a 2-column layout; one side presents text and a button, the other showcases a stylized, geometric arrangement of elements.
Hero
hero4
A two-column component featuring an image and a text section with avatars, star ratings, and buttons.
Hero
hero40
A component with a decorative background and a two-column layout. The first column features a welcome message and action buttons. The second showcases integration options with icons and descriptions.
Hero
hero45
A component with a badge, heading, image, and three columns of features, each with an icon, title, and description.
Hero
hero47
A component featuring a large heading, subheading, description, two action buttons, and an overlapped image setup. Layout includes a text block and an image side by side.
Hero
hero49
A component featuring a centered title, description, and a button, alongside a mockup of a mobile device displaying an image. It includes a three-column layout with text elements and a graphical representation of an app interface.
Hero
hero5
A component with a dual-column layout featuring a text block and an image. It includes a heading, paragraph, and a button with an icon. Uses a flexible structure for alignment.
Hero
hero50
A component with a call-to-action link, centered title, description text, and two buttons. Features images with overlapping effects.
Hero
hero51
A component featuring a hero section with a catchy headline, subtitle, button, and unique background graphics. It includes multiple angled images for visual depth.
Hero
hero53
A component with a large title, description, an overlapping button for early access, and overlapping avatars indicating community trust.
Hero
hero55
A component featuring a central text block, a navigational link with a badge indicating "7 days ago", and two large buttons. It has a decorative background overlay.
Hero
hero57
A component showcasing AI-powered proposal creation with engaging features, including decorative icons and dashed banners emphasizing speed, security, and professionalism. Center-aligns its title and description within a single column layout, accentuated by a subtle background pattern and a call-to-action button.
Hero
hero58
This component displays a 2-column layout with a large title, subtitle, and button on one side, and an image on the other. It features a unique background pattern behind the image.
Hero
hero59
A full-screen component with a video background, featuring a title, subtitle, and two buttons in a central column layout.
Hero
hero6
A component featuring a central title and text, two action buttons, a split image display with an additional button, and a row of logos underneath.
Hero
hero60
A hero component with a gradient background, featuring a bold title, a descriptive paragraph, and a large call-to-action button with an icon.
Hero
hero64
A testimonial display component with a title, descriptions, a call-to-action button, customer ratings, and profile images in a two-column layout.
Hero
hero67
A component featuring a logo, engaging headline, paragraph, a button with an icon, and overlapping avatars indicating endorsements. It ends with a large, rounded-top image.
Hero
hero68
A component with a promotional message, featuring a central title, a subtitle, buttons for action calls (trial/demo), and a 3-column footer highlighting service benefits with icons.
Hero
hero7
A component featuring a title, description, button, and review section with user avatars and star ratings. It's structured in a central column.
Hero
hero70
A block featuring a header, taglines, a chat CTA, a carousel with images, and a portfolio button.
Hero
hero71
A centered text component with a gradient background featuring a large title, supportive text, two buttons, and an image. Utilizes a two-column layout for buttons and adjustable image width.
Hero
hero74
A component promoting a business OS, featuring a headline, description, sign-up form, and a 6-icon feature grid. Also includes layered images at the bottom.
Hero
hero75
A component showcasing a business service with a catchy headline, description, upgrade button, overlapped avatars indicating user trust, and a side image.
Hero
hero76
A component features a centered layout with a logo, headlining text for a UI library, descriptive subtext, and a download button, above an aspect-ratio constrained image.
Hero
hero78
A component featuring a full-width background image with a dark overlay, includes a title, text, and button centered in a single column layout, and an additional noise effect overlay.
Hero
hero79
A full-screen hero component with a background image, featuring a title, subtitle, decorative image, and a "Read More" button with an arrow icon. Layout has two columns on larger screens.
Hero
hero8
A centered text block with a large title, paragraph, two buttons, and a full-width image below.
Hero
hero80
A two-column block with a gradient background, featuring text, links, buttons, avatars with stars, and images. The left column has promotional content and user ratings; the right displays images.
Hero
hero82
A component with a title, animated download button, and an image with a 1.6:1 aspect ratio.
Hero
hero83
A component featuring a badge with a star icon, a title, a paragraph, two buttons, and a row of three varying-width images below.
Hero
hero84
A component featuring a badge and text block on top, with a layered, overlapping image gallery below, arranged asymmetrically.
Hero
hero85
A block featuring dynamic carousels, badges, and buttons aimed at showcasing solutions and engaging users. It includes a 2-column layout with auto-scroll carousels.
Hero
hero86
This component features a 2-column layout with a text section and an image. The text includes a title, description, and a button. The image section has a unique aspect ratio with a decorative background.
Hero
hero87
A component with a title, text explanation, button, and image; features a 2-column layout with a decorative background in one column.
Hero
hero89
A component with a split layout, 50% width text block and 45% width image block with an aspect ratio. Features a heading, text, button, and decorative arrow SVG.
Hero
hero9
A component featuring a gradient background, badge, headline, paragraph, two buttons, and a shadowed code block next to an image area.
Hero
hero90
A component with a 2-column layout, showcasing text on the left and an interactive avatar feature on the right. The avatars overlay with testimonials.
Hero
hero91
A block with two columns: text (50% width) and a video element. Includes buttons and stylized text layout.
Hero
hero99
A component featuring a title, text, two buttons, and a grid layout with 3 images across 10 columns, using gradient backgrounds and icons.
Hover-card/hover-card-info-
hover-card-hover-card-info-1
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-2
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-3
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-4
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-5
A hover-card/hover-card-info- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-1
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-2
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-3
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-4
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-5
A hover-card/hover-card-preview- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-1
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-2
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-3
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-4
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-5
A hover-card/hover-card-profile- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-1
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-2
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-3
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-4
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-5
A hover-card/hover-card-stats- example
Incentives
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
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
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
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
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
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
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
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/input-group-ai-
input-group-input-group-ai-1
A input-group/input-group-ai- example
Input-group/input-group-ai-
input-group-input-group-ai-2
A input-group/input-group-ai- example
Input-group/input-group-ai-
input-group-input-group-ai-3
A input-group/input-group-ai- example
Input-group/input-group-ai-
input-group-input-group-ai-4
A input-group/input-group-ai- example
Input-group/input-group-buttons-
input-group-input-group-buttons-1
A input-group/input-group-buttons- example
Input-group/input-group-buttons-
input-group-input-group-buttons-2
A input-group/input-group-buttons- example
Input-group/input-group-buttons-
input-group-input-group-buttons-3
A input-group/input-group-buttons- example
Input-group/input-group-buttons-
input-group-input-group-buttons-4
A input-group/input-group-buttons- example
Input-group/input-group-custom-
input-group-input-group-custom-1
A input-group/input-group-custom- example
Input-group/input-group-custom-
input-group-input-group-custom-2
A input-group/input-group-custom- example
Input-group/input-group-custom-
input-group-input-group-custom-3
A input-group/input-group-custom- example
Input-group/input-group-custom-
input-group-input-group-custom-4
A input-group/input-group-custom- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-1
A input-group/input-group-dropdown- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-2
A input-group/input-group-dropdown- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-3
A input-group/input-group-dropdown- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-4
A input-group/input-group-dropdown- example
Input-group/input-group-icons-
input-group-input-group-icons-1
A input-group/input-group-icons- example
Input-group/input-group-icons-
input-group-input-group-icons-2
A input-group/input-group-icons- example
Input-group/input-group-icons-
input-group-input-group-icons-3
A input-group/input-group-icons- example
Input-group/input-group-icons-
input-group-input-group-icons-4
A input-group/input-group-icons- example
Input-group/input-group-label-
input-group-input-group-label-1
A input-group/input-group-label- example
Input-group/input-group-label-
input-group-input-group-label-2
A input-group/input-group-label- example
Input-group/input-group-label-
input-group-input-group-label-3
A input-group/input-group-label- example
Input-group/input-group-label-
input-group-input-group-label-4
A input-group/input-group-label- example
Input-group/input-group-spinner-
input-group-input-group-spinner-1
A input-group/input-group-spinner- example
Input-group/input-group-spinner-
input-group-input-group-spinner-2
A input-group/input-group-spinner- example
Input-group/input-group-spinner-
input-group-input-group-spinner-3
A input-group/input-group-spinner- example
Input-group/input-group-spinner-
input-group-input-group-spinner-4
A input-group/input-group-spinner- example
Input-group/input-group-text-
input-group-input-group-text-1
A input-group/input-group-text- example
Input-group/input-group-text-
input-group-input-group-text-2
A input-group/input-group-text- example
Input-group/input-group-text-
input-group-input-group-text-3
A input-group/input-group-text- example
Input-group/input-group-text-
input-group-input-group-text-4
A input-group/input-group-text- example
Input-group/input-group-textarea-
input-group-input-group-textarea-1
A input-group/input-group-textarea- example
Input-group/input-group-textarea-
input-group-input-group-textarea-2
A input-group/input-group-textarea- example
Input-group/input-group-textarea-
input-group-input-group-textarea-3
A input-group/input-group-textarea- example
Input-group/input-group-textarea-
input-group-input-group-textarea-4
A input-group/input-group-textarea- example
Input-group/input-group-tooltip-
input-group-input-group-tooltip-1
A input-group/input-group-tooltip- example
Input-group/input-group-tooltip-
input-group-input-group-tooltip-2
A input-group/input-group-tooltip- example
Input-group/input-group-tooltip-
input-group-input-group-tooltip-3
A input-group/input-group-tooltip- example
Input/input-special-
input-input-special-1
A input/input-special- example
Input/input-special-
input-input-special-2
A input/input-special- example
Input/input-special-
input-input-special-3
A input/input-special- example
Input/input-special-
input-input-special-4
A input/input-special- example
Input/input-special-
input-input-special-5
A input/input-special- example
Input/input-standard-
input-input-standard-1
A input/input-standard- example
Input/input-standard-
input-input-standard-2
A input/input-standard- example
Input/input-standard-
input-input-standard-3
A input/input-standard- example
Input/input-standard-
input-input-standard-4
A input/input-standard- example
Input/input-standard-
input-input-standard-5
A input/input-standard- example
Input/input-standard-
input-input-standard-6
A input/input-standard- example
Input/input-standard-
input-input-standard-7
A input/input-standard- example
Input/input-types-
input-input-types-1
A input/input-types- example
Input/input-types-
input-input-types-2
A input/input-types- example
Input/input-types-
input-input-types-3
A input/input-types- example
Input/input-types-
input-input-types-4
A input/input-types- example
Input/input-types-
input-input-types-5
A input/input-types- example
Input/input-types-
input-input-types-6
A input/input-types- example
Input/input-types-
input-input-types-7
A input/input-types- example
Input/input-validation-
input-input-validation-1
A input/input-validation- example
Input/input-validation-
input-input-validation-2
A input/input-validation- example
Input/input-validation-
input-input-validation-3
A input/input-validation- example
Input/input-validation-
input-input-validation-4
A input/input-validation- example
Input/input-validation-
input-input-validation-5
A input/input-validation- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-1
A input-otp/input-otp-behavior- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-2
A input-otp/input-otp-behavior- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-3
A input-otp/input-otp-behavior- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-4
A input-otp/input-otp-behavior- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-1
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-2
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-3
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-4
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-5
A input-otp/input-otp-standard- example
Input-otp/input-otp-states-
input-otp-input-otp-states-1
A input-otp/input-otp-states- example
Input-otp/input-otp-states-
input-otp-input-otp-states-2
A input-otp/input-otp-states- example
Input-otp/input-otp-states-
input-otp-input-otp-states-3
A input-otp/input-otp-states- example
Input-otp/input-otp-states-
input-otp-input-otp-states-4
A input-otp/input-otp-states- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-1
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-2
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-3
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-4
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-variants-
input-otp-input-otp-variants-1
A input-otp/input-otp-variants- example
Input-otp/input-otp-variants-
input-otp-input-otp-variants-2
A input-otp/input-otp-variants- example
Input-otp/input-otp-variants-
input-otp-input-otp-variants-3
A input-otp/input-otp-variants- example
Integration
integration1
A component showcasing a collection of integration options with app icons, titles, and descriptions, arranged in up to two columns.
Integration
integration10
A component showcasing a list of integrations with titles, descriptions, and "Connect" buttons, arranged in a single column with a minimalist design.
Integration
integration11
A tabbed component showcasing categorized integrations with toggles for connection status and details button. Layout scales from 1 to 3 columns.
Integration
integration12
A component features platform integration with a list of 5 permissions. Includes two logo comparisons, title, description, and buttons for actions.
Integration
integration13
A component showcasing a collection of integrations with iconic apps, featuring hover-activated animation for emphasis and links for more details.
Integration
integration2
A component featuring a title, subtitle, a marquee of logos linking to various resources, and a discovery button.
Integration
integration3
A component showcasing a list of integrations with icons, titles, and descriptions arranged in a single column layout.
Integration
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
integration5
A component showcasing integration options with title, description, buttons, and a two-column layout with logos.
Integration
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
integration7
A component showcasing integration with various tools, featuring two column layout, icons, and descriptions. Unique for its customizable gradient placeholders.
Integration
integration8
A component featuring dual-direction marquee rows of logos, highlighted with fade edges.
Integration
integration9
A component displaying available integrations in a 1-4 column grid, featuring icons, titles, and descriptions.
Invite-user
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
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
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
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/item-interactive-
item-item-interactive-1
A item/item-interactive- example
Item/item-interactive-
item-item-interactive-2
A item/item-interactive- example
Item/item-layout-
item-item-layout-1
A item/item-layout- example
Item/item-layout-
item-item-layout-2
A item/item-layout- example
Item/item-layout-
item-item-layout-3
A item/item-layout- example
Item/item-media-
item-item-media-1
A item/item-media- example
Item/item-media-
item-item-media-2
A item/item-media- example
Item/item-media-
item-item-media-3
A item/item-media- example
Item/item-standard-
item-item-standard-1
A item/item-standard- example
Item/item-standard-
item-item-standard-2
A item/item-standard- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-1
A kbd/kbd-arrow-keys- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-2
A kbd/kbd-arrow-keys- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-3
A kbd/kbd-arrow-keys- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-4
A kbd/kbd-arrow-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-1
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-2
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-3
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-4
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-5
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-6
A kbd/kbd-function-keys- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-1
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-2
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-3
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-4
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-5
A kbd/kbd-platform-specific- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-1
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-2
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-3
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-4
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-5
A kbd/kbd-pressed-state- example
Kbd/kbd-sequence-
kbd-kbd-sequence-1
A kbd/kbd-sequence- example
Kbd/kbd-sequence-
kbd-kbd-sequence-2
A kbd/kbd-sequence- example
Kbd/kbd-sequence-
kbd-kbd-sequence-3
A kbd/kbd-sequence- example
Kbd/kbd-sequence-
kbd-kbd-sequence-4
A kbd/kbd-sequence- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-1
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-2
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-3
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-4
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-5
A kbd/kbd-shortcut- example
Kbd/kbd-sizes-
kbd-kbd-sizes-1
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-2
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-3
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-4
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-5
A kbd/kbd-sizes- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-1
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-2
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-3
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-4
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-5
A kbd/kbd-with-icons- example
Label/label-standard-
label-label-standard-1
A label/label-standard- example
Label/label-standard-
label-label-standard-2
A label/label-standard- example
Label/label-standard-
label-label-standard-3
A label/label-standard- example
Label/label-standard-
label-label-standard-4
A label/label-standard- example
Label/label-standard-
label-label-standard-5
A label/label-standard- example
Label/label-standard-
label-label-standard-6
A label/label-standard- example
Label/label-standard-
label-label-standard-7
A label/label-standard- example
Label/label-standard-
label-label-standard-8
A label/label-standard- example
Leaderboard
leaderboard1
A ranked list card with progress bars showing relative values for each item.
Leaderboard
leaderboard2
A ranked list card with user avatars, names, subtitles, and values for each position.
Leaderboard
leaderboard3
A ranked list card with trend indicators showing movement direction for each item.
List
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
list2
A component displaying a list of awards with icons, titles, categories, and descriptions. Includes headings and buttons to view details.
List
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
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
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
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
login1
A login block featuring logo, input fields for email and password, a login button, a Google signup button, and a signup link.
Login
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
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
login4
A login form featuring email and password fields, "Remember me" checkbox & Google Login. Includes forgot password & signup links.
Login
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
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
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
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/logo-right-click-download
logo-logo-right-click-download
A logo/logo-right-click-download example
Logo/logo-standard
logo-logo-standard
A logo/logo-standard example
Logo/logo-wordmark
logo-logo-wordmark
A logo/logo-wordmark example
Logos
logos1
A component displaying a title and a row of partner logos with adjustable gaps, featuring grayscale and partial opacity effects.
Logos
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
logos11
A component featuring dual carousels of logos, a central title, and action buttons, styled with patterns and lines.
Logos
logos12
A carousel component displaying logos with auto-scroll functionality, supporting dark mode inversion.
Logos
logos13
A component displays partner logos in a grid with years; features a sticky description column and dynamic image inversion in dark mode.
Logos
logos17
A logo cloud section with two rows of company logos displayed in a static grid on desktop and animated marquee on mobile.
Logos
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
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
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
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
logos7
A component showcasing logos with a headline, organized in a horizontally scrolling ticker, featuring hover effects.
Logos
logos8
A logos showcase component with a title, subtitle, and a grid of logos from various companies, customizable via props.
Logos
logos9
A component showcasing product team endorsements and logos in carousels, with auto-scrolling functionality and dynamic column adjustments.
Menubar/menubar-standard-
menubar-menubar-standard-1
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-10
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-2
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-3
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-4
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-5
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-6
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-7
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-8
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-9
A menubar/menubar-standard- example
Navbar
navbar1
A navigational component with dynamic menus, offering desktop and mobile layouts, incorporating icons and accordion features for sub-menus.
Navbar
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
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
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
navbar17
A navigation component with dynamic indicator for active links and a mobile menu with an animated icon for toggling.
Navbar
navbar18
A navigation bar with logo, collapsible menus, and a login button. Layout adapts for mobile with a popover menu.
Navbar
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
navbar21
A dynamic navigation component with animated menu toggling. Displays a logo, a menu toggle button, expanding to show main links and socials.
Navbar
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
navbar24
A dynamic navbar component featuring an animated dock with interactive icons for navigation linked to different sections.
Navbar
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
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
navbar33
A floating fixed navbar with logo, navigation menu with dropdowns, and login button. Features glassmorphism styling and animated mobile hamburger menu.
Navbar
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
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
navbar6
A navigation component with a logo, desktop and mobile menus, dropdowns for complex items, and auth buttons. Features a toggled mobile menu.
Navbar
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
navbar8
A navigation component with dynamic background change on scroll and a responsive mobile menu, featuring logo, links with hover images, and buttons.
Navbar
navbar9
A navigation bar with logo, link/button list, and mobile menu toggle. On mobile, features an accordion menu for navigation items.
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-1
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-2
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-3
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-4
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-5
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-1
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-2
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-3
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-4
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-5
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-1
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-2
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-3
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-4
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-5
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-1
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-2
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-3
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-4
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-5
A navigation-menu/navigation-menu-standard- example
Offer-modal
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
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
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
onboarding1
A five-step onboarding wizard with profile setup, workspace configuration, account linking, role selection, and team invites featuring animated dashboard preview.
Onboarding
onboarding2
A modal onboarding flow with colorful step backgrounds, profile questions, goal checkboxes, account linking, extension promotion, and trial activation.
Order-history
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
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
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
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
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
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
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
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
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
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
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/pagination-advanced-
pagination-pagination-advanced-1
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-2
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-3
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-4
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-5
A pagination/pagination-advanced- example
Pagination/pagination-basic-
pagination-pagination-basic-1
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-2
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-3
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-4
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-5
A pagination/pagination-basic- example
Pagination/pagination-navigation-
pagination-pagination-navigation-1
A pagination/pagination-navigation- example
Pagination/pagination-navigation-
pagination-pagination-navigation-2
A pagination/pagination-navigation- example
Pagination/pagination-navigation-
pagination-pagination-navigation-3
A pagination/pagination-navigation- example
Pagination/pagination-navigation-
pagination-pagination-navigation-4
A pagination/pagination-navigation- example
Pagination/pagination-sizes-
pagination-pagination-sizes-1
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-2
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-3
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-4
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-5
A pagination/pagination-sizes- example
Payment-methods
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
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
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
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/popover-standard-
popover-popover-standard-1
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-10
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-11
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-12
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-13
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-14
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-15
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-2
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-3
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-4
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-5
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-6
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-7
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-8
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-9
A popover/popover-standard- example
Price/price-basic
price-price-basic
A price/price-basic example
Price/price-on-sale
price-price-on-sale
A price/price-on-sale example
Pricing
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
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
pricing11
A component with pricing plans & feature comparison. It displays billing options, plan details across columns, and uses collapsibles for mobile view.
Pricing
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
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
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
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
pricing16
A pricing component with a toggle for monthly/yearly billing, displaying 3 tiers, discounts for yearly plans, and key features.
Pricing
pricing2
A dual-column pricing component with a toggle for monthly/yearly plans, including plan features and purchase links.
Pricing
pricing20
A pricing component showcasing three plans, with toggled monthly/yearly prices, feature lists, and icons identifying plan types.
Pricing
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
pricing22
A component displaying 3 pricing plans with features, adjustable to annual or monthly billing, highlighting the "Startup" option uniquely.
Pricing
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
pricing24
A pricing component with a toggle for annual billing, displaying 3 plans in columns, featuring highlights and a call-to-action button per plan, with special emphasis on a popular choice via scaling and ring decoration.
Pricing
pricing26
A component displaying 3 marketing plan options, highlighting one. Features badges, descriptions, and a call-to-action button for each plan.
Pricing
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
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
pricing29
A component displaying 3 pricing tiers with features and CTA buttons, highlighted by design variations for the middle tier.
Pricing
pricing3
A pricing block with a yearly billing switch, featuring 3 columns for Basic, Standard, and Premium plans. Includes feature lists and pricing details.
Pricing
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
pricing31
A component displaying 3 pricing plans with features, highlighting the "most popular" choice. Each plan card lists price, benefits, and a CTA button.
Pricing
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
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
pricing34
A pricing component with a toggle for monthly/yearly billing, three plan options, and includes feature lists, using cards.
Pricing
pricing35
A component displays 2 pricing plans with features like custom/standard pricing, toggle for billing frequency, and CTA buttons. Each card offers a descriptive text and chooses between a yearly or quarterly plan.
Pricing
pricing36
Two-column pricing component, showcasing starter and enterprise plans with features, prices, and call-to-action buttons.
Pricing
pricing37
A premium plan showcase block with a title, subtitle, price, and features list followed by a button. Uses iconography for feature representation.
Pricing
pricing38
A marketing package selector with 3 options, highlighting features per plan. Includes alerts and clickable elements for user interaction.
Pricing
pricing4
A component displaying a pricing section with 3 tiers and a customizable payment frequency toggle (Monthly/Yearly). Includes feature lists and call-to-action buttons.
Pricing
pricing40
A component displays service packages in accordions, providing details on pricing and what each offers in a 3-column layout upon expansion.
Pricing
pricing41
A pricing section with three plan cards featuring monthly/yearly toggle, feature lists with check icons, and highlighted recommended plan.
Pricing
pricing42
A detailed pricing comparison table with plan headers and categorized feature rows showing availability across tiers with check marks and values.
Pricing
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
pricing6
A pricing component with a heading, description, price, features list, and a call-to-action button. Features 3 groups of listed perks.
Pricing
pricing7
A component displaying pricing options with a billing cycle toggle (monthly/annually), supporting discount display. Includes a 2-column layout for plan comparisons, featuring dynamic pricing, plan benefits, and "Start a free trial" buttons.
Pricing
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
pricing9
A pricing table component with a plan switcher, tooltips, and feature icons, displaying 3 tiers and key features in a 4-column layout.
Process
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
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
process3
A component showcasing a 5-step process with animated entries, structured layout, and shifting background colors for each step. Unique number positioning.
Process
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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-specs
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
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/progress-basic-
progress-progress-basic-1
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-2
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-3
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-4
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-5
A progress/progress-basic- example
Progress/progress-colored-
progress-progress-colored-1
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-2
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-3
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-4
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-5
A progress/progress-colored- example
Progress/progress-sizes-
progress-progress-sizes-1
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-2
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-3
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-4
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-5
A progress/progress-sizes- example
Progress/progress-with-label-
progress-progress-with-label-1
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-2
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-3
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-4
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-5
A progress/progress-with-label- example
Project
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
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
project12
A component with dynamic text animations, back button, detailed project information, and a large image; layout includes columns with animations for elements.
Project
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
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
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
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
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
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
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
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
project9
A dual-column component featuring a sticky narrative section with animated transitions and a gallery of monochrome images that enlarge on hover.
Projects
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
projects10
A gallery block with a 3-column layout displaying images that enlarge and reveal titles and descriptions on hover.
Projects
projects11
A dynamic image gallery with 1-3 columns featuring animated, hover-zoomed images.
Projects
projects12
An interactive gallery component with a 1-3 column layout, showcasing projects with hover animations and dynamic, motion-enhanced tooltips.
Projects
projects13
A component showcasing 4 projects with details: Title, Description, Launch Date & Image, in a 3-column layout emphasizing project highlights.
Projects
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
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
projects16
A gallery component showcasing nature photos in two columns, with a descriptive heading and a discovery link button.
Projects
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
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
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
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
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
projects5
A gallery block showcasing 6 projects with animations, in 1 or 2 columns depending on screen size, including images and project details.
Projects
projects6
A gallery component with a 2-column layout showcasing 4 project cards that animate on hover and reveal details.
Projects
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
projects8
A component displaying items in a grid with 3 columns, featuring category filters and animations on item change.
Projects
projects9
A component displaying a 1 or 2-column grid of images with hover effects revealing titles and descriptions.
Promo-banner
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
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
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
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
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
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
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/radio-group-advanced-
radio-group-radio-group-advanced-1
A radio-group/radio-group-advanced- example
Radio-group/radio-group-advanced-
radio-group-radio-group-advanced-2
A radio-group/radio-group-advanced- example
Radio-group/radio-group-form-
radio-group-radio-group-form-1
A radio-group/radio-group-form- example
Radio-group/radio-group-form-
radio-group-radio-group-form-2
A radio-group/radio-group-form- example
Radio-group/radio-group-layout-
radio-group-radio-group-layout-1
A radio-group/radio-group-layout- example
Radio-group/radio-group-layout-
radio-group-radio-group-layout-2
A radio-group/radio-group-layout- example
Radio-group/radio-group-layout-
radio-group-radio-group-layout-3
A radio-group/radio-group-layout- example
Radio-group/radio-group-standard-
radio-group-radio-group-standard-1
A radio-group/radio-group-standard- example
Radio-group/radio-group-standard-
radio-group-radio-group-standard-2
A radio-group/radio-group-standard- example
Rate-card
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
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/rating-basic
rating-rating-basic
A rating/rating-basic example
Rating/rating-with-score
rating-rating-with-score
A rating/rating-with-score example
Resource
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
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
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
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
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
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
resources4
A component showcasing recent updates with a title, list items including titles, categories, avatars, dates, and interactive hover effects.
Resources
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
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
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
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
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
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
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
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
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
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
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/scroll-area-advanced-
scroll-area-scroll-area-advanced-1
A scroll-area/scroll-area-advanced- example
Scroll-area/scroll-area-advanced-
scroll-area-scroll-area-advanced-2
A scroll-area/scroll-area-advanced- example
Scroll-area/scroll-area-advanced-
scroll-area-scroll-area-advanced-3
A scroll-area/scroll-area-advanced- example
Scroll-area/scroll-area-layout-
scroll-area-scroll-area-layout-1
A scroll-area/scroll-area-layout- example
Scroll-area/scroll-area-layout-
scroll-area-scroll-area-layout-2
A scroll-area/scroll-area-layout- example
Scroll-area/scroll-area-layout-
scroll-area-scroll-area-layout-3
A scroll-area/scroll-area-layout- example
Scroll-area/scroll-area-standard-
scroll-area-scroll-area-standard-1
A scroll-area/scroll-area-standard- example
Scroll-area/scroll-area-standard-
scroll-area-scroll-area-standard-2
A scroll-area/scroll-area-standard- example
Scrollable-tabslist/scrollable-tabslist-basic
scrollable-tabslist-scrollable-tabslist-basic
A scrollable-tabslist/scrollable-tabslist-basic example
Separator/separator-basic-
separator-separator-basic-1
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-2
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-3
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-4
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-5
A separator/separator-basic- example
Separator/separator-spacing-
separator-separator-spacing-1
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-2
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-3
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-4
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-5
A separator/separator-spacing- example
Separator/separator-styled-
separator-separator-styled-1
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-2
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-3
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-4
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-5
A separator/separator-styled- example
Separator/separator-with-text-
separator-separator-with-text-1
A separator/separator-with-text- example
Separator/separator-with-text-
separator-separator-with-text-2
A separator/separator-with-text- example
Separator/separator-with-text-
separator-separator-with-text-3
A separator/separator-with-text- example
Service
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
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
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
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
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
service6
This component showcases UX/UI design services, expertise, and related offerings in a structured layout including icons and descriptions.
Service
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
services1
A component displaying services in 1-2 columns, each service with a title, description, and list of features marked by check icons.
Services
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
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
services12
A component displaying featured services in a grid layout with a description panel, offering dynamic interaction for each service card.
Services
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
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
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
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
services18
A 3-column component displaying services with a large title, description, and interactive list. Includes progress indicators and "Get Started" CTA.
Services
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
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
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
services3
A component displaying four service categories, each with an icon, title, and list of services in a three-column layout.
Services
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
services5
A 4-column component listing services with icons, titles, descriptions, and bullet points. Features a central 'Services' title and summary.
Services
services6
A component showcasing 4 services with icons, titles, descriptions, and items in a 1-2-4 column layout, featuring hover effects.
Services
services7
This component displays four services, each with an icon, title, description, and list of features, styled with rounded containers.
Services
services8
An interactive component lists services with accordions, including icons, titles, and descriptions. Features 2-column grid for in-depth details.
Services
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
settings-integrations1
A searchable integration gallery with category filter popover, compact integration cards showing logos and categories, and filtered results display.
Settings-integrations
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
settings-integrations3
A responsive grid of integration cards with large logos, descriptions, connected status badges, and hover arrow indicators for available connections.
Settings-integrations3a
settings-integrations3a
A responsive integration settings grid displaying third-party service cards with connection status badges and hover interactions.
Settings-integrations
settings-integrations4
A settings integrations panel with tabbed navigation to browse services by category, featuring connect/disconnect buttons and status badges.
Settings-integrations
settings-integrations5
A compact integration settings panel with toggle switches for quick enable/disable of connected services.
Settings-integrations
settings-integrations6
A table-based integration management view showing service status, sync times, and action buttons for settings and removal.
Settings-integrations
settings-integrations7
A full-page integration browser with search, card-based layout featuring category labels and connect buttons in card footers.
Settings-integrations
settings-integrations8
A two-column integration browser with category sidebar navigation and scrollable list of integration items.
Settings-integrations
settings-integrations9
A management view for active integrations showing connection status, who connected them, and recent activity with dropdown actions.
Settings-members
settings-members1
A team members table with search input, role filter popover, invite dialog, and status badges showing active and pending members.
Settings-members
settings-members2
A vertical member list with avatars, role badges, dropdown actions, search input, and invite dialog with help link in subheading.
Settings-members
settings-members3
A responsive card grid displaying team members with avatars, color-coded role badges, join dates, and dropdown action menus.
Settings-members
settings-members4
A compact member list with checkboxes for bulk selection, role count badges, pending status indicators, and bulk remove action button.
Settings-members
settings-members5
A tabbed interface separating active members from pending invitations, with online status indicators, last active times, and invite expiration tracking.
Settings-notifications
settings-notifications1
A minimal notification settings list with checkboxes for each notification type in a single vertical column.
Settings-notifications
settings-notifications2
A minimal notification settings list with switch toggles for each notification type in a vertical stack.
Settings-notifications
settings-notifications3
A notification settings section with notifications organized into labeled categories, each in a bordered card with switch toggles.
Settings-notifications
settings-notifications4
A notification settings table with Email and SMS checkbox columns for each notification type in a matrix layout.
Settings-profile
settings-profile1
A compact profile settings card with avatar upload, name, username, email, and bio fields.
Settings-profile
settings-profile2
A comprehensive profile settings form with personal info, work details, and social media links organized in sections.
Settings-profile
settings-profile3
A multi-card profile settings layout with cover image upload, avatar, basic info, and regional preferences.
Settings-profile
settings-profile4
A full-page profile editor with sidebar navigation, sectioned content, and sticky save bar.
Settings-profile
settings-profile5
A two-column profile editor with live preview showing how changes appear to others in real-time.
Settings-profile
settings-profile6
A multi-step wizard for profile setup with progress indicator, back/next navigation, and review step.
Settings-profile
settings-profile7
A compact profile card with inline editing - click to edit fields, save on enter or blur.
Shader
shader1
This component renders an animated, customizable shader background using Three.js and React Three Fiber, featuring vertex and fragment shaders with adjustable uniforms. Users can control its appearance by providing their own shaders, uniforms, and a color option.
Shader
shader10
This component creates a dynamic visual block using WebGL shaders for blending and transitioning between background images with lens distortion effects. It leverages React Three Fiber and allows customization of image sources, transition duration, and pause duration to create engaging visual effects in React applications.
Shader
shader2
This component generates a dynamic, animated background using customizable vertex and fragment shaders, allowing for real-time visual effects driven by WebGL and three.js. Its parameters include shaders for fine-tuning graphics, uniform values for interactivity, and styling options to adapt to various layouts.
Shader
shader3
This component provides an interactive 3D shader backdrop that features advanced visual effects influenced by mouse movement, offering dynamic backgrounds for applications. It includes customizable vertex and fragment shaders, with adjustable uniforms to control time, resolution, mouse position, and color for bespoke graphical designs.
Shader
shader4
This component is a customizable shader background that uses WebGL for rendering dynamic visual effects with vertex and fragment shaders. It allows users to specify shader code and uniforms to create animated and interactive graphical backgrounds with Three.js in a React environment.
Shader
shader5
This component generates a dynamic shader-based background using customizable vertex and fragment shaders, allowing for visually engaging effects. It includes uniform variables for time and resolution, enabling smooth animations and responsiveness to changes in canvas size.
Shader
shader6
This component, Shader6, renders an animated background with customizable shaders and colors, using WebGL capabilities via the React Three Fiber library. Users can adjust vertex and fragment shaders, as well as define custom uniform values, to create dynamic and visually engaging effects for display.
Shader
shader7
This component, called Shader7, creates an animated background using WebGL shaders within a React application. It leverages customizable vertex and fragment shaders along with various configurable parameters to generate fluid, dynamic visual effects based on user interactions.
Shader
shader8
This component is designed to render an interactive, visually dynamic shader effect using WebGL through the `@react-three/fiber` library. It features mouse interaction capabilities, allowing the shapes and colors within the shader to change based on user input.
Shader
shader9
This component uses WebGL and a shader to create an animated background with interactive mouse effects, rendering it into a Three.js canvas. Categorized under graphics and animation, it features customizable vertex and fragment shaders with dynamic uniforms for enhanced visual effects.
Sheet/sheet-details-
sheet-sheet-details-1
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-2
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-3
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-4
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-5
A sheet/sheet-details- example
Sheet/sheet-form-
sheet-sheet-form-1
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-2
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-3
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-4
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-5
A sheet/sheet-form- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-1
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-2
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-3
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-4
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-5
A sheet/sheet-multi-section- example
Sheet/sheet-navigation-
sheet-sheet-navigation-1
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-2
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-3
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-4
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-5
A sheet/sheet-navigation- example
Sheet/sheet-settings-
sheet-sheet-settings-1
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-2
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-3
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-4
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-5
A sheet/sheet-settings- example
Sheet/sheet-standard-
sheet-sheet-standard-1
A sheet/sheet-standard- example
Sheet/sheet-standard-
sheet-sheet-standard-2
A sheet/sheet-standard- example
Sheet/sheet-standard-
sheet-sheet-standard-3
A sheet/sheet-standard- example
Sheet/sheet-standard-
sheet-sheet-standard-4
A sheet/sheet-standard- example
Shopping-cart
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
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
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
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
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
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
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
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
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
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
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
sidebar1
A simple sidebar with logo header, labeled navigation groups, footer links, and main content area with breadcrumbs and toggle button.
Sidebar
sidebar10
A sidebar10 component
Sidebar
sidebar11
A sidebar11 component
Sidebar
sidebar12
A sidebar12 component
Sidebar
sidebar13
A sidebar13 component
Sidebar
sidebar14
A sidebar14 component
Sidebar
sidebar15
A sidebar15 component
Sidebar
sidebar16
A sidebar16 component
Sidebar
sidebar17
A sidebar17 component
Sidebar
sidebar18
A sidebar18 component
Sidebar
sidebar19
A sidebar19 component
Sidebar
sidebar2
A sidebar with collapsible navigation groups, nested submenu items with chevron indicators, and expandable project sections.
Sidebar
sidebar20
A sidebar20 component
Sidebar
sidebar21
A sidebar21 component
Sidebar
sidebar3
A sidebar with multiple labeled navigation groups covering overview, projects, team, and workspace sections with footer utilities.
Sidebar
sidebar4
A sidebar with collapsible navigation groups that can expand/collapse entire sections, combining group labels with expandable content.
Sidebar
sidebar5
A sidebar with integrated search input in the header, collapsible navigation groups, and labeled sections for quick filtering.
Sidebar
sidebar6
A sidebar with user profile dropdown in the footer showing avatar, name, email, and account/logout options with collapsible navigation.
Sidebar
sidebar7
A sidebar with workspace/organization switcher dropdown in the header, allowing users to switch between different workspaces or teams.
Sidebar
sidebar8
An inset sidebar variant that appears contained within the page with rounded corners, workspace switcher, user footer, and collapsible groups.
Sidebar
sidebar9
A sidebar9 component
Signup
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
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
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
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
signup4
A signup component featuring a logo, headings, email/password inputs, and social media signup options (Google, Facebook, Apple). Includes a 'login' link.
Signup
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
signup6
A signup component featuring email/password fields, Google signup, and a login redirect. Layout includes a centered form in a 400px column.
Signup
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
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
signup9
A signup component with Google signup option, email input, and a carousel of logos at the bottom.
Skeleton/skeleton-card-
skeleton-skeleton-card-1
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-2
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-3
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-4
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-5
A skeleton/skeleton-card- example
Skeleton/skeleton-content-
skeleton-skeleton-content-1
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-2
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-3
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-4
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-5
A skeleton/skeleton-content- example
Skeleton/skeleton-form-
skeleton-skeleton-form-1
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-2
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-3
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-4
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-5
A skeleton/skeleton-form- example
Skeleton/skeleton-list-
skeleton-skeleton-list-1
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-2
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-3
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-4
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-5
A skeleton/skeleton-list- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-1
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-2
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-3
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-4
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-5
A skeleton/skeleton-profile- example
Skeleton/skeleton-table-
skeleton-skeleton-table-1
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-2
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-3
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-4
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-5
A skeleton/skeleton-table- example
Skills
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
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/slider-interactive-
slider-slider-interactive-1
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-2
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-3
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-4
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-5
A slider/slider-interactive- example
Slider/slider-range-
slider-slider-range-1
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-2
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-3
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-4
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-5
A slider/slider-range- example
Slider/slider-settings-
slider-slider-settings-1
A slider/slider-settings- example
Slider/slider-settings-
slider-slider-settings-2
A slider/slider-settings- example
Slider/slider-settings-
slider-slider-settings-3
A slider/slider-settings- example
Slider/slider-settings-
slider-slider-settings-4
A slider/slider-settings- example
Slider/slider-standard-
slider-slider-standard-1
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-2
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-3
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-4
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-5
A slider/slider-standard- example
Slider/slider-styled-
slider-slider-styled-1
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-2
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-3
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-4
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-5
A slider/slider-styled- example
Slider/slider-vertical-
slider-slider-vertical-1
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-2
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-3
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-4
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-5
A slider/slider-vertical- example
Sonner/sonner-content-
sonner-sonner-content-1
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-2
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-3
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-4
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-5
A sonner/sonner-content- example
Sonner/sonner-interactive-
sonner-sonner-interactive-1
A sonner/sonner-interactive- example
Sonner/sonner-interactive-
sonner-sonner-interactive-2
A sonner/sonner-interactive- example
Sonner/sonner-interactive-
sonner-sonner-interactive-3
A sonner/sonner-interactive- example
Sonner/sonner-interactive-
sonner-sonner-interactive-4
A sonner/sonner-interactive- example
Sonner/sonner-position-
sonner-sonner-position-1
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-2
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-3
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-4
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-5
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-6
A sonner/sonner-position- example
Sonner/sonner-promise-
sonner-sonner-promise-1
A sonner/sonner-promise- example
Sonner/sonner-promise-
sonner-sonner-promise-2
A sonner/sonner-promise- example
Sonner/sonner-promise-
sonner-sonner-promise-3
A sonner/sonner-promise- example
Sonner/sonner-promise-
sonner-sonner-promise-4
A sonner/sonner-promise- example
Sonner/sonner-standard-
sonner-sonner-standard-1
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-2
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-3
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-4
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-5
A sonner/sonner-standard- example
Spinner/spinner-applications-
spinner-spinner-applications-1
A spinner/spinner-applications- example
Spinner/spinner-applications-
spinner-spinner-applications-2
A spinner/spinner-applications- example
Spinner/spinner-applications-
spinner-spinner-applications-3
A spinner/spinner-applications- example
Spinner/spinner-button-
spinner-spinner-button-1
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-2
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-3
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-4
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-5
A spinner/spinner-button- example
Spinner/spinner-inline-
spinner-spinner-inline-1
A spinner/spinner-inline- example
Spinner/spinner-inline-
spinner-spinner-inline-2
A spinner/spinner-inline- example
Spinner/spinner-inline-
spinner-spinner-inline-3
A spinner/spinner-inline- example
Spinner/spinner-inline-
spinner-spinner-inline-4
A spinner/spinner-inline- example
Spinner/spinner-standard-
spinner-spinner-standard-1
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-2
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-3
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-4
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-5
A spinner/spinner-standard- example
Stats-card
stats-card1
A compact metric card displaying a value with trend indicator showing percentage change and direction.
Stats-card
stats-card10
A metric card with a colored left border accent and pill badge showing percentage change.
Stats-card
stats-card2
A metric card with a sparkline area chart showing recent trend data below the main value.
Stats-card
stats-card3
A metric card showing progress toward a goal with a progress bar and target value.
Stats-card
stats-card4
A metric card displaying current and previous period values side by side for easy comparison.
Stats-card
stats-card5
A metric card with a colored icon badge in the header alongside the title and value.
Stats-card
stats-card6
A metric card showing a total value with a breakdown list of contributing segments below.
Stats-card
stats-card7
A metric card with a mini donut chart showing percentage completion alongside the value.
Stats-card
stats-card8
A metric card with a color-coded status indicator showing healthy, warning, or critical states.
Stats-card
stats-card9
A metric card with MRR/ARR toggle to switch between monthly and annual recurring revenue views.
Stats
stats1
A component displaying performance stats in 3 columns, highlighted by large numbers and explanatory texts, centered around platform efficiency gains.
Stats
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
stats11
A statistical block displaying achievements with a unique background gradient, 2-column layout for stats, and decorative circles in the backdrop.
Stats
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
stats13
A component showcasing animated bars comparing values, with tooltips and percentage indicators for enhanced visual analysis. Includes a candy-striped background.
Stats
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
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
stats16
A component displaying statistics with a title, subtitle, a dynamic line chart, and three key metrics.
Stats
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
stats18
A component featuring a central radar chart and a row of stats below, displaying numerical values and descriptions.
Stats
stats19
A component displaying "Milestones" with a 6-column layout; includes a sticky label and lists stats in 2:3 column ratios.
Stats
stats2
A 3-column block displaying platform insights with arrows and icons denoting trends and values, includes descriptive texts.
Stats
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
stats5
A component displays performance metrics in 3 columns, highlighting values with dynamic icons and bold percentage figures.
Stats
stats6
A component displaying platform performance metrics and two buttons. It features a bold title, 4 columns for statistics, and dynamic text sizing.
Stats
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
stats8
A stats display component with a heading, description, and link, followed by a 4-column layout for statistics.
Stats
stats9
This component displays statistics and four feature cards in a 2-column layout, highlighting benefits and key metrics.
Switch/switch-cards-
switch-switch-cards-1
A switch/switch-cards- example
Switch/switch-cards-
switch-switch-cards-2
A switch/switch-cards- example
Switch/switch-cards-
switch-switch-cards-3
A switch/switch-cards- example
Switch/switch-cards-
switch-switch-cards-4
A switch/switch-cards- example
Switch/switch-icons-
switch-switch-icons-1
A switch/switch-icons- example
Switch/switch-icons-
switch-switch-icons-2
A switch/switch-icons- example
Switch/switch-icons-
switch-switch-icons-3
A switch/switch-icons- example
Switch/switch-labeled-
switch-switch-labeled-1
A switch/switch-labeled- example
Switch/switch-labeled-
switch-switch-labeled-2
A switch/switch-labeled- example
Switch/switch-labeled-
switch-switch-labeled-3
A switch/switch-labeled- example
Switch/switch-labeled-
switch-switch-labeled-4
A switch/switch-labeled- example
Switch/switch-square-
switch-switch-square-1
A switch/switch-square- example
Switch/switch-square-
switch-switch-square-2
A switch/switch-square- example
Switch/switch-square-
switch-switch-square-3
A switch/switch-square- example
Switch/switch-square-
switch-switch-square-4
A switch/switch-square- example
Switch/switch-standard-
switch-switch-standard-1
A switch/switch-standard- example
Switch/switch-standard-
switch-switch-standard-2
A switch/switch-standard- example
Switch/switch-standard-
switch-switch-standard-3
A switch/switch-standard- example
Switch/switch-standard-
switch-switch-standard-4
A switch/switch-standard- example
Table/table-advanced-
table-table-advanced-1
A table/table-advanced- example
Table/table-advanced-
table-table-advanced-2
A table/table-advanced- example
Table/table-advanced-
table-table-advanced-3
A table/table-advanced- example
Table/table-advanced-
table-table-advanced-4
A table/table-advanced- example
Table/table-standard-
table-table-standard-1
A table/table-standard- example
Table/table-standard-
table-table-standard-2
A table/table-standard- example
Table/table-standard-
table-table-standard-3
A table/table-standard- example
Table/table-standard-
table-table-standard-4
A table/table-standard- example
Tabs/tabs-advanced-
tabs-tabs-advanced-1
A tabs/tabs-advanced- example
Tabs/tabs-advanced-
tabs-tabs-advanced-2
A tabs/tabs-advanced- example
Tabs/tabs-advanced-
tabs-tabs-advanced-3
A tabs/tabs-advanced- example
Tabs/tabs-content-
tabs-tabs-content-1
A tabs/tabs-content- example
Tabs/tabs-content-
tabs-tabs-content-2
A tabs/tabs-content- example
Tabs/tabs-content-
tabs-tabs-content-3
A tabs/tabs-content- example
Tabs/tabs-layout-
tabs-tabs-layout-1
A tabs/tabs-layout- example
Tabs/tabs-layout-
tabs-tabs-layout-2
A tabs/tabs-layout- example
Tabs/tabs-layout-
tabs-tabs-layout-3
A tabs/tabs-layout- example
Tabs/tabs-standard-
tabs-tabs-standard-1
A tabs/tabs-standard- example
Tabs/tabs-standard-
tabs-tabs-standard-2
A tabs/tabs-standard- example
Team
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
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
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
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
team13
A component featuring a team carousel with animated images/animations for mobile and a grid layout for other devices.
Team
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
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
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
team36
A simple team or investors grid with square photos, names, and roles/companies in a responsive 5-column layout.
Team
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
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
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
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
team8
A carousel component showcasing team members with images, roles, and years of experience. Includes navigation buttons and a separator.
Team
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
testimonial1
A testimonial block displaying client feedback with navigation buttons, responsive carousel for mobile, and a 4-column masonry layout for larger screens.
Testimonial
testimonial10
A testimonial block with a central quote, author's name, role, and avatar in a vertical layout.
Testimonial
testimonial11
A component displaying a testimonial section with a rating block, supporting multiple columns, and dynamic testimonial visibility based on screen size.
Testimonial
testimonial12
A component displaying carousel testimonials in a 3-column layout, featuring image+text on the left and detailed stats on the right.
Testimonial
testimonial13
A component featuring a testimonial with overlapping avatars and a quote, showcased on a single-column layout with centered text.
Testimonial
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
testimonial15
A component with a 2-column layout, showcasing a headline, description, button, company logos, and 4 personalized testimonials with avatars.
Testimonial
testimonial16
A component showcasing user testimonials in a grid with 2 columns, expandable content, and avatars.
Testimonial
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
testimonial18
A testimonial component displaying a 5-star rating, a highlighted quote, and the author's avatar and details.
Testimonial
testimonial19
A carousel showcasing client testimonials with a 5-star rating system, client roles, and avatars. Features auto-scroll and multi-column layout.
Testimonial
testimonial2
This component displays a bold, centered message with overlapping avatars and a large "Get started for free" button underneath.
Testimonial
testimonial20
A two-column testimonial block with dashed borders, featuring quotes, avatars, and names. Decorated with sparkle icons at its corners.
Testimonial
testimonial21
A component showcasing expert testimonials with a header, badges, and a 3-column layout of cards containing logos, quotes, and author info.
Testimonial
testimonial23
A masonry layout component displaying customer testimonials with avatars, feedback, and dates. Includes a title, subtitle, and a "See More" button.
Testimonial
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
testimonial25
Testimonial carousel with navigation buttons, cards displaying quotes, authors, roles, companies, and images.
Testimonial
testimonial26
A testimonial carousel block with dynamic navigation dots and decorative background patterns. Displays quotes, authors, roles, and logos.
Testimonial
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
testimonial28
A carousel component showcasing testimonials with avatars, names, and comments. Each slide has a dashed border with plus icons at the corners.
Testimonial
testimonial29
A testimonial carousel block with auto-rotation, featuring individual avatars, names, roles, and quotes. Layout includes centered items and pagination dots.
Testimonial
testimonial3
A testimonial component with a quote, image logo, and author attribution centered in a bordered block with adjustable padding.
Testimonial
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
testimonial31
A testimonial section with heading, description, CTA button, and a horizontal carousel of photo cards featuring quotes and author info.
Testimonial
testimonial4
A testimonial component with 1 large image & text block plus 3 smaller text cards, each featuring an avatar.
Testimonial
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
testimonial7
A component showcasing two auto-scrolling carousels of client testimonials, with avatars, names, roles, and quotes, plus a section header.
Testimonial
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
testimonial9
A testimonials grid with dynamic columns, showcasing clients' feedback, names, roles, and avatars, along with a headline and subtext.
Textarea/textarea-form-
textarea-textarea-form-1
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-2
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-3
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-4
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-5
A textarea/textarea-form- example
Textarea/textarea-labeled-
textarea-textarea-labeled-1
A textarea/textarea-labeled- example
Textarea/textarea-labeled-
textarea-textarea-labeled-2
A textarea/textarea-labeled- example
Textarea/textarea-labeled-
textarea-textarea-labeled-3
A textarea/textarea-labeled- example
Textarea/textarea-labeled-
textarea-textarea-labeled-4
A textarea/textarea-labeled- example
Textarea/textarea-standard-
textarea-textarea-standard-1
A textarea/textarea-standard- example
Textarea/textarea-standard-
textarea-textarea-standard-2
A textarea/textarea-standard- example
Textarea/textarea-standard-
textarea-textarea-standard-3
A textarea/textarea-standard- example
Textarea/textarea-standard-
textarea-textarea-standard-4
A textarea/textarea-standard- example
Timeline
timeline1
A component presenting a 3-step process: "Data Integration," "Custom Configuration," and "Scale Your Business," each with icons, titles, and descriptions.
Timeline
timeline10
A timeline component with 4 columns, highlighting project phases with dates, titles, and descriptions, using animation to show current progress.
Timeline
timeline11
A 4-column timeline component showcasing phases with icons, dates, titles, and descriptions. Features an animated progress indicator.
Timeline
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
timeline13
A component displaying a product launch timeline with 3 phases, progress bars, and durations. Features an animated timeline indicator.
Timeline
timeline14
A timeline component showcasing key milestones, uses intersection observer for active item highlight, includes sticky year indicator.
Timeline
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
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
timeline4
A component showcasing a step-by-step guide with alternating layout, custom badges, icons, and diagonal patterns.
Timeline
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
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
timeline7
A component with a stepper UI to guide through a process, featuring dynamic progress indication, navigational buttons, and transition animations.
Timeline
timeline8
A vertical timeline block, showcasing events with dates, displayed in a centered max-width container with decorative separators.
Timeline
timeline9
This component displays a vertical timeline of key events in artificial intelligence history, using cards with titles, dates, and content.
Todo
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
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
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
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
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
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
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
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
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
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/toggle-group-sizes-
toggle-group-toggle-group-sizes-1
A toggle-group/toggle-group-sizes- example
Toggle-group/toggle-group-sizes-
toggle-group-toggle-group-sizes-2
A toggle-group/toggle-group-sizes- example
Toggle-group/toggle-group-sizes-
toggle-group-toggle-group-sizes-3
A toggle-group/toggle-group-sizes- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-1
A toggle-group/toggle-group-standard- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-2
A toggle-group/toggle-group-standard- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-3
A toggle-group/toggle-group-standard- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-4
A toggle-group/toggle-group-standard- example
Toggle/toggle-sizes-
toggle-toggle-sizes-1
A toggle/toggle-sizes- example
Toggle/toggle-sizes-
toggle-toggle-sizes-2
A toggle/toggle-sizes- example
Toggle/toggle-sizes-
toggle-toggle-sizes-3
A toggle/toggle-sizes- example
Toggle/toggle-standard-
toggle-toggle-standard-1
A toggle/toggle-standard- example
Toggle/toggle-standard-
toggle-toggle-standard-2
A toggle/toggle-standard- example
Toggle/toggle-standard-
toggle-toggle-standard-3
A toggle/toggle-standard- example
Toggle/toggle-standard-
toggle-toggle-standard-4
A toggle/toggle-standard- example
Tooltip/tooltip-content-
tooltip-tooltip-content-1
A tooltip/tooltip-content- example
Tooltip/tooltip-content-
tooltip-tooltip-content-2
A tooltip/tooltip-content- example
Tooltip/tooltip-content-
tooltip-tooltip-content-3
A tooltip/tooltip-content- example
Tooltip/tooltip-content-
tooltip-tooltip-content-4
A tooltip/tooltip-content- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-1
A tooltip/tooltip-standard- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-2
A tooltip/tooltip-standard- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-3
A tooltip/tooltip-standard- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-4
A tooltip/tooltip-standard- example
Trust-strip
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
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
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
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
user-profile1
A centered profile card with avatar, name, role, bio, and action buttons for messaging and following.
User-profile
user-profile10
A profile card with large portrait image, verification badge, and follow button.
User-profile
user-profile11
A profile card with full-bleed background image and overlay text.
User-profile
user-profile12
A social media style profile card with cover image, avatar, bio, and engagement stats.
User-profile
user-profile13
A freelancer profile card with skills, rating, client count, and hourly rate.
User-profile
user-profile14
A dramatic freelancer card with full-bleed background image and gradient overlay.
User-profile
user-profile2
A horizontal profile layout with avatar, name, role, social links, follower stats, and action buttons.
User-profile
user-profile3
A detailed profile card with cover image, overlapping avatar, bio, location, join date, social links, stats, and skill badges.
User-profile
user-profile4
A small pill-shaped profile chip with avatar, name, role, and status indicator for inline use.
User-profile
user-profile5
A compact team member card with gradient header, overlapping avatar, and contact action buttons.
User-profile
user-profile6
A profile card with tabbed sections for About, Experience, and Projects content.
User-profile
user-profile9
A full-width profile dashboard with cover image, stats cards showing metrics with change indicators.
Waitlist
waitlist1
A component featuring a "Join the Waitlist" title, a description, an email input field, and a button. Includes avatars showing user count.
Waitlist
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
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
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
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
about1
A multi-section about block with mission statement, values grid with icons, and image panels for company storytelling.
About
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
about13
A six-column about section with large story headline, team intro text, avatar profile card, philosophy paragraph, and full-width image.
About
about14
A six-column about section with headline, full-width hero image, labeled intro text, avatar profile, and philosophy statement.
About
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
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
about17
A seven-column profile section with role and timezone info, bio text, interactive tab navigation, and tab-controlled image display.
About
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
about19
A seven-column about section with large bordered image on the left and headline, text, quote attribution with avatar on the right.
About
about2
A comprehensive about block with centered intro, asymmetric image grid, stats section, logo strip, and benefit cards with testimonial.
About
about28
A two-column about section with alternating image and text blocks, featuring staggered image pairs and multi-paragraph text with optional CTA.
About
about3
A two-column about section with main image, breakout card, logo strip, and achievements stats grid on muted background.
About
about4
A centered about section with six-image grid, two-column vision and creators text blocks, and muted CTA banner.
About
about5
A developer-focused about section with two-column intro, large image, tech logos, origin story, and milestone cards.
About
about6
A two-column about section with story text and staggered photo grids showing team and workplace imagery.
About
about7
A narrative about section with offset image layout, product philosophy text, team photos, and careers CTA button.
About
about8
A fintech-style about section with plus-sign pattern background, stats row, mission narrative, image carousel, and founding team.
About
about9
A personal profile section with large team photo, role and location info with flag icon, bio text, and secondary workspace image.
Accept-invite
accept-invite1
A two-column invitation acceptance screen with Google sign-in, email input form, welcome message, and footer links.
Accept-invite
accept-invite2
A compact centered invitation card with host avatar initial, personalized message, and accept/decline buttons with expiration notice.
Accordion/accordion-form-
accordion-accordion-form-1
A accordion/accordion-form- example
Accordion/accordion-form-
accordion-accordion-form-2
A accordion/accordion-form- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-1
A accordion/accordion-multi-level- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-2
A accordion/accordion-multi-level- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-3
A accordion/accordion-multi-level- example
Accordion/accordion-multi-level-
accordion-accordion-multi-level-4
A accordion/accordion-multi-level- example
Accordion/accordion-standard-
accordion-accordion-standard-1
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-2
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-3
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-4
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-5
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-6
A accordion/accordion-standard- example
Accordion/accordion-standard-
accordion-accordion-standard-7
A accordion/accordion-standard- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-1
A accordion/accordion-subtitle- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-2
A accordion/accordion-subtitle- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-3
A accordion/accordion-subtitle- example
Accordion/accordion-subtitle-
accordion-accordion-subtitle-4
A accordion/accordion-subtitle- example
Accordion/accordion-tabs-
accordion-accordion-tabs-1
A accordion/accordion-tabs- example
Accordion/accordion-tabs-
accordion-accordion-tabs-2
A accordion/accordion-tabs- example
Accordion/accordion-tabs-
accordion-accordion-tabs-3
A accordion/accordion-tabs- example
Accordion/accordion-tabs-
accordion-accordion-tabs-4
A accordion/accordion-tabs- example
Address-book
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
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/alert-error-
alert-alert-error-1
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-2
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-3
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-4
A alert/alert-error- example
Alert/alert-error-
alert-alert-error-5
A alert/alert-error- example
Alert/alert-info-
alert-alert-info-1
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-2
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-3
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-4
A alert/alert-info- example
Alert/alert-info-
alert-alert-info-5
A alert/alert-info- example
Alert/alert-standard-
alert-alert-standard-1
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-2
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-3
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-4
A alert/alert-standard- example
Alert/alert-standard-
alert-alert-standard-5
A alert/alert-standard- example
Alert/alert-success-
alert-alert-success-1
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-2
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-3
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-4
A alert/alert-success- example
Alert/alert-success-
alert-alert-success-5
A alert/alert-success- example
Alert/alert-warning-
alert-alert-warning-1
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-2
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-3
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-4
A alert/alert-warning- example
Alert/alert-warning-
alert-alert-warning-5
A alert/alert-warning- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-1
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-2
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-3
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-4
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-5
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-confirmation-
alert-dialog-alert-dialog-confirmation-6
A alert-dialog/alert-dialog-confirmation- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-1
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-2
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-3
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-4
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-custom-actions-
alert-dialog-alert-dialog-custom-actions-5
A alert-dialog/alert-dialog-custom-actions- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-1
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-2
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-3
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-4
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-5
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-6
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-destructive-
alert-dialog-alert-dialog-destructive-7
A alert-dialog/alert-dialog-destructive- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-1
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-2
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-3
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-4
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-5
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-6
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-form-
alert-dialog-alert-dialog-form-7
A alert-dialog/alert-dialog-form- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-1
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-2
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-3
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-4
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-5
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-6
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-informational-
alert-dialog-alert-dialog-informational-7
A alert-dialog/alert-dialog-informational- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-1
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-2
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-3
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-4
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-5
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-6
A alert-dialog/alert-dialog-success- example
Alert-dialog/alert-dialog-success-
alert-dialog-alert-dialog-success-7
A alert-dialog/alert-dialog-success- example
Application-shell
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
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
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
application-shell12
Two-tier sidebar with collapsible panel, organization switcher, and animated transitions.
Application-shell
application-shell13
Top navigation bar with dropdown menus, search field, organization switcher, and mobile bottom navigation.
Application-shell
application-shell14
Cryptocurrency exchange interface with wallet menu, token favorites, notifications, and rounded navigation tabs.
Application-shell
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
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
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
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
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
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
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
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/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-1
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-2
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-3
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-4
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-5
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-6
A aspect-ratio/aspect-ratio-standard- example
Aspect-ratio/aspect-ratio-standard-
aspect-ratio-aspect-ratio-standard-7
A aspect-ratio/aspect-ratio-standard- example
Avatar/avatar-square-
avatar-avatar-square-1
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-2
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-3
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-4
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-5
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-6
A avatar/avatar-square- example
Avatar/avatar-square-
avatar-avatar-square-7
A avatar/avatar-square- example
Avatar/avatar-standard-
avatar-avatar-standard-1
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-10
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-11
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-12
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-13
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-14
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-15
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-16
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-17
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-18
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-19
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-2
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-20
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-21
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-22
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-23
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-24
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-25
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-26
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-27
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-3
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-4
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-5
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-6
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-7
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-8
A avatar/avatar-standard- example
Avatar/avatar-standard-
avatar-avatar-standard-9
A avatar/avatar-standard- example
Avatar-group/avatar-group-animated-
avatar-group-avatar-group-animated-1
A avatar-group/avatar-group-animated- example
Avatar-group/avatar-group-border-
avatar-group-avatar-group-border-1
A avatar-group/avatar-group-border- example
Avatar-group/avatar-group-loose-
avatar-group-avatar-group-loose-1
A avatar-group/avatar-group-loose- example
Avatar-group/avatar-group-loose-border-
avatar-group-avatar-group-loose-border-1
A avatar-group/avatar-group-loose-border- example
Avatar-group/avatar-group-max-
avatar-group-avatar-group-max-1
A avatar-group/avatar-group-max- example
Avatar-group/avatar-group-standard-
avatar-group-avatar-group-standard-1
A avatar-group/avatar-group-standard- example
Avatar-group/avatar-group-tight-
avatar-group-avatar-group-tight-1
A avatar-group/avatar-group-tight- example
Avatar-group/avatar-group-tight-border-
avatar-group-avatar-group-tight-border-1
A avatar-group/avatar-group-tight-border- example
Avatar-group/avatar-group-tooltip-
avatar-group-avatar-group-tooltip-1
A avatar-group/avatar-group-tooltip- example
Awards
awards1
A component displaying a "Milestones" heading and a table listing awards with names, descriptions, and years, across 5 columns.
Awards
awards2
An awards listing component with a 2 column grid layout, displaying award titles and years across two sections.
Awards
awards3
An awards list component with a hover animation, featuring award titles, categories, and years. Uses colored indicators per award.
Awards
awards4
A component displays awards in a table with details like logo, name, nomination, and year, with a large title and a date range subtitle.
Awards
awards5
A component displays a list of awards in a 6-column layout with interactive elements that reveal award images on hover.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Badge/badge-destructive-
badge-badge-destructive-1
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-2
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-3
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-4
A badge/badge-destructive- example
Badge/badge-destructive-
badge-badge-destructive-5
A badge/badge-destructive- example
Badge/badge-outline-
badge-badge-outline-1
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-2
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-3
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-4
A badge/badge-outline- example
Badge/badge-outline-
badge-badge-outline-5
A badge/badge-outline- example
Badge/badge-secondary-
badge-badge-secondary-1
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-2
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-3
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-4
A badge/badge-secondary- example
Badge/badge-secondary-
badge-badge-secondary-5
A badge/badge-secondary- example
Badge/badge-standard-
badge-badge-standard-1
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-2
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-3
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-4
A badge/badge-standard- example
Badge/badge-standard-
badge-badge-standard-5
A badge/badge-standard- example
Banner
banner1
A dismissible banner component with a title, description, external link, and close button. It spans full width with a shadow border.
Banner
banner2
An alert component with dismissible functionality, featuring a title, description, and button. It shows an icon, supports hidden on mobile devices.
Banner
banner3
A subscription block featuring a title, description, email input, and subscribe button. Includes a dismissible icon and adapts layout between single and multi-column views.
Banner
banner4
An informational banner component with a title, description, and link button. Includes an icon and close function.
Banner
banner5
A dismissible banner component with an icon, title, description, and external link button. Features a close button, adapts layout from column to row on wider screens.
Banner
banner6
A dismissible banner featuring overlapping avatars, a text description, and a close button.
Banner
banner7
A dismissible banner with a promotional message, vertical separator, and "Learn More" link. Features a close button.
Blog
blog1
A component with a blog posts layout, featuring a category filter and a 1-3 column grid of posts with summaries, images, and labels.
Blog
blog11
A component with a sticky header displaying "Blog Posts" and navigation links, beside a 2-column grid of blog entries featuring images and titles.
Blog
blog12
A blog preview block with a header, three article cards in a 3-column layout, and a "View All Blogs" button. Each card includes an image, title, summary, author avatar, and read time.
Blog
blog13
A component showcasing a collection of articles with an introductory badge, title, description, and a link to view all. Features a 3-column layout of articles with images, badges, titles, publish dates, and read more links.
Blog
blog14
A blog component showcasing 1 main post in a 2-column layout and 3 popular posts in a 3-column layout, featuring images, categories, and summaries.
Blog
blog16
A blog section showcasing articles with dates, titles, categories, and team logos in a 4-column layout, featuring hover effects and navigation icons.
Blog
blog17
A component showcases blog articles with filtering. Layout includes an article display area (3-column wide) and a category filter sidebar (1-column), plus introductory text. Features dynamic filtering by category.
Blog
blog19
This component displays a block titled "Related articles" with a button to see all articles. It features a 1 to 4 column grid layout of article summaries.
Blog
blog21
A carousel component displaying blog posts with navigation arrows, tags, and a "View All Articles" button.
Blog
blog22
A blog component showcasing a featured post with image, title, and author avatar followed by a list of secondary posts in a two-column layout with images.
Blog
blog23
A component displaying a tagline, heading, and description at the top, followed by a series of articles with images, labels, authors, dates, and summaries, ending with a "View all" button.
Blog
blog24
A component displaying a collection of blog posts with images, titles, summaries, labels, authors, and dates, plus a view-all button.
Blog
blog26
A component displaying a featured post with an image, summary, and tags, alongside a list of latest posts with their titles, authors, and tags. It's structured in a two-column layout with dynamic text effects.
Blog
blog27
A component displaying blog articles with filters, featuring a breadcrumb navigator, an email form, and a "Load More" button, arranged in up to three columns.
Blog
blog28
A component displaying five tech blog posts in a grid with adaptive column counts based on screen size, featuring prominent display for the first post.
Blog
blog29
A component displaying blog posts with dates, titles, content snippets, tags, and a link icon. Each post is separated by a line.
Blog
blog30
A component displaying blog posts in a column layout, including images, titles, dates, and descriptions. Features a "Read" button with an arrow icon.
Blog
blog4
A blog component with a header, "View all posts" button, and a grid layout (up to 3 columns) displaying posts with image, label, title, summary, author avatar, and publish date.
Blog
blog5
A blog component showcasing posts in a grid layout with image, label, title, summary, and author info. Includes a header with a title and optional button.
Blog
blog6
A blog display component with a headline, intro text, and a grid of posts (up to 3 columns). It features images, badges, authors' avatars, and pagination.
Blog
blog7
A blog showcase block with a header, description, and 3-column grid of posts, featuring images, titles, summaries, and read-more links.
Blog
blog8
A component displaying blog posts in a grid with images, summaries, tags, and author details. Features include text hover effects and a read-more link.
Blogpost
blogpost1
A blog post component featuring title, author with avatar, publication date, and content including images, alerts, and a table.
Blogpost
blogpost2
A component with a sticky aside featuring a back link, title, and author's avatar, paired with a main article including an image and text content.
Blogpost
blogpost3
A component featuring a central article with dynamic side navigation and a call-to-action block, including images, tables, and alerts. It's structured in a 3-column layout for larger displays.
Blogpost
blogpost4
A component displaying an article with breadcrumbs, author details, and sections with dynamic navigation. It features sticky social share icons and a "Back to top" button.
Blogpost
blogpost5
A blog post component with dynamic navigation highlighting active sections, breadcrumbs, author info, and social share buttons. Layout includes an 8:3 column split for content and sidebar.
Blogpost
blogpost6
A blog post component with dynamic breadcrumb navigation, author bio, social sharing, and interactive chapter selection.
Blogpost
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
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
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
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/border-button-basic
border-button-border-button-basic
A border-button/border-button-basic example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-1
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-2
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-3
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-4
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-5
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-6
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-home-icon-
breadcrumb-breadcrumb-home-icon-7
A breadcrumb/breadcrumb-home-icon- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-1
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-2
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-3
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-4
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-5
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-6
A breadcrumb/breadcrumb-standard- example
Breadcrumb/breadcrumb-standard-
breadcrumb-breadcrumb-standard-7
A breadcrumb/breadcrumb-standard- example
Button/button-destructive-
button-button-destructive-1
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-2
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-3
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-4
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-5
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-6
A button/button-destructive- example
Button/button-destructive-
button-button-destructive-7
A button/button-destructive- example
Button/button-link-
button-button-link-1
A button/button-link- example
Button/button-link-
button-button-link-2
A button/button-link- example
Button/button-link-
button-button-link-3
A button/button-link- example
Button/button-link-
button-button-link-4
A button/button-link- example
Button/button-link-
button-button-link-5
A button/button-link- example
Button/button-link-
button-button-link-6
A button/button-link- example
Button/button-link-
button-button-link-7
A button/button-link- example
Button/button-outline-
button-button-outline-1
A button/button-outline- example
Button/button-outline-
button-button-outline-2
A button/button-outline- example
Button/button-outline-
button-button-outline-3
A button/button-outline- example
Button/button-outline-
button-button-outline-4
A button/button-outline- example
Button/button-outline-
button-button-outline-5
A button/button-outline- example
Button/button-outline-
button-button-outline-6
A button/button-outline- example
Button/button-outline-
button-button-outline-7
A button/button-outline- example
Button/button-secondary-
button-button-secondary-1
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-2
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-3
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-4
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-5
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-6
A button/button-secondary- example
Button/button-secondary-
button-button-secondary-7
A button/button-secondary- example
Button/button-standard-
button-button-standard-1
A button/button-standard- example
Button/button-standard-
button-button-standard-2
A button/button-standard- example
Button/button-standard-
button-button-standard-3
A button/button-standard- example
Button/button-standard-
button-button-standard-4
A button/button-standard- example
Button/button-standard-
button-button-standard-5
A button/button-standard- example
Button/button-standard-
button-button-standard-6
A button/button-standard- example
Button/button-standard-
button-button-standard-7
A button/button-standard- example
Button-group/button-group-actions-
button-group-button-group-actions-1
A button-group/button-group-actions- example
Button-group/button-group-actions-
button-group-button-group-actions-2
A button-group/button-group-actions- example
Button-group/button-group-actions-
button-group-button-group-actions-3
A button-group/button-group-actions- example
Button-group/button-group-actions-
button-group-button-group-actions-4
A button-group/button-group-actions- example
Button-group/button-group-advanced-
button-group-button-group-advanced-1
A button-group/button-group-advanced- example
Button-group/button-group-advanced-
button-group-button-group-advanced-2
A button-group/button-group-advanced- example
Button-group/button-group-advanced-
button-group-button-group-advanced-3
A button-group/button-group-advanced- example
Button-group/button-group-advanced-
button-group-button-group-advanced-4
A button-group/button-group-advanced- example
Button-group/button-group-badges-
button-group-button-group-badges-1
A button-group/button-group-badges- example
Button-group/button-group-badges-
button-group-button-group-badges-2
A button-group/button-group-badges- example
Button-group/button-group-badges-
button-group-button-group-badges-3
A button-group/button-group-badges- example
Button-group/button-group-badges-
button-group-button-group-badges-4
A button-group/button-group-badges- example
Button-group/button-group-display-
button-group-button-group-display-1
A button-group/button-group-display- example
Button-group/button-group-display-
button-group-button-group-display-2
A button-group/button-group-display- example
Button-group/button-group-display-
button-group-button-group-display-3
A button-group/button-group-display- example
Button-group/button-group-display-
button-group-button-group-display-4
A button-group/button-group-display- example
Button-group/button-group-forms-
button-group-button-group-forms-1
A button-group/button-group-forms- example
Button-group/button-group-forms-
button-group-button-group-forms-2
A button-group/button-group-forms- example
Button-group/button-group-forms-
button-group-button-group-forms-3
A button-group/button-group-forms- example
Button-group/button-group-forms-
button-group-button-group-forms-4
A button-group/button-group-forms- example
Button-group/button-group-interactive-
button-group-button-group-interactive-1
A button-group/button-group-interactive- example
Button-group/button-group-interactive-
button-group-button-group-interactive-2
A button-group/button-group-interactive- example
Button-group/button-group-interactive-
button-group-button-group-interactive-3
A button-group/button-group-interactive- example
Button-group/button-group-interactive-
button-group-button-group-interactive-4
A button-group/button-group-interactive- example
Button-group/button-group-media-
button-group-button-group-media-1
A button-group/button-group-media- example
Button-group/button-group-media-
button-group-button-group-media-2
A button-group/button-group-media- example
Button-group/button-group-media-
button-group-button-group-media-3
A button-group/button-group-media- example
Button-group/button-group-media-
button-group-button-group-media-4
A button-group/button-group-media- example
Button-group/button-group-navigation-
button-group-button-group-navigation-1
A button-group/button-group-navigation- example
Button-group/button-group-navigation-
button-group-button-group-navigation-2
A button-group/button-group-navigation- example
Button-group/button-group-navigation-
button-group-button-group-navigation-3
A button-group/button-group-navigation- example
Button-group/button-group-patterns-
button-group-button-group-patterns-1
A button-group/button-group-patterns- example
Button-group/button-group-patterns-
button-group-button-group-patterns-2
A button-group/button-group-patterns- example
Button-group/button-group-patterns-
button-group-button-group-patterns-3
A button-group/button-group-patterns- example
Button-group/button-group-patterns-
button-group-button-group-patterns-4
A button-group/button-group-patterns- example
Button-group/button-group-standard-
button-group-button-group-standard-1
A button-group/button-group-standard- example
Button-group/button-group-standard-
button-group-button-group-standard-2
A button-group/button-group-standard- example
Button-group/button-group-standard-
button-group-button-group-standard-3
A button-group/button-group-standard- example
Button-group/button-group-standard-
button-group-button-group-standard-4
A button-group/button-group-standard- example
Calendar/calendar-dialog-
calendar-calendar-dialog-1
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-2
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-3
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-4
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-5
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-6
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-7
A calendar/calendar-dialog- example
Calendar/calendar-dialog-
calendar-calendar-dialog-8
A calendar/calendar-dialog- example
Calendar/calendar-standard-
calendar-calendar-standard-1
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-2
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-3
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-4
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-5
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-6
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-7
A calendar/calendar-standard- example
Calendar/calendar-standard-
calendar-calendar-standard-8
A calendar/calendar-standard- example
Card/card-standard-
card-card-standard-1
A card/card-standard- example
Card/card-standard-
card-card-standard-2
A card/card-standard- example
Card/card-standard-
card-card-standard-3
A card/card-standard- example
Card/card-standard-
card-card-standard-4
A card/card-standard- example
Careers
careers1
A component displaying career opportunities by department, with clickable roles that reveal more via an arrow icon animation.
Careers
careers2
A component showcasing job openings with a header, grid layout (single column expanding to four on large screens) for each job, including title, type, location, and an apply button.
Careers
careers3
A block displaying job openings by category, with titles, descriptions, locations, and links. Uses badges for categories and icons for location/navigation.
Careers
careers4
A component displaying job openings with categories, titles, and locations, styled with a central heading and grid layout for job listings.
Careers
careers5
A component displaying job openings with titles, categories, descriptions, and details on type and location. It has a header and lists jobs in a single column.
Careers
careers6
A dual-column block showcasing job openings with badges for categories and icons for job types and locations.
Careers
careers7
A component listing job categories and jobs with titles, locations, and "View listing" buttons in a structured layout.
Careers
careers8
A dynamic job listing component with a filter for departments, displaying job categories and openings in grids up to 3 columns wide.
Careers
careers9
A component listing job openings with department, role, location, and a link, featuring a heading, introduction, and a call-to-action for unsolicited applications.
Carousel/carousel-standard-
carousel-carousel-standard-1
A carousel/carousel-standard- example
Carousel/carousel-standard-
carousel-carousel-standard-2
A carousel/carousel-standard- example
Carousel/carousel-standard-
carousel-carousel-standard-3
A carousel/carousel-standard- example
Carousel/carousel-standard-
carousel-carousel-standard-4
A carousel/carousel-standard- example
Case-studies
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
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
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
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
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-study
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
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
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
changelog1
A component displaying a changelog with entries including version info, date, and details. Features badges, buttons, and conditional rendering of lists and images.
Changelog
changelog2
A changelog component with a title, NEW badge, description, email signup, and dated entries with images, headlines, and text links.
Changelog
changelog3
A component displaying updates with sections for dates, tags (e.g., 'Maintenance'), and content including images. Uses a two-column layout on desktop.
Changelog
changelog4
A changelog component with social links, a scroll progress indicator, and two updates sections featuring avatars, dates, large text headers, and detailed lists.
Changelog
changelog5
A component that displays changelogs with features like a sticky timeline navigation, vertical separators, and scroll-spy functionality for active section highlighting.
Changelog
changelog6
A changelog component displays updates with dialogs for detailed view, including versions, dates, images, contributors, and excerpts. Features tooltip actions.
Changelog
changelog8
A component displaying a changelog with a scrollspy sidebar. Features dynamic scroll highlighting & smooth navigation to sections.
Chart-card
chart-card1
A card containing an area chart with gradient fill, grid lines, and interactive tooltips.
Chart-card
chart-card10
A vertical stacked bar chart card showing multiple data series as segments within each bar.
Chart-card
chart-card11
A horizontal 100% stacked bar chart showing proportional breakdown across categories.
Chart-card
chart-card12
A minimal stacked bar chart with category labels only, no Y-axis for a cleaner look.
Chart-card
chart-card13
A bar chart with values above and below zero, using different colors for positive and negative values.
Chart-card
chart-card14
An area chart showing a min/max range band with an average line overlay.
Chart-card
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
chart-card16
A circular progress ring showing percentage completion toward a goal with centered value display.
Chart-card
chart-card17
A speedometer-style half-circle gauge with needle indicator and colored performance zones.
Chart-card
chart-card18
Concentric progress rings showing multiple metrics simultaneously, inspired by fitness activity trackers.
Chart-card
chart-card19
A circular bar chart with concentric bars of varying lengths representing different categories.
Chart-card
chart-card2
An area chart card with tabs to switch between 7-day, 30-day, and 90-day time periods.
Chart-card
chart-card20
A radar/spider chart showing multiple dimensions as a polygon shape for multi-attribute comparison.
Chart-card
chart-card21
A funnel visualization showing progressive conversion through stages with decreasing bar widths.
Chart-card
chart-card22
A treemap visualization showing hierarchical data as nested rectangles sized by value.
Chart-card
chart-card23
A scatter plot showing correlation between two variables as positioned dots.
Chart-card
chart-card24
A bubble chart with variable-sized dots encoding three dimensions of data plus color for grouping.
Chart-card
chart-card25
An area chart with a horizontal reference line showing a target or benchmark value.
Chart-card
chart-card26
A bullet chart showing actual value against a target with colored performance ranges in the background.
Chart-card
chart-card27
An area chart with colored background zones indicating normal, warning, and critical threshold ranges.
Chart-card
chart-card3
A card containing a vertical bar chart with rounded tops and interactive tooltips.
Chart-card
chart-card4
A card containing a horizontal bar chart with category labels on the left and values extending right.
Chart-card
chart-card5
A donut chart card with center stat display and a legend list showing category breakdowns.
Chart-card
chart-card6
A line chart card comparing two data series with a legend, using solid and dashed lines.
Chart-card
chart-card7
An area chart card with a footer showing trend indicator and summary text.
Chart-card
chart-card8
A grouped bar chart card comparing two data series side by side with a legend.
Chart-card
chart-card9
A stacked area chart card showing multiple data series layered to display composition over time.
Chart/chart-area-axes
chart-chart-area-axes
A chart/chart-area-axes example
Chart/chart-area-default
chart-chart-area-default
A chart/chart-area-default example
Chart/chart-area-gradient
chart-chart-area-gradient
A chart/chart-area-gradient example
Chart/chart-area-icons
chart-chart-area-icons
A chart/chart-area-icons example
Chart/chart-area-interactive
chart-chart-area-interactive
A chart/chart-area-interactive example
Chart/chart-area-legend
chart-chart-area-legend
A chart/chart-area-legend example
Chart/chart-area-linear
chart-chart-area-linear
A chart/chart-area-linear example
Chart/chart-area-stacked
chart-chart-area-stacked
A chart/chart-area-stacked example
Chart/chart-area-stacked-expand
chart-chart-area-stacked-expand
A chart/chart-area-stacked-expand example
Chart/chart-area-step
chart-chart-area-step
A chart/chart-area-step example
Chart/chart-bar-active
chart-chart-bar-active
A chart/chart-bar-active example
Chart/chart-bar-default
chart-chart-bar-default
A chart/chart-bar-default example
Chart/chart-bar-horizontal
chart-chart-bar-horizontal
A chart/chart-bar-horizontal example
Chart/chart-bar-interactive
chart-chart-bar-interactive
A chart/chart-bar-interactive example
Chart/chart-bar-label
chart-chart-bar-label
A chart/chart-bar-label example
Chart/chart-bar-label-custom
chart-chart-bar-label-custom
A chart/chart-bar-label-custom example
Chart/chart-bar-mixed
chart-chart-bar-mixed
A chart/chart-bar-mixed example
Chart/chart-bar-multiple
chart-chart-bar-multiple
A chart/chart-bar-multiple example
Chart/chart-bar-negative
chart-chart-bar-negative
A chart/chart-bar-negative example
Chart/chart-bar-stacked
chart-chart-bar-stacked
A chart/chart-bar-stacked example
Chart/chart-line-default
chart-chart-line-default
A chart/chart-line-default example
Chart/chart-line-dots
chart-chart-line-dots
A chart/chart-line-dots example
Chart/chart-line-dots-colors
chart-chart-line-dots-colors
A chart/chart-line-dots-colors example
Chart/chart-line-dots-custom
chart-chart-line-dots-custom
A chart/chart-line-dots-custom example
Chart/chart-line-interactive
chart-chart-line-interactive
A chart/chart-line-interactive example
Chart/chart-line-label
chart-chart-line-label
A chart/chart-line-label example
Chart/chart-line-label-custom
chart-chart-line-label-custom
A chart/chart-line-label-custom example
Chart/chart-line-linear
chart-chart-line-linear
A chart/chart-line-linear example
Chart/chart-line-multiple
chart-chart-line-multiple
A chart/chart-line-multiple example
Chart/chart-line-step
chart-chart-line-step
A chart/chart-line-step example
Chart/chart-pie-donut
chart-chart-pie-donut
A chart/chart-pie-donut example
Chart/chart-pie-donut-active
chart-chart-pie-donut-active
A chart/chart-pie-donut-active example
Chart/chart-pie-donut-text
chart-chart-pie-donut-text
A chart/chart-pie-donut-text example
Chart/chart-pie-interactive
chart-chart-pie-interactive
A chart/chart-pie-interactive example
Chart/chart-pie-label
chart-chart-pie-label
A chart/chart-pie-label example
Chart/chart-pie-label-custom
chart-chart-pie-label-custom
A chart/chart-pie-label-custom example
Chart/chart-pie-label-list
chart-chart-pie-label-list
A chart/chart-pie-label-list example
Chart/chart-pie-legend
chart-chart-pie-legend
A chart/chart-pie-legend example
Chart/chart-pie-separator-none
chart-chart-pie-separator-none
A chart/chart-pie-separator-none example
Chart/chart-pie-simple
chart-chart-pie-simple
A chart/chart-pie-simple example
Chart/chart-pie-stacked
chart-chart-pie-stacked
A chart/chart-pie-stacked example
Chart/chart-radar-default
chart-chart-radar-default
A chart/chart-radar-default example
Chart/chart-radar-dots
chart-chart-radar-dots
A chart/chart-radar-dots example
Chart/chart-radar-grid-circle
chart-chart-radar-grid-circle
A chart/chart-radar-grid-circle example
Chart/chart-radar-grid-circle-fill
chart-chart-radar-grid-circle-fill
A chart/chart-radar-grid-circle-fill example
Chart/chart-radar-grid-circle-no-lines
chart-chart-radar-grid-circle-no-lines
A chart/chart-radar-grid-circle-no-lines example
Chart/chart-radar-grid-custom
chart-chart-radar-grid-custom
A chart/chart-radar-grid-custom example
Chart/chart-radar-grid-fill
chart-chart-radar-grid-fill
A chart/chart-radar-grid-fill example
Chart/chart-radar-grid-none
chart-chart-radar-grid-none
A chart/chart-radar-grid-none example
Chart/chart-radar-icons
chart-chart-radar-icons
A chart/chart-radar-icons example
Chart/chart-radar-label-custom
chart-chart-radar-label-custom
A chart/chart-radar-label-custom example
Chart/chart-radar-legend
chart-chart-radar-legend
A chart/chart-radar-legend example
Chart/chart-radar-lines-only
chart-chart-radar-lines-only
A chart/chart-radar-lines-only example
Chart/chart-radar-multiple
chart-chart-radar-multiple
A chart/chart-radar-multiple example
Chart/chart-radar-radius
chart-chart-radar-radius
A chart/chart-radar-radius example
Chart/chart-radial-grid
chart-chart-radial-grid
A chart/chart-radial-grid example
Chart/chart-radial-label
chart-chart-radial-label
A chart/chart-radial-label example
Chart/chart-radial-shape
chart-chart-radial-shape
A chart/chart-radial-shape example
Chart/chart-radial-simple
chart-chart-radial-simple
A chart/chart-radial-simple example
Chart/chart-radial-stacked
chart-chart-radial-stacked
A chart/chart-radial-stacked example
Chart/chart-radial-text
chart-chart-radial-text
A chart/chart-radial-text example
Chart/chart-tooltip-advanced
chart-chart-tooltip-advanced
A chart/chart-tooltip-advanced example
Chart/chart-tooltip-default
chart-chart-tooltip-default
A chart/chart-tooltip-default example
Chart/chart-tooltip-formatter
chart-chart-tooltip-formatter
A chart/chart-tooltip-formatter example
Chart/chart-tooltip-icons
chart-chart-tooltip-icons
A chart/chart-tooltip-icons example
Chart/chart-tooltip-indicator-line
chart-chart-tooltip-indicator-line
A chart/chart-tooltip-indicator-line example
Chart/chart-tooltip-indicator-none
chart-chart-tooltip-indicator-none
A chart/chart-tooltip-indicator-none example
Chart/chart-tooltip-label-custom
chart-chart-tooltip-label-custom
A chart/chart-tooltip-label-custom example
Chart/chart-tooltip-label-formatter
chart-chart-tooltip-label-formatter
A chart/chart-tooltip-label-formatter example
Chart/chart-tooltip-label-none
chart-chart-tooltip-label-none
A chart/chart-tooltip-label-none example
Chart-group
chart-group1
A two-column layout with an area chart and bar chart displayed side by side.
Chart-group
chart-group10
A DevOps-style view with request volume chart and service health status panel.
Chart-group
chart-group11
A card with a working date range picker that filters chart data and updates summary statistics.
Chart-group
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
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
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
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
chart-group2
A layout with one large primary chart spanning full width and two smaller detail charts below.
Chart-group
chart-group3
A main chart showing monthly trends with sparkline cards zooming into the last 7 days of key metrics.
Chart-group
chart-group4
A single card with tabs to switch between different chart visualizations of related metrics.
Chart-group
chart-group5
A comparison layout with a dual-line chart and summary card showing year-over-year growth.
Chart-group
chart-group6
A two-column layout with a donut chart showing device breakdown and a horizontal bar chart showing browser usage.
Chart-group
chart-group7
A section with a four-stat row above a full-width area chart.
Chart-group
chart-group8
A bento-style grid with four different chart types arranged in varying sizes.
Chart-group
chart-group9
A card with a dropdown selector to switch between three different chart views showing various metrics.
Checkbox/checkbox-standard-
checkbox-checkbox-standard-1
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-11
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-12
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-13
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-2
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-3
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-4
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-5
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-6
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-7
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-8
A checkbox/checkbox-standard- example
Checkbox/checkbox-standard-
checkbox-checkbox-standard-9
A checkbox/checkbox-standard- example
Checkout
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
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
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
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
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
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
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
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
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
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
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.
Collapsible/collapsible-card-
collapsible-collapsible-card-1
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-2
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-3
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-4
A collapsible/collapsible-card- example
Collapsible/collapsible-card-
collapsible-collapsible-card-5
A collapsible/collapsible-card- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-1
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-2
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-3
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-4
A collapsible/collapsible-faq- example
Collapsible/collapsible-faq-
collapsible-collapsible-faq-5
A collapsible/collapsible-faq- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-1
A collapsible/collapsible-outline- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-2
A collapsible/collapsible-outline- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-3
A collapsible/collapsible-outline- example
Collapsible/collapsible-outline-
collapsible-collapsible-outline-4
A collapsible/collapsible-outline- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-1
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-2
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-3
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-sidebar-
collapsible-collapsible-sidebar-4
A collapsible/collapsible-sidebar- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-1
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-2
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-3
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-4
A collapsible/collapsible-standard- example
Collapsible/collapsible-standard-
collapsible-collapsible-standard-5
A collapsible/collapsible-standard- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-1
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-2
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-3
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-4
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-5
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-6
A combobox/combobox-custom-actions- example
Combobox/combobox-custom-actions-
combobox-combobox-custom-actions-7
A combobox/combobox-custom-actions- example
Combobox/combobox-grouped-
combobox-combobox-grouped-1
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-2
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-3
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-4
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-5
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-6
A combobox/combobox-grouped- example
Combobox/combobox-grouped-
combobox-combobox-grouped-7
A combobox/combobox-grouped- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-1
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-2
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-3
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-4
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-5
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-6
A combobox/combobox-multi-select- example
Combobox/combobox-multi-select-
combobox-combobox-multi-select-7
A combobox/combobox-multi-select- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-1
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-2
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-3
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-4
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-5
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-6
A combobox/combobox-rich-content- example
Combobox/combobox-rich-content-
combobox-combobox-rich-content-7
A combobox/combobox-rich-content- example
Combobox/combobox-standard-
combobox-combobox-standard-1
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-2
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-3
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-4
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-5
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-6
A combobox/combobox-standard- example
Combobox/combobox-standard-
combobox-combobox-standard-7
A combobox/combobox-standard- example
Combobox/combobox-with-states-
combobox-combobox-with-states-1
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-2
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-3
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-4
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-5
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-6
A combobox/combobox-with-states- example
Combobox/combobox-with-states-
combobox-combobox-with-states-7
A combobox/combobox-with-states- example
Command/command-dialog-
command-command-dialog-1
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-2
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-3
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-4
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-5
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-6
A command/command-dialog- example
Command/command-dialog-
command-command-dialog-7
A command/command-dialog- example
Command/command-popover-
command-command-popover-1
A command/command-popover- example
Command/command-popover-
command-command-popover-2
A command/command-popover- example
Command/command-popover-
command-command-popover-3
A command/command-popover- example
Command/command-popover-
command-command-popover-4
A command/command-popover- example
Command/command-popover-
command-command-popover-5
A command/command-popover- example
Command/command-popover-
command-command-popover-6
A command/command-popover- example
Command/command-popover-
command-command-popover-7
A command/command-popover- example
Command/command-standard-
command-command-standard-1
A command/command-standard- example
Command/command-standard-
command-command-standard-2
A command/command-standard- example
Command/command-standard-
command-command-standard-3
A command/command-standard- example
Command/command-standard-
command-command-standard-4
A command/command-standard- example
Command/command-standard-
command-command-standard-5
A command/command-standard- example
Command/command-standard-
command-command-standard-6
A command/command-standard- example
Command/command-standard-
command-command-standard-7
A command/command-standard- example
Community
community1
A component featuring a logo, a call-to-action for joining a community, and social buttons for Twitter, GitHub, and Discord.
Community
community2
A component showcasing 4 social platform links in a 1-2-4 column layout, encouraging community engagement through actions like follow, connect, contribute, and join.
Community
community3
A component showcasing a community invitation with social icons, descriptions, and a 1-3 column layout of cards for different platforms.
Community
community4
A component with a title, description, and a grid of links to social platforms, each with an icon, a unique color background, headings, and descriptions.
Community
community5
A component featuring a GitHub profile card with stats (stars, forks, contributors), decorative grid pattern, and links to social media (Discord, Twitter, LinkedIn).
Community
community6
A component featuring cards for social platform links, each with icons, titles, and descriptions, organized in a variable-column layout.
Community
community7
A component showcasing social media platforms in a 3-column layout, with icons, links, online status, and follower counts.
Companies-create
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
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
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
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
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
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
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
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
companies-list2
A data table with TanStack Table featuring sortable columns, row selection, search filtering, column visibility toggle, and add company button.
Compare-products
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
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
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
compare1
A comparative block showcasing features between two entities in a 3-column layout with icons to highlight specific traits.
Compare
compare10
A component contrasting "Legacy" vs "New" features in a two-column layout, highlighting issues with old tools and advantages of modern solutions, using symbols and separators.
Compare
compare2
A component comparing two products, highlighting features using icons and text. Layout includes a central title, product feature lists in 2 columns, and detailed analysis sections.
Compare
compare3
A 3-column comparison block showcasing features between two options, highlighted with icons and badges for visual differentiation.
Compare
compare4
A comparison component contrasting traditional vs cloud-native approaches across multiple metrics with hover-to-highlight functionality and a "Get Started" button.
Compare
compare5
A component displays two options with images, text, and buttons, split across two columns, and features an "OR" marker centrally between columns.
Compare
compare6
A component displaying a comparative analysis of models in a table with tabs for model selection. Features statue indicators and fixed columns.
Compare
compare7
A comparison table component with 3 columns highlighting features of two frameworks with tooltips for additional info.
Compare
compare8
A comparison component showcasing features with icons, descriptions, and status indicators for two frameworks, including tooltips for certain features.
Compare
compare9
A comparative component showcases metrics & technical analysis of 3 models with status indicators, hover effects on data rows, and a detailed breakdown of each model's performance in a grid layout.
Compliance
compliance1
A two-column component featuring compliance and security features, highlighted with badges, images, and outlined sections for automated audit trails, monitoring, and reporting.
Compliance
compliance5
A component displays enterprise compliance details, with a bold title, a paragraph, 4 badges in 2 or 4 columns depending on device, and a 'Learn more' button.
Compliance
compliance6
A component showcasing compliance features with a title, description, and two rows of icons with text. The first row highlights four certifications in a grid, and the second row presents three key benefits with icons.
Compliance
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
contact1
A component with a two-column layout, integrating a promotional header, bullet points with icons, overlapping avatars, company logos, and a detailed form for demo booking.
Contact
contact10
A component featuring a contact form with a title, decorative dashed line separator, address/email/social links, and an inquiry form with fields for name, email, company, employee count, and message.
Contact
contact11
A component featuring a contact form with fields for personal and company details, alongside sections for corporate information, email contacts, and social media links.
Contact
contact14
A two-column contact component with avatar, contact details, and form fields for name & phone, plus a button.
Contact
contact16
A contact component with a title, descriptive text, links for phone and email, and a form with name, email, and message input fields, plus a submit button.
Contact
contact17
A contact form component with 2 columns; one for form input, including text and select fields, and another for process steps and company logos. Includes FAQs and resources links.
Contact
contact18
A contact component with an email link, support features listed, and a form with fields for name, optional phone, email, message, and a submit button.
Contact
contact19
A contact component with a two-column layout; one for text and buttons, and one for a full-height image. Features bold headings, a contact number, email, and a "Get in touch" button with an icon.
Contact
contact2
A contact component with a title, description, and details column, plus a message form; includes fields for names, email, subject, and message.
Contact
contact20
A contact component with a heading, subtext, and a 3-column layout for contact info and a form. Features inputs, a select menu, and a submit button.
Contact
contact3
A contact component with a heading, two buttons, and sections for support, sales, inquiries, verification, and global offices. Uses icons and grid layouts.
Contact
contact4
A contact component with a title, introduction, 3-column layout for different contact options, and a carousel showcasing locations with maps and details.
Contact
contact5
A contact form block with a title, description, fields for name, email, phone, and message, a privacy policy checkbox, and a submit button.
Contact
contact6
A contact form component with two columns: one for direct contact info using icons and one for a submission form.
Contact
contact7
A contact block with title, description, and 3 columns for email, address, and phone, each with icons.
Contact
contact8
A component featuring a "Contact" header, subtext, an image, email addresses, and office locations in a 2-column layout with styled divs.
Contact
contact9
A component with a contact form and methods listed in columns, featuring input fields, checkboxes, and buttons for submissions alongside icons for email, phone, and office directions.
Content
content1
A storytelling component featuring an interactive sidebar that highlights active content sections as a user scrolls. It spans 3 columns, with narrative content and illustrations dominating 2/3 of the layout.
Content
content2
A component showcasing a content management system's features, types, and instructions on adding or managing content, with 2-column layout for content types and alert features.
Content
content3
A component with a breadcrumb navigation, heading, subtext, buttons, a sidebar with topics, and a main content area divided into a 5-column layout, including images, texts, a table, an alert, and dynamic on-page navigation highlighting visible sections.
Content
content4
A content block with navigation links to sections, an interactive 'back to top' button, using dynamic highlighting for section visibility. It includes a breadcrumb, author info, and images laid out in a grid and column format.
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-1
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-2
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-3
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-4
A context-menu/context-menu-canvas- example
Context-menu/context-menu-canvas-
context-menu-context-menu-canvas-5
A context-menu/context-menu-canvas- example
Context-menu/context-menu-file-
context-menu-context-menu-file-1
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-2
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-3
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-4
A context-menu/context-menu-file- example
Context-menu/context-menu-file-
context-menu-context-menu-file-5
A context-menu/context-menu-file- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-1
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-2
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-3
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-4
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-5
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-6
A context-menu/context-menu-standard- example
Context-menu/context-menu-standard-
context-menu-context-menu-standard-7
A context-menu/context-menu-standard- example
Context-menu/context-menu-table-
context-menu-context-menu-table-1
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-2
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-3
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-4
A context-menu/context-menu-table- example
Context-menu/context-menu-table-
context-menu-context-menu-table-5
A context-menu/context-menu-table- example
Context-menu/context-menu-text-
context-menu-context-menu-text-1
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-2
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-3
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-4
A context-menu/context-menu-text- example
Context-menu/context-menu-text-
context-menu-context-menu-text-5
A context-menu/context-menu-text- example
Cta
cta1
A component features a card split into text and image sections, with a call-to-action button and decorative icons.
Cta
cta10
A call-to-action component with a heading, description, and optional primary and secondary buttons arranged in a single column that becomes a row on larger screens.
Cta
cta11
A component with heading, description, and up to two buttons, arranged vertically with emphasis styling.
Cta
cta12
A call-to-action block featuring a heading, description, email input field, and a subscribe button arranged in a column, centered.
Cta
cta13
A component with a call-to-action, a title, text, email input, and a subscription button. Features a privacy policy link. Layout adjusts across sizes.
Cta
cta14
A component featuring a full-width background image with a dark overlay, centered text, and two buttons. It includes a bold title, a description, and offers a free trial.
Cta
cta15
A component featuring a call to action with gradient background, text, and buttons on one side, and an image with a subtle overlay effect on the other. Designed in a two-column layout that adjusts to single column on smaller screens.
Cta
cta16
A component featuring a centered call-to-action with a decorative icon, a bold headline, and two buttons. It's set against a darkened full-width background image.
Cta
cta17
A centered call-to-action block with a patterned background, featuring a large title, a descriptive paragraph, and two large buttons for actions.
Cta
cta18
A call-to-action component with two columns: text (with a title and buttons) on one side, and unique, angled placeholder images on the other.
Cta
cta19
A component featuring enterprise solution highlights, with a badge, heading, text, and action buttons on one side. The other side contains links to documentation and demos, divided by a separator.
Cta
cta20
A call-to-action block with centered text, a large button labeled "Get Started," flanked by separators, within a single-column layout.
Cta
cta21
A component with a large background image, overlayed by centered text and a large button, featuring an arrow icon.
Cta
cta22
A component features a 3-column layout, with the first two columns merged to showcase an app download CTA and mockups, and the third column for email subscriptions.
Cta
cta23
A component with a newsletter subscription form, badge, heading, description, and features list, styled with icons and varying text sizes.
Cta
cta26
A component featuring a full-width image background, overlaid with a call-to-action (CTA) message and a large button. Below, two detailed information blocks are displayed side-by-side, each with an icon, title, and description.
Cta
cta27
A dual-column block featuring a bold headline, two sub-sections with large titles, buttons for actions, and layered images with a phone mockup.
Cta
cta28
A component featuring a dual-column layout with text, a list, and a button in one column, and layered images in the other. It highlights enterprise solutions.
Cta
cta3
A 2-column component featuring a call-to-action with buttons and two card links for documentation and getting started guides, adorned with icons.
Cta
cta30
This component displays overlapping avatars, a bold title, a descriptive paragraph, and a featured button with a playful tagline next to a custom line graphic.
Cta
cta31
A component displaying a title, subtitle, and a CTA button, surrounded by logos arranged in a semi-circle, with a gradient background.
Cta
cta32
This component is designed to promote engagement by showcasing a compelling heading, supportive description, and two action buttons for user interaction. It also displays key statistics in a visually appealing grid format to highlight significant achievements or features.
Cta
cta4
A call-to-action block with a title, description, button, and list of features. Uses a 2-column layout within a larger container.
Cta
cta5
A component featuring an image and a call-to-action (CTA) side by side in a two-column layout, with an appealing button and engaging text.
Cta
cta6
A component showcases a dynamic call-to-action with text, a button, and shifting overlaid blocks as a unique visual feature in a two-column layout.
Cta
cta7
A two-column call-to-action component featuring bullet points with checkmarks and a "Get Started" button, decorated with a geometric background.
Data-table/data-table-advanced-
data-table-data-table-advanced-1
A data-table/data-table-advanced- example
Data-table/data-table-advanced-
data-table-data-table-advanced-2
A data-table/data-table-advanced- example
Data-table/data-table-advanced-
data-table-data-table-advanced-3
A data-table/data-table-advanced- example
Data-table/data-table-advanced-
data-table-data-table-advanced-4
A data-table/data-table-advanced- example
Data-table/data-table-standard-
data-table-data-table-standard-1
A data-table/data-table-standard- example
Data-table/data-table-standard-
data-table-data-table-standard-2
A data-table/data-table-standard- example
Data-table/data-table-standard-
data-table-data-table-standard-3
A data-table/data-table-standard- example
Data-table/data-table-standard-
data-table-data-table-standard-4
A data-table/data-table-standard- example
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
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
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
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
data-table13
A data table section with tabbed status filters showing counts, global search input, and full pagination. Built with TanStack Table.
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
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
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
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
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
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
data-table2
A data table section with visible cell borders, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
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
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
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
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
data-table24
A data table section with transactions grouped by date, hidden column headers, and currency-formatted amounts. Built with TanStack Table.
Data-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
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
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
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
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
data-table3
A data table section with zebra-striped rows, sortable columns, currency formatting, and availability badges. Built with TanStack Table.
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
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
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
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
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
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
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
data-table8
A data table section with sortable columns, single-column text filter input, and full pagination controls. Built with TanStack Table.
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/date-picker-standard-
date-picker-date-picker-standard-1
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-2
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-3
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-4
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-5
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-6
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-7
A date-picker/date-picker-standard- example
Date-picker/date-picker-standard-
date-picker-date-picker-standard-8
A date-picker/date-picker-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-1
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-10
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-11
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-12
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-13
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-14
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-15
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-16
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-17
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-2
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-3
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-4
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-5
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-6
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-7
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-8
A dialog/dialog-standard- example
Dialog/dialog-standard-
dialog-dialog-standard-9
A dialog/dialog-standard- example
Download
download1
A component with a heading and description, containing three cards for different platforms (desktop, iOS, android) each with titles, subtitles, descriptions, and download options.
Download
download10
A component promoting software downloads, subdivided into 3 columns for Desktop, Mobile, and Web versions with respective download options.
Download
download11
A component displaying a download section with options for .MSI and .EXE files, Windows compatibility info, and dynamic bordered images.
Download
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
download2
A component displaying download options for desktop, iOS, and Android, alongside descriptions and buttons/links for each platform, arranged in a three-column layout.
Download
download3
A component displaying a download card with a logo, a heading, a description, version, file size, system requirements, download and view buttons, and trust indicators.
Download
download4
A component showcasing a professional suite download with features, version details, and download options in a two-column layout within a main card.
Download
download5
A component providing options to download software, with tabs for Linux, MacOS, and a waitlist for Windows. Features version selection and size details.
Download
download6
A component displaying download options for different software versions and platforms, highlighting the latest version with a badge. Offers a two-column layout for platform links.
Download
download7
A component showcasing app download options with a bold title, a badge, and stylized placeholders for 3 phones, arranged dynamically by screen width.
Download
download8
This component displays a download block with a featured image, a title, an auto-detect download button with its last update date, and a list of download options for various platforms categorized in a 2-column layout.
Download
download9
A component for software downloads showcases features, buy/download options, platform compatibility icons in 2 columns.
Drawer/drawer-bottom-
drawer-drawer-bottom-1
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-2
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-3
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-4
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-5
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-6
A drawer/drawer-bottom- example
Drawer/drawer-bottom-
drawer-drawer-bottom-7
A drawer/drawer-bottom- example
Drawer/drawer-left-
drawer-drawer-left-1
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-2
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-3
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-4
A drawer/drawer-left- example
Drawer/drawer-left-
drawer-drawer-left-5
A drawer/drawer-left- example
Drawer/drawer-right-
drawer-drawer-right-1
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-2
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-3
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-4
A drawer/drawer-right- example
Drawer/drawer-right-
drawer-drawer-right-5
A drawer/drawer-right- example
Drawer/drawer-top-
drawer-drawer-top-1
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-2
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-3
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-4
A drawer/drawer-top- example
Drawer/drawer-top-
drawer-drawer-top-5
A drawer/drawer-top- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-1
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-2
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-3
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-4
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-actions-
dropdown-menu-dropdown-menu-actions-5
A dropdown-menu/dropdown-menu-actions- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-1
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-2
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-3
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-4
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-editor-
dropdown-menu-dropdown-menu-editor-5
A dropdown-menu/dropdown-menu-editor- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-1
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-2
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-3
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-4
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-profile-
dropdown-menu-dropdown-menu-profile-5
A dropdown-menu/dropdown-menu-profile- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-1
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-2
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-3
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-4
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-settings-
dropdown-menu-dropdown-menu-settings-5
A dropdown-menu/dropdown-menu-settings- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-1
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-2
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-3
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-4
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-5
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-6
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-standard-
dropdown-menu-dropdown-menu-standard-7
A dropdown-menu/dropdown-menu-standard- example
Dropdown-menu/dropdown-menu-support-
dropdown-menu-dropdown-menu-support-1
A dropdown-menu/dropdown-menu-support- example
Dropdown-menu/dropdown-menu-support-
dropdown-menu-dropdown-menu-support-2
A dropdown-menu/dropdown-menu-support- example
Dropdown-menu/dropdown-menu-support-
dropdown-menu-dropdown-menu-support-3
A dropdown-menu/dropdown-menu-support- example
Ecommerce-footer
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
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
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
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.
Emoji-picker/emoji-picker-basic
emoji-picker-emoji-picker-basic
A emoji-picker/emoji-picker-basic example
Emoji-picker/emoji-picker-custom-trigger
emoji-picker-emoji-picker-custom-trigger
A emoji-picker/emoji-picker-custom-trigger example
Emoji-picker/emoji-picker-different-variants
emoji-picker-emoji-picker-different-variants
A emoji-picker/emoji-picker-different-variants example
Emoji-picker/emoji-picker-in-form
emoji-picker-emoji-picker-in-form
A emoji-picker/emoji-picker-in-form example
Emoji-picker/emoji-picker-text-trigger
emoji-picker-emoji-picker-text-trigger
A emoji-picker/emoji-picker-text-trigger example
Emoji-picker/emoji-picker-with-display
emoji-picker-emoji-picker-with-display
A emoji-picker/emoji-picker-with-display example
Empty/empty-actions-
empty-empty-actions-1
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-2
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-3
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-4
A empty/empty-actions- example
Empty/empty-actions-
empty-empty-actions-5
A empty/empty-actions- example
Empty/empty-data-
empty-empty-data-1
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-2
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-3
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-4
A empty/empty-data- example
Empty/empty-data-
empty-empty-data-5
A empty/empty-data- example
Empty/empty-search-
empty-empty-search-1
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-2
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-3
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-4
A empty/empty-search- example
Empty/empty-search-
empty-empty-search-5
A empty/empty-search- example
Empty/empty-standard-
empty-empty-standard-1
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-2
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-3
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-4
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-5
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-6
A empty/empty-standard- example
Empty/empty-standard-
empty-empty-standard-7
A empty/empty-standard- example
Experience
experience1
A component listing experiences with download CV button, 3-column layout for period, title/description, and company.
Experience
experience2
A component showcasing professional experiences in a 6-column layout with sticky summary and contact on the left and detailed list on the right.
Experience
experience3
A component displaying professional experience with a title, introduction text, download resume button, last updated date, and a list of job positions with descriptions and periods.
Experience
experience5
A component displays work experience entries in a 2-column layout, with logos, roles, companies, periods, and descriptions.
Faq
faq1
An accordion-style FAQ component with a customizable heading and list of questions and answers.
Faq
faq10
An FAQ component with a title, intro text, and accordion-style questions. It includes a badge icon and a bordered layout.
Faq
faq11
An FAQ component with a column for inquiry intro and a column for categories. Features collapsible accordions for answers.
Faq
faq12
An FAQ component displaying questions under categories with a clickable sidebar for navigation. Features include dynamic active state updates and smooth scrolling.
Faq
faq14
An FAQ component with a central heading, a subtitle, and grouped questions within collapsible cards, each representing a category. Includes a decorative background.
Faq
faq15
An FAQ component with a title and a 2-column layout of items, each featuring an icon, heading, and description.
Faq
faq16
An accordion-style FAQ block with a title and expandable question items, set in a centered layout with a max-width.
Faq
faq17
A component comprising FAQs with an accordion layout, personal profile section, and a contact link. Features a 5-column layout, customizable questions, answers, and profile info.
Faq
faq2
A FAQ component displaying questions and answers in a column, with a customizable heading and dynamic content.
Faq
faq20
A two-column FAQ section with heading and contact link on the left, and categorized accordion questions on the right.
Faq
faq3
A FAQ component with collapsible questions, a support section with avatars and a contact button.
Faq
faq4
A component showcasing an FAQ section with expandable answers, highlighted by badges and separators, and includes a support contact link.
Faq
faq5
A FAQ component with a badge, heading, and description at the top, followed by a list of questions and answers presented in a single-column layout. Each item features a numeric label.
Faq
faq6
A component showcasing FAQs in a two-column layout, each entry numbered and containing a question and answer. Includes a headline and descriptive subtext at the top.
Faq
faq7
A 2-column FAQ block featuring a title, a supportive call-to-action with an external link, and a multi-expand accordion of questions and answers.
Faq
faq8
An FAQ component with collapsible sections for "General" and "Billing" questions, each with their own set of questions and answers. It has a 3-column layout on wider screens.
Faq
faq9
An FAQ component featuring a title and an expandable accordion with multiple items to display questions and answers.
Feature
feature1
A block with a 2-column layout featuring a title, description, two buttons, and an image.
Feature
feature10
A block titled "Why Us?" with a subtitle, arranged in up to 4 columns featuring icons for Performance, Innovation, Quality, and Accessibility, each with a brief description.
Feature
feature101
A layout showcasing capabilities with a title, description, and 5 feature blocks in a 3-column grid. Unique elements include icons, hover animations on images, and varied block sizing.
Feature
feature102
A component displaying a title, a brief description, and 3 features with images. Each feature includes a number indicator, title, and description.
Feature
feature103
A component showcasing core capabilities with a badge, a heading, and links in a 2-column layout expanding to 3 columns. Features interactive elements and an arrow icon.
Feature
feature104
A component featuring a header with an outlined badge, a title, a paragraph, a placeholder image, and six sections with icons and texts in a 3-column layout.
Feature
feature105
A component featuring tabs with icons and text, each tab showing a different image.
Feature
feature106
A component showcasing features in an accordion for narrow screens and tabs for wider screens, each with icons, titles, and images.
Feature
feature107
A component featuring a badge and six linked blocks showcasing tools, each with an image, title, description, and a "Visit Website" call-to-action.
Feature
feature108
A tabbed component with 3 tabs, each displaying a title, description, badge, a button with text, and an image. Layout includes two columns in larger views.
Feature
feature109
A two-column layout block, featuring an outlined badge, large headings, descriptive text, and a button with an icon in the first column. The second column showcases an image with overlay text, including an avatar badge and a link.
Feature
feature11
A component with an image on one side, and descriptive text with a bulleted list on the other. Includes a headline, paragraph, and a button.
Feature
feature110
A component featuring badges, a carousel with avatars, and descriptive text blocks, structured in a 2-column layout, each containing dynamic, premium, and structured content blocks.
Feature
feature111
A component showcasing features with 2 columns, badges, headings, descriptions, links, and images. Unique for its centered content and outlined badges.
Feature
feature112
This component displays a section with a title, subtitle, and a link followed by a 3-column layout of cards, each featuring an image, title, and link.
Feature
feature113
A tabbed component with 3 options, integrating text, badges, buttons, and images, showcasing different features. Each tab has a 2-column layout for content and visuals.
Feature
feature114
A component featuring dual-column layout with avatars, a heading, stats, and vertically auto-scrolling carousels showcasing features.
Feature
feature115
A block showcasing 6 key features with badges, headings, descriptions, and images. Laid out in up to 3 columns, it includes customizable cards for each feature.
Feature
feature116
This component displays a title, subtitle, and a grid of images (3 columns, 2 rows) with hover effects and call-to-action links.
Feature
feature117
A 3-column component showcasing features with images, hover effects, icons, and links for exploring more.
Feature
feature118
A feature block highlighting workflow tools with a header, 3 columns of benefits/stats, and a contact prompt. Uses icons and a placeholder image.
Feature
feature119
A component featuring a badge, a title, a 3-column layout of steps, and an image. Each column details a step with a numbered badge and text.
Feature
feature12
A feature block using a carousel to display slides on various topics. Includes a progress bar and navigation buttons.
Feature
feature120
A component showcasing business tools with a 2-column layout, avatars, quotes, action button, and a 4-column stats grid.
Feature
feature121
A component displays features in a grid, each with an icon, title, and description. Interactive blocks reveal descriptions on click.
Feature
feature122
A component with a grid layout of feature blocks, including a prominent highlighted block with a call-to-action button and an image. It uses icons and hover effects.
Feature
feature123
A component with a title and text block on one side, and a column of features with titles and descriptions on the other. Features highlighted by a color gradient bar.
Feature
feature124
A dual-section block featuring a text column with a heading, description, checklist, and button, alongside an image column with a decorative background pattern and gradient overlays.
Feature
feature125
A component with a dual-column layout, highlighting features and an illustrative image, includes a list with checkmarks and a button.
Feature
feature126
An accordion-style component displays key features with titles, descriptions, and images. Allows toggling between sections to reveal content and images.
Feature
feature127
This block showcases utilities with dynamic grid visuals and descriptive cards, detailing features through icons, titles, and texts alongside faded image backgrounds.
Feature
feature128
A component featuring a title, a subtext, and a 2-3 column layout of items, each with an icon and a description.
Feature
feature129
A tabbed component showcasing integrations like Slack & Google Drive, featuring descriptions, images, and "Learn more" links. Has a title and subtitle.
Feature
feature13
A component showcases a heading and 2-column layout of features with title, subtitle, description, and image. Unique for using images as visual endpoints in each feature card.
Feature
feature130
A component showcasing business integrations with 3 segments, including icons, titles, and text. Features a 3-column layout with images.
Feature
feature131
This component displays core features using an accordion layout for text and a dynamic image section, where selecting a text tab changes the displayed image.
Feature
feature132
A component displaying a welcome message, a description, a "Get Started" button, and a 4-column layout of items with images, titles, and descriptions.
Feature
feature133
A component featuring three sections highlighting business integrations with icons, titles, and descriptions. Layout includes a main header and a 3-column section beneath it.
Feature
feature134
This component displays a feature section with an outline badge, a title, a subtitle, and a 3-column layout of clickable feature cards, each with titles, descriptions, icons, and images.
Feature
feature135
A component showcasing core features and highlights with icons, titles, and descriptions in a two-column layout.
Feature
feature136
A component featuring a productivity tools overview with stats (installs, active users, etc.), and 3 benefits. Layout includes a 2-column section with an image and a 3-column grid for benefits.
Feature
feature137
A component displays values/principles in 2 sections: 4 with images, 4 with icons, in a mix of single and dual-column layouts.
Feature
feature138
A component featuring three sections, each with an image and text side-by-side, headers, and a "Learn more" link. Alternates image/text order between sections.
Feature
feature139
A component featuring a badge, a heading, a paragraph, an image, and a 4-column grid of items with numbers, titles, and descriptions.
Feature
feature14
A two-column component featuring secure payments and automated invoicing, with text descriptions and check-marked features, complemented by numbered image placeholders.
Feature
feature140
A carousel block displaying items with titles, descriptions, and images in a flex layout, includes previous and next controls. Each item combines text and a full-width image.
Feature
feature141
A component with a title, description, a 3x3 grid with a central image, a highlighted message, a badge, divider, testimonial, and attribution.
Feature
feature142
A grid-based component with a unique layout, featuring an image and text in a stylized block with border details, accompanied by a list with icons and a badge.
Feature
feature143
A component showcasing features with a badge & a grid layout. Utilizes a 3x3 grid for visuals, lists features with icons, and emphasizes modern design.
Feature
feature144
A component featuring a central heading, a description, and three Cards, each with an image, a title, and a Badge. The Cards display in a single column for mobile and in rows for larger screens.
Feature
feature145
A component featuring a customizable accordion for showcasing features with text and images, including a dynamic image display area that updates based on accordion selection.
Feature
feature146
A component featuring title sections, text descriptions, and images across two rows with unique dashed border decorations.
Feature
feature147
A component showcasing integrations in a grid layout; features a heading, subheading, and 3-column grid of cards with images, titles, and descriptions.
Feature
feature148
This component displays a title, description, and a grid of 6 cards, each containing an image, title, and description, arranged in 1-3 columns based on screen size.
Feature
feature149
A component featuring dual interactive panels with a central decorative divider, expanding on hover. Each contains a button, heading, and text, against a backdrop image with gradient overlays.
Feature
feature15
A component with a title/description header and a 2-column grid of features, each with icons, titles, and text.
Feature
feature150
A component showcasing 2 CRM solutions with hover effects, images, and a "Learn More" or "Get Started" button.
Feature
feature152
A component featuring a central title and message, with clickable icons arranged in a staggered layout. Visual enhancements include overlaid decorative circles and gradient effects.
Feature
feature153
A carousel component displaying key features of various platforms, allowing users to navigate through items with previous and next buttons. Each item presents an image, title, description, and a list of detailed info.
Feature
feature154
A component featuring dual infinite sliders with badges for features like Integrations, Automation, etc., inside a styled section with a gradient and wave overlay.
Feature
feature156
A component displaying tabs with 3 columns, featuring dynamic visual content for software development themes upon tab selection.
Feature
feature157
A component displaying a "Services" header, a large title, and 2 columns each featuring an image, title, and description.
Feature
feature158
A component displaying three key features with images & descriptions, centered titles, and a "View More" button. Each feature is in a column within a row for desktops.
Feature
feature159
A 4-column component displaying icons with titles and text descriptions. Includes a "See all" link on the last item.
Feature
feature16
A component featuring a three-column layout, each with icons (Timer, ZoomIn, Zap) for "Performance", "Quality", and "Innovation", with descriptions.
Feature
feature160
A tabbed component with 4 items, each with an icon, title, and description. Clicking a tab shows a related image. Uses a grid layout for tabs.
Feature
feature161
A 2-column component featuring a title, text, buttons, and a row of logos with decorative border accents.
Feature
feature162
A component featuring 1 row with text and an image, followed by 2 more images below, each in a rounded border.
Feature
feature163
A component with a 5-column grid layout, featuring 4 blocks each with text, images, and varying column spans. Unique rounded image integration.
Feature
feature164
This component consists of a tabbed gallery (with 3 items) alongside descriptive text and a 'Learn more' button, arranged in a two-column layout.
Feature
feature166
A component displaying a main heading, description, and four features in a 3:2 column layout, each with a title, description, and image.
Feature
feature167
A feature presentation block with tabs for "Smart Task Management," "Automated Scheduling," and "Personalized Insights." Includes badges, animated tab indicators, and images for each feature.
Feature
feature168
A component that showcases 3 productivity features with titles, descriptions, and visuals in a 3-column layout, including a highlighted "Features" Badge and a main heading.
Feature
feature169
A component with tabs for features like scheduling and analytics, each with an icon, title, description, and image. Includes decorative accessories.
Feature
feature17
A component showcasing 6 core features with icons, using a 2-column grid layout, including a heading and subheading.
Feature
feature170
This component displays "Our Core Values" with a badge and a call-to-action link, followed by a three-column grid of icons and texts detailing each value.
Feature
feature171
A modern layout featuring a top slogan, a section for team habits, and 3 image-based feature cards, linked by dashed lines.
Feature
feature172
A feature block splits into a 2-item top grid and a 3-item bottom grid, offering detailed insights and visuals for solutions. Unique image alignments highlight offerings.
Feature
feature173
A component showcasing metrics with icons in a 3-column layout, highlighting improvements in bugs, notifications, and chaos. Features gradient cards.
Feature
feature174
A component showcasing features across a grid layout with dynamic fading effects; includes titles, descriptions, and images.
Feature
feature175
This component displays features using tabs with vertical orientation, switches images and descriptions onClick, includes custom icons.
Feature
feature176
A component displaying analytical data through cards, badges, progress bars, and charts, organized in a two-column grid. Features include performance evaluations, skill badges, data metrics, and interactive elements.
Feature
feature18
A grid of customizable UI feature cards, each with an icon, title, description, and a "Learn more" link, arranged in up to 3 columns.
Feature
feature180
A component contrasting two scenarios with/without a product through icons and text in a 2-column layout, highlighting benefits and downfalls.
Feature
feature181
A component showcasing four key features in a grid layout. Each card has a large masked index number, feature details, and a time badge.
Feature
feature182
A component showcasing three feature cards with images, titles, descriptions, and icons, plus a section with two action buttons and a descriptive heading.
Feature
feature183
A component featuring a trendy hero area with an overlaid phone image, SVG patterning, and two info cards, plus a row of three stat cards below.
Feature
feature184
A component displaying features with interactive tabs and images. Uses a 2-column layout, including a dynamic image and detailed tabs for each feature. Includes buttons.
Feature
feature186
A tabbed component displaying features with icons, descriptions, and images. It toggles between three key features, each with its visual and text content.
Feature
feature187
A component displays a 3-step process with titles and descriptions in a three-column layout. Each step is uniquely marked and connected by a visual guide.
Feature
feature188
A component displaying 3 resources with titles, descriptions, and images, structured in a bordered container with horizontal dividers.
Feature
feature189
This component showcases a 2-column layout: overlapping images on the left and a content section with a headline, feature list, and button on the right.
Feature
feature19
A component displaying tabs each with a title, description, list of features, and an image, arranged in a 2-column layout for larger screens.
Feature
feature190
A component displaying a grid of features with images, titles, and descriptions. It includes a title, introductory text, and a button. Grid scales from 1 to 3 columns.
Feature
feature191
A component featuring a highlighted message and a 3-column layout of cards, each card displaying a sequence badge, a title, description, and image.
Feature
feature192
An accordion component presenting features with selectable items on one side and corresponding images on the other. It includes dynamic image display based on selection.
Feature
feature193
A component showcasing features with dynamic layouts, multi-column grid, and decorative background gradients. Includes title, descriptions, and images.
Feature
feature194
A component showcasing 4 unique features with icons in a 4-column layout, each with a description and "Learn more" link.
Feature
feature195
A component featuring a 2-column layout with pricing details, benefits, and CTA buttons. Includes subtle background patterns and hover effects on buttons.
Feature
feature197
This component displays features in an accordion with dynamic image updates. Layout includes 2 columns, interactive tabs on the left, image preview on the right.
Feature
feature198
A component showcasing 3 cards with icons, titles, and descriptions, each highlighting unique software benefits. Positioned dynamically for visual interest.
Feature
feature199
A component displaying a dynamic list of features with images - 3:2 column split, scrolls to highlight features.
Feature
feature2
A dual-column component with an image on one side, and text content with two buttons on the other. Features customizable title, description, image, and buttons.
Feature
feature20
A component showcasing a collection of utilities (like Integrations, Apps, etc.) with a header section that includes a title and a "Learn more" link. It features a two-column texts layout and a grid of cards (1, 2, or 3 columns based on screen size) that display the utility title, description, and image.
Feature
feature200
A component displaying 3 columns of features, each with icons, titles, and lists, distinguished by unique background gradients.
Feature
feature202
A component showcasing 7 architectural solutions each with an icon, title, and description, arranged in a 3-column grid format, with one covering two columns.
Feature
feature203
A component displaying 4 cards in a 2-column grid, each with an icon, title, description, and a list of features with check icons.
Feature
feature204
A split layout component with an image on one side and text areas alongside features on the other, including a call-to-action button and icons.
Feature
feature205
A two-column component featuring interactive tabs (Efficiency, Collaboration, Insights) with descriptive text and related images showcasing benefits.
Feature
feature206
A component featuring a title, description, and a grid of images paired with texts to explain various features. Grid adjusts from 2 to 4 columns.
Feature
feature207
A component showcasing a 3-step workflow with titles, descriptions, and separators, styled in 2 columns for larger screens.
Feature
feature209
A gallery component with a text and button panel on left and image carousel on right, including image thumbnails for selection and a patterned background overlay.
Feature
feature21
A component showcasing utility features with icons, badges, and cards in a two-column layout, incorporating headings, paragraphs, and images.
Feature
feature210
A component showcasing templates with headlines and a 4-column grid of icons, each detailing a different feature with links.
Feature
feature211
A component showcasing features with tabs. Includes icons, titles, summaries, and different image layouts per tab.
Feature
feature213
A component showcasing features through tabs, detailing functionality with related images and summaries. Includes a main title, 3 tabbed descriptions, and images set in a 16:9 aspect ratio.
Feature
feature214
A carousel showcasing AI-powered features with autoplaying video cards on hover, including icons and brief descriptions.
Feature
feature215
A carousel component showcasing AI editing features with video previews, titles, and summaries. Each carousel card plays its video on hover.
Feature215a
feature215a
A component showcasing a grid of cards with videos, icons, and texts. Features hover-to-play videos and links.
Feature215b
feature215b
A component featuring a collection of horizontal cards, each with a video, icon, title, summary, and link. Cards activate video on hover.
Feature
feature216
A navigational component with colored icon tabs for different features, summary texts, and changing images on tab selection, plus next/prev buttons.
Feature
feature217
A component focused on inclusive design features, with a two-column layout for a header and an image, followed by a three-column section showcasing features with icons, titles, and summaries.
Feature217a
feature217a
A component displaying 3 columns of features, each with an icon, title, and summary focused on accessibility. It includes a header with a title, paragraph, and an image within an aspect ratio block against a dynamic background.
Feature217b
feature217b
This component showcases three accessibility features with icons in a 3-column layout, including titles and summaries, against a dynamic background.
Feature
feature218
A component featuring two columns with a 1:2 ratio, showcasing a promotional message and a call-to-action button on the left, and an image with a unique fade effect on the right.
Feature
feature219
A component displays a 3-column grid of stylized cards, each with a title, summary, and unique image layout variant. Icons are optionally included.
Feature
feature22
A component featuring a 3-column layout with a title, lists of features, and 3 showcases including images and descriptions of block functionalities.
Feature
feature220
A component showcasing user stats, a customer testimonial with avatar, and an autoplaying video in a 2-column layout. It includes styled text and a button.
Feature220a
feature220a
A component featuring badges, headings, text, a large button, and a video. It includes stats in a 3-column layout, a dotted background pattern, and primary color highlights.
Feature220b
feature220b
A component showcases statistics and a video/content layout. It has a 2-column grid with stats at the top, a video on the left, and descriptive content on the right.
Feature
feature221
A component showcasing 4 unique features in a 2-column layout with gradient badges, detailed descriptions, and a "Learn More" button. It includes a prominent title and subtitle.
Feature
feature222
A component displaying a grid of cards with images, titles, stats, and a "Read Story" button. Cards are dynamically populated from a list.
Feature
feature224
A component showcasing AI features in nature via a carousel, each slide displaying a title, icon, and description with a vibrant background.
Feature
feature225
A component displaying AI features with interactive tabs; includes title, description, icons, and images across a 1-to-4 column grid.
Feature
feature227
A 2-column block featuring a large title, descriptive text, and bullet points with icons on one side, and an image with overlaid gradients on the other.
Feature
feature228
A component showcasing smart home features with a 2-column layout: one side highlights benefits (intuitive lighting, security, ecosystem integration, social connectivity) with icons, the other displays images.
Feature
feature229
A component with 3 columns, listing features under "Security," "Integration & APIs," and "Support" categories, each with their icons and items marked by check icons.
Feature
feature23
A module showcasing 3 features with images, titles, descriptions, and 'Learn more' links in a 3-column layout.
Feature
feature230
A component showcasing cloud service benefits using a large header, description, and 4 feature callouts with icons, arranged in a 4:6 column layout.
Feature
feature231
A component showcasing 4 features and a call-to-action, split into 2 columns on larger screens. Each feature is numbered and detailed.
Feature
feature234
This component features a headline, a row of cards with hover effects, and two buttons. Cards dynamically adjust visibility and overlap on different screen sizes.
Feature
feature235
A component displays UI blocks with flickering image animations and a stylized border effect. It includes descriptive text and buttons, within a dual-column layout.
Feature
feature236
This component displays a centralized promotional message for a website builder with interactive elements, including animated buttons and dynamic borders, spanning multiple text sizes and has animated ping effects.
Feature
feature237
This component displays a grid of cards detailing system features, each with metrics, status, and deployment info. Two-column layout on medium screens.
Feature
feature238
A component showcasing a title, description, buttons for sign-up and demo, and three animated, overlapping cards with hover effects.
Feature
feature239
A component showcasing a dual-column layout with interactive badges, buttons, and a promotional section with a dynamic background image, aimed at highlighting copy-paste UI blocks.
Feature
feature24
A component showcasing UI components with a title, description, and placeholder image. Includes a "Learn more" link and icons. Two-column layout for text.
Feature
feature240
A carousel component showcasing services with images, titles, and descriptions. Items reveal further details on hover. Navigation arrows are provided.
Feature
feature241
A component displaying a header and a grid of cards, each with an icon, title, and description about team features. Grid has 2 columns. Cards animate on hover.
Feature
feature242
A carousel block with testimonials, navigation arrows, and a current indicator, featuring interactive elements and overlaid text on images.
Feature
feature243
A component displaying a vertical timeline layout of steps, each with an icon, title, and description. It uses cards for step details.
Feature
feature244
A component showcasing a carousel of feature cards with images, titles, and descriptions. Each card is within a dotted container.
Feature
feature245
A component showcasing eight feature highlights with animated text and decorative slashes, centered around a single card image, structured in a dual-column layout.
Feature
feature246
This block features a sign-up form with a dynamic list of benefits and an illustrative image. Includes a bold headline, 4 listed advantages with icons, and an input button combination for email sign-ups.
Feature
feature247
A component featuring a TextReveal block centered within a section, using a single-column layout with a max width. It highlights a key message or feature.
Feature
feature248
A centered text reveal component with a dark background, featuring a motivational message, adaptable to large screens up to 86rem wide.
Feature
feature249
A component displaying a large, animated title with gradient and a below image, structured in a single column layout.
Feature
feature25
A component with three content sections and a headline area, using 4-column layout for items, and checkmarks for list-style.
Feature
feature250
A component displaying a title, subtitle, and an animated, interactive illustration with networked CPUs and dynamic beams connecting them, laid out in a flexible column or row arrangement depending on screen size.
Feature
feature251
A component featuring four cards with animations, icons, and text for showcasing features such as workflows, task tracking, and integrations.
Feature
feature252
A component with a visual ripple effect, encapsulating a header, a subtext, and a button within a bordered, rounded container.
Feature
feature253
A component featuring a title, text, and button on the left with a globe animation on the right in a two-column layout with a unique rotating arrow icon on the button hover.
Feature
feature254
Interactive block with layered orbiting circles of images, a central message "Connecting Devs," and a call-to-action button.
Feature
feature255
A component displaying a list of top contributors with images, titles, and descriptions. Includes a header with a "View all" button.
Feature
feature256
A component displaying developer tools and guides, with two distinct sections. Tools section has a 2-3 column layout with icons; Guides use a 1-2 column format with text.
Feature
feature257
A component displays tools in cards with categories, logos, names. Columns adjust from 1 to 3 based on the display size. Unique hover effects.
Feature
feature26
A component displaying 6 features with icons, titles, and descriptions in a grid of up to 3 columns.
Feature
feature261
A component featuring a grid layout with varying content blocks, including image backgrounds, statistics, pricing, and avatar groupings, aimed at promoting design quality, efficiency, and a premium library.
Feature
feature266
A component showcasing a "FRAGMENTS OF LIGHT & STILLNESS" collection with a three-column grid of cards featuring image tooltips, staggered animations, and a hover effect enhancing visual context.
Feature
feature267
A dual-column block featuring an animated 3D marquee with images, a subscription input form, and dynamic text sections, highlighted by an icon.
Feature
feature268
A component showing a title, description, two buttons, a list of features with icons, and a 3D-animated card displaying an image and a button. It uses a two-column layout on large screens.
Feature
feature269
A feature block lists 12 advantages with icons in a two-column grid and highlights services with an image in an adjacent visual card.
Feature
feature27
A component featuring an "Overview" badge, centered title, and text, followed by two columns of images with captions, and a full-width image with a caption.
Feature
feature270
A component displaying customizable feature blocks with images, titles, and descriptions in a grid of 2 or 3 columns, depending on screen size.
Feature
feature271
A component showcasing features with an animated background, a central title, a labeled introduction, and a two-column list, each with an icon and a description.
Feature
feature272
A 3-step guide block with a centered title, intro text, and a grid of 3 columns each detailing a step. Features arrows pointing between steps.
Feature
feature274
A component displaying a title, a text paragraph, and a grid of 4 animated cards that reveal information on hover.
Feature
feature275
A component showcasing "Secrets Behind Success" with a central title, a description, and a 3-column layout of interactive cards that reveal details on hover.
Feature
feature276
A component displaying a 3-column grid of cards for features like "Plug & Play", "Customizable", each with an icon, title, and description. It highlights a card on hover.
Feature
feature277
A 4-column grid feature block with interactive cards displaying titles, descriptions, icons, and "Read More" buttons. Cards reveal a colored background on hover.
Feature
feature278
A component showcasing 6 feature cards with icons, titles, and descriptions that highlight unique qualities, arranged in a grid up to 3 columns wide, with a dynamic hover effect.
Feature
feature28
A two-column component featuring image placeholders, badges, and "learn more" links with right-pointing chevrons.
Feature
feature280
A layout showcasing user testimonials and a feature list with a title, separated into two columns, including checkboxes for features.
Feature
feature281
A testimonial display component featuring an animated card stack with user feedback, adjustable through attributes like offset and scale. Includes a "Read More" button.
Feature
feature282
A 2-column component featuring an interactive encryption card and detailed text on encryption technology, with security highlights listed using bullet-like icons.
Feature
feature283
A component with an interactive image gallery, headline, text, and button. Features draggable, animate-on-scroll images with hover effects.
Feature
feature284
A grid component displaying features with images, titles, descriptions, and badges. Incorporates a glowing effect on hover. GridLayout varies from 1-4 columns.
Feature
feature285
A component with a 2-column layout featuring a brand logo, title, text, and button on one side and dual vertical marquees with interactive images on the other. Unique for image blur on hover.
Feature
feature286
A component featuring an intro, 3 cards with glowing stars, pricing, and a "View All" button. Each card has "Add to cart" functionality and displays collection names and prices.
Feature
feature287
A component displaying a title and a grid of cards (4 columns wide on larger screens, fewer on smaller). Each card includes a glowing stars effect, a title, and text. A button below the grid invites user interaction.
Feature
feature288
A component featuring a central text block with embedded clickable previews, housed within a single column layout, emphasizing the ease of integration and customization.
Feature
feature289
A component featuring a large title and a tech stack list with clickable links, arranged in a 2-column layout with adjustable gap sizes.
Feature
feature29
A component with a 2-column layout including images and text blocks, showcasing features via placeholders and descriptions.
Feature
feature292
A component featuring a hiring tag, a large title with dynamic highlighting, a brief description, and an email signup form alongside a full-cover image in a two-column layout.
Feature
feature293
A subscription component with a headline, description, email input, button, and animated background. It spans the full screen, contains two columns in the input area, and features dynamic sparkles.
Feature
feature294
This component showcases 5 features with icons, titles, and descriptions, arranged in up to 3 columns, and includes a sparkle effect background.
Feature
feature295
This component displays projects with filters for categories and roles, and a toggle to show all. It features a 1-3 column grid of project cards.
Feature
feature297
A three-column component showcasing features with images, numerical identifiers, and titles. Each column enlarges the image on hover.
Feature
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
feature3
A component showcasing a 3-column layout of cards, each featuring an icon, title, text, and image, adaptable to 1 or 2 columns on smaller screens.
Feature
feature30
A component featuring a 3-column layout with 2 images and a text block, showcasing a blend of aesthetics and information.
Feature
feature31
A component featuring a central message with 2 columns below, mixing images and text. Includes headings, paragraphs, and links. Unique for its text-image alternating layout.
Feature
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
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
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
feature32
A component with a title and a 3-column layout for testimonials, one large featured testimonial spans two columns and rows.
Feature
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
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
feature33
This component displays a main title, a subtitle, an image, and a three-column layout of cards, each containing a title, text, and link.
Feature
feature34
This component displays a heading, a subheading, and a 3-column layout with a mix of images, texts, and a grid showcasing numeric values and icons.
Feature
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
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
feature35
A 4-column component with a large title spans 2 rows, followed by 3 content blocks, each with a title, text, and link. An arrow icon accents links.
Feature
feature36
A component with a 3-column layout for case studies, featuring one larger highlighted card and five smaller ones, each with a title, badge for the larger card, and a "Continue reading" link.
Feature
feature37
A component with a 5-column grid layout, featuring 4 blocks with images and text descriptions, 2 columns wide for the first and last, 3 for the middle two. Each has a rounded, accent-colored background.
Feature
feature38
A component showcasing a heading, text, a button, and a list with icons next to headings. Features a large image beside the text content.
Feature
feature39
A feature block with a heading and a 3-column layout, each containing an image, title, description, and link.
Feature
feature4
A component featuring a main title, a card with text and an oversized image, and a 2-column layout with another card and a quote box.
Feature
feature41
A component with a title and a 5-column layout that displays 4 colored blocks, each containing a location name and address.
Feature
feature42
A component showcasing core values in a 3-column layout, with a large header spanning two rows and 4 smaller sections for individual values.
Feature
feature43
A component showcasing 6 reasons with icons, titles, and descriptions in a 3-column grid for "Why Work With Us?".
Feature
feature44
A component displaying a grid of integration options with images and descriptions, adaptable from 1 to 3 columns.
Feature
feature5
A component with a 3-column layout on large screens, shrinking to 2 and then 1 column. Features 2 cards, one double the width of the other, each with icons, text, and images.
Feature
feature50
A component with a central message and a button, followed by a grid of 3 visual blocks, each with text and "Learn more" buttons. One spans full-width, others take half.
Feature
feature51
A tabbed component with 3 options featuring icons. Toggles content display with images.
Feature
feature52
A component featuring tabbed navigation with icons and titles, transitioning to different content images on selection.
Feature
feature53
A component displaying a grid of logos and titles, transitioning from 2 to 4 columns, with unique numbering for each item.
Feature
feature54
A tabbed component showcasing features with images and subfeatures. Includes 5 tabs, images for each feature, and a 3-column layout for subfeatures.
Feature
feature55
A centered feature block with a title, description, and button. Uses a single-column layout with adjustable text sizes.
Feature
feature56
A component displaying a primary feature block followed by a 3-column layout, each containing a feature description and image.
Feature
feature57
A component showcasing a feature list with an image carousel. It has selectable tabs that scroll images into view and update dynamically.
Feature
feature58
A component displays an image alongside a list of 3 features, each with an icon, title, and description, laid out in a 2-column grid.
Feature
feature59
A component presenting a main feature with a large description and image, followed by three smaller feature blocks with descriptions and images, organized in a 2-column layout.
Feature
feature6
A 2-column layout component featuring an icon, a bold headline, descriptive text, a list with checkmarks, and a full-width image.
Feature
feature60
A component with a two-column layout featuring an image on one side and text content on the other, including a large header and detailed description.
Feature
feature61
A two-column layout component with an image on the left and descriptive text on the right, featuring large padding and text emphasis adjustments at different sizes.
Feature
feature62
A three-row component featuring alternating image-text layouts with descriptive text blocks and images in bordered, rounded frames.
Feature
feature63
A component showcasing a group of 6 features, each with a title, description, and image, arranged in up to 3 columns.
Feature
feature64
A component displaying a "Coming Soon" badge, a title, a descriptive paragraph, and two feature blocks in a 7-column grid, with the first block spanning 4 columns and the second 3 columns.
Feature
feature65
A component featuring a grid of four columns, displaying categorized items with expandable sections for detailed content and tags. Each item includes an icon, title, and customizable color bar.
Feature
feature66
A component featuring a title and a 2-column grid of large, hover-zoom image cards with overlaid text and logos, scaling to 1-column on smaller screens.
Feature
feature67
A component displaying a group title and a 2-column grid of 6 feature cards, each with an icon, title, and description.
Feature
feature68
A component that showcases six features with icons, titles, and descriptions in a 1-2-3 column layout, with an introductory section.
Feature
feature69
A carousel component with an image slider and a side list detailing features. It evolves around dynamically updating content based on user interaction.
Feature
feature7
A 2-column component with a full-width image and a text block featuring an icon, a bold title, descriptive text, and a list with checkmarks.
Feature
feature70
A carousel-based component showcasing features with descriptions, navigable by interactive list items. Layout includes an image carousel and a detailed description list on two columns.
Feature
feature71
A component featuring a central text block with a tagline, title, and description, followed by action buttons. It includes a grid layout with images, metrics, and interactive elements in 4 columns.
Feature
feature72
A component showcasing features with a heading, description, demo link, and a grid of feature cards, including images and texts, structured in up to 2 columns.
Feature
feature73
A component displays a heading, description, and a link followed by a grid of features with images, each detailing a specific capability. Two-column layout for larger screens, single for smaller.
Feature
feature74
A component with a title, description, and 2-column grid each hosting an image and text describing different features, with a "Book a demo" link.
Feature
feature75
A component with a title and text on one side; three action blocks on the other, each with a tagline, description, and a "Learn more" button.
Feature
feature76
A component showcasing a UI Library's features in a grid layout with 4 columns. Includes icons, titles, and descriptions for each feature.
Feature
feature77
This component showcases two key features with icons, titles, and descriptions, arranged in a 2-column grid with a decorative border.
Feature
feature78
Feature block with tabs, showcasing three features, each with an image, title, description. Features a demo link with an animated arrow icon.
Feature
feature79
A feature block with a tagline, title, and description, followed by a grid of one main and three smaller linked feature items, each with hover effects and directional arrows.
Feature
feature8
A component featuring a title and two cards for showcasing features, each with "Learn more" links and logos.
Feature
feature80
A component displaying an image next to descriptive text, links with icons, and overlapping avatars, arranged in a flex layout with a 2-column format for widescreens.
Feature
feature81
A component showcasing a feature group with a tagline, title, and description. Includes a 4-column grid with clickable images and "Read more" links.
Feature
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
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
feature85
A block highlighting features of a project management app with icons, titles, and descriptions arranged in up to 3 columns.
Feature
feature86
A 3-column layout component with a semi-transparent overlay, featuring a badge, texts, a separator, and a video demo link on the left, and a video placeholder image spanning 2 columns on the right.
Feature
feature87
A block featuring badges, headings, lists, and an image. It's structured in a 3-column grid with text and icons on the left, and a large image spanning two columns on the right.
Feature
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
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
feature90
A marketing component featuring a title, description, button, a row of logos, and a link to more integrations.
Feature
feature91
Two-column feature block, contrasting "Team Leads" and "Developers" with icons, links, and bordered list items.
Feature
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
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
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
feature95
A component with a badge, a title, and a paragraph, followed by a 4-column tabbed interface that switches content views.
Feature
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
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
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/field-advanced-
field-field-advanced-1
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-2
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-3
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-4
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-5
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-6
A field/field-advanced- example
Field/field-advanced-
field-field-advanced-7
A field/field-advanced- example
Field/field-basic-inputs-
field-field-basic-inputs-1
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-2
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-3
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-4
A field/field-basic-inputs- example
Field/field-basic-inputs-
field-field-basic-inputs-5
A field/field-basic-inputs- example
Field/field-layouts-
field-field-layouts-1
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-2
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-3
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-4
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-5
A field/field-layouts- example
Field/field-layouts-
field-field-layouts-6
A field/field-layouts- example
Field/field-selects-
field-field-selects-1
A field/field-selects- example
Field/field-selects-
field-field-selects-2
A field/field-selects- example
Field/field-selects-
field-field-selects-3
A field/field-selects- example
Field/field-selects-
field-field-selects-4
A field/field-selects- example
Field/field-selects-
field-field-selects-5
A field/field-selects- example
Field/field-selects-
field-field-selects-6
A field/field-selects- example
Field/field-selects-
field-field-selects-7
A field/field-selects- example
Field/field-text-areas-
field-field-text-areas-1
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-2
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-3
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-4
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-5
A field/field-text-areas- example
Field/field-text-areas-
field-field-text-areas-6
A field/field-text-areas- example
Field/field-toggles-
field-field-toggles-1
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-2
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-3
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-4
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-5
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-6
A field/field-toggles- example
Field/field-toggles-
field-field-toggles-7
A field/field-toggles- example
Field-mapping
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
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/file-upload-dropzone-
file-upload-file-upload-dropzone-1
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-2
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-3
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-4
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-5
A file-upload/file-upload-dropzone- example
File-upload/file-upload-dropzone-
file-upload-file-upload-dropzone-6
A file-upload/file-upload-dropzone- example
File-upload/file-upload-form-
file-upload-file-upload-form-1
A file-upload/file-upload-form- example
File-upload/file-upload-form-
file-upload-file-upload-form-2
A file-upload/file-upload-form- example
File-upload/file-upload-form-
file-upload-file-upload-form-3
A file-upload/file-upload-form- example
File-upload/file-upload-form-
file-upload-file-upload-form-4
A file-upload/file-upload-form- example
File-upload/file-upload-list-
file-upload-file-upload-list-1
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-2
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-3
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-4
A file-upload/file-upload-list- example
File-upload/file-upload-list-
file-upload-file-upload-list-5
A file-upload/file-upload-list- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-1
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-2
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-3
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-4
A file-upload/file-upload-preview- example
File-upload/file-upload-preview-
file-upload-file-upload-preview-5
A file-upload/file-upload-preview- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-1
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-2
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-3
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-4
A file-upload/file-upload-progress- example
File-upload/file-upload-progress-
file-upload-file-upload-progress-5
A file-upload/file-upload-progress- example
File-upload/file-upload-special-
file-upload-file-upload-special-1
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-2
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-3
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-4
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-5
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-6
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-7
A file-upload/file-upload-special- example
File-upload/file-upload-special-
file-upload-file-upload-special-8
A file-upload/file-upload-special- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-1
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-2
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-3
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-4
A file-upload/file-upload-standard- example
File-upload/file-upload-standard-
file-upload-file-upload-standard-5
A file-upload/file-upload-standard- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-1
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-2
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-3
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-4
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-5
A file-upload/file-upload-validation- example
File-upload/file-upload-validation-
file-upload-file-upload-validation-6
A file-upload/file-upload-validation- example
Footer
footer1
A component showcasing a footer layout with logos, navigation links across 4 columns, download buttons, and social icons.
Footer
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
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
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
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
footer14
A footer component with logo, newsletter, navigation links across three columns, and social icons. Includes a succinct company description and subscription form.
Footer
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
footer16
A footer component featuring logo, contact button, social icons, and navigation in accordion for smaller screens or columns layout.
Footer
footer17
A footer component with theme toggle, navigation links, social links, theme-specific logo, and a system status indicator.
Footer
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
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
footer23
A footer component with a logo, description, link columns, and an animated globe. Includes 3 sections with navigational links and separators.
Footer
footer24
A footer component with a bold heading, sections for email, social links, phone, and navigation links. It also includes a design attribution.
Footer
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
footer27
A footer block with animated visibility, featuring a "Connect with Me" call-to-action, social links with hover effects, and copyright information.
Footer
footer3
A footer component with a logo, navigation links in 2-5 columns, social icons, newsletter subscription form, and legal links.
Footer
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
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
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
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
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
footer50
A footer with centered CTA section, navigation links, social links, and a large gradient brand wordmark at the bottom.
Footer
footer6
A footer component with a logo, description, navigation links across two columns, a newsletter sign-up form, and copyright/terms section.
Footer
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
footer8
A footer component with a logo, description, social icons, link sections, newsletter signup, and copyright info arranged in a grid layout.
Footer
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/form-advanced-
form-form-advanced-1
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-2
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-3
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-4
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-5
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-6
A form/form-advanced- example
Form/form-advanced-
form-form-advanced-7
A form/form-advanced- example
Form/form-basic-forms-
form-form-basic-forms-1
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-2
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-3
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-4
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-5
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-6
A form/form-basic-forms- example
Form/form-basic-forms-
form-form-basic-forms-7
A form/form-basic-forms- example
Form/form-layouts-
form-form-layouts-1
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-2
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-3
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-4
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-5
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-6
A form/form-layouts- example
Form/form-layouts-
form-form-layouts-7
A form/form-layouts- example
Form/form-multi-field-
form-form-multi-field-1
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-2
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-3
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-4
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-5
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-6
A form/form-multi-field- example
Form/form-multi-field-
form-form-multi-field-7
A form/form-multi-field- example
Form/form-patterns-
form-form-patterns-1
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-2
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-3
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-4
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-5
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-6
A form/form-patterns- example
Form/form-patterns-
form-form-patterns-7
A form/form-patterns- example
Form/form-validation-
form-form-validation-1
A form/form-validation- example
Form/form-validation-
form-form-validation-2
A form/form-validation- example
Form/form-validation-
form-form-validation-3
A form/form-validation- example
Form/form-validation-
form-form-validation-4
A form/form-validation- example
Form/form-validation-
form-form-validation-5
A form/form-validation- example
Form/form-validation-
form-form-validation-6
A form/form-validation- example
Form/form-validation-
form-form-validation-7
A form/form-validation- example
Gallery
gallery1
A gallery block showcasing 3 case studies with dynamic resizing; includes images, logos, text, and interactive effects on mouse hover.
Gallery
gallery10
A testimonial carousel component with text content, navigation buttons, and progress indicator. It has a dual-column layout with quotes and images.
Gallery
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
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
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
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
gallery15
A gallery component showcasing services with carousel functionality, navigation buttons, and a progress indicator.
Gallery
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
gallery17
A carousel component featuring an image gallery with navigation arrows and pagination dots. Each image scales and adjusts opacity on selection.
Gallery
gallery18
A card-carousel gallery with autoplay, displaying portraits with annotated names in a looping mode.
Gallery
gallery19
Component displays a carousel of images with overlay text & a "Know More" link. Offers animated entrances and card effects.
Gallery
gallery20
A gallery component displaying overlapping, draggable images with dynamic animation. Includes textual content and a button, all within a single column layout.
Gallery
gallery21
Interactive gallery component with image slider, effect animations, and a call-to-action button.
Gallery
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
gallery23
Interactive gallery with expandable images and detailed captions on hover, featuring a statement and button on the left.
Gallery
gallery24
An interactive gallery block that showcases images with dynamic resizing and details on hover or click, including an "Add to Cart" button.
Gallery
gallery25
A 4-column animated image gallery, each column with varying image heights and animated transitions on view.
Gallery
gallery26
A gallery block with animated blur vignettes around images, arranged in a 5-column grid. Features image reveal animations on scroll.
Gallery
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
gallery28
A gallery block featuring a carousel of curated interior design images with a centralized heading, description, and navigation buttons.
Gallery
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
gallery3
A carousel component showcasing case studies with navigational arrows and dynamic scroll availability indicators, including images, titles, descriptions, and read more links.
Gallery
gallery30
An interactive gallery component with dynamically shuffled images that are draggable. Includes title and description.
Gallery
gallery31
A product showcase block with a dynamic grid layout of 1-4 columns, displaying items with hover effects, titles, and prices.
Gallery
gallery32
An interactive gallery component with dimension-variable, overlapping images and blur effect on hover. Contains descriptive text animations.
Gallery
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
gallery34
A gallery component displaying items in up to 3 columns, featuring interactive image blur on hover and icons indicating different characteristics.
Gallery
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
gallery4
A component showcasing a scrollable gallery with navigation buttons and indicators, featuring images, titles, and descriptions for each item.
Gallery
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
gallery6
A carousel component with a heading, 'Book a demo' link, scrolling buttons, and dynamic content blocks comprising images, titles, and summaries.
Gallery
gallery7
A component that combines a 2-column text intro with a looping AI-themed image carousel. Unique feature: staggered image positions.
Gallery
gallery8
A carousel component displaying resources in 3 columns, featuring navigation, separators, and dynamic link icons.
Gallery
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
help1
This component serves as a Help Center interface, featuring a search bar for inquiries, categorized help topics, and a list of popular topics with quick access links. It provides users with essential resources such as order tracking, shipping details, payment information, and account settings, along with a call-to-action button for contacting support.
Help
help2
This component, named Help2, provides an FAQ and support interface with searchable questions and categorized answers to assist users in finding solutions to common inquiries. It also includes options to contact support via live chat, email, or phone for further assistance.
Hero
hero1
A promotional component with an option for a badge, a heading, a description, two buttons, and an image. Features a 2-column layout, customizable elements, and icons for links.
Hero
hero10
A promotional hero block with a background pattern, featuring a badge, a heading, a paragraph, two buttons, and a section showcasing logos.
Hero
hero100
A component featuring a 2-column layout, with text and a call-to-action button on one side and an image on the other. Unique for its visual layering effect.
Hero
hero101
A component with a promotional header, featuring a title, description, start button, and demo video button that triggers a modal with a video player. It also displays partner logos below.
Hero
hero103
A component with a split layout containing text and CTA buttons on one side, and a layered image gallery on the other, followed by a logo carousel.
Hero
hero104
A component showcasing an interactive layout with a catchy headline, description, action buttons, benefits list, and a creative grid of images and data visualization with a video popup feature.
Hero
hero107
A component with a dual-column layout, featuring an attention-grabbing headline, a decorative button with unique animation, and a side image embellished with a "Hire Me" call-to-action button.
Hero
hero108
A component featuring a large title about earning from real estate, a list of benefits with check icons, and a 'Start Now' button. Includes an image section on the right.
Hero
hero11
A hero component with a center-aligned title, description, and button above a full-width image placeholder. Features a logo and uses a single-column layout.
Hero
hero111
A component showcases an email form, heading, description, features like "No Credit Card Required," 3 placeholder images with different aspect ratios, and a grid of fictional company logos.
Hero
hero112
A component showcases tutorials with a video dialog, user join counter, course stats, and membership CTA. It uses a two-column layout with icons and avatars.
Hero
hero115
A component featuring a centered section with an icon, heading, description, button with an icon, optional trust text, and a large image. Includes a decorative, layered circular backdrop.
Hero
hero116
A content block with a video pop-up feature, including a headline, subtext, and two action buttons, enriched with interactive image placements.
Hero
hero12
A promotional component with a unique radial gradient background, a centered layout featuring a logo, a bold title with styled text, body text, two call-to-action buttons, and a showcase area for technology logos with hover effects.
Hero
hero123
A component with a 2-column layout: text with a button on one side and an image within an aspect ratio container on the other. Features a muted background.
Hero
hero125
Component features a 2-column layout with a focus on returns management. Includes icons, a big title, a paragraph, and a button. The right column showcases an image with exchange options.
Hero
hero127
A component displaying a marketing degree promotion, featuring an interactive news badge, a bold title with highlighted keywords, two call-to-action buttons, and a section with user testimonials through avatars and stats on active users and episodes.
Hero
hero129
This component features a two-column layout with a bold headline, text content, buttons including one with an icon, overlapping avatars, and a unique phone image showcase with a 3D effect.
Hero
hero13
A component featuring a badge with an icon, a large headline, a supporting text paragraph, and two buttons—one solid, one outlined with an icon.
Hero
hero134
Marketing component with a video popup, call-to-action buttons, and brand logos. Features a headline, description, and image.
Hero
hero135
A component with a section for customer stories and a video. It has a 2-column layout with text-badges, headlines, paragraphs, and a play button overlaying a looped video. A dialog for fullscreen video playback is included.
Hero
hero136
A component showcasing a large header, descriptive text, two buttons, logos of trusted companies, and a uniquely styled image display with an asymmetrical background design.
Hero
hero14
A carousel component showing tech logos with commands. Includes auto-cycle, fade transitions, and manual selection. Displays 3-6 items per view.
Hero
hero141
A component with a video background, featuring a central column for text, a call-to-action button, and a 5-star rating.
Hero
hero143
This component features a centered column layout with a headline, a descriptive text, two button options for downloading or joining a waitlist, version information, and system requirements. It also includes a decorative, animated download button and a background video.
Hero
hero144
A component featuring a 2-row layout of app icons (5 on the top, 4 on the bottom) and a centered title with a description beneath. Each app icon is styled with a unique visual effect.
Hero
hero145
This component displays a full-width background with a dynamic, animated heading that changes text over time and includes a description with buttons for user actions.
Hero
hero146
A component featuring an attention-grabbing headline and brief description with a gradient "Get Started" button, followed by a teaser section for a video presentation. The video section includes a unique hover effect on the play button and a modal dialog for playback.
Hero
hero149
A component featuring a headline, description, buttons for a demo and video, benefits list, and a large image with unique background patterns. Includes a video dialog.
Hero
hero15
A component featuring a central slogan, description, singular primary action, and icons displaying ratings from various platforms.
Hero
hero151
A component featuring a title, description, large button, overlapping avatars with quotes, and a 2x2 grid of images incorporating unique aspect ratios and placements.
Hero
hero152
This component features a centered column with a trusted badge, a bold heading, a descriptive paragraph, and two buttons. It also includes an angled 3-image composition.
Hero
hero157
A hero component with a full-width background, features a tagline, a large heading, a descriptive text, and a button leading to projects. Utilizes overlay for text prominence.
Hero
hero158
A component with a two-column layout featuring a bold headline, paragraph, animated button, and a grid of 3 images with varying sizes and rounded corners.
Hero
hero159
A 2-column component with an emphasis on financial services. Features a bold headline, descriptive text, interactive button with hover effect, and complementary images.
Hero
hero16
A component featuring a central column with a bold heading, a text block, and two buttons, above an image with a gradient mask.
Hero
hero160
This component displays an overlay text and buttons on an image backdrop with an aspect-ratio image below. Features a badge with an award, a gradient headline, a subtext, and action buttons. Also includes a small text with icons.
Hero
hero162
A component featuring a 2-column layout with a prominent headline, subtext, and button on one side, and a grid of images and testimonials on the other.
Hero
hero163
A component featuring a title, subtitle, and a 2-4 column grid of images and a testimonial, with images in rounded containers.
Hero
hero164
A component showcasing a dual-column layout with a pitch and a playable video teaser. The left column has text and sign-up, while the right shows an image. Features a popup for video.
Hero
hero165
A two-column layout with dynamic image composition on one side and compelling headings on the other, featuring customized aspect ratios and image placements.
Hero
hero166
A 2-column layout block with animated images on one side and text elements, including a headline, paragraph, and button on the other.
Hero
hero167
A dual-column component with text and buttons in one and dynamic images in the other, featuring outlined buttons that change on hover, and images within aspect ratios.
Hero
hero168
This component displays a hero section with a headline, introductory text, and a 'Get Started' button. It features an arrangement of images on one side, within a layout that spans across columns.
Hero
hero170
A component featuring a headline, a subtext, buttons for app download and GitHub star, integration options with icons, and a video preview with decorative dots.
Hero
hero171
This component displays a hero section with two main blocks: content with text, buttons, avatars, and stats on the left, and a grid layout with vector graphics and images on the right. It includes a modal video dialog.
Hero
hero172
A two-column component with a heading, text, email submission form, and unique visual elements. The left column showcases the title, descriptive text, a form for email input with a "Get Started" button, and bullet points with checks. The right column features creative, overlapping images with dynamic shapes and icons for visual interest.
Hero
hero173
A component displaying text, images in overlapped layout with buttons for action & video modal. Uses 2-column grid, with a dynamic video pop-up.
Hero
hero174
A hero block showcasing a central message with a background image, featuring a title, a descriptive paragraph, and a button. Below is a bar with location details and an arrow button.
Hero
hero175
A block featuring a promo link, a bold title with a highlight, a descriptive paragraph, and buttons for action and demo with icons. Includes a semi-transparent overlay.
Hero
hero177
A component featuring an app rating badge, a bold headline, descriptive text, list of benefits, call-to-action buttons, and two images in distinct aspect ratios.
Hero
hero178
A two-column block with text elements & layered images, featuring dynamic text sizes and aspect-ratio controlled images.
Hero
hero179
A component with a 2-column layout. The left column contains text layers, and the right has overlapping images with unique aspect ratios.
Hero
hero18
A component with a centered title, text, two buttons, and a main image, flanked by decorative icons in a symmetric layout.
Hero
hero180
A component with a title, description, two buttons, and a complex image layout with overlay effects and gradient backgrounds.
Hero
hero183
A component featuring a premium badge, a bold title with descriptive text, buttons for actions, and a grid of images with decorative lines transitioning into a carousel for smaller views.
Hero
hero185
A component with two columns; one for a headline, subtext, and a large image, the other features two images and descriptive text emphasizing productivity and collaboration.
Hero
hero186
A component with two columns: Main content on left with title, description, and buttons; Features list on right with icons. Includes an image below.
Hero
hero187
A dual-section component with a gradient border. Features text block, 4 distinct features with icons, two buttons, and a carousel with auto-play and slide indication.
Hero187a
hero187a
A component featuring a carousel with auto-play functionality, a section with text content, and a grid layout displaying four features with icons. Includes navigation buttons.
Hero187b
hero187b
A split-layout component with a carousel and descriptive content. Features auto-playing carousel images with indicators and a section highlighting key features with icons.
Hero
hero190
A component with text, a button, and decorative patterns, flanked by bordered sections. It features a prominent heading, subtext, and a styled button with an icon.
Hero
hero192
A hero component featuring a beta badge, a headline, a subtext, two buttons, and a placeholder image. It includes a call-to-action link with an arrow icon.
Hero
hero194
This component features a dual-layout block with a text section and a vertical carousel of images. The text section includes a main heading, a paragraph, and a button with an icon. The image carousel presents team photos that auto-scroll. In larger views, multiple image carousels with slightly rotated images appear side by side.
Hero
hero195
A dynamic component featuring a header with a title, description, and buttons, below which tabs display images with an animated border effect.
Hero
hero196
A component with an email form, announcement badge, headline, descriptive text, and a tabbed interface showcasing features through icons and images.
Hero
hero197
A component featuring a dotted background, a badge with a sparkle icon, a large gradient text headline, a description, and two buttons side by side on smaller screens and stacked on larger screens.
Hero
hero2
A component with a 2-column layout, featuring an image on one side and a mix of badge, headline, paragraph, and buttons on the other. It includes styled buttons and a badge with an icon.
Hero
hero20
A carousel-linked accordion block with a 2-column layout: icons & FAQs on the left, images rotating in sync on the right. Unique features include timed content transition and interactive FAQ accordion.
Hero
hero200
A component showcasing a centered introductory text with a button and a dynamic phone mockup animation, structured in a single-column layout.
Hero
hero201
A component featuring centered titles, description, and buttons over a background with two animated spinning images on opposite ends.
Hero
hero202
A component featuring a 2-column layout with dynamic text and image, highlighting a bold headline with a gradient effect, and interactive buttons including a rotating action on hover.
Hero
hero203
A component showcasing a title, description, sign-up button, and two visual content blocks with hover effects, dates, titles, and a "See All" link.
Hero
hero204
This component displays a hero section with centered text, an email sign-up form, and two animated phone mockups. It includes headings, a paragraph, and input/button for sign-up.
Hero
hero205
This component showcases a hero section with a large headline, professional information, CTA buttons, and an animated card. It utilizes icons and a custom animation for visual appeal.
Hero
hero206
This component features a title, subtitle, avatars with a badge indicating trust from 10k+ users, and a browser mockup to showcase URLs.
Hero
hero21
A component with a headline, description, badges, buttons for actions & demo, and a call-to-action link. Includes an image beneath text content. Uses 2 columns and rounded design elements.
Hero
hero210
A carousel component with animated image display, customizable autoplay, and unique coverflow effect. It features dynamic opacity transitions, includes a headline, subtext, and a button with hover scaling.
Hero
hero211
A component featuring a hero block with a motivational title, a text block, an image carousel with pagination, a "Get Started" button with a unique pop-up text animation, and a marquee of cards at the bottom.
Hero
hero212
Animated image carousel with auto-switching feature & a unique marquee with cards. Includes a central button & decorative elements.
Hero
hero213
An image carousel with auto-transition, text content, and icon links. Features a unique SVG mask and animated image transitions.
Hero
hero214
An animated gallery component cycling through portraits with a main headline. It features auto-changing images, and a masked layout with a "Contact Us" button.
Hero
hero215
A component featuring a large title and paragraph, alongside a 'Contact Us' button and right-aligned image. Unique for its overlaid text and button on a full viewport height background.
Hero
hero216
This component displays a centered message and button with animated meteors and a large globe graphic. Column layout, uses shifting arrow button animation.
Hero
hero218
A component featuring an animated, centralized headline with a supportive tagline above. Includes visually dynamic, particle background and a button with an icon that animates on hover. Uses 3D text animation for emphasis.
Hero
hero219
A dynamic hero block featuring animated text, a particle effect background, and multiple vertical marquees with icons. It includes an engaging headline and a blurred white background overlay.
Hero
hero220
A component displaying fullscreen video-text inside a semi-transparent image background, with animated text scaling effect.
Hero
hero221
A component featuring animated text over a video, with a centered tagline below. Includes a button with an animated arrow icon.
Hero
hero222
A component displaying dynamic text with mouse tracking cursor effects, utilizing animated elements and a center-aligned layout with a background image.
Hero
hero223
A component featuring a centered headline with shadow text effect, background animation, and two action buttons, all within a radial gradient mask.
Hero
hero224
A component with a headline, text, two buttons, and an image cloud. It's a split layout with text on one side and images on the other.
Hero
hero225
A component displaying animated circles populated with tech icons and a central text message, accompanied by a call-to-action button.
Hero
hero226
A carousel component with autoplay functionality, displaying images and text. Includes navigational dots and a "Try it for free" button.
Hero
hero227
A component featuring icons with text, a bold animated headline, a paragraph, dual buttons, and a phone mockup animation.
Hero
hero228
A component showcasing a carousel of testimonials with dynamic rotation effect and custom scrollbar animation. Displays names below images.
Hero
hero229
A component with animated buttons and text over dynamic illustrations, arranged centrally in a full-screen overlay.
Hero
hero230
A marketing component with customizable buttons, a title, a descriptive paragraph, a dual-carousel display for logos and images, and fading edges for carousel overflow.
Hero
hero231
A component with dual content sections: text/buttons on the left and a rotating carousel of images/logos on the right. Includes customizable buttons and dynamic image presentation.
Hero
hero232
A component featuring centered text and buttons within a full-screen background, complemented by animated SVG illustrations on sides.
Hero
hero233
A hero component with a text banner, animated background lines, and buttons, featuring a central title with special text effects and call-to-action buttons.
Hero
hero234
A dynamic gallery component with animated, looping image rows moving in opposite directions, featuring interactive images that scale on hover, gradient edge masks, and a centered promotional message with a button.
Hero234a
hero234a
Animated image gallery with dynamic text overlay and interactive button. Four-column, infinite scroll horizontal flip, ellipse masking for edge softening.
Hero234b
hero234b
A dynamic gallery component with 5 continuously auto-scrolling columns of images, showcasing varying image dimensions. Includes interactive scaling and rotation on hover.
Hero
hero236
A component features a dynamic, interactive 3D cloud of icons and statistics highlighting key metrics. It splits into two main sections: one side lists achievements using icons and numbers, and the other displays a rotating, interactive cloud of technology icons.
Hero
hero237
A component featuring a split layout with a "Why Us?" pitch, key stats, and orbiting tech logos on one side, and dynamic circular orbit animations on the other.
Hero
hero238
A visually engaging component displaying premium benefits with animation. Includes heading, two buttons, and a list with icons. Two-column layout on large screens, single-column on smaller. Unique fading animated note card on the right.
Hero
hero239
A component featuring a marquee with images, centered text, and two buttons. It includes a heading, a subtext, and a unique 3D marquee at the bottom.
Hero
hero24
A marketing block with an image, title, button, and 4 columns highlighting features with icons.
Hero
hero240
A component featuring a 3D marquee of images, an email subscription form, and a section with a custom logo and descriptive text.
Hero
hero241
A component showcasing launch-ready interfaces, featuring a title, descriptive text, two buttons, and metrics on developer trust and time saving, with a gradient background.
Hero
hero242
A split-layout component featuring a text area with a heading, paragraphs, buttons, and a list of features on one side, and a bar chart displaying data on the other.
Hero
hero243
A component featuring a dynamic headline, a descriptive paragraph with a CTA button, and a 3-column summary with icons.
Hero
hero244
A component featuring a two-column layout: one for promotional content including a header, text, and buttons; the other showcases draggable cards with images and titles.
Hero
hero245
A component with a hiring banner, central slogan, supporting text, download buttons, and dynamic background.antal panels fadeIn based on device.
Hero
hero246
Data visualization block featuring a chart with trends over time, surrounded by a title, a summary, interactive buttons, and unique background patterns.
Hero
hero247
The Hero247 component presents a visually appealing introductory block featuring an animated avatar, a headline, and dual call-to-action buttons that emphasize engagement. This component includes customizable button options and variants, with motion effects applied to both text and image elements for dynamic content presentation.
Hero
hero248
A component showcasing a team section with dynamic tooltips over names, a large title, description, and a call-to-action button. Incorporates a 2-column layout with rotating tooltips for team members.
Hero
hero25
A hero block featuring a centered title, subtitle, customizable buttons, and a list highlighting 3 key benefits with icons.
Hero
hero256
The component features a prominent hero block that includes a dynamic heading, a badge, and call-to-action buttons for easy user interaction. It also integrates a features section with interactive cards highlighting key functionalities, each accompanied by icons and descriptions, aiming to streamline workflows and provide insightful analytics.
Hero
hero258
This component serves as a promotional block with an announcement, a prominent heading, descriptive text, a call-to-action button, and also highlights various brand logos and featured cards. It is built using React and styled with Tailwind CSS, incorporating interactive animations to enhance user engagement.
Hero
hero259
This component provides a dynamic and interactive block featuring a company header with logo and navigation links, a content section with a heading and action button, and a footer presenting additional company information. It also incorporates a visually appealing animated background utilizing canvas and dithering effects for enhanced user engagement.
Hero
hero26
A component featuring a promotional message with an introductory badge link, a large headline, a detailed description integrating icons, and two large buttons for actions.
Hero
hero261
A two-column hero with headline, description, and CTAs on the left, and a vertical features list with icons on the right, separated by a dashed line accent.
Hero
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
hero27
A component with a decorative background, a large, interactive 3-column heading, a subheading, descriptive text, and a button. Features hover effects on headings and button.
Hero
hero28
A component featuring a background pattern, centered title, subtitle, and button, with decorative icons.
Hero
hero29
A welcome block with centered text, two call-to-action buttons, a 5-star rating display, and a large image placeholder. Features a detailed background design.
Hero
hero3
A component featuring text, star ratings with avatars, and buttons. It employs a 2-column layout with large image display. Unique elements include overlapped avatars and star ratings.
Hero
hero30
A hero block with 2 columns; left has text and buttons, right features a main image with a mesh background. Unique mesh and layered image presentation.
Hero
hero31
A component featuring a welcome message, a description, two buttons, and dynamic overlapping blocks with varying dimensions. Incorporates a complex background design.
Hero
hero32
A component with a background layer, a left section displaying a heading, description, and button, and a right section with rows of integration icons.
Hero
hero33
A two-column block featuring text, buttons, and pricing info on one side and a full-cover image on the other. Includes a title, introductory text, and styled buttons.
Hero
hero34
A component featuring a 2-column layout, with a text section including a title, paragraph, and buttons on one side, and a full-width image on the other.
Hero
hero35
A 2-column block with a text section including a title, paragraph, and buttons, and a geometric patterned section with unique border details.
Hero
hero36
A component showcasing 3 cards in a row, highlighting features like "Product Design," "Development," and "Marketing," with images, descriptions, and "See more" links. Includes a title, a badge stating "New Release," and a description above the cards.
Hero
hero37
A component featuring a center-aligned text block with a "New Release" announcement, headline, and descriptive text, followed by primary and secondary buttons. Includes a decorative background of spiraled dots and three angled, overlapping blocks beneath.
Hero
hero38
A 2-column component; left has text and buttons, right displays geometric art and shapes.
Hero
hero39
A component with a 2-column layout; one side presents text and a button, the other showcases a stylized, geometric arrangement of elements.
Hero
hero4
A two-column component featuring an image and a text section with avatars, star ratings, and buttons.
Hero
hero40
A component with a decorative background and a two-column layout. The first column features a welcome message and action buttons. The second showcases integration options with icons and descriptions.
Hero
hero45
A component with a badge, heading, image, and three columns of features, each with an icon, title, and description.
Hero
hero47
A component featuring a large heading, subheading, description, two action buttons, and an overlapped image setup. Layout includes a text block and an image side by side.
Hero
hero49
A component featuring a centered title, description, and a button, alongside a mockup of a mobile device displaying an image. It includes a three-column layout with text elements and a graphical representation of an app interface.
Hero
hero5
A component with a dual-column layout featuring a text block and an image. It includes a heading, paragraph, and a button with an icon. Uses a flexible structure for alignment.
Hero
hero50
A component with a call-to-action link, centered title, description text, and two buttons. Features images with overlapping effects.
Hero
hero51
A component featuring a hero section with a catchy headline, subtitle, button, and unique background graphics. It includes multiple angled images for visual depth.
Hero
hero53
A component with a large title, description, an overlapping button for early access, and overlapping avatars indicating community trust.
Hero
hero55
A component featuring a central text block, a navigational link with a badge indicating "7 days ago", and two large buttons. It has a decorative background overlay.
Hero
hero57
A component showcasing AI-powered proposal creation with engaging features, including decorative icons and dashed banners emphasizing speed, security, and professionalism. Center-aligns its title and description within a single column layout, accentuated by a subtle background pattern and a call-to-action button.
Hero
hero58
This component displays a 2-column layout with a large title, subtitle, and button on one side, and an image on the other. It features a unique background pattern behind the image.
Hero
hero59
A full-screen component with a video background, featuring a title, subtitle, and two buttons in a central column layout.
Hero
hero6
A component featuring a central title and text, two action buttons, a split image display with an additional button, and a row of logos underneath.
Hero
hero60
A hero component with a gradient background, featuring a bold title, a descriptive paragraph, and a large call-to-action button with an icon.
Hero
hero64
A testimonial display component with a title, descriptions, a call-to-action button, customer ratings, and profile images in a two-column layout.
Hero
hero67
A component featuring a logo, engaging headline, paragraph, a button with an icon, and overlapping avatars indicating endorsements. It ends with a large, rounded-top image.
Hero
hero68
A component with a promotional message, featuring a central title, a subtitle, buttons for action calls (trial/demo), and a 3-column footer highlighting service benefits with icons.
Hero
hero7
A component featuring a title, description, button, and review section with user avatars and star ratings. It's structured in a central column.
Hero
hero70
A block featuring a header, taglines, a chat CTA, a carousel with images, and a portfolio button.
Hero
hero71
A centered text component with a gradient background featuring a large title, supportive text, two buttons, and an image. Utilizes a two-column layout for buttons and adjustable image width.
Hero
hero74
A component promoting a business OS, featuring a headline, description, sign-up form, and a 6-icon feature grid. Also includes layered images at the bottom.
Hero
hero75
A component showcasing a business service with a catchy headline, description, upgrade button, overlapped avatars indicating user trust, and a side image.
Hero
hero76
A component features a centered layout with a logo, headlining text for a UI library, descriptive subtext, and a download button, above an aspect-ratio constrained image.
Hero
hero78
A component featuring a full-width background image with a dark overlay, includes a title, text, and button centered in a single column layout, and an additional noise effect overlay.
Hero
hero79
A full-screen hero component with a background image, featuring a title, subtitle, decorative image, and a "Read More" button with an arrow icon. Layout has two columns on larger screens.
Hero
hero8
A centered text block with a large title, paragraph, two buttons, and a full-width image below.
Hero
hero80
A two-column block with a gradient background, featuring text, links, buttons, avatars with stars, and images. The left column has promotional content and user ratings; the right displays images.
Hero
hero82
A component with a title, animated download button, and an image with a 1.6:1 aspect ratio.
Hero
hero83
A component featuring a badge with a star icon, a title, a paragraph, two buttons, and a row of three varying-width images below.
Hero
hero84
A component featuring a badge and text block on top, with a layered, overlapping image gallery below, arranged asymmetrically.
Hero
hero85
A block featuring dynamic carousels, badges, and buttons aimed at showcasing solutions and engaging users. It includes a 2-column layout with auto-scroll carousels.
Hero
hero86
This component features a 2-column layout with a text section and an image. The text includes a title, description, and a button. The image section has a unique aspect ratio with a decorative background.
Hero
hero87
A component with a title, text explanation, button, and image; features a 2-column layout with a decorative background in one column.
Hero
hero89
A component with a split layout, 50% width text block and 45% width image block with an aspect ratio. Features a heading, text, button, and decorative arrow SVG.
Hero
hero9
A component featuring a gradient background, badge, headline, paragraph, two buttons, and a shadowed code block next to an image area.
Hero
hero90
A component with a 2-column layout, showcasing text on the left and an interactive avatar feature on the right. The avatars overlay with testimonials.
Hero
hero91
A block with two columns: text (50% width) and a video element. Includes buttons and stylized text layout.
Hero
hero99
A component featuring a title, text, two buttons, and a grid layout with 3 images across 10 columns, using gradient backgrounds and icons.
Hover-card/hover-card-info-
hover-card-hover-card-info-1
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-2
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-3
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-4
A hover-card/hover-card-info- example
Hover-card/hover-card-info-
hover-card-hover-card-info-5
A hover-card/hover-card-info- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-1
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-2
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-3
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-4
A hover-card/hover-card-preview- example
Hover-card/hover-card-preview-
hover-card-hover-card-preview-5
A hover-card/hover-card-preview- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-1
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-2
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-3
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-4
A hover-card/hover-card-profile- example
Hover-card/hover-card-profile-
hover-card-hover-card-profile-5
A hover-card/hover-card-profile- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-1
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-2
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-3
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-4
A hover-card/hover-card-stats- example
Hover-card/hover-card-stats-
hover-card-hover-card-stats-5
A hover-card/hover-card-stats- example
Incentives
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
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
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
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
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
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
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
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/input-group-ai-
input-group-input-group-ai-1
A input-group/input-group-ai- example
Input-group/input-group-ai-
input-group-input-group-ai-2
A input-group/input-group-ai- example
Input-group/input-group-ai-
input-group-input-group-ai-3
A input-group/input-group-ai- example
Input-group/input-group-ai-
input-group-input-group-ai-4
A input-group/input-group-ai- example
Input-group/input-group-buttons-
input-group-input-group-buttons-1
A input-group/input-group-buttons- example
Input-group/input-group-buttons-
input-group-input-group-buttons-2
A input-group/input-group-buttons- example
Input-group/input-group-buttons-
input-group-input-group-buttons-3
A input-group/input-group-buttons- example
Input-group/input-group-buttons-
input-group-input-group-buttons-4
A input-group/input-group-buttons- example
Input-group/input-group-custom-
input-group-input-group-custom-1
A input-group/input-group-custom- example
Input-group/input-group-custom-
input-group-input-group-custom-2
A input-group/input-group-custom- example
Input-group/input-group-custom-
input-group-input-group-custom-3
A input-group/input-group-custom- example
Input-group/input-group-custom-
input-group-input-group-custom-4
A input-group/input-group-custom- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-1
A input-group/input-group-dropdown- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-2
A input-group/input-group-dropdown- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-3
A input-group/input-group-dropdown- example
Input-group/input-group-dropdown-
input-group-input-group-dropdown-4
A input-group/input-group-dropdown- example
Input-group/input-group-icons-
input-group-input-group-icons-1
A input-group/input-group-icons- example
Input-group/input-group-icons-
input-group-input-group-icons-2
A input-group/input-group-icons- example
Input-group/input-group-icons-
input-group-input-group-icons-3
A input-group/input-group-icons- example
Input-group/input-group-icons-
input-group-input-group-icons-4
A input-group/input-group-icons- example
Input-group/input-group-label-
input-group-input-group-label-1
A input-group/input-group-label- example
Input-group/input-group-label-
input-group-input-group-label-2
A input-group/input-group-label- example
Input-group/input-group-label-
input-group-input-group-label-3
A input-group/input-group-label- example
Input-group/input-group-label-
input-group-input-group-label-4
A input-group/input-group-label- example
Input-group/input-group-spinner-
input-group-input-group-spinner-1
A input-group/input-group-spinner- example
Input-group/input-group-spinner-
input-group-input-group-spinner-2
A input-group/input-group-spinner- example
Input-group/input-group-spinner-
input-group-input-group-spinner-3
A input-group/input-group-spinner- example
Input-group/input-group-spinner-
input-group-input-group-spinner-4
A input-group/input-group-spinner- example
Input-group/input-group-text-
input-group-input-group-text-1
A input-group/input-group-text- example
Input-group/input-group-text-
input-group-input-group-text-2
A input-group/input-group-text- example
Input-group/input-group-text-
input-group-input-group-text-3
A input-group/input-group-text- example
Input-group/input-group-text-
input-group-input-group-text-4
A input-group/input-group-text- example
Input-group/input-group-textarea-
input-group-input-group-textarea-1
A input-group/input-group-textarea- example
Input-group/input-group-textarea-
input-group-input-group-textarea-2
A input-group/input-group-textarea- example
Input-group/input-group-textarea-
input-group-input-group-textarea-3
A input-group/input-group-textarea- example
Input-group/input-group-textarea-
input-group-input-group-textarea-4
A input-group/input-group-textarea- example
Input-group/input-group-tooltip-
input-group-input-group-tooltip-1
A input-group/input-group-tooltip- example
Input-group/input-group-tooltip-
input-group-input-group-tooltip-2
A input-group/input-group-tooltip- example
Input-group/input-group-tooltip-
input-group-input-group-tooltip-3
A input-group/input-group-tooltip- example
Input/input-special-
input-input-special-1
A input/input-special- example
Input/input-special-
input-input-special-2
A input/input-special- example
Input/input-special-
input-input-special-3
A input/input-special- example
Input/input-special-
input-input-special-4
A input/input-special- example
Input/input-special-
input-input-special-5
A input/input-special- example
Input/input-standard-
input-input-standard-1
A input/input-standard- example
Input/input-standard-
input-input-standard-2
A input/input-standard- example
Input/input-standard-
input-input-standard-3
A input/input-standard- example
Input/input-standard-
input-input-standard-4
A input/input-standard- example
Input/input-standard-
input-input-standard-5
A input/input-standard- example
Input/input-standard-
input-input-standard-6
A input/input-standard- example
Input/input-standard-
input-input-standard-7
A input/input-standard- example
Input/input-types-
input-input-types-1
A input/input-types- example
Input/input-types-
input-input-types-2
A input/input-types- example
Input/input-types-
input-input-types-3
A input/input-types- example
Input/input-types-
input-input-types-4
A input/input-types- example
Input/input-types-
input-input-types-5
A input/input-types- example
Input/input-types-
input-input-types-6
A input/input-types- example
Input/input-types-
input-input-types-7
A input/input-types- example
Input/input-validation-
input-input-validation-1
A input/input-validation- example
Input/input-validation-
input-input-validation-2
A input/input-validation- example
Input/input-validation-
input-input-validation-3
A input/input-validation- example
Input/input-validation-
input-input-validation-4
A input/input-validation- example
Input/input-validation-
input-input-validation-5
A input/input-validation- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-1
A input-otp/input-otp-behavior- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-2
A input-otp/input-otp-behavior- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-3
A input-otp/input-otp-behavior- example
Input-otp/input-otp-behavior-
input-otp-input-otp-behavior-4
A input-otp/input-otp-behavior- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-1
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-2
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-3
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-4
A input-otp/input-otp-standard- example
Input-otp/input-otp-standard-
input-otp-input-otp-standard-5
A input-otp/input-otp-standard- example
Input-otp/input-otp-states-
input-otp-input-otp-states-1
A input-otp/input-otp-states- example
Input-otp/input-otp-states-
input-otp-input-otp-states-2
A input-otp/input-otp-states- example
Input-otp/input-otp-states-
input-otp-input-otp-states-3
A input-otp/input-otp-states- example
Input-otp/input-otp-states-
input-otp-input-otp-states-4
A input-otp/input-otp-states- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-1
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-2
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-3
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-use-cases-
input-otp-input-otp-use-cases-4
A input-otp/input-otp-use-cases- example
Input-otp/input-otp-variants-
input-otp-input-otp-variants-1
A input-otp/input-otp-variants- example
Input-otp/input-otp-variants-
input-otp-input-otp-variants-2
A input-otp/input-otp-variants- example
Input-otp/input-otp-variants-
input-otp-input-otp-variants-3
A input-otp/input-otp-variants- example
Integration
integration1
A component showcasing a collection of integration options with app icons, titles, and descriptions, arranged in up to two columns.
Integration
integration10
A component showcasing a list of integrations with titles, descriptions, and "Connect" buttons, arranged in a single column with a minimalist design.
Integration
integration11
A tabbed component showcasing categorized integrations with toggles for connection status and details button. Layout scales from 1 to 3 columns.
Integration
integration12
A component features platform integration with a list of 5 permissions. Includes two logo comparisons, title, description, and buttons for actions.
Integration
integration13
A component showcasing a collection of integrations with iconic apps, featuring hover-activated animation for emphasis and links for more details.
Integration
integration2
A component featuring a title, subtitle, a marquee of logos linking to various resources, and a discovery button.
Integration
integration3
A component showcasing a list of integrations with icons, titles, and descriptions arranged in a single column layout.
Integration
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
integration5
A component showcasing integration options with title, description, buttons, and a two-column layout with logos.
Integration
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
integration7
A component showcasing integration with various tools, featuring two column layout, icons, and descriptions. Unique for its customizable gradient placeholders.
Integration
integration8
A component featuring dual-direction marquee rows of logos, highlighted with fade edges.
Integration
integration9
A component displaying available integrations in a 1-4 column grid, featuring icons, titles, and descriptions.
Invite-user
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
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
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
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/item-interactive-
item-item-interactive-1
A item/item-interactive- example
Item/item-interactive-
item-item-interactive-2
A item/item-interactive- example
Item/item-layout-
item-item-layout-1
A item/item-layout- example
Item/item-layout-
item-item-layout-2
A item/item-layout- example
Item/item-layout-
item-item-layout-3
A item/item-layout- example
Item/item-media-
item-item-media-1
A item/item-media- example
Item/item-media-
item-item-media-2
A item/item-media- example
Item/item-media-
item-item-media-3
A item/item-media- example
Item/item-standard-
item-item-standard-1
A item/item-standard- example
Item/item-standard-
item-item-standard-2
A item/item-standard- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-1
A kbd/kbd-arrow-keys- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-2
A kbd/kbd-arrow-keys- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-3
A kbd/kbd-arrow-keys- example
Kbd/kbd-arrow-keys-
kbd-kbd-arrow-keys-4
A kbd/kbd-arrow-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-1
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-2
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-3
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-4
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-5
A kbd/kbd-function-keys- example
Kbd/kbd-function-keys-
kbd-kbd-function-keys-6
A kbd/kbd-function-keys- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-1
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-2
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-3
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-4
A kbd/kbd-platform-specific- example
Kbd/kbd-platform-specific-
kbd-kbd-platform-specific-5
A kbd/kbd-platform-specific- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-1
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-2
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-3
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-4
A kbd/kbd-pressed-state- example
Kbd/kbd-pressed-state-
kbd-kbd-pressed-state-5
A kbd/kbd-pressed-state- example
Kbd/kbd-sequence-
kbd-kbd-sequence-1
A kbd/kbd-sequence- example
Kbd/kbd-sequence-
kbd-kbd-sequence-2
A kbd/kbd-sequence- example
Kbd/kbd-sequence-
kbd-kbd-sequence-3
A kbd/kbd-sequence- example
Kbd/kbd-sequence-
kbd-kbd-sequence-4
A kbd/kbd-sequence- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-1
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-2
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-3
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-4
A kbd/kbd-shortcut- example
Kbd/kbd-shortcut-
kbd-kbd-shortcut-5
A kbd/kbd-shortcut- example
Kbd/kbd-sizes-
kbd-kbd-sizes-1
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-2
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-3
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-4
A kbd/kbd-sizes- example
Kbd/kbd-sizes-
kbd-kbd-sizes-5
A kbd/kbd-sizes- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-1
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-2
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-3
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-4
A kbd/kbd-with-icons- example
Kbd/kbd-with-icons-
kbd-kbd-with-icons-5
A kbd/kbd-with-icons- example
Label/label-standard-
label-label-standard-1
A label/label-standard- example
Label/label-standard-
label-label-standard-2
A label/label-standard- example
Label/label-standard-
label-label-standard-3
A label/label-standard- example
Label/label-standard-
label-label-standard-4
A label/label-standard- example
Label/label-standard-
label-label-standard-5
A label/label-standard- example
Label/label-standard-
label-label-standard-6
A label/label-standard- example
Label/label-standard-
label-label-standard-7
A label/label-standard- example
Label/label-standard-
label-label-standard-8
A label/label-standard- example
Leaderboard
leaderboard1
A ranked list card with progress bars showing relative values for each item.
Leaderboard
leaderboard2
A ranked list card with user avatars, names, subtitles, and values for each position.
Leaderboard
leaderboard3
A ranked list card with trend indicators showing movement direction for each item.
List
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
list2
A component displaying a list of awards with icons, titles, categories, and descriptions. Includes headings and buttons to view details.
List
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
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
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
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
login1
A login block featuring logo, input fields for email and password, a login button, a Google signup button, and a signup link.
Login
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
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
login4
A login form featuring email and password fields, "Remember me" checkbox & Google Login. Includes forgot password & signup links.
Login
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
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
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
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/logo-right-click-download
logo-logo-right-click-download
A logo/logo-right-click-download example
Logo/logo-standard
logo-logo-standard
A logo/logo-standard example
Logo/logo-wordmark
logo-logo-wordmark
A logo/logo-wordmark example
Logos
logos1
A component displaying a title and a row of partner logos with adjustable gaps, featuring grayscale and partial opacity effects.
Logos
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
logos11
A component featuring dual carousels of logos, a central title, and action buttons, styled with patterns and lines.
Logos
logos12
A carousel component displaying logos with auto-scroll functionality, supporting dark mode inversion.
Logos
logos13
A component displays partner logos in a grid with years; features a sticky description column and dynamic image inversion in dark mode.
Logos
logos17
A logo cloud section with two rows of company logos displayed in a static grid on desktop and animated marquee on mobile.
Logos
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
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
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
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
logos7
A component showcasing logos with a headline, organized in a horizontally scrolling ticker, featuring hover effects.
Logos
logos8
A logos showcase component with a title, subtitle, and a grid of logos from various companies, customizable via props.
Logos
logos9
A component showcasing product team endorsements and logos in carousels, with auto-scrolling functionality and dynamic column adjustments.
Menubar/menubar-standard-
menubar-menubar-standard-1
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-10
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-2
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-3
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-4
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-5
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-6
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-7
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-8
A menubar/menubar-standard- example
Menubar/menubar-standard-
menubar-menubar-standard-9
A menubar/menubar-standard- example
Navbar
navbar1
A navigational component with dynamic menus, offering desktop and mobile layouts, incorporating icons and accordion features for sub-menus.
Navbar
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
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
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
navbar17
A navigation component with dynamic indicator for active links and a mobile menu with an animated icon for toggling.
Navbar
navbar18
A navigation bar with logo, collapsible menus, and a login button. Layout adapts for mobile with a popover menu.
Navbar
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
navbar21
A dynamic navigation component with animated menu toggling. Displays a logo, a menu toggle button, expanding to show main links and socials.
Navbar
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
navbar24
A dynamic navbar component featuring an animated dock with interactive icons for navigation linked to different sections.
Navbar
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
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
navbar33
A floating fixed navbar with logo, navigation menu with dropdowns, and login button. Features glassmorphism styling and animated mobile hamburger menu.
Navbar
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
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
navbar6
A navigation component with a logo, desktop and mobile menus, dropdowns for complex items, and auth buttons. Features a toggled mobile menu.
Navbar
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
navbar8
A navigation component with dynamic background change on scroll and a responsive mobile menu, featuring logo, links with hover images, and buttons.
Navbar
navbar9
A navigation bar with logo, link/button list, and mobile menu toggle. On mobile, features an accordion menu for navigation items.
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-1
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-2
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-3
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-4
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-complex-
navigation-menu-navigation-menu-complex-5
A navigation-menu/navigation-menu-complex- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-1
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-2
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-3
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-4
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-features-
navigation-menu-navigation-menu-features-5
A navigation-menu/navigation-menu-features- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-1
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-2
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-3
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-4
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-marketing-
navigation-menu-navigation-menu-marketing-5
A navigation-menu/navigation-menu-marketing- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-1
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-2
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-3
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-4
A navigation-menu/navigation-menu-standard- example
Navigation-menu/navigation-menu-standard-
navigation-menu-navigation-menu-standard-5
A navigation-menu/navigation-menu-standard- example
Offer-modal
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
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
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
onboarding1
A five-step onboarding wizard with profile setup, workspace configuration, account linking, role selection, and team invites featuring animated dashboard preview.
Onboarding
onboarding2
A modal onboarding flow with colorful step backgrounds, profile questions, goal checkboxes, account linking, extension promotion, and trial activation.
Order-history
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
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
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
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
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
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
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
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
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
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
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/pagination-advanced-
pagination-pagination-advanced-1
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-2
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-3
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-4
A pagination/pagination-advanced- example
Pagination/pagination-advanced-
pagination-pagination-advanced-5
A pagination/pagination-advanced- example
Pagination/pagination-basic-
pagination-pagination-basic-1
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-2
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-3
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-4
A pagination/pagination-basic- example
Pagination/pagination-basic-
pagination-pagination-basic-5
A pagination/pagination-basic- example
Pagination/pagination-navigation-
pagination-pagination-navigation-1
A pagination/pagination-navigation- example
Pagination/pagination-navigation-
pagination-pagination-navigation-2
A pagination/pagination-navigation- example
Pagination/pagination-navigation-
pagination-pagination-navigation-3
A pagination/pagination-navigation- example
Pagination/pagination-navigation-
pagination-pagination-navigation-4
A pagination/pagination-navigation- example
Pagination/pagination-sizes-
pagination-pagination-sizes-1
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-2
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-3
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-4
A pagination/pagination-sizes- example
Pagination/pagination-sizes-
pagination-pagination-sizes-5
A pagination/pagination-sizes- example
Payment-methods
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
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
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
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/popover-standard-
popover-popover-standard-1
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-10
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-11
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-12
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-13
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-14
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-15
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-2
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-3
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-4
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-5
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-6
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-7
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-8
A popover/popover-standard- example
Popover/popover-standard-
popover-popover-standard-9
A popover/popover-standard- example
Price/price-basic
price-price-basic
A price/price-basic example
Price/price-on-sale
price-price-on-sale
A price/price-on-sale example
Pricing
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
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
pricing11
A component with pricing plans & feature comparison. It displays billing options, plan details across columns, and uses collapsibles for mobile view.
Pricing
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
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
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
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
pricing16
A pricing component with a toggle for monthly/yearly billing, displaying 3 tiers, discounts for yearly plans, and key features.
Pricing
pricing2
A dual-column pricing component with a toggle for monthly/yearly plans, including plan features and purchase links.
Pricing
pricing20
A pricing component showcasing three plans, with toggled monthly/yearly prices, feature lists, and icons identifying plan types.
Pricing
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
pricing22
A component displaying 3 pricing plans with features, adjustable to annual or monthly billing, highlighting the "Startup" option uniquely.
Pricing
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
pricing24
A pricing component with a toggle for annual billing, displaying 3 plans in columns, featuring highlights and a call-to-action button per plan, with special emphasis on a popular choice via scaling and ring decoration.
Pricing
pricing26
A component displaying 3 marketing plan options, highlighting one. Features badges, descriptions, and a call-to-action button for each plan.
Pricing
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
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
pricing29
A component displaying 3 pricing tiers with features and CTA buttons, highlighted by design variations for the middle tier.
Pricing
pricing3
A pricing block with a yearly billing switch, featuring 3 columns for Basic, Standard, and Premium plans. Includes feature lists and pricing details.
Pricing
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
pricing31
A component displaying 3 pricing plans with features, highlighting the "most popular" choice. Each plan card lists price, benefits, and a CTA button.
Pricing
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
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
pricing34
A pricing component with a toggle for monthly/yearly billing, three plan options, and includes feature lists, using cards.
Pricing
pricing35
A component displays 2 pricing plans with features like custom/standard pricing, toggle for billing frequency, and CTA buttons. Each card offers a descriptive text and chooses between a yearly or quarterly plan.
Pricing
pricing36
Two-column pricing component, showcasing starter and enterprise plans with features, prices, and call-to-action buttons.
Pricing
pricing37
A premium plan showcase block with a title, subtitle, price, and features list followed by a button. Uses iconography for feature representation.
Pricing
pricing38
A marketing package selector with 3 options, highlighting features per plan. Includes alerts and clickable elements for user interaction.
Pricing
pricing4
A component displaying a pricing section with 3 tiers and a customizable payment frequency toggle (Monthly/Yearly). Includes feature lists and call-to-action buttons.
Pricing
pricing40
A component displays service packages in accordions, providing details on pricing and what each offers in a 3-column layout upon expansion.
Pricing
pricing41
A pricing section with three plan cards featuring monthly/yearly toggle, feature lists with check icons, and highlighted recommended plan.
Pricing
pricing42
A detailed pricing comparison table with plan headers and categorized feature rows showing availability across tiers with check marks and values.
Pricing
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
pricing6
A pricing component with a heading, description, price, features list, and a call-to-action button. Features 3 groups of listed perks.
Pricing
pricing7
A component displaying pricing options with a billing cycle toggle (monthly/annually), supporting discount display. Includes a 2-column layout for plan comparisons, featuring dynamic pricing, plan benefits, and "Start a free trial" buttons.
Pricing
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
pricing9
A pricing table component with a plan switcher, tooltips, and feature icons, displaying 3 tiers and key features in a 4-column layout.
Process
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
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
process3
A component showcasing a 5-step process with animated entries, structured layout, and shifting background colors for each step. Unique number positioning.
Process
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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-specs
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
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/progress-basic-
progress-progress-basic-1
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-2
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-3
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-4
A progress/progress-basic- example
Progress/progress-basic-
progress-progress-basic-5
A progress/progress-basic- example
Progress/progress-colored-
progress-progress-colored-1
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-2
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-3
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-4
A progress/progress-colored- example
Progress/progress-colored-
progress-progress-colored-5
A progress/progress-colored- example
Progress/progress-sizes-
progress-progress-sizes-1
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-2
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-3
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-4
A progress/progress-sizes- example
Progress/progress-sizes-
progress-progress-sizes-5
A progress/progress-sizes- example
Progress/progress-with-label-
progress-progress-with-label-1
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-2
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-3
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-4
A progress/progress-with-label- example
Progress/progress-with-label-
progress-progress-with-label-5
A progress/progress-with-label- example
Project
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
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
project12
A component with dynamic text animations, back button, detailed project information, and a large image; layout includes columns with animations for elements.
Project
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
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
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
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
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
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
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
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
project9
A dual-column component featuring a sticky narrative section with animated transitions and a gallery of monochrome images that enlarge on hover.
Projects
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
projects10
A gallery block with a 3-column layout displaying images that enlarge and reveal titles and descriptions on hover.
Projects
projects11
A dynamic image gallery with 1-3 columns featuring animated, hover-zoomed images.
Projects
projects12
An interactive gallery component with a 1-3 column layout, showcasing projects with hover animations and dynamic, motion-enhanced tooltips.
Projects
projects13
A component showcasing 4 projects with details: Title, Description, Launch Date & Image, in a 3-column layout emphasizing project highlights.
Projects
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
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
projects16
A gallery component showcasing nature photos in two columns, with a descriptive heading and a discovery link button.
Projects
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
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
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
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
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
projects5
A gallery block showcasing 6 projects with animations, in 1 or 2 columns depending on screen size, including images and project details.
Projects
projects6
A gallery component with a 2-column layout showcasing 4 project cards that animate on hover and reveal details.
Projects
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
projects8
A component displaying items in a grid with 3 columns, featuring category filters and animations on item change.
Projects
projects9
A component displaying a 1 or 2-column grid of images with hover effects revealing titles and descriptions.
Promo-banner
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
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
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
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
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
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
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/radio-group-advanced-
radio-group-radio-group-advanced-1
A radio-group/radio-group-advanced- example
Radio-group/radio-group-advanced-
radio-group-radio-group-advanced-2
A radio-group/radio-group-advanced- example
Radio-group/radio-group-form-
radio-group-radio-group-form-1
A radio-group/radio-group-form- example
Radio-group/radio-group-form-
radio-group-radio-group-form-2
A radio-group/radio-group-form- example
Radio-group/radio-group-layout-
radio-group-radio-group-layout-1
A radio-group/radio-group-layout- example
Radio-group/radio-group-layout-
radio-group-radio-group-layout-2
A radio-group/radio-group-layout- example
Radio-group/radio-group-layout-
radio-group-radio-group-layout-3
A radio-group/radio-group-layout- example
Radio-group/radio-group-standard-
radio-group-radio-group-standard-1
A radio-group/radio-group-standard- example
Radio-group/radio-group-standard-
radio-group-radio-group-standard-2
A radio-group/radio-group-standard- example
Rate-card
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
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/rating-basic
rating-rating-basic
A rating/rating-basic example
Rating/rating-with-score
rating-rating-with-score
A rating/rating-with-score example
Resource
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
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
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
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
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
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
resources4
A component showcasing recent updates with a title, list items including titles, categories, avatars, dates, and interactive hover effects.
Resources
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
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
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
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
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
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
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
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
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
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
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/scroll-area-advanced-
scroll-area-scroll-area-advanced-1
A scroll-area/scroll-area-advanced- example
Scroll-area/scroll-area-advanced-
scroll-area-scroll-area-advanced-2
A scroll-area/scroll-area-advanced- example
Scroll-area/scroll-area-advanced-
scroll-area-scroll-area-advanced-3
A scroll-area/scroll-area-advanced- example
Scroll-area/scroll-area-layout-
scroll-area-scroll-area-layout-1
A scroll-area/scroll-area-layout- example
Scroll-area/scroll-area-layout-
scroll-area-scroll-area-layout-2
A scroll-area/scroll-area-layout- example
Scroll-area/scroll-area-layout-
scroll-area-scroll-area-layout-3
A scroll-area/scroll-area-layout- example
Scroll-area/scroll-area-standard-
scroll-area-scroll-area-standard-1
A scroll-area/scroll-area-standard- example
Scroll-area/scroll-area-standard-
scroll-area-scroll-area-standard-2
A scroll-area/scroll-area-standard- example
Scrollable-tabslist/scrollable-tabslist-basic
scrollable-tabslist-scrollable-tabslist-basic
A scrollable-tabslist/scrollable-tabslist-basic example
Separator/separator-basic-
separator-separator-basic-1
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-2
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-3
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-4
A separator/separator-basic- example
Separator/separator-basic-
separator-separator-basic-5
A separator/separator-basic- example
Separator/separator-spacing-
separator-separator-spacing-1
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-2
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-3
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-4
A separator/separator-spacing- example
Separator/separator-spacing-
separator-separator-spacing-5
A separator/separator-spacing- example
Separator/separator-styled-
separator-separator-styled-1
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-2
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-3
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-4
A separator/separator-styled- example
Separator/separator-styled-
separator-separator-styled-5
A separator/separator-styled- example
Separator/separator-with-text-
separator-separator-with-text-1
A separator/separator-with-text- example
Separator/separator-with-text-
separator-separator-with-text-2
A separator/separator-with-text- example
Separator/separator-with-text-
separator-separator-with-text-3
A separator/separator-with-text- example
Service
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
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
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
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
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
service6
This component showcases UX/UI design services, expertise, and related offerings in a structured layout including icons and descriptions.
Service
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
services1
A component displaying services in 1-2 columns, each service with a title, description, and list of features marked by check icons.
Services
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
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
services12
A component displaying featured services in a grid layout with a description panel, offering dynamic interaction for each service card.
Services
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
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
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
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
services18
A 3-column component displaying services with a large title, description, and interactive list. Includes progress indicators and "Get Started" CTA.
Services
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
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
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
services3
A component displaying four service categories, each with an icon, title, and list of services in a three-column layout.
Services
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
services5
A 4-column component listing services with icons, titles, descriptions, and bullet points. Features a central 'Services' title and summary.
Services
services6
A component showcasing 4 services with icons, titles, descriptions, and items in a 1-2-4 column layout, featuring hover effects.
Services
services7
This component displays four services, each with an icon, title, description, and list of features, styled with rounded containers.
Services
services8
An interactive component lists services with accordions, including icons, titles, and descriptions. Features 2-column grid for in-depth details.
Services
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
settings-integrations1
A searchable integration gallery with category filter popover, compact integration cards showing logos and categories, and filtered results display.
Settings-integrations
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
settings-integrations3
A responsive grid of integration cards with large logos, descriptions, connected status badges, and hover arrow indicators for available connections.
Settings-integrations3a
settings-integrations3a
A responsive integration settings grid displaying third-party service cards with connection status badges and hover interactions.
Settings-integrations
settings-integrations4
A settings integrations panel with tabbed navigation to browse services by category, featuring connect/disconnect buttons and status badges.
Settings-integrations
settings-integrations5
A compact integration settings panel with toggle switches for quick enable/disable of connected services.
Settings-integrations
settings-integrations6
A table-based integration management view showing service status, sync times, and action buttons for settings and removal.
Settings-integrations
settings-integrations7
A full-page integration browser with search, card-based layout featuring category labels and connect buttons in card footers.
Settings-integrations
settings-integrations8
A two-column integration browser with category sidebar navigation and scrollable list of integration items.
Settings-integrations
settings-integrations9
A management view for active integrations showing connection status, who connected them, and recent activity with dropdown actions.
Settings-members
settings-members1
A team members table with search input, role filter popover, invite dialog, and status badges showing active and pending members.
Settings-members
settings-members2
A vertical member list with avatars, role badges, dropdown actions, search input, and invite dialog with help link in subheading.
Settings-members
settings-members3
A responsive card grid displaying team members with avatars, color-coded role badges, join dates, and dropdown action menus.
Settings-members
settings-members4
A compact member list with checkboxes for bulk selection, role count badges, pending status indicators, and bulk remove action button.
Settings-members
settings-members5
A tabbed interface separating active members from pending invitations, with online status indicators, last active times, and invite expiration tracking.
Settings-notifications
settings-notifications1
A minimal notification settings list with checkboxes for each notification type in a single vertical column.
Settings-notifications
settings-notifications2
A minimal notification settings list with switch toggles for each notification type in a vertical stack.
Settings-notifications
settings-notifications3
A notification settings section with notifications organized into labeled categories, each in a bordered card with switch toggles.
Settings-notifications
settings-notifications4
A notification settings table with Email and SMS checkbox columns for each notification type in a matrix layout.
Settings-profile
settings-profile1
A compact profile settings card with avatar upload, name, username, email, and bio fields.
Settings-profile
settings-profile2
A comprehensive profile settings form with personal info, work details, and social media links organized in sections.
Settings-profile
settings-profile3
A multi-card profile settings layout with cover image upload, avatar, basic info, and regional preferences.
Settings-profile
settings-profile4
A full-page profile editor with sidebar navigation, sectioned content, and sticky save bar.
Settings-profile
settings-profile5
A two-column profile editor with live preview showing how changes appear to others in real-time.
Settings-profile
settings-profile6
A multi-step wizard for profile setup with progress indicator, back/next navigation, and review step.
Settings-profile
settings-profile7
A compact profile card with inline editing - click to edit fields, save on enter or blur.
Shader
shader1
This component renders an animated, customizable shader background using Three.js and React Three Fiber, featuring vertex and fragment shaders with adjustable uniforms. Users can control its appearance by providing their own shaders, uniforms, and a color option.
Shader
shader10
This component creates a dynamic visual block using WebGL shaders for blending and transitioning between background images with lens distortion effects. It leverages React Three Fiber and allows customization of image sources, transition duration, and pause duration to create engaging visual effects in React applications.
Shader
shader2
This component generates a dynamic, animated background using customizable vertex and fragment shaders, allowing for real-time visual effects driven by WebGL and three.js. Its parameters include shaders for fine-tuning graphics, uniform values for interactivity, and styling options to adapt to various layouts.
Shader
shader3
This component provides an interactive 3D shader backdrop that features advanced visual effects influenced by mouse movement, offering dynamic backgrounds for applications. It includes customizable vertex and fragment shaders, with adjustable uniforms to control time, resolution, mouse position, and color for bespoke graphical designs.
Shader
shader4
This component is a customizable shader background that uses WebGL for rendering dynamic visual effects with vertex and fragment shaders. It allows users to specify shader code and uniforms to create animated and interactive graphical backgrounds with Three.js in a React environment.
Shader
shader5
This component generates a dynamic shader-based background using customizable vertex and fragment shaders, allowing for visually engaging effects. It includes uniform variables for time and resolution, enabling smooth animations and responsiveness to changes in canvas size.
Shader
shader6
This component, Shader6, renders an animated background with customizable shaders and colors, using WebGL capabilities via the React Three Fiber library. Users can adjust vertex and fragment shaders, as well as define custom uniform values, to create dynamic and visually engaging effects for display.
Shader
shader7
This component, called Shader7, creates an animated background using WebGL shaders within a React application. It leverages customizable vertex and fragment shaders along with various configurable parameters to generate fluid, dynamic visual effects based on user interactions.
Shader
shader8
This component is designed to render an interactive, visually dynamic shader effect using WebGL through the `@react-three/fiber` library. It features mouse interaction capabilities, allowing the shapes and colors within the shader to change based on user input.
Shader
shader9
This component uses WebGL and a shader to create an animated background with interactive mouse effects, rendering it into a Three.js canvas. Categorized under graphics and animation, it features customizable vertex and fragment shaders with dynamic uniforms for enhanced visual effects.
Sheet/sheet-details-
sheet-sheet-details-1
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-2
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-3
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-4
A sheet/sheet-details- example
Sheet/sheet-details-
sheet-sheet-details-5
A sheet/sheet-details- example
Sheet/sheet-form-
sheet-sheet-form-1
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-2
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-3
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-4
A sheet/sheet-form- example
Sheet/sheet-form-
sheet-sheet-form-5
A sheet/sheet-form- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-1
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-2
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-3
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-4
A sheet/sheet-multi-section- example
Sheet/sheet-multi-section-
sheet-sheet-multi-section-5
A sheet/sheet-multi-section- example
Sheet/sheet-navigation-
sheet-sheet-navigation-1
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-2
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-3
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-4
A sheet/sheet-navigation- example
Sheet/sheet-navigation-
sheet-sheet-navigation-5
A sheet/sheet-navigation- example
Sheet/sheet-settings-
sheet-sheet-settings-1
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-2
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-3
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-4
A sheet/sheet-settings- example
Sheet/sheet-settings-
sheet-sheet-settings-5
A sheet/sheet-settings- example
Sheet/sheet-standard-
sheet-sheet-standard-1
A sheet/sheet-standard- example
Sheet/sheet-standard-
sheet-sheet-standard-2
A sheet/sheet-standard- example
Sheet/sheet-standard-
sheet-sheet-standard-3
A sheet/sheet-standard- example
Sheet/sheet-standard-
sheet-sheet-standard-4
A sheet/sheet-standard- example
Shopping-cart
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
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
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
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
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
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
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
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
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
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
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
sidebar1
A simple sidebar with logo header, labeled navigation groups, footer links, and main content area with breadcrumbs and toggle button.
Sidebar
sidebar10
A sidebar10 component
Sidebar
sidebar11
A sidebar11 component
Sidebar
sidebar12
A sidebar12 component
Sidebar
sidebar13
A sidebar13 component
Sidebar
sidebar14
A sidebar14 component
Sidebar
sidebar15
A sidebar15 component
Sidebar
sidebar16
A sidebar16 component
Sidebar
sidebar17
A sidebar17 component
Sidebar
sidebar18
A sidebar18 component
Sidebar
sidebar19
A sidebar19 component
Sidebar
sidebar2
A sidebar with collapsible navigation groups, nested submenu items with chevron indicators, and expandable project sections.
Sidebar
sidebar20
A sidebar20 component
Sidebar
sidebar21
A sidebar21 component
Sidebar
sidebar3
A sidebar with multiple labeled navigation groups covering overview, projects, team, and workspace sections with footer utilities.
Sidebar
sidebar4
A sidebar with collapsible navigation groups that can expand/collapse entire sections, combining group labels with expandable content.
Sidebar
sidebar5
A sidebar with integrated search input in the header, collapsible navigation groups, and labeled sections for quick filtering.
Sidebar
sidebar6
A sidebar with user profile dropdown in the footer showing avatar, name, email, and account/logout options with collapsible navigation.
Sidebar
sidebar7
A sidebar with workspace/organization switcher dropdown in the header, allowing users to switch between different workspaces or teams.
Sidebar
sidebar8
An inset sidebar variant that appears contained within the page with rounded corners, workspace switcher, user footer, and collapsible groups.
Sidebar
sidebar9
A sidebar9 component
Signup
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
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
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
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
signup4
A signup component featuring a logo, headings, email/password inputs, and social media signup options (Google, Facebook, Apple). Includes a 'login' link.
Signup
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
signup6
A signup component featuring email/password fields, Google signup, and a login redirect. Layout includes a centered form in a 400px column.
Signup
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
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
signup9
A signup component with Google signup option, email input, and a carousel of logos at the bottom.
Skeleton/skeleton-card-
skeleton-skeleton-card-1
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-2
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-3
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-4
A skeleton/skeleton-card- example
Skeleton/skeleton-card-
skeleton-skeleton-card-5
A skeleton/skeleton-card- example
Skeleton/skeleton-content-
skeleton-skeleton-content-1
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-2
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-3
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-4
A skeleton/skeleton-content- example
Skeleton/skeleton-content-
skeleton-skeleton-content-5
A skeleton/skeleton-content- example
Skeleton/skeleton-form-
skeleton-skeleton-form-1
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-2
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-3
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-4
A skeleton/skeleton-form- example
Skeleton/skeleton-form-
skeleton-skeleton-form-5
A skeleton/skeleton-form- example
Skeleton/skeleton-list-
skeleton-skeleton-list-1
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-2
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-3
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-4
A skeleton/skeleton-list- example
Skeleton/skeleton-list-
skeleton-skeleton-list-5
A skeleton/skeleton-list- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-1
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-2
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-3
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-4
A skeleton/skeleton-profile- example
Skeleton/skeleton-profile-
skeleton-skeleton-profile-5
A skeleton/skeleton-profile- example
Skeleton/skeleton-table-
skeleton-skeleton-table-1
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-2
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-3
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-4
A skeleton/skeleton-table- example
Skeleton/skeleton-table-
skeleton-skeleton-table-5
A skeleton/skeleton-table- example
Skills
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
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/slider-interactive-
slider-slider-interactive-1
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-2
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-3
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-4
A slider/slider-interactive- example
Slider/slider-interactive-
slider-slider-interactive-5
A slider/slider-interactive- example
Slider/slider-range-
slider-slider-range-1
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-2
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-3
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-4
A slider/slider-range- example
Slider/slider-range-
slider-slider-range-5
A slider/slider-range- example
Slider/slider-settings-
slider-slider-settings-1
A slider/slider-settings- example
Slider/slider-settings-
slider-slider-settings-2
A slider/slider-settings- example
Slider/slider-settings-
slider-slider-settings-3
A slider/slider-settings- example
Slider/slider-settings-
slider-slider-settings-4
A slider/slider-settings- example
Slider/slider-standard-
slider-slider-standard-1
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-2
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-3
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-4
A slider/slider-standard- example
Slider/slider-standard-
slider-slider-standard-5
A slider/slider-standard- example
Slider/slider-styled-
slider-slider-styled-1
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-2
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-3
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-4
A slider/slider-styled- example
Slider/slider-styled-
slider-slider-styled-5
A slider/slider-styled- example
Slider/slider-vertical-
slider-slider-vertical-1
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-2
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-3
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-4
A slider/slider-vertical- example
Slider/slider-vertical-
slider-slider-vertical-5
A slider/slider-vertical- example
Sonner/sonner-content-
sonner-sonner-content-1
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-2
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-3
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-4
A sonner/sonner-content- example
Sonner/sonner-content-
sonner-sonner-content-5
A sonner/sonner-content- example
Sonner/sonner-interactive-
sonner-sonner-interactive-1
A sonner/sonner-interactive- example
Sonner/sonner-interactive-
sonner-sonner-interactive-2
A sonner/sonner-interactive- example
Sonner/sonner-interactive-
sonner-sonner-interactive-3
A sonner/sonner-interactive- example
Sonner/sonner-interactive-
sonner-sonner-interactive-4
A sonner/sonner-interactive- example
Sonner/sonner-position-
sonner-sonner-position-1
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-2
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-3
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-4
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-5
A sonner/sonner-position- example
Sonner/sonner-position-
sonner-sonner-position-6
A sonner/sonner-position- example
Sonner/sonner-promise-
sonner-sonner-promise-1
A sonner/sonner-promise- example
Sonner/sonner-promise-
sonner-sonner-promise-2
A sonner/sonner-promise- example
Sonner/sonner-promise-
sonner-sonner-promise-3
A sonner/sonner-promise- example
Sonner/sonner-promise-
sonner-sonner-promise-4
A sonner/sonner-promise- example
Sonner/sonner-standard-
sonner-sonner-standard-1
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-2
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-3
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-4
A sonner/sonner-standard- example
Sonner/sonner-standard-
sonner-sonner-standard-5
A sonner/sonner-standard- example
Spinner/spinner-applications-
spinner-spinner-applications-1
A spinner/spinner-applications- example
Spinner/spinner-applications-
spinner-spinner-applications-2
A spinner/spinner-applications- example
Spinner/spinner-applications-
spinner-spinner-applications-3
A spinner/spinner-applications- example
Spinner/spinner-button-
spinner-spinner-button-1
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-2
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-3
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-4
A spinner/spinner-button- example
Spinner/spinner-button-
spinner-spinner-button-5
A spinner/spinner-button- example
Spinner/spinner-inline-
spinner-spinner-inline-1
A spinner/spinner-inline- example
Spinner/spinner-inline-
spinner-spinner-inline-2
A spinner/spinner-inline- example
Spinner/spinner-inline-
spinner-spinner-inline-3
A spinner/spinner-inline- example
Spinner/spinner-inline-
spinner-spinner-inline-4
A spinner/spinner-inline- example
Spinner/spinner-standard-
spinner-spinner-standard-1
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-2
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-3
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-4
A spinner/spinner-standard- example
Spinner/spinner-standard-
spinner-spinner-standard-5
A spinner/spinner-standard- example
Stats-card
stats-card1
A compact metric card displaying a value with trend indicator showing percentage change and direction.
Stats-card
stats-card10
A metric card with a colored left border accent and pill badge showing percentage change.
Stats-card
stats-card2
A metric card with a sparkline area chart showing recent trend data below the main value.
Stats-card
stats-card3
A metric card showing progress toward a goal with a progress bar and target value.
Stats-card
stats-card4
A metric card displaying current and previous period values side by side for easy comparison.
Stats-card
stats-card5
A metric card with a colored icon badge in the header alongside the title and value.
Stats-card
stats-card6
A metric card showing a total value with a breakdown list of contributing segments below.
Stats-card
stats-card7
A metric card with a mini donut chart showing percentage completion alongside the value.
Stats-card
stats-card8
A metric card with a color-coded status indicator showing healthy, warning, or critical states.
Stats-card
stats-card9
A metric card with MRR/ARR toggle to switch between monthly and annual recurring revenue views.
Stats
stats1
A component displaying performance stats in 3 columns, highlighted by large numbers and explanatory texts, centered around platform efficiency gains.
Stats
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
stats11
A statistical block displaying achievements with a unique background gradient, 2-column layout for stats, and decorative circles in the backdrop.
Stats
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
stats13
A component showcasing animated bars comparing values, with tooltips and percentage indicators for enhanced visual analysis. Includes a candy-striped background.
Stats
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
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
stats16
A component displaying statistics with a title, subtitle, a dynamic line chart, and three key metrics.
Stats
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
stats18
A component featuring a central radar chart and a row of stats below, displaying numerical values and descriptions.
Stats
stats19
A component displaying "Milestones" with a 6-column layout; includes a sticky label and lists stats in 2:3 column ratios.
Stats
stats2
A 3-column block displaying platform insights with arrows and icons denoting trends and values, includes descriptive texts.
Stats
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
stats5
A component displays performance metrics in 3 columns, highlighting values with dynamic icons and bold percentage figures.
Stats
stats6
A component displaying platform performance metrics and two buttons. It features a bold title, 4 columns for statistics, and dynamic text sizing.
Stats
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
stats8
A stats display component with a heading, description, and link, followed by a 4-column layout for statistics.
Stats
stats9
This component displays statistics and four feature cards in a 2-column layout, highlighting benefits and key metrics.
Switch/switch-cards-
switch-switch-cards-1
A switch/switch-cards- example
Switch/switch-cards-
switch-switch-cards-2
A switch/switch-cards- example
Switch/switch-cards-
switch-switch-cards-3
A switch/switch-cards- example
Switch/switch-cards-
switch-switch-cards-4
A switch/switch-cards- example
Switch/switch-icons-
switch-switch-icons-1
A switch/switch-icons- example
Switch/switch-icons-
switch-switch-icons-2
A switch/switch-icons- example
Switch/switch-icons-
switch-switch-icons-3
A switch/switch-icons- example
Switch/switch-labeled-
switch-switch-labeled-1
A switch/switch-labeled- example
Switch/switch-labeled-
switch-switch-labeled-2
A switch/switch-labeled- example
Switch/switch-labeled-
switch-switch-labeled-3
A switch/switch-labeled- example
Switch/switch-labeled-
switch-switch-labeled-4
A switch/switch-labeled- example
Switch/switch-square-
switch-switch-square-1
A switch/switch-square- example
Switch/switch-square-
switch-switch-square-2
A switch/switch-square- example
Switch/switch-square-
switch-switch-square-3
A switch/switch-square- example
Switch/switch-square-
switch-switch-square-4
A switch/switch-square- example
Switch/switch-standard-
switch-switch-standard-1
A switch/switch-standard- example
Switch/switch-standard-
switch-switch-standard-2
A switch/switch-standard- example
Switch/switch-standard-
switch-switch-standard-3
A switch/switch-standard- example
Switch/switch-standard-
switch-switch-standard-4
A switch/switch-standard- example
Table/table-advanced-
table-table-advanced-1
A table/table-advanced- example
Table/table-advanced-
table-table-advanced-2
A table/table-advanced- example
Table/table-advanced-
table-table-advanced-3
A table/table-advanced- example
Table/table-advanced-
table-table-advanced-4
A table/table-advanced- example
Table/table-standard-
table-table-standard-1
A table/table-standard- example
Table/table-standard-
table-table-standard-2
A table/table-standard- example
Table/table-standard-
table-table-standard-3
A table/table-standard- example
Table/table-standard-
table-table-standard-4
A table/table-standard- example
Tabs/tabs-advanced-
tabs-tabs-advanced-1
A tabs/tabs-advanced- example
Tabs/tabs-advanced-
tabs-tabs-advanced-2
A tabs/tabs-advanced- example
Tabs/tabs-advanced-
tabs-tabs-advanced-3
A tabs/tabs-advanced- example
Tabs/tabs-content-
tabs-tabs-content-1
A tabs/tabs-content- example
Tabs/tabs-content-
tabs-tabs-content-2
A tabs/tabs-content- example
Tabs/tabs-content-
tabs-tabs-content-3
A tabs/tabs-content- example
Tabs/tabs-layout-
tabs-tabs-layout-1
A tabs/tabs-layout- example
Tabs/tabs-layout-
tabs-tabs-layout-2
A tabs/tabs-layout- example
Tabs/tabs-layout-
tabs-tabs-layout-3
A tabs/tabs-layout- example
Tabs/tabs-standard-
tabs-tabs-standard-1
A tabs/tabs-standard- example
Tabs/tabs-standard-
tabs-tabs-standard-2
A tabs/tabs-standard- example
Team
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
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
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
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
team13
A component featuring a team carousel with animated images/animations for mobile and a grid layout for other devices.
Team
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
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
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
team36
A simple team or investors grid with square photos, names, and roles/companies in a responsive 5-column layout.
Team
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
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
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
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
team8
A carousel component showcasing team members with images, roles, and years of experience. Includes navigation buttons and a separator.
Team
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
testimonial1
A testimonial block displaying client feedback with navigation buttons, responsive carousel for mobile, and a 4-column masonry layout for larger screens.
Testimonial
testimonial10
A testimonial block with a central quote, author's name, role, and avatar in a vertical layout.
Testimonial
testimonial11
A component displaying a testimonial section with a rating block, supporting multiple columns, and dynamic testimonial visibility based on screen size.
Testimonial
testimonial12
A component displaying carousel testimonials in a 3-column layout, featuring image+text on the left and detailed stats on the right.
Testimonial
testimonial13
A component featuring a testimonial with overlapping avatars and a quote, showcased on a single-column layout with centered text.
Testimonial
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
testimonial15
A component with a 2-column layout, showcasing a headline, description, button, company logos, and 4 personalized testimonials with avatars.
Testimonial
testimonial16
A component showcasing user testimonials in a grid with 2 columns, expandable content, and avatars.
Testimonial
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
testimonial18
A testimonial component displaying a 5-star rating, a highlighted quote, and the author's avatar and details.
Testimonial
testimonial19
A carousel showcasing client testimonials with a 5-star rating system, client roles, and avatars. Features auto-scroll and multi-column layout.
Testimonial
testimonial2
This component displays a bold, centered message with overlapping avatars and a large "Get started for free" button underneath.
Testimonial
testimonial20
A two-column testimonial block with dashed borders, featuring quotes, avatars, and names. Decorated with sparkle icons at its corners.
Testimonial
testimonial21
A component showcasing expert testimonials with a header, badges, and a 3-column layout of cards containing logos, quotes, and author info.
Testimonial
testimonial23
A masonry layout component displaying customer testimonials with avatars, feedback, and dates. Includes a title, subtitle, and a "See More" button.
Testimonial
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
testimonial25
Testimonial carousel with navigation buttons, cards displaying quotes, authors, roles, companies, and images.
Testimonial
testimonial26
A testimonial carousel block with dynamic navigation dots and decorative background patterns. Displays quotes, authors, roles, and logos.
Testimonial
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
testimonial28
A carousel component showcasing testimonials with avatars, names, and comments. Each slide has a dashed border with plus icons at the corners.
Testimonial
testimonial29
A testimonial carousel block with auto-rotation, featuring individual avatars, names, roles, and quotes. Layout includes centered items and pagination dots.
Testimonial
testimonial3
A testimonial component with a quote, image logo, and author attribution centered in a bordered block with adjustable padding.
Testimonial
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
testimonial31
A testimonial section with heading, description, CTA button, and a horizontal carousel of photo cards featuring quotes and author info.
Testimonial
testimonial4
A testimonial component with 1 large image & text block plus 3 smaller text cards, each featuring an avatar.
Testimonial
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
testimonial7
A component showcasing two auto-scrolling carousels of client testimonials, with avatars, names, roles, and quotes, plus a section header.
Testimonial
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
testimonial9
A testimonials grid with dynamic columns, showcasing clients' feedback, names, roles, and avatars, along with a headline and subtext.
Textarea/textarea-form-
textarea-textarea-form-1
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-2
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-3
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-4
A textarea/textarea-form- example
Textarea/textarea-form-
textarea-textarea-form-5
A textarea/textarea-form- example
Textarea/textarea-labeled-
textarea-textarea-labeled-1
A textarea/textarea-labeled- example
Textarea/textarea-labeled-
textarea-textarea-labeled-2
A textarea/textarea-labeled- example
Textarea/textarea-labeled-
textarea-textarea-labeled-3
A textarea/textarea-labeled- example
Textarea/textarea-labeled-
textarea-textarea-labeled-4
A textarea/textarea-labeled- example
Textarea/textarea-standard-
textarea-textarea-standard-1
A textarea/textarea-standard- example
Textarea/textarea-standard-
textarea-textarea-standard-2
A textarea/textarea-standard- example
Textarea/textarea-standard-
textarea-textarea-standard-3
A textarea/textarea-standard- example
Textarea/textarea-standard-
textarea-textarea-standard-4
A textarea/textarea-standard- example
Timeline
timeline1
A component presenting a 3-step process: "Data Integration," "Custom Configuration," and "Scale Your Business," each with icons, titles, and descriptions.
Timeline
timeline10
A timeline component with 4 columns, highlighting project phases with dates, titles, and descriptions, using animation to show current progress.
Timeline
timeline11
A 4-column timeline component showcasing phases with icons, dates, titles, and descriptions. Features an animated progress indicator.
Timeline
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
timeline13
A component displaying a product launch timeline with 3 phases, progress bars, and durations. Features an animated timeline indicator.
Timeline
timeline14
A timeline component showcasing key milestones, uses intersection observer for active item highlight, includes sticky year indicator.
Timeline
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
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
timeline4
A component showcasing a step-by-step guide with alternating layout, custom badges, icons, and diagonal patterns.
Timeline
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
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
timeline7
A component with a stepper UI to guide through a process, featuring dynamic progress indication, navigational buttons, and transition animations.
Timeline
timeline8
A vertical timeline block, showcasing events with dates, displayed in a centered max-width container with decorative separators.
Timeline
timeline9
This component displays a vertical timeline of key events in artificial intelligence history, using cards with titles, dates, and content.
Todo
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
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
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
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
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
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
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
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
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
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/toggle-group-sizes-
toggle-group-toggle-group-sizes-1
A toggle-group/toggle-group-sizes- example
Toggle-group/toggle-group-sizes-
toggle-group-toggle-group-sizes-2
A toggle-group/toggle-group-sizes- example
Toggle-group/toggle-group-sizes-
toggle-group-toggle-group-sizes-3
A toggle-group/toggle-group-sizes- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-1
A toggle-group/toggle-group-standard- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-2
A toggle-group/toggle-group-standard- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-3
A toggle-group/toggle-group-standard- example
Toggle-group/toggle-group-standard-
toggle-group-toggle-group-standard-4
A toggle-group/toggle-group-standard- example
Toggle/toggle-sizes-
toggle-toggle-sizes-1
A toggle/toggle-sizes- example
Toggle/toggle-sizes-
toggle-toggle-sizes-2
A toggle/toggle-sizes- example
Toggle/toggle-sizes-
toggle-toggle-sizes-3
A toggle/toggle-sizes- example
Toggle/toggle-standard-
toggle-toggle-standard-1
A toggle/toggle-standard- example
Toggle/toggle-standard-
toggle-toggle-standard-2
A toggle/toggle-standard- example
Toggle/toggle-standard-
toggle-toggle-standard-3
A toggle/toggle-standard- example
Toggle/toggle-standard-
toggle-toggle-standard-4
A toggle/toggle-standard- example
Tooltip/tooltip-content-
tooltip-tooltip-content-1
A tooltip/tooltip-content- example
Tooltip/tooltip-content-
tooltip-tooltip-content-2
A tooltip/tooltip-content- example
Tooltip/tooltip-content-
tooltip-tooltip-content-3
A tooltip/tooltip-content- example
Tooltip/tooltip-content-
tooltip-tooltip-content-4
A tooltip/tooltip-content- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-1
A tooltip/tooltip-standard- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-2
A tooltip/tooltip-standard- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-3
A tooltip/tooltip-standard- example
Tooltip/tooltip-standard-
tooltip-tooltip-standard-4
A tooltip/tooltip-standard- example
Trust-strip
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
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
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
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
user-profile1
A centered profile card with avatar, name, role, bio, and action buttons for messaging and following.
User-profile
user-profile10
A profile card with large portrait image, verification badge, and follow button.
User-profile
user-profile11
A profile card with full-bleed background image and overlay text.
User-profile
user-profile12
A social media style profile card with cover image, avatar, bio, and engagement stats.
User-profile
user-profile13
A freelancer profile card with skills, rating, client count, and hourly rate.
User-profile
user-profile14
A dramatic freelancer card with full-bleed background image and gradient overlay.
User-profile
user-profile2
A horizontal profile layout with avatar, name, role, social links, follower stats, and action buttons.
User-profile
user-profile3
A detailed profile card with cover image, overlapping avatar, bio, location, join date, social links, stats, and skill badges.
User-profile
user-profile4
A small pill-shaped profile chip with avatar, name, role, and status indicator for inline use.
User-profile
user-profile5
A compact team member card with gradient header, overlapping avatar, and contact action buttons.
User-profile
user-profile6
A profile card with tabbed sections for About, Experience, and Projects content.
User-profile
user-profile9
A full-width profile dashboard with cover image, stats cards showing metrics with change indicators.
Waitlist
waitlist1
A component featuring a "Join the Waitlist" title, a description, an email input field, and a button. Includes avatars showing user count.
Waitlist
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
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
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
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