hyperui

HyperUI Components

1. Overview

HyperUI is a free collection of 481 copy-paste HTML components built with Tailwind CSS. Components are pure HTML — no JavaScript framework required. Three categories: application UI, marketing pages, and neobrutalism style.

All components are available through the frontend-components MCP server under the hyperui framework.

2. MCP Workflow

2.1 Discovering Components

# See all categories and component counts
list_frameworks → hyperui entry shows categories

Browse a category

list_components(framework: "hyperui", category: "application") list_components(framework: "hyperui", category: "marketing") list_components(framework: "hyperui", category: "neobrutalism")

### 2.2 Searching Components

Search by keyword across all HyperUI components

search_components(query: "badge", framework: "hyperui") search_components(query: "modal dark", framework: "hyperui") search_components(query: "pricing", framework: "hyperui")

### 2.3 Fetching Component Code

By structured path

get_component(framework: "hyperui", category: "application", component_type: "badges", variant: "1")

Dark variant

get_component(framework: "hyperui", category: "application", component_type: "badges", variant: "1-dark")

By path from search results

get_component_by_path(path: "hyperui/application/badges/1.html")

## 3. Category Structure

### 3.1 Application UI (`application/`)

Components for building application interfaces:

| Type | Purpose |
|------|---------|
| accordions | Expandable content sections |
| badges | Status indicators, labels, tags |
| breadcrumbs | Navigation breadcrumb trails |
| button-groups | Grouped action buttons |
| checkboxes | Styled checkbox inputs |
| details-list | Key-value detail displays |
| dividers | Content section separators |
| dropdown | Dropdown menus and selects |
| empty-states | Empty/placeholder states |
| file-uploaders | File upload interfaces |
| filters | Filter bars and controls |
| grids | Grid layout patterns |
| inputs | Text input fields |
| loaders | Loading spinners and skeletons |
| media | Image and media containers |
| modals | Dialog/modal overlays |
| pagination | Page navigation controls |
| progress-bars | Progress indicators |
| quantity-inputs | Number increment/decrement |
| radio-groups | Radio button groups |
| selects | Custom select dropdowns |
| side-menu | Sidebar navigation menus |
| stats | Statistic display cards |
| steps | Step/wizard indicators |
| switches | Toggle switches |
| tables | Data tables |
| tabs | Tab navigation |
| tags | Tag/chip elements |
| textareas | Multi-line text inputs |
| toggles | Toggle buttons |
| tooltips | Hover tooltip elements |
| vertical-menu | Vertical navigation menus |

### 3.2 Marketing Pages (`marketing/`)

Components for landing pages and marketing sites:

| Type | Purpose |
|------|---------|
| alerts | Banner alerts and notices |
| announcements | Announcement bars |
| banners | Hero and promotional banners |
| blog-cards | Blog post card layouts |
| cards | Marketing content cards |
| ctas | Call-to-action sections |
| error-pages | 404 and error page layouts |
| faqs | FAQ accordion sections |
| footers | Page footer layouts |
| forms | Contact/signup forms |
| headers | Page header sections |
| pricing | Pricing table components |
| product-cards | Product showcase cards |
| product-collections | Product grid collections |
| sections | Content section layouts |
| showcases | Feature showcase sections |
| stats | Marketing statistics displays |
| testimonials | Testimonial/review cards |

### 3.3 Neobrutalism (`neobrutalism/`)

Bold, retro-styled components with thick borders and shadow offsets:

| Type | Purpose |
|------|---------|
| Various | Neobrutalism-styled versions of common UI patterns |

## 4. Dark Mode Variants

Most HyperUI components have a dark variant file alongside the light version:
- `1.html` — light/default version
- `1-dark.html` — dark mode version

### 4.1 Dark Variant Patterns

Dark variants use Tailwind's dark mode classes. When adapting to a project using `class` dark mode strategy:
- The dark variant code works when a parent element has `class="dark"`
- Merge light and dark into one component using `dark:` prefix classes

### 4.2 Merging Light and Dark

When the project needs both modes in one file, combine the classes:

```html
<!-- Light version has: bg-white text-gray-900 -->
<!-- Dark version has: bg-gray-900 text-white -->
<!-- Combined: -->
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">

Fetch both variants to see the exact class differences, then merge.

5. Adapting Components

5.1 General Adaptation Rules

1. Strip wrapper classes — The HTML body wrapper uses flex flex-wrap justify-center gap-4 p-6 for preview layout. Remove these and use your own container.
2. Replace placeholder content — Swap lorem ipsum, placeholder images, and dummy data with real content.
3. Adjust colors — Replace the default color palette (purple, indigo, blue) with your project's brand colors.
4. Adjust sizing — Components use specific sizes that may need adjustment for your layout.
5. Add interactivity — Components are static HTML. Add JavaScript behavior (click handlers, state management) as needed.

5.2 Common Modifications

Task	Approach
Change colors	Find-replace color names (e.g., purple-600 → blue-600)
Make responsive	Components include responsive classes but verify breakpoint behavior
Add hover states	Most components include hover: variants; add where missing
Customize spacing	Adjust p-, m-, gap- values to match your design system
Integrate with framework	Wrap in React/Vue components, replace static elements with dynamic data

5.3 Form Components

Many application UI form components require the @tailwindcss/forms plugin:

npm install @tailwindcss/forms

// tailwind.config.js (v3)
plugins: [require('@tailwindcss/forms')]

// v4 CSS — automatic if using the plugin
@import "tailwindcss";
@plugin "@tailwindcss/forms";

Components needing this plugin: inputs, selects, checkboxes, radio-groups, textareas, switches, toggles, file-uploaders.

6. Integration Patterns

6.1 With React

function Badge({ children, color = "purple" }) {
  // Fetch hyperui/application/badges/1 as base
  return (
    <span className={`rounded-full bg-${color}-100 px-2.5 py-0.5 text-sm text-${color}-700`}>
      {children}
    </span>
  );
}

6.2 With Vue

<template>
  <!-- Adapted from hyperui/application/badges/1 -->
  <span :class="`rounded-full bg-${color}-100 px-2.5 py-0.5 text-sm text-${color}-700`">
    <slot />
  </span>
</template>

<script setup>
defineProps({ color: { type: String, default: 'purple' } })
</script>

6.3 With Alpine.js

HyperUI components pair well with Alpine.js for interactivity:

<!-- Dropdown from hyperui/application/dropdown with Alpine.js toggle -->
<div x-data="{ open: false }">
  <button @click="open = !open">Menu</button>
  <div x-show="open" @click.away="open = false">
    <!-- dropdown content from component -->
  </div>
</div>

7. Component Selection Strategy

1. Start with search — Use search_components with descriptive keywords
2. Browse by category — Use list_components to explore what's available in a category
3. Check variants — Many component types have 5-10+ variants; review several before picking
4. Check dark mode — If the project needs dark mode, fetch the -dark variant too
5. Combine variants — Mix elements from different variants for custom designs
6. Prefer simpler variants — Start with variant 1 (simplest) and add complexity as needed

8. Workflow Summary

Step	Action
1. Identify need	Determine what UI component is needed
2. Search	search_components(query: "keyword", framework: "hyperui")
3. Browse	list_components(framework: "hyperui", category: "application")
4. Fetch	get_component(framework: "hyperui", ...)
5. Fetch dark	Get the -dark variant if needed
6. Adapt	Strip wrapper, replace content, adjust colors
7. Integrate	Wrap in framework component, add interactivity