HyperUI

HyperUI is a free, open-source collection of Tailwind CSS components (MIT) by Mark Mead — 560+ snippets for marketing sites, admin UIs and neobrutalist designs.

There is no package to install: you copy the markup from hyperui.dev into a Tailwind CSS project. This page vendors the full upstream catalog so you can preview it here, copy the HTML, and see the light/dark variants side by side.

Live previews

Each preview runs in a sandboxed iframe with Tailwind compiled only for these snippets, so the utilities never leak into the KatanaKit theme.

Call to actionmarketing Source

Buttonsmarketing Source

Badgesapplication Source

Neobrutalism buttonsneobrutalism Source

Full catalog

Full catalog vendored from upstream 2b5aebb (2026-09-26): 560 snippets across 75 components. Every folder has its own index.html, so the kit is browsable standalone at /hyperui/.

Application — 34 components, 295 snippets

• Accordions (10) — upstream
• Badges (10) — upstream
• Breadcrumbs (10) — upstream
• Button Groups (10) — upstream
• Charts (22) — upstream
• Checkboxes (6) — upstream
• Details List (8) — upstream
• Dividers (12) — upstream
• Dropdown (6) — upstream
• Empty States (10) — upstream
• File Uploaders (4) — upstream
• Filters (4) — upstream
• Grids (10) — upstream
• Inputs (8) — upstream
• Loaders (14) — upstream
• Media (8) — upstream
• Modals (12) — upstream
• Pagination (6) — upstream
• Progress Bars (4) — upstream
• Quantity Inputs (8) — upstream
• Radio Groups (5) — upstream
• Range Inputs (5) — upstream
• Selects (6) — upstream
• Side Menu (4) — upstream
• Skip Links (3) — upstream
• Stats (12) — upstream
• Steps (10) — upstream
• Tables (10) — upstream
• Tabs (10) — upstream
• Textareas (6) — upstream
• Timelines (6) — upstream
• Toasts (12) — upstream
• Toggles (8) — upstream
• Vertical Menu (16) — upstream

Blog — 2 components, 2 snippets

• Animate Duration Delay (1) — upstream
• Remove Number Input Spinners (1) — upstream

Marketing — 23 components, 177 snippets

• Announcements (12) — upstream
• Banners (6) — upstream
• Blog Cards (13) — upstream
• Buttons (10) — upstream
• Cards (9) — upstream
• Carts (6) — upstream
• Contact Forms (10) — upstream
• Ctas (8) — upstream
• Empty Content (10) — upstream
• Faqs (6) — upstream
• Feature Grids (8) — upstream
• Footers (24) — upstream
• Headers (8) — upstream
• Logo Clouds (4) — upstream
• Newsletter Signup (4) — upstream
• Polls (6) — upstream
• Pricing (2) — upstream
• Product Cards (8) — upstream
• Product Collections (4) — upstream
• Sections (4) — upstream
• Stats (6) — upstream
• Team Sections (6) — upstream
• Testimonials (3) — upstream

Neobrutalism — 11 components, 74 snippets

• Accordions (6) — upstream
• Alerts (6) — upstream
• Badges (6) — upstream
• Buttons (10) — upstream
• Cards (8) — upstream
• Checkboxes (6) — upstream
• Inputs (6) — upstream
• Progress Bars (6) — upstream
• Selects (6) — upstream
• Tabs (8) — upstream
• Textareas (6) — upstream

Templates — 5 components, 12 snippets

• Analytics Dashboard (5) — upstream
• Portfolio (2) — upstream
• Saas Landing Page (1) — upstream
• Storefront (2) — upstream
• Support Inbox (2) — upstream

Using HyperUI in your project

# no install — the markup is the package
# 1. pick a component on https://hyperui.dev
# 2. copy the HTML
# 3. paste it into your project (Tailwind CSS v4 required)

Your project needs Tailwind CSS — HyperUI classes (bg-gray-50, dark:…) are plain Tailwind utilities. In KatanaKit's own component kit we use the vendored KatanaKit SCSS framework instead, so HyperUI markup is not drop-in for .* pages.

How this page works

Piece	Where
Vendored snippets	docs/public/hyperui/**/*.html (upstream public/examples, byte-identical)
Tailwind build (v4, ?inline)	docs/.vitepress/theme/hyperui.css
Preview component	HyperUiShowcase.vue (iframe + copy bar)
Per-folder catalog pages	index.html generated in every folder by scripts/sync-hyperui.mjs
Refresh the catalog	node scripts/sync-hyperui.mjs (re-clones upstream main, re-vendors, regenerates catalog)

Adding a preview = drop the upstream HTML under docs/public/hyperui/… and add one <HyperUiShowcase /> — Tailwind picks up new classes through @source.

License

HyperUI is released under the MIT License. Previews link back to the upstream source file.