HyperUI

HyperUI provides a collection of high-converting Call-to-Action (CTA) components built with Tailwind CSS. These components are designed for marketing campaigns and include layouts such as:

• Base with content and call to action on the left, image on the right (Dark mode supported)
• Newsletter sign up form with centered content and form (Dark mode supported)
• Base with content and call to action on the left, offset image on the right (Dark mode supported)
• Content and call to action in block color on the left, grid of images on the right (Dark mode supported)

These components are optimized for engagement and conversion in modern, responsive web designs.

HyperUI provides a collection of responsive footer components built with Tailwind CSS. These components are categorized under marketing and are designed to enhance website navigation, SEO, and brand presence.

Available footer patterns include:

• Large layouts: Including options with newsletter forms (requires @tailwindcss/forms plugin).
• Simple layouts: Stacked or single-row designs.
• Call to Action (CTA): Footers featuring gradients or specific CTA sections.
• Split layouts: Separating company info, links, images, or CTAs.
• Branding-focused: Centered branding, slim layouts with branding, or inline logos with copyright.
• Priority layouts: Designs where the newsletter form is the primary focus.

Note: Some components require the @tailwindcss/forms Tailwind CSS plugin to function correctly.

HyperUI provides a collection of responsive grid layouts and grid systems designed for web applications like dashboards, admin panels, and content organization. These components allow for customizable columns and rows to create flexible layouts.

Available Grid Layout Patterns:
- 1x1, 1x2, 2x1
- 1x1x1, 1x1x1x1
- 1x1x2, 2x1x1, 1x2x1
- Sidebar left
- Sidebar right

HyperUI provides a variety of responsive, SEO-friendly Card components built with Tailwind CSS. These components are designed for marketing websites and applications to showcase content such as products, blog posts, user profiles, and podcasts.

Available Card patterns include:

• Profile/Post Cards: Featuring title, author, avatar, excerpt, published date, and reading time.
• Stacked Layouts: Large images with content stacked below.
• Hover Effects: Cards with darkened backgrounds or bordered styles that reveal content on hover.
• E-commerce/Product Cards: Bordered designs including images, prices, content, and details.
• Social/Project Cards: Image and name layouts with social and project links.
• Specialized Formats: Shaped layouts, Podcast posts, and Forum posts.

HyperUI provides a collection of Timeline components designed for visualizing project roadmaps, company histories, event sequences, and progress tracking. These components are built with responsive designs and are categorized under application components.

Available Timeline variations include:

• Vertical: A standard vertical timeline layout.
• Vertical with middle line: A vertical timeline featuring a central line connecting events.
• Horizontal: A horizontal layout for timelines, suitable for wide displays or specific sequence visualizations.

All listed components support dark mode (dark: true).

<!-- Available component variations -->
- Vertical (dark mode supported)
- Vertical with middle line (dark mode supported)
- Horizontal (dark mode supported)

HyperUI is free and open-source.

• Commercial Use: You can use HyperUI components in any project, including commercial applications.
• Attribution: Attribution is not required, though it is appreciated.
• Cost: The collection is completely free with no hidden costs.

HyperUI provides a collection of responsive Divider components designed to separate content sections in web applications. These components come in several styles to suit different UI needs:

• Base: A standard, simple divider.
• Gradient: A divider with a smooth color transition.
• Aligned Dividers: Dividers that can be aligned to the Left or Right, with or without a Gradient effect.

These components are categorized under application components and are intended for layout and separator use cases.

HyperUI provides a collection of Cart components designed for eCommerce and online stores. These components are built with Tailwind CSS and are optimized for responsiveness, accessibility, and mobile usability.

Available Cart component patterns include:

• Popup: A compact cart interface, typically used for quick views.
• Popup with actions: A popup cart that includes interactive elements (requires @tailwindcss/forms plugin).
• Page: A full-page shopping cart layout (requires @tailwindcss/forms plugin).

Note: Components marked as dark: true are designed with dark mode support in mind.

HyperUI provides responsive side menu and navigation components designed specifically for dashboards, admin panels, and web applications. These components facilitate navigation through various application states and layouts.

Available side menu patterns include:

• Logo, links with accordion menu and profile details: A comprehensive navigation sidebar featuring a brand logo, expandable accordion menus for grouped links, and a user profile section. (Dark mode compatible)
• Icon, links with tooltips and logout action: A slim, icon-based sidebar that uses tooltips for label visibility and includes a logout action. (Dark mode compatible)

HyperUI provides a collection of responsive, SEO-optimized Section components designed for marketing websites and web applications. These components are used to build content blocks, feature sections, and landing page segments.

Available section layouts include:

• Content with image, 1/2 grid
• Content with image, 2/3 grid
• Content with image, 3/2 grid
• Content with image, vertical split

HyperUI provides a collection of Feature Grid components designed for marketing websites. These components are built with Tailwind CSS and are intended to display product features, benefits, and service highlights using modern, responsive layouts.

Available patterns include:

• Grid with content: A layout combining grid structures with descriptive text.
• List with content: A list-based approach for highlighting features.
• Simple grid: A clean, minimal grid for quick feature scanning.
• Grid with list items: A grid layout that incorporates bulleted or list-style items within the cells.