# markmead/hyperui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/markmead-hyperui).**

12,137 stars · 502 forks · HTML · MIT

## Links

- GitHub: https://github.com/markmead/hyperui
- Homepage: https://hyperui.dev
- awesome-repositories: https://awesome-repositories.com/repository/markmead-hyperui.md

## Topics

`accessibility` `components` `css` `design-system` `frontend` `html` `tailwind` `tailwindcss` `tailwindui` `templates` `ui`

## Description

HyperUI is a dependency-free collection of responsive HTML layouts and pre-styled components designed for various web domains. It functions as a Tailwind CSS component library where users integrate standalone HTML snippets via a copy-paste distribution model to avoid package installation and framework overhead.

The library features one-click markup copying from a pre-built component gallery. It includes specialized design systems, such as high-contrast neobrutalist styling with heavy borders, and visual tools for generating dark mode color palettes and harmonic typography scales.

The component surface covers navigation elements, user input controls, data display patterns, and interactive overlays. It also provides domain-specific assets for eCommerce storefronts and marketing landing pages, alongside utility interface parts and motion controls for hover effects and transitions.

## Tags

### User Interface & Experience

- [Utility-First Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/utility-first-styling.md) — Employs a utility-first styling approach using atomic CSS classes applied directly in the HTML markup.
- [Application Interface Elements](https://awesome-repositories.com/f/user-interface-experience/application-interface-elements.md) — Ships a wide array of functional markup elements like badges and dropdowns essential for constructing web application interfaces. ([source](https://hyperui.dev))
- [Copy-Paste UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/copy-paste-ui-frameworks.md) — Provides a library of components distributed as source code for direct copying into project codebases.
- [Tailwind Component Collections](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-component-collections.md) — Offers a collection of pre-styled UI elements designed specifically for the Tailwind CSS utility-first paradigm.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements a theming system that maps design tokens to native CSS variables for dynamic styling.
- [Data Display Components](https://awesome-repositories.com/f/user-interface-experience/data-display-components.md) — Provides structured layout patterns including tables, grids, and lists for presenting organized data sets. ([source](https://hyperui.dev/components/application))
- [HTML-Based UI Structures](https://awesome-repositories.com/f/user-interface-experience/html-based-ui-structures.md) — Defines visual components using semantic HTML and CSS layout rules without requiring a JavaScript framework.
- [Marketing Layouts](https://awesome-repositories.com/f/user-interface-experience/marketing-layouts.md) — Offers conversion-focused marketing layouts and components, such as banners and blog cards. ([source](https://hyperui.dev/))
- [Navigation Elements](https://awesome-repositories.com/f/user-interface-experience/navigation-elements.md) — Provides a set of navigation primitives including side menus, tabs, and pagination. ([source](https://hyperui.dev/components/application))
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Ships fluid layout systems that adapt across screen sizes using grid-based structures.
- [Adaptive UI Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-adapters/adaptive-ui-layouts.md) — Provides responsive container systems and fluid page layouts that adapt to various screen sizes. ([source](https://hyperui.dev/blog))
- [User Input Controls](https://awesome-repositories.com/f/user-interface-experience/user-input-controls.md) — Provides a comprehensive set of input controls including text fields, radio groups, and range sliders. ([source](https://hyperui.dev/components/application))
- [User Interface Design](https://awesome-repositories.com/f/user-interface-experience/user-interface-design.md) — Provides a set of on-screen display components including modals and dropdowns for building complex software interfaces.
- [Button Groups](https://awesome-repositories.com/f/user-interface-experience/buttons/button-groups.md) — Offers pre-styled markup for grouping related buttons into cohesive functional toolbars. ([source](https://hyperui.dev/components/application/button-groups))
- [Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration/animation-utilities.md) — Provides utility-first CSS classes specifically designed for adding motion and transitions to web elements.
- [CSS Hover Effect Libraries](https://awesome-repositories.com/f/user-interface-experience/css-hover-effect-libraries.md) — Implements a library of CSS hover effects, including highlights and fading transitions. ([source](https://hyperui.dev/blog))
- [Accordion Panels](https://awesome-repositories.com/f/user-interface-experience/data-display-components/accordion-panels.md) — Implements collapsible accordion panels to organize content hierarchically and manage screen space. ([source](https://hyperui.dev/components/application/accordions))
- [Style Consistency Generators](https://awesome-repositories.com/f/user-interface-experience/design-generators/visual-direction-generators/style-consistency-generators.md) — Ships a visual style generator to create dark mode versions and map typography scales in the browser. ([source](https://hyperui.dev))
- [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Includes styled checkbox input components with labels for use in forms and settings. ([source](https://hyperui.dev/components/application/checkboxes))
- [Interactive UI Overlays](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-overlays.md) — Provides interactive overlays such as modals and dropdowns for revealing content based on user interaction. ([source](https://hyperui.dev/components/application))
- [Landing Page Templates](https://awesome-repositories.com/f/user-interface-experience/landing-page-templates.md) — Provides pre-structured layouts and conversion-focused patterns for high-performance landing pages.
- [Breadcrumbs](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumbs.md) — Provides responsive breadcrumb navigation trails to indicate user location within a site hierarchy. ([source](https://hyperui.dev/components/application/breadcrumbs))
- [Dark Mode Palette Generators](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/dark-mode-strategies/dark-mode-palette-generators.md) — Includes a browser-based tool to convert color palettes into high-contrast dark mode variants. ([source](https://hyperui.dev))
- [Status Indicators](https://awesome-repositories.com/f/user-interface-experience/status-indicators.md) — Implements loaders, progress bars, and toasts to communicate application state and system feedback. ([source](https://hyperui.dev/components/application))
- [Typography Scaling](https://awesome-repositories.com/f/user-interface-experience/typography-scaling.md) — Provides a tool to compute consistent typographic scales from a base font size using harmonic ratios. ([source](https://hyperui.dev))
- [Badge Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/badge-indicators.md) — Ships compact status badges with semantic colors to indicate categories or states. ([source](https://hyperui.dev/components/application/badges))
- [UI Motion Controls](https://awesome-repositories.com/f/user-interface-experience/ui-motion-controls.md) — Enables refined motion sequences through the application of duration, delay, and easing controls. ([source](https://hyperui.dev/blog))
- [Utility UI Components](https://awesome-repositories.com/f/user-interface-experience/utility-ui-components.md) — Includes utility parts such as dividers, skip links, and file uploaders to enhance accessibility. ([source](https://hyperui.dev/components/application))

### Web Development

- [UI Component Libraries](https://awesome-repositories.com/f/web-development/ui-component-libraries.md) — Provides a comprehensive collection of pre-built, reusable HTML and Tailwind CSS interface elements for rapid web development. ([source](https://hyperui.dev/))
- [eCommerce Interface Components](https://awesome-repositories.com/f/web-development/ecommerce-interface-components.md) — Provides specialized markup for digital storefronts, including product cards and shopping cart interfaces. ([source](https://hyperui.dev))
- [Responsive Layout Systems](https://awesome-repositories.com/f/web-development/responsive-layout-systems.md) — Implements adaptive web layout systems that adjust fluidly to various screen sizes.
- [Neobrutalist Component Collections](https://awesome-repositories.com/f/web-development/ui-component-libraries/neobrutalist-component-collections.md) — Provides a collection of UI components styled with a high-contrast neobrutalist aesthetic.

### Part of an Awesome List

- [Animated Borders](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-effects/predefined-animation-effects/animated-borders.md) — Offers utility classes to create decorative animated gradient borders for UI elements. ([source](https://hyperui.dev/blog))
- [Ecommerce](https://awesome-repositories.com/f/awesome-lists/media/ecommerce.md) — Offers specialized frameworks and components for building online retail storefronts and shopping carts.
- [Marketing and eCommerce UI Components](https://awesome-repositories.com/f/awesome-lists/media/marketing-and-ecommerce-ui-components.md) — Provides a library of promotional banners, shopping carts, and conversion elements for online stores.