designkit-ai 1.0.0

package/components/componentmap-web.md

@@ -0,0 +1,206 @@
+# Component Map — web
+
+> 200 HTML components. Auto-generated by `gen-previews.ts`.
+
+| # | Ref | Name | Category | Size | Tags |
+|---|-----|------|----------|------|------|
+| 1 | `web/account/payment-method` | Payment Method — Card | account | 400×72 | payment, card, billing, account, method |
+| 2 | `web/account/profile-card` | Profile Card — User Account | account | 360×180 | profile, user, account, avatar, settings |
+| 3 | `web/account/subscription-card` | Subscription Card — Plan Details | account | 400×200 | subscription, plan, billing, account, pricing |
+| 4 | `web/badges/badge-set` | Badge Set — Status Variants | badges | 400×28 | badge, status, tag, label, pill |
+| 5 | `web/buttons/button-danger` | Danger Button | buttons | 200×40 | button, danger, destructive, delete, error |
+| 6 | `web/buttons/button-ghost` | Ghost Button | buttons | 160×40 | button, ghost, text, minimal, subtle |
+| 7 | `web/buttons/button-group` | Button Group — 3 Joined | buttons | 300×36 | button, group, segmented, toggle |
+| 8 | `web/buttons/button-icon` | Icon Button | buttons | 36×36 | button, icon, circle, round, compact |
+| 9 | `web/buttons/button-primary` | Primary Button | buttons | 320×40 | button, primary, cta, action, icon |
+| 10 | `web/buttons/button-secondary` | Secondary Button | buttons | 200×40 | button, secondary, outline, border |
+| 11 | `web/cards/card-basic` | Card — Basic | cards | 360×160 | card, basic, border, container |
+| 12 | `web/cards/card-feature` | Card — Feature | cards | 320×200 | card, feature, icon, grid, landing |
+| 13 | `web/cards/card-image` | Card — with Image | cards | 360×340 | card, image, article, blog, content |
+| 14 | `web/cards/card-pricing` | Card — Pricing Tier | cards | 320×480 | card, pricing, plan, subscription, features |
+| 15 | `web/cards/card-stat` | Card — Stat / KPI | cards | 280×130 | card, stat, kpi, metric, dashboard, number |
+| 16 | `web/cards/card-testimonial` | Card — Testimonial | cards | 360×240 | card, testimonial, review, quote, social-proof |
+| 17 | `web/cart/cart-page` | Cart Page — Items + Summary | cart | 1200×500 | cart, page, shopping, checkout, ecommerce |
+| 18 | `web/cart/checkout-form` | Checkout Form — Shipping + Payment | cart | 640×600 | checkout, form, shipping, payment, ecommerce |
+| 19 | `web/cart/order-confirmation` | Order Confirmation — Success | cart | 560×440 | order, confirmation, success, receipt, ecommerce |
+| 20 | `web/charts/chart-area` | Area Chart — with Gradient | charts | 560×280 | chart, area, line, trend, data, visualization |
+| 21 | `web/charts/chart-bar` | Bar Chart — Vertical | charts | 560×280 | chart, bar, vertical, data, visualization |
+| 22 | `web/charts/chart-donut` | Donut Chart — with Legend | charts | 320×300 | chart, donut, pie, data, visualization, legend |
+| 23 | `web/content/author-card` | Author Card — Bio | content | 640×100 | author, bio, card, content, blog |
+| 24 | `web/content/blog-card-horizontal` | Blog Card — Horizontal | content | 640×160 | blog, card, article, horizontal, content |
+| 25 | `web/cta/cta-centered` | CTA — Centered | cta | 1440×320 | cta, call-to-action, centered, buttons, conversion |
+| 26 | `web/cta/cta-newsletter` | CTA — Newsletter Signup | cta | 1440×280 | cta, newsletter, email, signup, subscribe, form |
+| 27 | `web/cta/cta-with-image` | CTA — Split with Image | cta | 1440×400 | cta, call-to-action, split, image, two-column |
+| 28 | `web/data-display/accordion` | Accordion | data-display | 500×300 | accordion, expandable, faq, collapse |
+| 29 | `web/data-display/grid-view` | Grid View — Responsive Cards | data-display | 800×400 | grid, view, cards, responsive, gallery |
+| 30 | `web/data-display/list-view` | List View — Rows | data-display | 640×280 | list, view, rows, vertical, items |
+| 31 | `web/data-display/progress-steps` | Progress Steps | data-display | 400×50 | progress, steps, indicator, flow |
+| 32 | `web/data-display/rating-stars` | Rating Stars | data-display | 180×24 | rating, stars, review, score |
+| 33 | `web/data-display/stat-card-compact` | Stat Card — Compact | data-display | 200×80 | stat, metric, kpi, compact |
+| 34 | `web/data-display/stat-card-large` | Stat Card — Large | data-display | 300×160 | stat, metric, kpi, dashboard, card |
+| 35 | `web/data-display/table-selectable` | Data Table — Selectable | data-display | 800×360 | table, data, selectable, checkbox |
+| 36 | `web/data-display/table-sortable` | Data Table — Sortable | data-display | 800×360 | table, data, sortable, list |
+| 37 | `web/data-display/tag-group` | Tag Group | data-display | 360×36 | tag, chip, group, labels, filter |
+| 38 | `web/data-display/timeline-horizontal` | Timeline — Horizontal | data-display | 600×120 | timeline, horizontal, steps, progress |
+| 39 | `web/data-display/timeline-vertical` | Timeline — Vertical | data-display | 400×400 | timeline, vertical, events, history |
+| 40 | `web/data-display/tree-view` | Tree View | data-display | 280×350 | tree, hierarchy, nested, folders |
+| 41 | `web/dividers/divider-text` | Divider — with Text | dividers | 400×20 | divider, separator, or, text |
+| 42 | `web/ecommerce/coupon-input` | Coupon Input | ecommerce | 360×48 | coupon, promo, discount, input, ecommerce |
+| 43 | `web/ecommerce/product-card-grid` | Product Card — Grid | ecommerce | 240×340 | product, card, grid, shop, ecommerce |
+| 44 | `web/ecommerce/product-card-list` | Product Card — List | ecommerce | 500×140 | product, card, list, horizontal, ecommerce |
+| 45 | `web/features/features-alternating` | Features — Alternating Rows | features | 1440×600 | features, alternating, zigzag, image, section, landing |
+| 46 | `web/features/features-bento` | Features — Bento Grid | features | 1440×520 | features, bento, grid, cards, section, landing |
+| 47 | `web/features/features-icon-list` | Features — Icon List | features | 1440×520 | features, list, icons, vertical, section, landing |
+| 48 | `web/feedback/alert-banner` | Alert Banner — Inline | feedback | 600×52 | alert, banner, info, warning, inline, message |
+| 49 | `web/feedback/empty-state-error` | Empty State — Error | feedback | 360×280 | empty, state, error, retry |
+| 50 | `web/feedback/empty-state-no-data` | Empty State — No Data | feedback | 360×280 | empty, state, no data, placeholder |
+| 51 | `web/feedback/empty-state-no-search` | Empty State — No Results | feedback | 360×280 | empty, state, search, no results |
+| 52 | `web/feedback/empty-state` | Empty State — No Data | feedback | 480×320 | empty, state, no-data, placeholder, illustration |
+| 53 | `web/feedback/loading-spinner` | Loading Spinner — Centered | feedback | 200×200 | loading, spinner, progress, wait, feedback |
+| 54 | `web/feedback/progress-bar` | Progress Bar — with Label | feedback | 400×36 | progress, bar, loading, percentage |
+| 55 | `web/feedback/skeleton-card` | Skeleton — Card | feedback | 320×200 | skeleton, loading, placeholder, card |
+| 56 | `web/feedback/skeleton-list` | Skeleton — List | feedback | 360×300 | skeleton, loading, placeholder, list |
+| 57 | `web/feedback/skeleton` | Skeleton Loading | feedback | 360×120 | skeleton, loading, placeholder |
+| 58 | `web/feedback/toast-error` | Toast — Error | feedback | 360×56 | toast, error, notification, alert |
+| 59 | `web/feedback/toast-info` | Toast — Info | feedback | 360×56 | toast, info, notification, alert |
+| 60 | `web/feedback/toast-success` | Toast — Success | feedback | 360×56 | toast, success, notification, alert |
+| 61 | `web/feedback/tooltip` | Tooltip | feedback | 180×36 | tooltip, hint, help, popup |
+| 62 | `web/forms/date-picker` | Date Picker | forms | 320×340 | date, picker, calendar, input |
+| 63 | `web/forms/file-upload` | File Upload Zone | forms | 400×200 | file, upload, drag, drop, input |
+| 64 | `web/forms/form-contact` | Form — Contact | forms | 500×420 | form, contact, message, email |
+| 65 | `web/forms/form-login` | Form — Login | forms | 400×380 | form, login, auth, signin |
+| 66 | `web/forms/form-search-filters` | Form — Search Filters | forms | 280×420 | form, filter, search, sidebar |
+| 67 | `web/forms/form-signup` | Form — Sign Up | forms | 400×480 | form, signup, register, auth |
+| 68 | `web/heroes/hero-gradient` | Hero — Gradient Background | heroes | 1440×560 | hero, gradient, landing, dark, cta |
+| 69 | `web/heroes/hero-image-bg` | Hero — Full Image Background | heroes | 1440×560 | hero, image, background, overlay, landing |
+| 70 | `web/heroes/hero-video` | Hero — with Video Preview | heroes | 1440×640 | hero, video, preview, landing, saas |
+| 71 | `web/inputs/checkbox` | Checkbox — with Label | inputs | 200×24 | checkbox, input, form, toggle |
+| 72 | `web/inputs/date-input` | Date Input — with Calendar Icon | inputs | 240×68 | date, input, calendar, picker, form |
+| 73 | `web/inputs/file-upload` | File Upload Area | inputs | 400×140 | file, upload, drop, area, form |
+| 74 | `web/inputs/radio-group` | Radio Group — Vertical | inputs | 300×140 | radio, group, options, form, select |
+| 75 | `web/inputs/search-command` | Search Input — with Shortcut | inputs | 400×40 | search, input, command, shortcut |
+| 76 | `web/inputs/select` | Select Dropdown | inputs | 360×68 | select, dropdown, form, option |
+| 77 | `web/inputs/tag-input` | Tag Input — Multi Select Chips | inputs | 360×68 | tag, input, multi-select, chips, form |
+| 78 | `web/inputs/text-input` | Text Input — with Label | inputs | 360×68 | input, text, field, form, label |
+| 79 | `web/inputs/textarea` | Textarea — Multi-line | inputs | 360×140 | textarea, input, multiline, form |
+| 80 | `web/inputs/toggle` | Toggle Switch — with Label | inputs | 200×24 | toggle, switch, setting, form |
+| 81 | `web/job/candidate-profile` | Candidate Profile | job | 400×280 | candidate, profile, applicant, hiring |
+| 82 | `web/job/job-listing` | Job Listing Card | job | 600×180 | job, listing, career, hiring |
+| 83 | `web/job/resume-section` | Resume Section | job | 600×200 | resume, cv, experience, job |
+| 84 | `web/job/salary-range` | Salary Range | job | 400×50 | salary, range, compensation, job |
+| 85 | `web/layout/cta-banner` | CTA Banner — Newsletter | layout | 1440×280 | cta, banner, newsletter, subscribe, email |
+| 86 | `web/layout/features-grid` | Features Grid — 3 Column | layout | 1440×480 | features, grid, landing, section, responsive |
+| 87 | `web/layout/hero-centered` | Hero Section — Centered | layout | 1440×560 | hero, landing, centered, cta, headline |
+| 88 | `web/layout/hero-split` | Hero Section — Split (Text + Image) | layout | 1440×560 | hero, landing, split, image, two-column |
+| 89 | `web/layout/pricing-section` | Pricing Section — 3 Tiers | layout | 1440×640 | pricing, plans, section, landing, subscription |
+| 90 | `web/layout/stats-row` | Stats Row — 4 Numbers | layout | 1440×160 | stats, numbers, metrics, social-proof, landing |
+| 91 | `web/logos/logo-grid` | Logo Grid — 4x2 Trusted By | logos | 1440×240 | logo, grid, trusted, brands, partners, social-proof |
+| 92 | `web/logos/logo-ticker` | Logo Ticker — Horizontal Marquee | logos | 1440×120 | logo, ticker, marquee, brands, scroll, social-proof |
+| 93 | `web/marketing/cta-simple` | CTA — Simple | marketing | 1200×200 | cta, call to action, banner, marketing |
+| 94 | `web/marketing/cta-split` | CTA — Split | marketing | 1200×200 | cta, newsletter, email, marketing |
+| 95 | `web/marketing/faq-accordion` | FAQ Accordion | marketing | 800×400 | faq, accordion, questions, answers |
+| 96 | `web/marketing/feature-centered` | Feature — Centered | marketing | 1200×450 | feature, centered, showcase, marketing |
+| 97 | `web/marketing/feature-grid-2col` | Feature Grid — 2 Column | marketing | 1200×500 | features, alternating, marketing |
+| 98 | `web/marketing/feature-grid-3col` | Feature Grid — 3 Column | marketing | 1200×400 | features, grid, columns, marketing |
+| 99 | `web/marketing/footer-complex` | Footer — Complex | marketing | 1200×350 | footer, newsletter, links, columns |
+| 100 | `web/marketing/footer-simple` | Footer — Simple | marketing | 1200×180 | footer, links, copyright, navigation |
+| 101 | `web/marketing/hero-centered` | Hero — Centered | marketing | 1200×550 | hero, centered, landing, marketing |
+| 102 | `web/marketing/hero-split-left` | Hero — Split (Image Left) | marketing | 1200×500 | hero, split, image, landing |
+| 103 | `web/marketing/hero-split-right` | Hero — Split (Image Right) | marketing | 1200×500 | hero, split, image, landing |
+| 104 | `web/marketing/logo-cloud` | Logo Cloud | marketing | 1200×120 | logos, partners, trusted, brands |
+| 105 | `web/marketing/newsletter-signup` | Newsletter Signup | marketing | 600×140 | newsletter, email, signup, subscribe |
+| 106 | `web/marketing/pricing-3tier` | Pricing Table — 3 Tier | marketing | 1200×550 | pricing, plans, tier, marketing |
+| 107 | `web/marketing/pricing-toggle` | Pricing Table — Toggle | marketing | 1200×550 | pricing, toggle, monthly, yearly |
+| 108 | `web/marketing/social-proof-bar` | Social Proof Bar | marketing | 1200×60 | social proof, trust, banner |
+| 109 | `web/marketing/stats-row` | Stats Row | marketing | 1200×120 | stats, numbers, metrics, social proof |
+| 110 | `web/marketing/team-grid` | Team Grid | marketing | 1200×400 | team, grid, people, about |
+| 111 | `web/marketing/testimonial-carousel` | Testimonial — Carousel | marketing | 1200×300 | testimonial, carousel, review, social proof |
+| 112 | `web/marketing/testimonial-grid` | Testimonial — Grid | marketing | 1200×450 | testimonial, grid, reviews, social proof |
+| 113 | `web/media/blog-post-card` | Blog Post Card | media | 360×340 | blog, post, card, article, content |
+| 114 | `web/media/comment-single` | Comment — Single | media | 500×120 | comment, single, review, feedback |
+| 115 | `web/media/image-gallery-grid` | Image Gallery — Grid | media | 500×340 | gallery, grid, images, photos |
+| 116 | `web/media/rich-text-block` | Rich Text Block | media | 600×350 | rich text, content, article, typography |
+| 117 | `web/media/testimonial-quote` | Testimonial — Quote | media | 400×200 | testimonial, quote, review, social proof |
+| 118 | `web/media/video-player` | Video Player | media | 500×300 | video, player, media, embed |
+| 119 | `web/menus/dropdown-menu` | Dropdown Menu | menus | 220×240 | menu, dropdown, popup, context, actions |
+| 120 | `web/metrics/kpi-row` | KPI Row — 4 Metric Cards | metrics | 1200×130 | kpi, metrics, dashboard, stats, saas |
+| 121 | `web/modals/modal-basic` | Modal — Basic Confirm | modals | 480×240 | modal, dialog, confirm, overlay |
+| 122 | `web/modals/modal-form` | Modal — with Form | modals | 480×380 | modal, form, dialog, create, edit |
+| 123 | `web/navbars/breadcrumb` | Breadcrumb Navigation | navbars | 400×32 | breadcrumb, navigation, path, hierarchy |
+| 124 | `web/navbars/footer` | Footer — Multi Column | navbars | 1440×320 | footer, navigation, links, responsive |
+| 125 | `web/navbars/sidebar-dark` | Sidebar Navigation — Dark | navbars | 240×900 | sidebar, navigation, dark, vertical, menu |
+| 126 | `web/navbars/sidebar` | Sidebar Navigation | navbars | 240×900 | sidebar, navigation, vertical, menu, responsive |
+| 127 | `web/navbars/topnav-search` | Top Navigation — with Search | navbars | 1440×64 | navbar, top, search, header, responsive |
+| 128 | `web/navbars/topnav` | Top Navigation Bar | navbars | 1440×64 | navbar, top, header, navigation, responsive |
+| 129 | `web/navigation/mega-menu` | Mega Menu | navigation | 800×350 | mega menu, navigation, dropdown, categories |
+| 130 | `web/navigation/pagination` | Pagination | navigation | 400×40 | pagination, pages, navigation |
+| 131 | `web/navigation/sidebar-collapsed` | Sidebar — Collapsed | navigation | 64×600 | sidebar, navigation, collapsed, icon |
+| 132 | `web/navigation/sidebar-expanded` | Sidebar — Expanded | navigation | 240×600 | sidebar, navigation, expanded, menu |
+| 133 | `web/navigation/stepper-horizontal` | Stepper — Horizontal | navigation | 500×60 | stepper, steps, progress, wizard |
+| 134 | `web/patterns/accordion` | Accordion / FAQ | patterns | 640×240 | accordion, faq, expandable, collapse, section |
+| 135 | `web/patterns/activity-feed` | Activity Feed — Timeline | patterns | 400×300 | activity, feed, timeline, log, history |
+| 136 | `web/patterns/auth-login` | Login Form — with Social | patterns | 400×560 | login, auth, form, social, sign-in |
+| 137 | `web/patterns/avatar-group` | Avatar Group — Stacked | patterns | 160×36 | avatar, group, stack, team, users, web |
+| 138 | `web/patterns/calendar-month` | Calendar — Month View | patterns | 640×480 | calendar, month, grid, date, schedule, events, web |
+| 139 | `web/patterns/category-pills` | Category Pills — Horizontal Scroll | patterns | 600×40 | category, pills, filter, tags, horizontal, scroll |
+| 140 | `web/patterns/chat-web` | Chat Window — Web | patterns | 400×480 | chat, message, conversation, web, inbox |
+| 141 | `web/patterns/code-editor` | Code Editor — Web (with line numbers) | patterns | 640×320 | code, editor, syntax, highlight, developer, ide |
+| 142 | `web/patterns/comparison-table` | Comparison Table — Feature Matrix | patterns | 800×300 | comparison, table, features, matrix, pricing, plans |
+| 143 | `web/patterns/cookie-banner` | Cookie Banner — Bottom | patterns | 1440×72 | cookie, banner, consent, gdpr, privacy |
+| 144 | `web/patterns/error-page` | Error Page — 404 | patterns | 600×400 | error, 404, not-found, page, empty |
+| 145 | `web/patterns/file-list` | File List — with Actions | patterns | 600×240 | file, list, document, download, manager |
+| 146 | `web/patterns/filter-toolbar` | Filter Toolbar — Search + Filters + Actions | patterns | 800×48 | filter, toolbar, search, actions, admin, table |
+| 147 | `web/patterns/kanban-column` | Kanban Column — with Task Cards | patterns | 300×480 | kanban, column, board, tasks, project, drag |
+| 148 | `web/patterns/notification-list` | Notification List | patterns | 380×320 | notification, list, dropdown, inbox, alerts |
+| 149 | `web/patterns/order-tracker` | Order Status Tracker | patterns | 640×80 | order, status, tracker, ecommerce, shipping, steps |
+| 150 | `web/patterns/pagination` | Pagination | patterns | 400×40 | pagination, page, navigation, controls |
+| 151 | `web/patterns/product-card-web` | Product Card — E-Commerce Web | patterns | 300×380 | product, card, ecommerce, shop, price, web |
+| 152 | `web/patterns/settings-form` | Settings Form — Profile | patterns | 640×400 | settings, form, profile, account, admin |
+| 153 | `web/patterns/stepper` | Stepper — Horizontal Steps | patterns | 600×64 | stepper, wizard, steps, progress, form |
+| 154 | `web/patterns/user-table-row` | User Table Row | patterns | 800×56 | user, table, row, admin, team, role |
+| 155 | `web/patterns/video-player` | Video Player — Web | patterns | 800×480 | video, player, controls, web, media |
+| 156 | `web/presentation/slide-content` | Presentation Slide — Content (2 Column) | presentation | 1920×1080 | presentation, slide, content, two-column, 16:9 |
+| 157 | `web/presentation/slide-title` | Presentation Slide — Title | presentation | 1920×1080 | presentation, slide, title, deck, 16:9 |
+| 158 | `web/pricing/pricing-table` | Pricing — Feature Comparison Table | pricing | 1440×480 | pricing, table, comparison, features, plans, starter, pro, enterprise |
+| 159 | `web/pricing/pricing-toggle` | Pricing — Toggle Monthly/Annual | pricing | 1440×640 | pricing, toggle, monthly, annual, cards, plans, subscription, billing |
+| 160 | `web/print/business-card` | Business Card — Modern | print | 1050×600 | print, business-card, card, contact, brand |
+| 161 | `web/products/product-card-horizontal` | Product Card — Horizontal (List View) | products | 640×140 | product, card, horizontal, list, ecommerce |
+| 162 | `web/products/product-detail` | Product Detail — Full Page | products | 1200×600 | product, detail, ecommerce, shop, page |
+| 163 | `web/products/product-grid` | Product Grid — 4 Column | products | 1200×480 | product, grid, ecommerce, shop, catalog |
+| 164 | `web/products/review-section` | Product Reviews Section | products | 640×400 | reviews, rating, product, ecommerce, feedback |
+| 165 | `web/promotions/coupon-card` | Coupon Card — Discount Code | promotions | 360×120 | coupon, discount, code, promo, ecommerce |
+| 166 | `web/promotions/promo-banner` | Promo Banner — Sale | promotions | 1200×200 | promo, banner, sale, discount, ecommerce |
+| 167 | `web/real-estate/agent-contact` | Agent Contact Card | real-estate | 360×140 | agent, contact, realtor, real estate |
+| 168 | `web/real-estate/listing-detail-hero` | Listing Detail Hero | real-estate | 800×400 | listing, detail, property, real estate |
+| 169 | `web/real-estate/price-range-slider` | Price Range Slider | real-estate | 320×64 | price, range, filter, real estate |
+| 170 | `web/real-estate/property-card` | Property Card | real-estate | 360×340 | property, listing, house, real estate |
+| 171 | `web/real-estate/property-map-pin` | Property Map Pin | real-estate | 200×72 | map, pin, price, real estate |
+| 172 | `web/real-estate/virtual-tour-button` | Virtual Tour Button | real-estate | 240×56 | virtual tour, 3d, walkthrough, real estate |
+| 173 | `web/saas/api-key-row` | API Key Row | saas | 700×64 | api, key, token, developer, saas |
+| 174 | `web/saas/audit-log-row` | Audit Log Row | saas | 700×48 | audit, log, activity, admin, saas |
+| 175 | `web/saas/billing-plan` | Billing Plan Card | saas | 360×380 | billing, plan, subscription, saas |
+| 176 | `web/saas/kpi-row` | KPI Card Row | saas | 1200×100 | kpi, metrics, dashboard, saas, admin |
+| 177 | `web/saas/team-member-row` | Team Member Row | saas | 700×64 | team, member, user, admin, saas |
+| 178 | `web/saas/webhook-config` | Webhook Config | saas | 700×200 | webhook, config, api, developer, saas |
+| 179 | `web/screenshots/app-screenshot` | Screenshot — Browser Frame | screenshots | 1440×680 | screenshot, browser, mockup, frame, app, preview, landing |
+| 180 | `web/screenshots/screenshot-gallery` | Screenshot — Gallery 3-Up | screenshots | 1440×520 | screenshot, gallery, mockup, three-up, app, preview, landing |
+| 181 | `web/social/comment-thread` | Comment Thread | social | 500×300 | comment, thread, reply, discussion, social |
+| 182 | `web/social-media/instagram-post` | Instagram Post Template — Square | social-media | 1080×1080 | instagram, post, social-media, square, template |
+| 183 | `web/social-proof/logo-cloud` | Logo Cloud — Trusted By | social-proof | 1440×160 | logo, cloud, trusted, brands, social-proof |
+| 184 | `web/social-proof/testimonial-carousel` | Testimonial Carousel — 3 Cards | social-proof | 1440×400 | testimonial, carousel, review, social-proof, quotes |
+| 185 | `web/surfaces/slide-over` | Slide Over Panel — Right Side | surfaces | 400×640 | slide-over, panel, drawer, side, detail |
+| 186 | `web/tables/data-table` | Data Table — with Status Badges | tables | 800×320 | table, data, grid, rows, status, admin, dashboard |
+| 187 | `web/tables/table-simple` | Table — Simple Minimal | tables | 640×240 | table, simple, minimal, data, list |
+| 188 | `web/tabs/tabs-pills` | Tabs — Pills | tabs | 400×40 | tabs, pills, segment, toggle |
+| 189 | `web/tabs/tabs-underline` | Tabs — Underline | tabs | 600×44 | tabs, navigation, underline, horizontal |
+| 190 | `web/toggles/toggle-dark-mode` | Toggle — Dark Mode | toggles | 200×44 | toggle, dark mode, theme, sun, moon, pill |
+| 191 | `web/toggles/toggle-group` | Toggle Group — Notification Settings | toggles | 440×220 | toggle, group, settings, notifications, list |
+| 192 | `web/toggles/toggle-switch` | Toggle Switch — Settings Row | toggles | 360×64 | toggle, switch, setting, row, label, description |
+| 193 | `web/widgets/api-key-row` | API Key Row | widgets | 640×56 | api, key, token, developer, saas |
+| 194 | `web/widgets/billing-card` | Billing Card — Current Plan | widgets | 400×160 | billing, plan, subscription, payment, saas |
+| 195 | `web/widgets/changelog-item` | Changelog Item — Version Update | widgets | 640×120 | changelog, update, version, release, saas |
+| 196 | `web/widgets/integration-card` | Integration Card — Connected App | widgets | 320×120 | integration, app, connected, saas, api |
+| 197 | `web/widgets/onboarding-checklist` | Onboarding Checklist | widgets | 360×280 | onboarding, checklist, getting-started, progress, saas |
+| 198 | `web/widgets/pricing-toggle` | Pricing Toggle — Monthly / Yearly | widgets | 280×40 | pricing, toggle, monthly, yearly, billing, saas |
+| 199 | `web/widgets/team-member-row` | Team Member Row — with Role | widgets | 640×56 | team, member, user, role, saas, admin |
+| 200 | `web/widgets/usage-meter` | Usage Meter — Storage / API | widgets | 360×100 | usage, meter, storage, api, quota, saas |

