docs/docs/specs/patterns/INDEX.md

Tailwind+ Pattern Library Index

Complete catalogue of Tailwind+ UI patterns for conversion to Flux UI.

Grand Total: 672 variants across 93 pages

---

Application UI (364 variants, 49 pages)

Document	Categories	Variants
APPLICATION_SHELLS.md	Stacked Layouts, Sidebar Layouts, Multi-column Layouts	23
DATA_DISPLAY.md	Description Lists, Stats, Calendars	19
ELEMENTS.md	Avatars, Badges, Dropdowns, Buttons, Button Groups	45
FEEDBACK.md	Alerts, Empty States	12
FORMS.md	Form Layouts, Input Groups, Select Menus, Sign-in, Textareas, Radio Groups, Checkboxes, Toggles, Action Panels, Comboboxes	74
LAYOUT.md	Containers, Cards, List Containers, Media Objects, Dividers	38
NAVIGATION.md	Navbars, Pagination, Tabs, Vertical Navigation, Sidebar Navigation, Breadcrumbs, Progress Bars, Command Palettes	54
OVERLAYS.md	Modal Dialogs, Drawers, Notifications	24
PAGE_EXAMPLES.md	Home Screens, Detail Screens, Settings Screens	6
Lists & Tables	Description Lists, Tables, Grid Lists, Feeds, Stacked Lists	69

---

Marketing (179 variants, 23 pages)

Document	Categories	Variants
MARKETING.md	Heroes, Features, CTAs, Bento Grids, Pricing, Headers, Newsletter, Stats, Testimonials, Blog, Contact, Team, Content, Logo Clouds, FAQs, Footers, Headers, Flyouts, Banners, 404 Pages, Landing Pages, Pricing Pages, About Pages	179

---

Ecommerce (129 variants, 21 pages)

Document	Categories	Variants
ECOMMERCE.md	Product Overviews, Product Lists, Category Previews, Shopping Carts, Category Filters, Quickviews, Product Features, Store Navigation, Promo Sections, Checkout Forms, Reviews, Order Summaries, Order History, Incentives, Storefront Pages, Product Pages, Category Pages, Cart Pages, Checkout Pages, Order Detail Pages, Order History Pages	129

---

Quick Reference by Category

Structural

• Containers (5) - LAYOUT.md
• Application Shells (23) - APPLICATION_SHELLS.md
• Page Examples (6) - PAGE_EXAMPLES.md

Navigation

• Navbars (11) - NAVIGATION.md
• Tabs (9) - NAVIGATION.md
• Sidebar Navigation (5) - NAVIGATION.md
• Vertical Navigation (6) - NAVIGATION.md
• Breadcrumbs (4) - NAVIGATION.md
• Command Palettes (8) - NAVIGATION.md
• Pagination (3) - NAVIGATION.md

Content Display

• Cards (10) - LAYOUT.md
• List Containers (7) - LAYOUT.md
• Media Objects (8) - LAYOUT.md
• Tables - DATA_DISPLAY.md
• Description Lists - DATA_DISPLAY.md
• Stats (various) - DATA_DISPLAY.md, MARKETING.md

Forms & Input

• Input Groups (21) - FORMS.md
• Select Menus (7) - FORMS.md
• Radio Groups (12) - FORMS.md
• Checkboxes (4) - FORMS.md
• Toggles (5) - FORMS.md
• Comboboxes (4) - FORMS.md
• Sign-in Forms (4) - FORMS.md

Interactive Elements

• Buttons (8) - ELEMENTS.md
• Button Groups (5) - ELEMENTS.md
• Dropdowns (5) - ELEMENTS.md
• Avatars (11) - ELEMENTS.md
• Badges (16) - ELEMENTS.md

Overlays

• Modal Dialogs (6) - OVERLAYS.md
• Drawers (12) - OVERLAYS.md
• Notifications (6) - OVERLAYS.md

Feedback

• Alerts (6) - FEEDBACK.md
• Empty States (6) - FEEDBACK.md
• 404 Pages (5) - MARKETING.md

Marketing Sections

• Heroes (12) - MARKETING.md
• Feature Sections (15) - MARKETING.md
• CTAs (11) - MARKETING.md
• Pricing (12) - MARKETING.md
• Testimonials (8) - MARKETING.md
• Blog Sections (7) - MARKETING.md

Ecommerce

• Product Lists (11) - ECOMMERCE.md
• Shopping Carts (6) - ECOMMERCE.md
• Checkout Forms (5) - ECOMMERCE.md
• Product Overviews (5) - ECOMMERCE.md

---

Conversion Priority (Top 20)

Based on frequency of use and foundation importance:

1. Buttons - Primary (ELEMENTS.md)
2. Input with label (FORMS.md)
3. Cards - Basic (LAYOUT.md)
4. Navbars - Simple (NAVIGATION.md)
5. Modal Dialogs - Simple alert (OVERLAYS.md)
6. Alerts - With description (FEEDBACK.md)
7. Tabs - With underline (NAVIGATION.md)
8. Tables - Simple (DATA_DISPLAY.md)
9. Hero - Simple centered (MARKETING.md)
10. Toggle - Simple (FORMS.md)
11. Select - Simple custom (FORMS.md)
12. Badges - Flat (ELEMENTS.md)
13. Notifications - Simple (OVERLAYS.md)
14. Breadcrumbs - Simple (NAVIGATION.md)
15. Product Lists - Simple (ECOMMERCE.md)
16. Pricing - Three tiers (MARKETING.md)
17. Sidebar Navigation - Light (NAVIGATION.md)
18. Empty States - Simple (FEEDBACK.md)
19. Avatar - Circular (ELEMENTS.md)
20. Footer - 4-column simple (MARKETING.md)

---

Source URLs

• Application UI: https://tailwindcss.com/plus/ui-blocks/application-ui/
• Marketing: https://tailwindcss.com/plus/ui-blocks/marketing/
• Ecommerce: https://tailwindcss.com/plus/ui-blocks/ecommerce/