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:

<!-- 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

• 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.

• Replace placeholder content — Swap lorem ipsum, placeholder images, and dummy data with real content.

• Adjust colors — Replace the default color palette (purple, indigo, blue) with your project's brand colors.

• Adjust sizing — Components use specific sizes that may need adjustment for your layout.

• 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

• Start with search — Use search_components with descriptive keywords

• Browse by category — Use list_components to explore what's available in a category

• Check variants — Many component types have 5-10+ variants; review several before picking

• Check dark mode — If the project needs dark mode, fetch the -dark variant too

• Combine variants — Mix elements from different variants for custom designs

• 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