Tailwind UI Templates

Overview

assets/

When to Use

• Building any common UI component (hero, navbar, form, list, card, modal, etc.)
• Writing HTML/JSX with Tailwind CSS classes
• Need professional-quality, accessible, responsive UI

• Minor styling tweaks to existing code
• Non-UI code (logic, data, APIs)

Template Discovery

1. Search the Index

# Find templates by keyword
grep -i "hero" assets/index.jsonl | jq .

# Browse by category
grep '"category":"marketing"' assets/index.jsonl | jq -r '.subsection' | sort | uniq

# Find specific component type
grep -i "stacked.*list" assets/index.jsonl | jq .

2. Understand the Hierarchy

Category (3): marketing, application-ui, ecommerce
  └─ Section: Page Sections, Elements, Forms, etc.
      └─ Subsection: Hero Sections, Feature Sections, Stacked Lists, etc.
          └─ Component: "Simple centered", "Split with screenshot", etc.

3. Read the Template

assets/code/{version}/{language}/{category}/{subsection}/{slug}.{ext}

Examples:
  assets/code/v4/html/marketing/hero-sections/simple-centered.html
  assets/code/v4/react/application-ui/stacked-lists/with-badges.tsx
  assets/code/v4/vue/ecommerce/product-pages/with-image-grid.vue

Usage Modes

When No Exact Template Exists

Template Qualities to Preserve

• Dark mode:

  dark:

  variants throughout
• Accessibility:

  aria-*

  attributes, semantic HTML, focus states
• Responsive: Mobile-first with

  sm:

  ,

  md:

  ,

  lg:

  breakpoints
• Focus states:

  focus-visible:outline-2 focus-visible:outline-offset-2

• Subtle polish:

  text-pretty

  ,

  shadow-xs

  , gradient masks, decorative SVGs

Red Flags

• "Let me write a quick hero section"
• "I'll just add some Tailwind classes"
• "This is a simple component"
• "I know how to do this"
• "There's no template for this" → Find similar ones and learn patterns!