package/components/web/README.md

@@ -0,0 +1,110 @@
+# Web Tailwind UI Kit
+
+**126 components** across 34 categories. Responsive desktop/web design system.
+
+All components use `var(--kit-*)` tokens. Dark mode via token overrides — no separate component files.
+
+---
+
+## Design Principles
+
+- Clean, minimal, lots of white space
+- 8px grid, Inter font (system-ui fallback)
+- Responsive: all components use `width:100%`, flex-wrap, min-width for reflow
+- Rounded corners: 6-8px buttons, 12-16px cards, 24px modals
+- Subtle shadows, 1px borders for structure
+- Dark mode via token overrides (no separate components)
+
+## Responsive Patterns
+
+- All components: `width:100%` — parent controls size
+- Grid: `display:flex;flex-wrap:wrap;gap:16px` + `flex:1 1 280px;min-width:0`
+- Sidebar: `width:240px` on desktop, collapses to icons or off-screen on mobile
+- Tables: horizontal scroll wrapper on mobile
+- Typography: use relative sizes via tokens, not fixed px
+
+## Breakpoints (reference)
+
+| Name | Width | Layout |
+|------|-------|--------|
+| Mobile | <768px | Single column, bottom nav |
+| Tablet | 768-1024px | 2-col, collapsible sidebar |
+| Desktop | 1024-1440px | Sidebar + content |
+| Wide | >1440px | Centered max-width container |
+
+---
+
+## Component Inventory (126 total)
+
+| Category | Count | Components |
+|----------|-------|------------|
+| navbars | 6 | topnav, topnav-search, sidebar, sidebar-dark, breadcrumb, footer |
+| buttons | 6 | primary, secondary, danger, ghost, icon, group |
+| cards | 6 | basic, feature, image, pricing, stat, testimonial |
+| inputs | 10 | text-input, textarea, select, search-command, date-input, file-upload, tag-input, checkbox, radio-group, toggle |
+| layout | 6 | hero-centered, hero-split, features-grid, pricing-section, stats-row, cta-banner |
+| tables | 2 | table-simple, data-table |
+| modals | 2 | modal-basic, modal-form |
+| feedback | 8 | alert-banner, empty-state, loading-spinner, progress-bar, skeleton, toast-success, toast-error, tooltip |
+| tabs | 2 | tabs-pills, tabs-underline |
+| toggles | 3 | toggle-switch, toggle-group, toggle-dark-mode |
+| charts | 3 | chart-area, chart-bar, chart-donut |
+| badges | 1 | badge-set |
+| menus | 1 | dropdown-menu |
+| dividers | 1 | divider-text |
+| surfaces | 1 | slide-over |
+| data-display | 2 | grid-view, list-view |
+| heroes | 3 | hero-gradient, hero-image-bg, hero-video |
+| cta | 3 | cta-centered, cta-with-image, cta-newsletter |
+| features | 3 | features-icon-list, features-alternating, features-bento |
+| pricing | 2 | pricing-table, pricing-toggle |
+| social-proof | 2 | logo-cloud, testimonial-carousel |
+| logos | 2 | logo-grid, logo-ticker |
+| products | 4 | product-card-horizontal, product-detail, product-grid, review-section |
+| cart | 3 | cart-page, checkout-form, order-confirmation |
+| promotions | 2 | coupon-card, promo-banner |
+| account | 3 | profile-card, subscription-card, payment-method |
+| widgets | 8 | api-key-row, billing-card, changelog-item, integration-card, onboarding-checklist, pricing-toggle, team-member-row, usage-meter |
+| content | 2 | author-card, blog-card-horizontal |
+| metrics | 1 | kpi-row |
+| screenshots | 2 | app-screenshot, screenshot-gallery |
+| presentation | 2 | slide-title, slide-content |
+| print | 1 | business-card |
+| social-media | 1 | instagram-post |
+| patterns | 22 | accordion, activity-feed, auth-login, avatar-group, calendar-month, category-pills, chat-web, code-editor, comparison-table, cookie-banner, error-page, file-list, filter-toolbar, kanban-column, notification-list, order-tracker, pagination, product-card-web, settings-form, stepper, user-table-row, video-player |
+
+---
+
+## Category Descriptions
+
+| Category | Purpose |
+|----------|---------|
+| navbars | Top navigation, sidebar, breadcrumb, footer |
+| buttons | Action buttons (primary, secondary, danger, ghost, icon, group) |
+| cards | Content containers (basic, feature, pricing, stat, testimonial) |
+| inputs | Form controls (text, select, date, file, tags, checkbox, radio) |
+| layout | Full-width page sections (hero, features, pricing, stats, CTA) |
+| tables | Data tables (simple, sortable/filterable) |
+| modals | Overlay dialogs (basic, form) |
+| feedback | Status indicators (alerts, toasts, loading, skeleton, progress) |
+| tabs | Tab navigation (pills, underline) |
+| toggles | Toggle controls (switch, group, dark mode) |
+| charts | Data visualization (area, bar, donut) |
+| heroes | Landing page hero sections (gradient, image, video) |
+| cta | Call-to-action blocks (centered, split, newsletter) |
+| features | Feature showcase sections (icon list, alternating, bento grid) |
+| pricing | Pricing displays (comparison table, toggle monthly/annual) |
+| social-proof | Trust indicators (logo cloud, testimonial carousel) |
+| logos | Logo displays (grid, ticker) |
+| products | E-commerce product displays (cards, detail, grid, reviews) |
+| cart | Shopping cart flow (cart page, checkout, order confirmation) |
+| promotions | Marketing elements (coupons, banners) |
+| account | User account pages (profile, subscription, payment) |
+| widgets | SaaS dashboard widgets (API keys, billing, changelog, integrations) |
+| content | Blog/content elements (author card, blog card) |
+| metrics | KPI and metric displays |
+| screenshots | App screenshot showcases (browser frame, gallery) |
+| presentation | Slide deck elements (title, content) |
+| print | Print-ready elements (business card) |
+| social-media | Social media components (Instagram post) |
+| patterns | Complex UI patterns (auth, chat, kanban, calendar, settings, etc.) |

package/components/web/account/payment-method.html

@@ -0,0 +1,13 @@
+<!--
+  @name: Payment Method — Card
+  @kit: web
+  @width: 400
+  @height: 72
+  @tags: payment, card, billing, account, method
+-->
+<div data-component="Payment Method — Card" style="display:flex;align-items:center;width:100%;padding:14px 16px;border:1px solid var(--kit-border, #E2E8F0);border-radius:8px;gap:14px;font-family:var(--kit-font, Inter, system-ui, sans-serif);box-sizing:border-box">
+  <div style="width:40px;height:28px;border-radius:4px;background:linear-gradient(135deg, #1E40AF, #3B82F6);display:flex;align-items:center;justify-content:center;flex-shrink:0"><span style="color:#fff;font-size:10px;font-weight:700">VISA</span></div>
+  <div style="flex:1"><div style="font-size:14px;font-weight:500;color:var(--kit-text, #0F172A)">Visa ending in 4291</div><div style="font-size:12px;color:var(--kit-text-3, #94A3B8)">Expires 12/28</div></div>
+  <span style="background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text-2, #475569);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500">Default</span>
+  <div style="cursor:pointer;color:var(--kit-text-3, #94A3B8)"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></div>
+</div>

package/components/web/account/profile-card.html

@@ -0,0 +1,18 @@
+<!--
+  @name: Profile Card — User Account
+  @kit: web
+  @width: 360
+  @height: 180
+  @tags: profile, user, account, avatar, settings
+-->
+<div data-component="Profile Card — User Account" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);display:flex;gap:16px;align-items:center">
+  <div style="width:64px;height:64px;border-radius:32px;background:var(--kit-primary, #6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0">JD</div>
+  <div style="flex:1;min-width:0">
+    <div style="font-size:18px;font-weight:600;color:var(--kit-text, #0F172A)">John Doe</div>
+    <div style="font-size:13px;color:var(--kit-text-2, #475569);margin-top:2px">john@example.com</div>
+    <div style="display:flex;gap:8px;margin-top:12px">
+      <div style="height:28px;padding:0 12px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:6px;display:flex;align-items:center;font-size:12px;font-weight:500;cursor:pointer">Edit Profile</div>
+      <div style="height:28px;padding:0 12px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;display:flex;align-items:center;font-size:12px;color:var(--kit-text-2, #475569);cursor:pointer">Settings</div>
+    </div>
+  </div>
+</div>

package/components/web/account/subscription-card.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Subscription Card — Plan Details
+  @kit: web
+  @width: 400
+  @height: 200
+  @tags: subscription, plan, billing, account, pricing
+-->
+<div data-component="Subscription Card — Plan Details" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:12px;padding:20px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
+    <div style="font-size:16px;font-weight:600;color:var(--kit-text, #0F172A)">Subscription</div>
+    <span style="background:rgba(99,102,241,0.08);color:var(--kit-primary, #6366F1);padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500">Pro</span>
+  </div>
+  <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:4px"><span style="font-size:32px;font-weight:700;color:var(--kit-text, #0F172A)">$29</span><span style="font-size:14px;color:var(--kit-text-3, #94A3B8)">/month</span></div>
+  <div style="font-size:13px;color:var(--kit-text-2, #475569);margin-bottom:16px">Next billing: April 15, 2026</div>
+  <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:16px">
+    <div style="display:flex;align-items:center;gap:6px;font-size:13px;color:var(--kit-text, #0F172A)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Unlimited projects</div>
+    <div style="display:flex;align-items:center;gap:6px;font-size:13px;color:var(--kit-text, #0F172A)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>50GB storage (7.2GB used)</div>
+    <div style="display:flex;align-items:center;gap:6px;font-size:13px;color:var(--kit-text, #0F172A)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Priority support</div>
+  </div>
+  <div style="display:flex;gap:8px"><div style="height:32px;padding:0 14px;background:var(--kit-primary, #6366F1);color:#fff;border-radius:6px;display:flex;align-items:center;font-size:13px;font-weight:500;cursor:pointer">Upgrade to Enterprise</div><div style="height:32px;padding:0 14px;border:1px solid var(--kit-border, #E2E8F0);border-radius:6px;display:flex;align-items:center;font-size:13px;color:var(--kit-text-3, #94A3B8);cursor:pointer">Cancel</div></div>
+</div>

package/components/web/badges/badge-set.html

@@ -0,0 +1,14 @@
+<!--
+  @name: Badge Set — Status Variants
+  @kit: web
+  @width: 400
+  @height: 28
+  @tags: badge, status, tag, label, pill
+-->
+<div data-component="Badge Set — Status Variants" style="display:flex;gap:8px;flex-wrap:wrap;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <span style="display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--kit-success-bg, #F0FDF4);color:var(--kit-success, #22C55E);font-size:12px;font-weight:var(--kit-font-medium, 500)">Active</span>
+  <span style="display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--kit-warning-bg, #FFFBEB);color:var(--kit-warning, #F59E0B);font-size:12px;font-weight:var(--kit-font-medium, 500)">Pending</span>
+  <span style="display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--kit-danger-bg, #FEF2F2);color:var(--kit-danger, #EF4444);font-size:12px;font-weight:var(--kit-font-medium, 500)">Error</span>
+  <span style="display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--kit-info-bg, #EFF6FF);color:var(--kit-info, #3B82F6);font-size:12px;font-weight:var(--kit-font-medium, 500)">Info</span>
+  <span style="display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--kit-surface-2, #F1F5F9);color:var(--kit-text-2, #475569);font-size:12px;font-weight:var(--kit-font-medium, 500)">Draft</span>
+</div>

package/components/web/buttons/button-danger.html

@@ -0,0 +1,10 @@
+<!--
+  @name: Danger Button
+  @kit: web
+  @width: 200
+  @height: 40
+  @tags: button, danger, destructive, delete, error
+-->
+<div data-component="Danger Button" style="display:inline-flex;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <button style="display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;background:var(--kit-danger, #EF4444);color:#FFFFFF;font-size:var(--kit-text-sm, 14px);font-weight:500;border:none;border-radius:var(--kit-radius, 8px);cursor:pointer;font-family:inherit;transition:background 0.15s ease;white-space:nowrap"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>Delete Item</button>
+</div>

package/components/web/buttons/button-ghost.html

@@ -0,0 +1,10 @@
+<!--
+  @name: Ghost Button
+  @kit: web
+  @width: 160
+  @height: 40
+  @tags: button, ghost, text, minimal, subtle
+-->
+<div data-component="Ghost Button" style="display:inline-flex;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <button style="display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;background:transparent;color:var(--kit-text-2, #475569);font-size:var(--kit-text-sm, 14px);font-weight:500;border:none;border-radius:var(--kit-radius, 8px);cursor:pointer;font-family:inherit;transition:background 0.15s ease,color 0.15s ease;white-space:nowrap">Cancel</button>
+</div>

package/components/web/buttons/button-group.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Button Group — 3 Joined
+  @kit: web
+  @width: 300
+  @height: 36
+  @tags: button, group, segmented, toggle
+-->
+<div data-component="Button Group — 3 Joined" style="display:inline-flex;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif);font-size:var(--kit-text-sm, 13px)">
+  <div style="padding:8px 16px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-weight:var(--kit-font-medium, 500);cursor:pointer">Day</div>
+  <div style="padding:8px 16px;border-left:1px solid var(--kit-border, #E2E8F0);color:var(--kit-text, #0F172A);cursor:pointer">Week</div>
+  <div style="padding:8px 16px;border-left:1px solid var(--kit-border, #E2E8F0);color:var(--kit-text, #0F172A);cursor:pointer">Month</div>
+</div>

package/components/web/buttons/button-icon.html

@@ -0,0 +1,10 @@
+<!--
+  @name: Icon Button
+  @kit: web
+  @width: 36
+  @height: 36
+  @tags: button, icon, circle, round, compact
+-->
+<div data-component="Icon Button" style="display:inline-flex;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <button style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--kit-surface, #F8FAFC);color:var(--kit-text-2, #475569);border:1px solid var(--kit-border, #E2E8F0);border-radius:50%;cursor:pointer;padding:0;transition:background 0.15s ease,color 0.15s ease"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></button>
+</div>

package/components/web/buttons/button-primary.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Primary Button
+  @kit: web
+  @width: 320
+  @height: 40
+  @tags: button, primary, cta, action, icon
+-->
+<div data-component="Primary Button" style="display:flex;gap:12px;align-items:center;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <button style="display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-size:var(--kit-text-sm, 14px);font-weight:500;border:none;border-radius:var(--kit-radius, 8px);cursor:pointer;font-family:inherit;transition:background 0.15s ease;white-space:nowrap">Get Started</button>
+  <button style="display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-size:var(--kit-text-sm, 14px);font-weight:500;border:none;border-radius:var(--kit-radius, 8px);cursor:pointer;font-family:inherit;transition:background 0.15s ease;white-space:nowrap"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>Continue</button>
+</div>

package/components/web/buttons/button-secondary.html

@@ -0,0 +1,10 @@
+<!--
+  @name: Secondary Button
+  @kit: web
+  @width: 200
+  @height: 40
+  @tags: button, secondary, outline, border
+-->
+<div data-component="Secondary Button" style="display:inline-flex;width:100%;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <button style="display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;background:transparent;color:var(--kit-text, #0F172A);font-size:var(--kit-text-sm, 14px);font-weight:500;border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius, 8px);cursor:pointer;font-family:inherit;transition:background 0.15s ease,border-color 0.15s ease;white-space:nowrap">Learn More</button>
+</div>

package/components/web/cards/card-basic.html

@@ -0,0 +1,11 @@
+<!--
+  @name: Card — Basic
+  @kit: web
+  @width: 360
+  @height: 160
+  @tags: card, basic, border, container
+-->
+<div data-component="Card — Basic" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:8px">Card Title</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.5">Supporting text with a brief description. Cards contain content and actions about a single subject.</div>
+</div>

package/components/web/cards/card-feature.html

@@ -0,0 +1,12 @@
+<!--
+  @name: Card — Feature
+  @kit: web
+  @width: 320
+  @height: 200
+  @tags: card, feature, icon, grid, landing
+-->
+<div data-component="Card — Feature" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="width:44px;height:44px;border-radius:var(--kit-radius, 8px);background:rgba(99,102,241,0.08);display:flex;align-items:center;justify-content:center;color:var(--kit-primary, #6366F1);margin-bottom:16px"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
+  <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:8px">Lightning Fast</div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.6">Built for speed with optimized rendering and instant preview. No more waiting around.</div>
+</div>

package/components/web/cards/card-image.html

@@ -0,0 +1,16 @@
+<!--
+  @name: Card — with Image
+  @kit: web
+  @width: 360
+  @height: 340
+  @tags: card, image, article, blog, content
+-->
+<div data-component="Card — with Image" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);overflow:hidden;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <img src="https://placehold.jp/360x180.png" style="width:100%;height:180px;object-fit:cover;display:block" alt="Card image"/>
+  <div style="padding:20px">
+    <div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-primary, #6366F1);font-weight:var(--kit-font-semibold, 600);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Category</div>
+    <div style="font-size:var(--kit-text-lg, 18px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A);margin-bottom:8px">Article Title Here</div>
+    <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);line-height:1.5">Brief description or excerpt from the article content.</div>
+    <div style="display:flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)"><span>Mar 24, 2026</span><span>·</span><span>5 min read</span></div>
+  </div>
+</div>

package/components/web/cards/card-pricing.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Card — Pricing Tier
+  @kit: web
+  @width: 320
+  @height: 480
+  @tags: card, pricing, plan, subscription, features
+-->
+<div data-component="Card — Pricing Tier" style="width:100%;background:var(--kit-bg, #FFFFFF);border:2px solid var(--kit-primary, #6366F1);border-radius:var(--kit-radius-lg, 16px);padding:32px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif);position:relative;overflow:hidden">
+  <div style="position:absolute;top:12px;right:12px;background:var(--kit-primary, #6366F1);color:#FFFFFF;font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--kit-radius-full, 9999px)">Popular</div>
+  <div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-primary, #6366F1);margin-bottom:8px">Pro Plan</div>
+  <div style="display:flex;align-items:baseline;gap:4px;margin-bottom:4px"><span style="font-size:40px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A)">$29</span><span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-3, #94A3B8)">/month</span></div>
+  <div style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);margin-bottom:24px">Perfect for growing teams</div>
+  <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:32px">
+    <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Unlimited projects</div>
+    <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>50GB storage</div>
+    <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Priority support</div>
+    <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Advanced analytics</div>
+    <div style="display:flex;align-items:center;gap:10px;font-size:var(--kit-text-sm, 14px);color:var(--kit-text, #0F172A)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--kit-success, #22C55E)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Team collaboration</div>
+  </div>
+  <div style="display:flex;align-items:center;justify-content:center;height:44px;background:var(--kit-primary, #6366F1);color:#FFFFFF;border-radius:var(--kit-radius, 8px);font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);cursor:pointer">Get Started</div>
+</div>

package/components/web/cards/card-stat.html

@@ -0,0 +1,15 @@
+<!--
+  @name: Card — Stat / KPI
+  @kit: web
+  @width: 280
+  @height: 130
+  @tags: card, stat, kpi, metric, dashboard, number
+-->
+<div data-component="Card — Stat / KPI" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:20px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
+    <span style="font-size:var(--kit-text-sm, 14px);color:var(--kit-text-2, #475569);font-weight:var(--kit-font-medium, 500)">Total Revenue</span>
+    <div style="width:36px;height:36px;border-radius:var(--kit-radius, 8px);background:rgba(99,102,241,0.08);display:flex;align-items:center;justify-content:center;color:var(--kit-primary, #6366F1)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div>
+  </div>
+  <div style="font-size:28px;font-weight:var(--kit-font-bold, 700);color:var(--kit-text, #0F172A);margin-bottom:4px">$45,231</div>
+  <div style="display:flex;align-items:center;gap:4px;font-size:var(--kit-text-xs, 12px)"><span style="color:var(--kit-success, #22C55E);font-weight:var(--kit-font-medium, 500)">+20.1%</span><span style="color:var(--kit-text-3, #94A3B8)">vs last month</span></div>
+</div>

package/components/web/cards/card-testimonial.html

@@ -0,0 +1,21 @@
+<!--
+  @name: Card — Testimonial
+  @kit: web
+  @width: 360
+  @height: 240
+  @tags: card, testimonial, review, quote, social-proof
+-->
+<div data-component="Card — Testimonial" style="width:100%;background:var(--kit-bg, #FFFFFF);border:1px solid var(--kit-border, #E2E8F0);border-radius:var(--kit-radius-md, 12px);padding:24px;box-sizing:border-box;font-family:var(--kit-font, Inter, system-ui, sans-serif)">
+  <div style="display:flex;gap:2px;margin-bottom:16px">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+  </div>
+  <div style="font-size:var(--kit-text-md, 16px);color:var(--kit-text, #0F172A);line-height:1.6;margin-bottom:20px;font-style:italic">"This tool has completely transformed our design workflow. We shipped 3x faster since adopting it."</div>
+  <div style="display:flex;align-items:center;gap:12px">
+    <div style="width:40px;height:40px;border-radius:20px;background:linear-gradient(135deg, #6366F1, #8B5CF6);display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:16px;font-weight:600;flex-shrink:0">SC</div>
+    <div><div style="font-size:var(--kit-text-sm, 14px);font-weight:var(--kit-font-semibold, 600);color:var(--kit-text, #0F172A)">Sarah Chen</div><div style="font-size:var(--kit-text-xs, 12px);color:var(--kit-text-3, #94A3B8)">Head of Design, Acme Inc.</div></div>
+  </div>
+</div>