# Hyva UI Components Catalog This catalog is auto-generated by scanning the installed `vendor/hyva-themes/hyva-ui` package. To refresh after updating hyva-ui, run: `scripts/refresh_catalog.sh` ## Non-CMS Components (Template-Based) These components require copying template files to the theme directory. ### ajax-atc - **A-simple**: Streamline your shopping experience with our Ajax Add To Cart UI Component. ### banner - **A-default**: The Banner component provides a simple and effective way to display prominent messages to your users. - **B-split**: The Banner component provides a simple and effective way to display prominent messages to your users. - **C-text**: The Banner component provides a simple and effective way to display prominent messages to your users. ### breadcrumbs - **A-simple**: Transform the Hyvä Breadcrumbs into something new with this UI Component, that adds a new look and feel. ### buttons - **A-basic**: This component replaces the standard button styles with a new look and feel. ### category-filter - **A-standard**: This component replaces the Category Layered Navigation (filter) and Swatches for a more stylized version, including a Price Slider without the need for an extension. - **B-elasticsuite**: This component replaces the Hyvä Smile Elasticsuite Layered Navigation (filter) for a more stylized version. ### cookie-notice - **A-full-width**: Transform the Hyvä Cookie Notice into something new with this UI Component, that adds a new look and feel. - **B-overlay**: Transform the Hyvä Cookie Notice into something new with this UI Component, that adds a new look and feel. - **C-simple-elegant**: Transform the Hyvä Cookie Notice into something new with this UI Component, that adds a new look and feel. ### footer - **A-clean**: Transform the Hyvä Footer into something new with this UI Component, that adds a new look and feel. - **B-4-column-newsletter**: Transform the Hyvä Footer into something new with this UI Component, that adds a new look and feel. - **C-mega**: Transform the Hyvä Footer into something new with this UI Component, that adds a new look and feel. ### gallery - **A-basic**: Transform the Hyvä Product Gallery into something new with this UI Component, - **B-fancy**: Transform the Hyvä Product Gallery into something new with this UI Component, - **C-grid**: Transform the Hyvä Product Gallery into something new with this UI Component, - **D-splide**: Transform the Hyvä Product Gallery into something new with this UI Component, ### header - **A-clean**: Transform the Hyvä Header into something new with this UI Component, that adds a new look and feel. - **B-compact**: Transform the Hyvä Header into something new with this UI Component, that adds a new look and feel. - **C-stacked**: Transform the Hyvä Header into something new with this UI Component, that adds a new look and feel. ### loaders - **A-spinner**: Transform the Hyvä loader into something new with this UI Component, that adds a new look and feel. - **B-ping**: Transform the Hyvä loader into something new with this UI Component, that adds a new look and feel. - **C-dancers**: Transform the Hyvä loader into something new with this UI Component, that adds a new look and feel. ### menu - **A-simple-static-links**: This UI component renders menu links using a static array. - **B-4-column-megamenu**: The Desktop Mega Menu B allows you to create a menu layout with top-level dropdown menus, multi-level column menus, and static content block integration. - **C-vertical-dropdown-4-column**: The Desktop Mega Menu C allows you to create a menu layout with top-level dropdown menus, multi-level drilldown menus, and static content block integration. - **D-shop-drowdown**: This is a desktop Mega Menu with a Shop Menu Button and multi layered drilldown menu's inside a menu panel. ### menu-mobile - **A-scroll**: This UI component provides a reimagined implementation of the Hyvä Mobile Menu, - **B-tabs**: This component reimagines the Hyvä Mobile Menu with a visual style inspired by the traditional Magento 2 Luma Menu Tabs. ### minicart - **A-classic**: Transform the Hyvä Mini Cart into something new with this UI Component, that adds a new look and feel and offers qty styles for changing the qty directly from the minicart. - **B-popover**: Transform the Hyvä Mini Cart into something new with this UI Component, that adds a new look and feel and offers qty styles for changing the qty directly from the minicart. ### modal - **A-simple**: This UI Component provides practical examples of implementing modals in Hyvä themes, ### notification - **A-simple**: Transform the Hyvä Message into something new with this UI Component, that adds a new look and feel. - **B-full-width**: Transform the Hyvä Message into something new with this UI Component, that adds a new look and feel. ### pagination - **A-clean**: Transform the Hyvä Pagination into something new with this UI Component, that adds a new look and feel. ### popup - **A-newsletter-image**: This example uses a newsletter template file, added in the footer by xml, to render a popup with the subscription form. - **B-newsletter-title**: This example uses a newsletter template file, added in the footer by xml, to render a popup with the subscription form. ### product-card - **A-card-with-swatches**: Transform the Hyvä product list items into something new with this UI Component, that adds a new look and feel. ### product-data - **A-specs**: Transform the Hyvä product section specs into something new with this UI Component, that adds a new look and feel. - **B-accorditabs**: Transform the Hyvä product section into something new with this UI Component, that adds a new look and feel. ### product-reviews - **A-basic**: Transform the Hyvä Reviews into something new with this UI Component, that adds a new look and feel. - **B-minimal**: Transform the Hyvä Reviews into something new with this UI Component, that adds a new look and feel. ### scroll-to-top - **A-simple**: The Scroll To Top offers a user-friendly solution for navigating to the top of your web page. - **B-action**: The Scroll To Top offers a user-friendly solution for navigating to the top of your web page. ### search-form - **A-header**: This component replaces the standard search form in Hyvä Header and it's UI versions with a new look and feel. ### slider - **A-basic**: Our implementation of a classic Carousel Slider, powered by our new Snap Slider for a super light CSS powered CSS slider. - **B-marquee**: Add a new Hyvä element into your theme to show your brands on your pages. - **C-product**: Our implementation of a Product Slider, powered by our new Snap Slider for a super light CSS powered CSS slider. ### sticky-atc - **A-simple**: Streamline your shopping experience with a user-friendly sticky Add To Cart component. ### swatches - **A-swatches-rounded**: This component replaces the standard product option swatches in Layered Navigation, Product Listings and Product Detail Page with a new look and feel. --- ## CMS Components (Excluded from this skill) These components have `cms-content.phtml` and are designed to be pasted into Magento CMS. They require the Hyvä CMS Tailwind JIT module and are NOT handled by this skill. ### accordion - **A-basic**: Build accessible accordions using HTML and Tailwind CSS. This solution utilizes native browser support in modern browsers and falls back to a standard collapse in older browsers. ### card - **A-default**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. - **B-media**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. ### categories - **A-grid-images**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. - **B-grid-patterns**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. ### error-page - **A-simple**: Enhance your 404 pages with our UI component, designed to simplify the creation of stunning and responsive layouts. - **B-split**: Enhance your 404 pages with our UI component, designed to simplify the creation of stunning and responsive layouts. ### generic-content - **A-text**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. - **B-visual**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. ### order-confirmation - **A-clear**: Enhance your Hyvä Order Success Page with a new UI Component. ### product-data - **C-highlights**: Enhance your Product pages with our UI component, designed to simplify the creation of stunning and responsive layouts. ### shortcuts - **A-simple**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. ### testimonial - **A-simple**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. - **B-card**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. ### usp - **A-icons**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. - **B-cards**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. - **C-compact**: Enhance your pages with our UI component, designed to simplify the creation of stunning and responsive layouts. --- ## Plugins Utility plugins that provide additional functionality for certain components. ### alpine-collapse Port of the AlpineJS Plugin Collapse, please refer to the [AlpineJS Collapse] docs for more information. ### splidejs Build your Sliders powered by SplideJS. ### sticky-header Enhance your Hyvä storefront with a sticky header that remains fixed at the top of the page, even when scrolling. ### tailwind-v3-design-tokens This plugin demonstrates how to integrate Design Tokens into a Hyvä theme. ### tailwind-v4 > ⚠️ **Experimental:** This plugin provides an experimental option for using Tailwind CSS v4 with Hyvä. --- _Generated on: 2026-01-08 20:24:03_ _Hyva UI path: