{ "version": "2.0", "lastUpdated": "2026-10-23", "description": "DevSnips component library index - organized as design system families with production-ready variants", "stats": { "totalFamilies": 117, "totalVariants": 1019, "totalSubVariants": 0, "totalStyles": 1855, "technologies": [ "Tailwind CSS", "Vanilla HTML/CSS/JS", "React" ], "tailwindByType": { "component": 259, "section": 200, "template": 10 }, "vanillaByType": { "component": 126, "section": 65, "template": 8 }, "reactByType": { "component": 293, "section": 56, "template": 2 } }, "families": [ { "name": "Accordions", "path": "Tailwind/Components/Accordions/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete accordion component family with 15 production-ready variants covering every use case from basic documentation to timelines and settings panels", "variantsCount": 14, "variants": [ { "name": "Basic Accordion", "path": "Tailwind/Components/Accordions/basic-accordion/", "type": "component", "description": "Simple documentation accordion with chevron rotation and smooth height animation. Clean, accessible, and ready for knowledge bases and developer docs.", "tags": [ "accordion", "basic", "documentation", "collapsible", "faq", "expandable" ], "features": [ "chevron rotation", "height animation", "independent toggles", "focus rings", "aria-expanded", "grid-rows animation" ], "styles": [ "basic", "documentation", "collapsible", "faq" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bordered Accordion", "path": "Tailwind/Components/Accordions/bordered-accordion/", "type": "component", "description": "Enterprise accordion with distinct bordered cards, leading status icons, status chips, and metadata grids. Each section is self-contained for compliance and admin panels.", "tags": [ "accordion", "bordered", "enterprise", "admin", "compliance", "cards" ], "features": [ "bordered cards", "status chips", "metadata grid", "icon accents", "open-state ring", "focus-visible rings" ], "styles": [ "bordered", "enterprise", "admin", "compliance" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dark Accordion", "path": "Tailwind/Components/Accordions/dark-accordion/", "type": "component", "description": "Modern dark-mode dashboard accordion with single-open behavior, glowing status dots, metric delta badges, and an indigo active accent. Built for analytics and admin panels.", "tags": [ "accordion", "dark", "dashboard", "analytics", "single-open", "metrics" ], "features": [ "dark theme", "glowing status dots", "metric deltas", "metadata grid", "single-open mode", "indigo accent" ], "styles": [ "dark", "dashboard", "analytics", "single-open" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "FAQ Accordion", "path": "Tailwind/Components/Accordions/faq-accordion/", "type": "component", "description": "Landing-page FAQ with numbered badges, category chips, and single-open behavior. Includes a smooth height animation and a contact CTA for product pages.", "tags": [ "accordion", "faq", "landing", "single-open", "numbered", "product" ], "features": [ "numbered badges", "category meta", "single-open mode", "chevron rotation", "hover lift", "focus rings" ], "styles": [ "faq", "landing", "single-open", "numbered" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Glass Accordion", "path": "Tailwind/Components/Accordions/glass-accordion/", "type": "component", "description": "Glassmorphism accordion with frosted translucent panels, hairline white borders, and soft glow over a vivid gradient backdrop. Ideal for hero and AI product sections.", "tags": [ "accordion", "glass", "glassmorphism", "frosted", "translucent", "hero" ], "features": [ "backdrop blur", "translucent panels", "hairline white borders", "soft glow shadow", "chevron rotation", "vivid backdrop" ], "styles": [ "glass", "glassmorphism", "frosted", "translucent" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Icon Accordion", "path": "Tailwind/Components/Accordions/icon-accordion/", "type": "component", "description": "Accordion with leading category icons in tinted squares and two-line headers. Panels reveal related link lists, ideal for knowledge bases and support centers.", "tags": [ "accordion", "icon", "knowledge-base", "support", "categories", "links" ], "features": [ "leading category icons", "tinted icon squares", "link lists in panels", "two-line headers", "chevron rotation", "hover color shifts" ], "styles": [ "icon", "knowledge-base", "support", "categories" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Accordion", "path": "Tailwind/Components/Accordions/minimal-accordion/", "type": "component", "description": "Borderless, typography-led accordion with a plus/minus indicator that animates into a minus. Ultra-clean hierarchy for modern SaaS and marketing pages.", "tags": [ "accordion", "minimal", "clean", "plus-minus", "borderless", "saas" ], "features": [ "plus/minus indicator", "borderless design", "typography hierarchy", "smooth indicator animation", "hover dim", "focus rings" ], "styles": [ "minimal", "clean", "plus-minus", "borderless" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Multi Open Accordion", "path": "Tailwind/Components/Accordions/multi-open-accordion/", "type": "component", "description": "Faceted filter panel where multiple sections stay open at once. Each section holds checkbox filters with a live selected-count badge for e-commerce and directory filtering.", "tags": [ "accordion", "multi-open", "filter", "facets", "checkbox", "ecommerce" ], "features": [ "multi-open sections", "checkbox filters", "live count badges", "fieldsets for a11y", "default-open sections", "chevron rotation" ], "styles": [ "multi-open", "filter", "facets", "checkbox" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Nested Accordion", "path": "Tailwind/Components/Accordions/nested-accordion/", "type": "component", "description": "Two-level documentation tree. Chapters expand to reveal page lists, and individual pages open nested sub-lists with a connector line. Sidebar-chevron rotates 90 degrees.", "tags": [ "accordion", "nested", "documentation", "tree", "navigation", "sidebar" ], "features": [ "two-level nesting", "page count badges", "connector lines", "90deg chevron", "active page marker", "independent toggles" ], "styles": [ "nested", "documentation", "tree", "navigation" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing FAQ", "path": "Tailwind/Components/Accordions/pricing-faq/", "type": "component", "description": "Pricing-page FAQ grouped by plan tier with tier-colored section badges and upgrade CTAs inside answers. Single-open behavior keeps the focus on one question at a time.", "tags": [ "accordion", "pricing", "faq", "plans", "saas", "single-open" ], "features": [ "plan-tier grouping", "tier color badges", "in-answer CTAs", "single-open mode", "per-tier focus rings", "smooth height animation" ], "styles": [ "pricing", "faq", "plans", "saas" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Settings Accordion", "path": "Tailwind/Components/Accordions/settings-accordion/", "type": "component", "description": "Application settings accordion whose panels hold form controls, toggles, and a danger zone. Single-open sections grouped like a real settings page.", "tags": [ "accordion", "settings", "forms", "toggles", "admin", "account" ], "features": [ "form controls in panels", "toggle switches", "danger zone", "section icons", "single-open mode", "labeled inputs" ], "styles": [ "settings", "forms", "toggles", "admin" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Sidebar Accordion", "path": "Tailwind/Components/Accordions/sidebar-accordion/", "type": "component", "description": "Documentation navigation sidebar where category groups expand to reveal link lists with an active-page marker and connector line. Multi-open so readers keep context while browsing.", "tags": [ "accordion", "sidebar", "navigation", "docs", "multi-open", "links" ], "features": [ "active page marker", "connector line", "section counts", "multi-open mode", "90deg chevron", "hover states" ], "styles": [ "sidebar", "navigation", "docs", "multi-open" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Single Open Accordion", "path": "Tailwind/Components/Accordions/single-open-accordion/", "type": "component", "description": "Generic accordion enforcing one-open-at-a-time behavior with an expanding accent bar and a live open-count announcement. For terms, policies, and focused help centers.", "tags": [ "accordion", "single-open", "exclusive", "policy", "help-center", "accessibility" ], "features": [ "one-open enforcement", "accent bar reveal", "live open count", "aria-live count", "keyboard support", "focus rings" ], "styles": [ "single-open", "exclusive", "policy", "help-center" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Timeline Accordion", "path": "Tailwind/Components/Accordions/timeline-accordion/", "type": "component", "description": "Expandable project timeline rendered as a vertical-rail accordion. Each milestone shows date, status dot, and an expandable panel with deliverables and progress.", "tags": [ "accordion", "timeline", "milestones", "roadmap", "project", "status" ], "features": [ "vertical rail", "status dots", "progress bars", "deliverable checklists", "date chips", "chevron rotation" ], "styles": [ "timeline", "milestones", "roadmap", "project" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "accessibility", "accordion", "account", "admin", "analytics", "animated", "basic", "bordered", "borderless", "cards", "categories", "checkbox", "clean", "collapsible", "compliance", "dark", "dashboard", "docs", "documentation", "ecommerce", "enterprise", "exclusive", "expandable", "facets", "fade", "faq", "filter", "forms", "frosted", "glass", "glassmorphism", "help-center", "hero", "icon", "indicator", "knowledge-base", "landing", "links", "metrics", "milestones", "minimal", "motion", "multi-open", "navigation", "nested", "numbered", "plans", "plus-minus", "policy", "premium", "pricing", "product", "project", "roadmap", "saas", "settings", "sidebar", "single-open", "slide", "status", "support", "timeline", "toggles", "translucent", "tree" ] }, { "name": "Buttons", "path": "Tailwind/Components/Buttons/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete button component family with 15 production-ready variants covering every use case from basic to 3D effects", "variantsCount": 37, "variants": [ { "name": "3D Button Colored", "path": "Tailwind/Components/Buttons/3d-button/colored/", "type": "component", "description": "Colored 3D buttons with gradients", "tags": [ "button", "3d", "gradient", "colored", "push" ], "styles": [ "Pink", "Purple", "Orange" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Animated Arrow Button", "path": "Tailwind/Components/Buttons/animated-button/arrow/", "type": "component", "description": "Arrow slide animations on hover for navigation", "tags": [ "button", "animated", "arrow", "hover", "navigation" ], "styles": [ "Slide Right", "Slide Left" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Animated Icon Button", "path": "Tailwind/Components/Buttons/animated-button/icon/", "type": "component", "description": "Icon animations on hover for interactive effects", "tags": [ "button", "animated", "icon", "hover" ], "styles": [ "Scale", "Rotate", "Flip" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Animated Loading Button", "path": "Tailwind/Components/Buttons/animated-button/loading/", "type": "component", "description": "Loading state animations with spinner icons", "tags": [ "button", "animated", "loading", "spinner" ], "styles": [ "Blue", "Green" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Animated Scale Button", "path": "Tailwind/Components/Buttons/animated-button/scale/", "type": "component", "description": "Scale animations on hover for interactive feedback", "tags": [ "button", "animated", "scale", "hover", "transform" ], "styles": [ "Scale Up", "Scale Down", "Bounce" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Animated Shine Button", "path": "Tailwind/Components/Buttons/animated-button/shine/", "type": "component", "description": "Shine sweep animations on hover for premium feel", "tags": [ "button", "animated", "shine", "sweep", "premium" ], "styles": [ "Default", "Pill", "Gradient" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Full Width Button", "path": "Tailwind/Components/Buttons/basic-button/full-width/", "type": "component", "description": "Full width buttons for mobile views and prominent call-to-action sections", "tags": [ "button", "full width", "mobile", "cta" ], "styles": [ "Single Full Width", "Split Width" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Neutral Button", "path": "Tailwind/Components/Buttons/basic-button/neutral/", "type": "component", "description": "Neutral buttons designed for dark backgrounds with light and dark variants", "tags": [ "button", "neutral", "dark", "dark mode" ], "styles": [ "Light on Dark", "Dark" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Primary Button", "path": "Tailwind/Components/Buttons/basic-button/primary/", "type": "component", "description": "Primary action buttons with semantic blue color and default, disabled, and link states", "tags": [ "button", "primary", "basic", "solid" ], "styles": [ "Default", "Disabled", "Link" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Secondary Button", "path": "Tailwind/Components/Buttons/basic-button/secondary/", "type": "component", "description": "Secondary action buttons with gray, indigo, and violet color options", "tags": [ "button", "secondary", "gray", "indigo", "violet" ], "styles": [ "Gray", "Indigo", "Violet" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Button Sizes", "path": "Tailwind/Components/Buttons/basic-button/sizes/", "type": "component", "description": "Button sizes from extra small to extra large for different use cases", "tags": [ "button", "sizes", "small", "large", "responsive" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Soft Background Button", "path": "Tailwind/Components/Buttons/filled-button/soft/", "type": "component", "description": "Soft background buttons with pastel colors for subtle actions", "tags": [ "button", "filled", "soft", "pastel", "subtle" ], "styles": [ "Blue", "Green", "Red", "Amber", "Purple", "Pink" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Action Button Extended", "path": "Tailwind/Components/Buttons/floating-action-button/extended/", "type": "component", "description": "Extended FAB with icon and text", "tags": [ "button", "fab", "floating", "action", "extended" ], "styles": [ "Primary", "Outline", "Success" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Action Button Group", "path": "Tailwind/Components/Buttons/floating-action-button/group/", "type": "component", "description": "Grouped FABs for multiple actions", "tags": [ "button", "fab", "floating", "action", "group" ], "styles": [ "Share", "Bookmark", "Delete" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Action Button Standard", "path": "Tailwind/Components/Buttons/floating-action-button/standard/", "type": "component", "description": "Standard floating action buttons (FAB)", "tags": [ "button", "fab", "floating", "action", "icon" ], "styles": [ "Primary", "Outline", "Pink" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Ghost Primary Button", "path": "Tailwind/Components/Buttons/ghost-button/primary/", "type": "component", "description": "Transparent buttons with blue hover background effect", "tags": [ "button", "ghost", "transparent", "hover" ], "styles": [ "Default", "Disabled", "Solid (comparison)" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Glass Icon Button", "path": "Tailwind/Components/Buttons/glass-button/icon/", "type": "component", "description": "Glass morphism icon buttons for toolbars and actions", "tags": [ "button", "glass", "glassmorphism", "icon" ], "styles": [ "Heart", "Bookmark", "Share", "Add (Pill)" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Glass Soft Button", "path": "Tailwind/Components/Buttons/glass-button/soft/", "type": "component", "description": "Soft glass morphism buttons with blur effect", "tags": [ "button", "glass", "glassmorphism", "blur", "frosted" ], "styles": [ "Default", "Disabled", "Pill" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Linear Gradient Button", "path": "Tailwind/Components/Buttons/gradient-button/linear/", "type": "component", "description": "Two-color horizontal gradient buttons with multiple color combinations", "tags": [ "gradient", "button", "linear", "two-color" ], "styles": [ "Blue", "Purple Pink", "Cyan Blue", "Green Cyan" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Gradient Shadow Button", "path": "Tailwind/Components/Buttons/gradient-button/shadow/", "type": "component", "description": "Gradient buttons with colored shadow effects that match the gradient", "tags": [ "gradient", "button", "shadow", "glow", "elevation" ], "styles": [ "Blue", "Pink", "Amber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Icon Button Basic", "path": "Tailwind/Components/Buttons/icon-button/basic/", "type": "component", "description": "Basic icon button styles with various colors", "tags": [ "button", "icon", "icon-only", "toolbar" ], "styles": [ "Primary", "Secondary", "Danger", "Outline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Icon Button Dark", "path": "Tailwind/Components/Buttons/icon-button/dark/", "type": "component", "description": "Dark themed icon button styles for dark interfaces", "tags": [ "button", "icon", "dark", "dark mode" ], "styles": [ "Gray", "Darker", "Light", "Outline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Icon Button Rounded", "path": "Tailwind/Components/Buttons/icon-button/rounded/", "type": "component", "description": "Fully rounded icon button styles", "tags": [ "button", "icon", "rounded", "circle" ], "styles": [ "Primary", "Secondary", "Gradient", "Outline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Loading Button Progress", "path": "Tailwind/Components/Buttons/loading-button/progress/", "type": "component", "description": "Loading buttons with progress bar indicator", "tags": [ "button", "loading", "progress", "upload", "download" ], "styles": [ "Blue", "Green", "Purple" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Loading Button Spinner", "path": "Tailwind/Components/Buttons/loading-button/spinner/", "type": "component", "description": "Loading buttons with spinner animations", "tags": [ "button", "loading", "spinner", "wait" ], "styles": [ "Primary", "Success", "Outline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Border Button", "path": "Tailwind/Components/Buttons/minimal-button/border/", "type": "component", "description": "Minimal border button styles", "tags": [ "button", "minimal", "border", "outline" ], "styles": [ "Pill Border", "Outline Border", "Bold Border" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Underline Button", "path": "Tailwind/Components/Buttons/minimal-button/underline/", "type": "component", "description": "Minimal underline button styles", "tags": [ "button", "minimal", "underline", "text" ], "styles": [ "Underline", "Border Underline", "Animated Underline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Neumorphism Bordered Button", "path": "Tailwind/Components/Buttons/neumorphism-button/bordered/", "type": "component", "description": "Bordered neumorphism buttons with gradient backgrounds", "tags": [ "button", "neumorphism", "bordered", "gradient" ], "styles": [ "Blue", "Purple", "Pill" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Neumorphism Soft Button", "path": "Tailwind/Components/Buttons/neumorphism-button/soft/", "type": "component", "description": "Soft UI neumorphism buttons with subtle shadows", "tags": [ "button", "neumorphism", "soft ui", "shadow" ], "styles": [ "Default", "Pill", "Disabled" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashed Outline Button", "path": "Tailwind/Components/Buttons/outline-button/dashed/", "type": "component", "description": "Outline buttons with dashed borders for a modern look", "tags": [ "button", "outline", "dashed", "border" ], "styles": [ "Gray", "Blue" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Outline Primary Button", "path": "Tailwind/Components/Buttons/outline-button/primary/", "type": "component", "description": "Blue bordered buttons with transparent background and hover fill", "tags": [ "button", "outline", "bordered", "blue" ], "styles": [ "Default", "Disabled" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Thick Border Outline Button", "path": "Tailwind/Components/Buttons/outline-button/thick/", "type": "component", "description": "Bold outline buttons with thick borders and special effects", "tags": [ "button", "outline", "thick", "bold", "border" ], "styles": [ "Thick Outline", "Invert on Hover", "Offset Border" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Social Button Facebook", "path": "Tailwind/Components/Buttons/social-button/facebook/", "type": "component", "description": "Facebook sign-in buttons", "tags": [ "button", "social", "facebook", "oauth", "signin" ], "styles": [ "Filled", "Outline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Social Button GitHub", "path": "Tailwind/Components/Buttons/social-button/github/", "type": "component", "description": "GitHub sign-in buttons", "tags": [ "button", "social", "github", "oauth", "signin" ], "styles": [ "Light", "Dark" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Social Button Google", "path": "Tailwind/Components/Buttons/social-button/google/", "type": "component", "description": "Google sign-in buttons", "tags": [ "button", "social", "google", "oauth", "signin" ], "styles": [ "Outline", "Filled" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Button Dropdown", "path": "Tailwind/Components/Buttons/split-button/dropdown/", "type": "component", "description": "Split buttons with dropdown menu trigger", "tags": [ "button", "split", "dropdown", "menu" ], "styles": [ "Primary", "Outline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Button Icon", "path": "Tailwind/Components/Buttons/split-button/icon/", "type": "component", "description": "Split buttons with icon and dropdown", "tags": [ "button", "split", "dropdown", "icon" ], "styles": [ "Primary", "Outline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "Buttons", "tags": [ "3d", "3d effect", "action", "animated", "arrow", "basic", "blue", "blur", "bold", "border", "bordered", "button", "circle", "colored", "colors", "cta", "dark", "dark background", "dark mode", "dashed", "delete", "depth", "diagonal", "directional", "download", "dropdown", "elevation", "extended", "fab", "facebook", "filled", "floating", "frosted", "full", "full width", "ghost", "github", "glass", "glassmorphism", "glow", "google", "gradient", "gradient-direction", "gray", "green", "group", "hover", "icon", "icon-only", "indigo", "inset", "large", "linear", "loading", "menu", "minimal", "mobile", "multi-stop", "muted", "navigation", "neumorphism", "neutral", "oauth", "outline", "pastel", "pill", "premium", "pressed", "primary", "progress", "purple", "push", "red", "responsive", "rounded", "rounded-full", "scale", "secondary", "shadow", "shine", "signin", "sizes", "small", "social", "soft", "soft ui", "solid", "spectrum", "spinner", "split", "subtle", "sweep", "text", "thick", "three-color", "toolbar", "transform", "transparent", "two-color", "underline", "upload", "violet", "wait" ] }, { "name": "Cards", "path": "Tailwind/Components/Cards/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete card component family with 40 production-ready variants covering every use case from profile and pricing cards to dashboard stats and CTA", "variantsCount": 33, "variants": [ { "name": "Achievement Card", "path": "Tailwind/Components/Cards/achievement-card/", "type": "component", "description": "Celebratory achievement card with badge icon, stats, badge, and share button for gamification.", "tags": [ "card", "achievement", "badge", "gamification", "reward", "milestone" ], "features": [ "badge icon", "achievement badge", "stats grid", "share button", "celebratory design" ], "styles": [ "achievement", "badge", "gamification", "reward" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Activity Feed Card", "path": "Tailwind/Components/Cards/activity-feed-card/", "type": "component", "description": "Activity feed card with grouped events, icons, user avatars, timestamps, and amounts.", "tags": [ "card", "activity", "feed", "events", "notifications", "timeline" ], "features": [ "activity list", "icons", "user avatars", "timestamps", "amount badges" ], "styles": [ "activity", "feed", "events", "notifications" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Analytics Card", "path": "Tailwind/Components/Cards/analytics-card/", "type": "component", "description": "Comprehensive analytics card with chart visualization, time selector, metrics summary, and trend data.", "tags": [ "card", "analytics", "chart", "data", "dashboard", "metrics" ], "features": [ "bar chart", "time filter", "trend indicator", "mini stats", "visual data" ], "styles": [ "analytics", "chart", "data", "dashboard" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Blog Card", "path": "Tailwind/Components/Cards/blog-card/", "type": "component", "description": "Editorial blog card with featured image, category tag, author info, and social engagement buttons.", "tags": [ "card", "blog", "article", "post", "editorial", "news" ], "features": [ "featured image", "category badge", "author avatar", "engagement buttons", "gradient overlay" ], "styles": [ "blog", "article", "post", "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Chat Conversation Card", "path": "Tailwind/Components/Cards/chat-conversation-card/", "type": "component", "description": "Chat interface card with conversation thread, message bubbles, timestamps, and input field.", "tags": [ "card", "chat", "messaging", "conversation", "messenger", "communication" ], "features": [ "user header", "message bubbles", "timestamps", "input field", "action buttons" ], "styles": [ "chat", "messaging", "conversation", "messenger" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Checkout Summary Card", "path": "Tailwind/Components/Cards/checkout-summary-card/", "type": "component", "description": "E-commerce checkout summary with items, pricing breakdown, promo code input, and secure checkout CTA.", "tags": [ "card", "checkout", "ecommerce", "cart", "payment", "order" ], "features": [ "item list", "price breakdown", "promo code", "total", "security badge" ], "styles": [ "checkout", "ecommerce", "cart", "payment" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Corporate Card", "path": "Tailwind/Components/Cards/corporate-card/", "type": "component", "description": "Professional corporate report card with header, metrics grid, progress bars, and export actions.", "tags": [ "card", "corporate", "report", "business", "metrics", "enterprise" ], "features": [ "header banner", "confidential badge", "metrics grid", "progress bars", "footer actions" ], "styles": [ "corporate", "report", "business", "metrics" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Course Card", "path": "Tailwind/Components/Cards/course-card/", "type": "component", "description": "Learning platform course card with instructor info, ratings, duration, pricing, and enrollment CTA.", "tags": [ "card", "course", "learning", "education", "udemy", "coursera" ], "features": [ "bestseller badge", "instructor avatar", "star rating", "price display", "enrollment button" ], "styles": [ "course", "learning", "education", "udemy" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Call-to-Action Card", "path": "Tailwind/Components/Cards/cta-card/", "type": "component", "description": "Bold CTA card with dark theme, gradient accents, dual buttons, and trust indicators.", "tags": [ "card", "cta", "call-to-action", "conversion", "landing", "conversion" ], "features": [ "dark theme", "gradient icon", "dual CTA buttons", "trust badges", "responsive layout" ], "styles": [ "cta", "call-to-action", "conversion", "landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Stat Card", "path": "Tailwind/Components/Cards/dashboard-stat-card/", "type": "component", "description": "Dashboard stat card showing key metrics with icon, value, trend indicator, and comparison.", "tags": [ "card", "dashboard", "stats", "metrics", "analytics", "kpi" ], "features": [ "icon", "trend badge", "value display", "comparison", "clean layout" ], "styles": [ "dashboard", "stats", "metrics", "analytics" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Event Card", "path": "Tailwind/Components/Cards/event-card/", "type": "component", "description": "Event card with date badge, location, attendee avatars, RSVP button, and status badge.", "tags": [ "card", "event", "calendar", "rsvp", "conference", "schedule" ], "features": [ "date badge", "status badge", "location info", "attendee avatars", "RSVP button" ], "styles": [ "event", "calendar", "rsvp", "conference" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Feature Card", "path": "Tailwind/Components/Cards/feature-card/", "type": "component", "description": "Feature showcase card with icon, title, description, and checklist benefits. Includes hover effects.", "tags": [ "card", "feature", "benefits", "showcase", "saas", "landing" ], "features": [ "icon box", "checklist", "hover effects", "gradient background", "arrow link" ], "styles": [ "feature", "benefits", "showcase", "saas" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "File Card", "path": "Tailwind/Components/Cards/file-card/", "type": "component", "description": "File browser card with file type icon, metadata, sharing info, and action buttons on hover.", "tags": [ "card", "file", "document", "cloud", "storage", "sharing" ], "features": [ "file type icon", "file metadata", "sharing info", "avatar group", "hover actions" ], "styles": [ "file", "document", "cloud", "storage" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Glass Card", "path": "Tailwind/Components/Cards/glass-card/", "type": "component", "description": "Glassmorphism card with blur effect, gradient background, translucent elements, and frosted panels.", "tags": [ "card", "glass", "glassmorphism", "blur", "modern", "frosted" ], "features": [ "blur backdrop", "gradient background", "frosted panels", "translucent buttons", "metrics grid" ], "styles": [ "glass", "glassmorphism", "blur", "modern" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Gradient Card", "path": "Tailwind/Components/Cards/gradient-card/", "type": "component", "description": "Vibrant gradient card with earnings stats, progress bar, pattern overlay, and white CTA button.", "tags": [ "card", "gradient", "colorful", "earnings", "progress", "modern" ], "features": [ "gradient background", "pattern overlay", "icon box", "progress bar", "contrast CTA" ], "styles": [ "gradient", "colorful", "earnings", "progress" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Job Listing Card", "path": "Tailwind/Components/Cards/job-listing-card/", "type": "component", "description": "Professional job listing card with company info, salary range, tags, description, and applicant count.", "tags": [ "card", "job", "career", "hiring", "employment", "recruitment" ], "features": [ "company logo", "salary range", "job tags", "applicant avatars", "save button" ], "styles": [ "job", "career", "hiring", "employment" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Card", "path": "Tailwind/Components/Cards/minimal-card/", "type": "component", "description": "Ultra-minimal stat card with clean typography, subtle indicator, and essential information only.", "tags": [ "card", "minimal", "clean", "simple", "stat", "dashboard" ], "features": [ "minimal design", "clean typography", "status indicator", "no borders", "essential info" ], "styles": [ "minimal", "clean", "simple", "stat" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Music Card", "path": "Tailwind/Components/Cards/music-card/", "type": "component", "description": "Vibrant music player card with gradient background, album art, progress bar, and playback controls.", "tags": [ "card", "music", "player", "audio", "streaming", "entertainment" ], "features": [ "gradient background", "album art", "progress bar", "playback controls", "animated bars" ], "styles": [ "music", "player", "audio", "streaming" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Newsletter Card", "path": "Tailwind/Components/Cards/newsletter-card/", "type": "component", "description": "Vibrant newsletter subscription card with email input, gradient background, and trust badges.", "tags": [ "card", "newsletter", "subscribe", "email", "marketing", "cta" ], "features": [ "gradient background", "email input", "subscribe button", "trust badges", "frosted elements" ], "styles": [ "newsletter", "subscribe", "email", "marketing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "NFT Card", "path": "Tailwind/Components/Cards/nft-card/", "type": "component", "description": "Dark-themed NFT marketplace card with art preview, bidding info, countdown, and creator attribution.", "tags": [ "card", "nft", "crypto", "art", "marketplace", "ethereum" ], "features": [ "dark theme", "art preview", "bid info", "countdown", "creator badge" ], "styles": [ "nft", "crypto", "art", "marketplace" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Notification Card", "path": "Tailwind/Components/Cards/notification-card/", "type": "component", "description": "Notification panel with header, badge count, grouped notifications, and action links.", "tags": [ "card", "notification", "alerts", "activity", "dashboard" ], "features": [ "badge count", "notification list", "timestamps", "icons", "mark all read" ], "styles": [ "notification", "alerts", "activity", "dashboard" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing Card", "path": "Tailwind/Components/Cards/pricing-card/", "type": "component", "description": "Premium SaaS pricing card with gradient background, feature list, and call-to-action. Features atmospheric glow effects.", "tags": [ "card", "pricing", "saas", "subscription", "premium", "gradient" ], "features": [ "gradient background", "atmospheric glow", "feature checklist", "badge indicator", "CTA button" ], "styles": [ "pricing", "saas", "subscription", "premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Product Card", "path": "Tailwind/Components/Cards/product-card/", "type": "component", "description": "E-commerce product card with image zoom, badges, ratings, and quick actions. Perfect for online stores.", "tags": [ "card", "product", "ecommerce", "shop", "image", "ratings" ], "features": [ "image hover zoom", "badges", "star ratings", "wishlist button", "add to cart" ], "styles": [ "product", "ecommerce", "shop", "image" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Profile Card", "path": "Tailwind/Components/Cards/profile-card/", "type": "component", "description": "Modern profile card with avatar, stats, and action buttons. Features hover animations and status indicator.", "tags": [ "card", "profile", "user", "social", "avatar", "dashboard" ], "features": [ "hover animations", "status indicator", "skill badges", "stats display", "action buttons" ], "styles": [ "profile", "user", "social", "avatar" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Project Card", "path": "Tailwind/Components/Cards/project-card/", "type": "component", "description": "Project overview card with gradient header, progress bar, team avatars, status badge, and metadata.", "tags": [ "card", "project", "management", "progress", "team", "kanban" ], "features": [ "gradient header", "status badge", "progress bar", "team avatars", "task count" ], "styles": [ "project", "management", "progress", "team" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Social Post Card", "path": "Tailwind/Components/Cards/social-post-card/", "type": "component", "description": "Social media post card with user info, content, image, hashtags, and interaction buttons.", "tags": [ "card", "social", "post", "twitter", "facebook", "feed" ], "features": [ "user profile", "verified badge", "post content", "image", "engagement buttons" ], "styles": [ "social", "post", "twitter", "facebook" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Support Ticket Card", "path": "Tailwind/Components/Cards/support-ticket-card/", "type": "component", "description": "Customer support ticket card with priority badge, conversation thread, timestamps, and action buttons.", "tags": [ "card", "support", "ticket", "helpdesk", "customer-service", "chat" ], "features": [ "ticket ID", "priority badge", "conversation", "customer info", "action buttons" ], "styles": [ "support", "ticket", "helpdesk", "customer-service" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Task Card", "path": "Tailwind/Components/Cards/task-card/", "type": "component", "description": "Compact task card with checkbox, labels, assignee, due date, and comment/attachment counts.", "tags": [ "card", "task", "todo", "kanban", "checkbox", "project-management" ], "features": [ "checkbox", "task labels", "due date", "assignee", "comment count" ], "styles": [ "task", "todo", "kanban", "checkbox" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Team Member Card", "path": "Tailwind/Components/Cards/team-member-card/", "type": "component", "description": "Professional team member card with avatar, role, bio excerpt, skill tags, and social links.", "tags": [ "card", "team", "member", "about", "company", "social" ], "features": [ "verified badge", "bio excerpt", "skill tags", "social links", "decorative corner" ], "styles": [ "team", "member", "about", "company" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Testimonial Card", "path": "Tailwind/Components/Cards/testimonial-card/", "type": "component", "description": "Warm testimonial card with quote styling, author info, star rating, and verification badge.", "tags": [ "card", "testimonial", "review", "quote", "feedback", "social-proof" ], "features": [ "quote icon", "star rating", "verified badge", "author details", "warm color scheme" ], "styles": [ "testimonial", "review", "quote", "feedback" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Timeline Card", "path": "Tailwind/Components/Cards/timeline-card/", "type": "component", "description": "Vertical timeline card with connected events, icons, dates, and descriptions.", "tags": [ "card", "timeline", "history", "events", "progress", "milestone" ], "features": [ "vertical timeline", "colored icons", "dates", "descriptions", "connector line" ], "styles": [ "timeline", "history", "events", "progress" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Video Card", "path": "Tailwind/Components/Cards/video-card/", "type": "component", "description": "Video thumbnail card with play button overlay, duration badge, channel info, and save button.", "tags": [ "card", "video", "youtube", "streaming", "media", "entertainment" ], "features": [ "video thumbnail", "play button", "duration badge", "channel info", "view count" ], "styles": [ "video", "youtube", "streaming", "media" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Weather Card", "path": "Tailwind/Components/Cards/weather-card/", "type": "component", "description": "Beautiful weather card with gradient sky, current conditions, forecast, and location info.", "tags": [ "card", "weather", "forecast", "climate", "location", "daily" ], "features": [ "gradient sky", "temperature display", "forecast grid", "weather icons", "location info" ], "styles": [ "weather", "forecast", "climate", "location" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "about", "accordion", "achievement", "activity", "alerts", "analytics", "art", "article", "audio", "avatar", "badge", "benefits", "blog", "blur", "business", "calendar", "call-to-action", "card", "career", "cart", "chart", "chat", "checkbox", "checkout", "clean", "climate", "cloud", "colorful", "communication", "company", "conference", "conversation", "conversion", "corporate", "course", "coursera", "crypto", "cta", "customer-service", "daily", "dark", "dashboard", "data", "delivery", "document", "earnings", "ecommerce", "editorial", "education", "email", "employment", "enterprise", "entertainment", "ethereum", "event", "events", "executive", "facebook", "faq", "feature", "feed", "feedback", "file", "forecast", "frosted", "gamification", "glass", "glassmorphism", "gradient", "header", "help", "helpdesk", "hiring", "history", "image", "job", "kanban", "kpi", "landing", "learning", "location", "management", "marketing", "marketplace", "media", "member", "messaging", "messenger", "metric", "metrics", "milestone", "minimal", "modern", "music", "news", "newsletter", "nft", "notification", "notifications", "order", "overview", "payment", "performance", "player", "post", "premium", "pricing", "product", "profile", "progress", "project", "project-management", "questions", "quote", "ratings", "recruitment", "report", "review", "reward", "rsvp", "saas", "schedule", "sharing", "shop", "showcase", "simple", "social", "social-proof", "sparkline", "stat", "statistics", "stats", "status", "storage", "streaming", "subscribe", "subscription", "support", "task", "team", "testimonial", "ticket", "timeline", "todo", "tracking", "twitter", "udemy", "user", "video", "weather", "youtube" ] }, { "name": "Dropdowns", "path": "Tailwind/Components/Dropdowns/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete dropdown component family with 30 production-ready variants covering every use case from basic menus to mega menus, command palettes, and context menus", "variantsCount": 20, "variants": [ { "name": "Action Menu", "path": "Tailwind/Components/Dropdowns/action-menu/", "type": "component", "description": "Action menu dropdown with keyboard shortcuts, grouped actions, and destructive action options for document management.", "tags": [ "dropdown", "menu", "actions", "shortcuts", "document" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "menu", "actions", "shortcuts", "document" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Avatar Menu", "path": "Tailwind/Components/Dropdowns/avatar-menu/", "type": "component", "description": "Avatar dropdown with gradient profile header, online status indicator, quick stats, and badges.", "tags": [ "dropdown", "avatar", "profile", "user", "online-status" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "avatar", "profile", "user", "online-status" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Click Menu", "path": "Tailwind/Components/Dropdowns/click-menu/", "type": "component", "description": "Click-triggered dropdown menu with embedded profile card and user actions.", "tags": [ "dropdown", "click", "menu", "profile", "actions" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "click", "menu", "profile", "actions" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Command Menu", "path": "Tailwind/Components/Dropdowns/command-menu/", "type": "component", "description": "IDE-style command palette with keyboard shortcuts, search filtering, grouped commands, and keyboard navigation hints.", "tags": [ "dropdown", "command-palette", "keyboard", "shortcuts", "search" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "command-palette", "keyboard", "shortcuts", "search" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Context Menu", "path": "Tailwind/Components/Dropdowns/context-menu/", "type": "component", "description": "Right-click context menu with grouped actions, keyboard shortcuts, and screen-edge detection for file management applications.", "tags": [ "dropdown", "menu", "context", "right-click", "file-manager" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "menu", "context", "right-click", "file-manager" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Date Filter", "path": "Tailwind/Components/Dropdowns/date-filter/", "type": "component", "description": "Date range filter with quick presets (today, this week, this month) and custom date pickers.", "tags": [ "dropdown", "date", "range", "calendar", "filter", "picker" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "date", "range", "calendar", "filter" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Divider Menu", "path": "Tailwind/Components/Dropdowns/divider-menu/", "type": "component", "description": "Menu with section dividers and labeled categories for organizing complex action sets.", "tags": [ "dropdown", "divider", "sections", "categorized", "file-manager" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "divider", "sections", "categorized", "file-manager" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Filter Menu", "path": "Tailwind/Components/Dropdowns/filter-menu/", "type": "component", "description": "Data filtering dropdown with checkboxes, status indicators, categories, count badges, and date range picker.", "tags": [ "dropdown", "filter", "checkbox", "data", "table" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "filter", "checkbox", "data", "table" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Menu", "path": "Tailwind/Components/Dropdowns/floating-menu/", "type": "component", "description": "Contextual floating menu that appears at click position with screen-edge detection and backdrop blur.", "tags": [ "dropdown", "floating", "contextual", "position", "click" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "floating", "contextual", "position", "click" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Language Switcher", "path": "Tailwind/Components/Dropdowns/language-switcher/", "type": "component", "description": "Language selector dropdown with country flags, search functionality, grouped languages, and RTL support.", "tags": [ "dropdown", "language", "i18n", "locale", "flags" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "language", "i18n", "locale", "flags" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mega Menu", "path": "Tailwind/Components/Dropdowns/mega-menu/", "type": "component", "description": "Rich mega menu navigation with multi-column layouts, category sections, icons, and featured promotional area.", "tags": [ "dropdown", "mega-menu", "navigation", "header", "multi-column" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "mega-menu", "navigation", "header", "multi-column" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Multi Level Menu", "path": "Tailwind/Components/Dropdowns/multi-level-menu/", "type": "component", "description": "Nested dropdown menu with three levels of submenus for e-commerce category navigation.", "tags": [ "dropdown", "multi-level", "nested", "navigation", "hierarchical" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "multi-level", "nested", "navigation", "hierarchical" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Multi Select", "path": "Tailwind/Components/Dropdowns/multi-select/", "type": "component", "description": "Multi-select dropdown with checkboxes, technology badges, and removable tags for multiple selections.", "tags": [ "dropdown", "multi-select", "checkbox", "tags", "form" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "multi-select", "checkbox", "tags", "form" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Notification Menu", "path": "Tailwind/Components/Dropdowns/notification-menu/", "type": "component", "description": "Notification center dropdown with user avatars, unread indicators, timestamps, and read/unread states.", "tags": [ "dropdown", "notification", "alerts", "badge", "bell" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "notification", "alerts", "badge", "bell" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Radio Menu", "path": "Tailwind/Components/Dropdowns/radio-menu/", "type": "component", "description": "Single-select radio button menu for priority selection with color indicators.", "tags": [ "dropdown", "radio", "priority", "select", "status" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "radio", "priority", "select", "status" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Searchable Select", "path": "Tailwind/Components/Dropdowns/searchable-select/", "type": "component", "description": "Searchable dropdown with real-time filtering, country flags, and no-results state for large lists.", "tags": [ "dropdown", "select", "search", "filter", "autocomplete" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "select", "search", "filter", "autocomplete" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Select Dropdown", "path": "Tailwind/Components/Dropdowns/select-dropdown/", "type": "component", "description": "Enhanced select dropdown with icons, descriptions, and smooth arrow rotation animation.", "tags": [ "dropdown", "select", "form", "icons", "categorized" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "select", "form", "icons", "categorized" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Sort Menu", "path": "Tailwind/Components/Dropdowns/sort-menu/", "type": "component", "description": "Sorting dropdown with date, alphabetical, and price sorting options with check indicators.", "tags": [ "dropdown", "sort", "order", "filter", "table" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "sort", "order", "filter", "table" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Status Menu", "path": "Tailwind/Components/Dropdowns/status-menu/", "type": "component", "description": "User status selector dropdown with active, away, busy, offline, and do not disturb options with animated indicators.", "tags": [ "dropdown", "status", "online", "presence", "chat" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "status", "online", "presence", "chat" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Theme Switcher", "path": "Tailwind/Components/Dropdowns/theme-switcher/", "type": "component", "description": "Theme switcher dropdown with light, dark, system, and sepia themes plus accent color selection.", "tags": [ "dropdown", "theme", "dark-mode", "light-mode", "appearance" ], "features": [ "Tailwind CSS", "Responsive", "Accessible" ], "styles": [ "theme", "dark-mode", "light-mode", "appearance" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "account", "actions", "admin", "alerts", "animated", "animation", "appearance", "autocomplete", "avatar", "badge", "basic", "bell", "calendar", "categorized", "chat", "checkbox", "click", "columns", "command-palette", "context", "contextual", "css-only", "dark-mode", "data", "date", "divider", "document", "drawer", "dropdown", "effects", "file-manager", "filter", "flags", "floating", "form", "gradient", "grid", "header", "hierarchical", "hover", "i18n", "icon", "icon-buttons", "icons", "keyboard", "language", "light-mode", "locale", "mega-menu", "menu", "mobile", "multi-column", "multi-level", "multi-select", "navigation", "nested", "notification", "online", "online-status", "order", "picker", "position", "presence", "priority", "profile", "quick-actions", "radio", "range", "right-click", "search", "sections", "security", "select", "settings", "shortcuts", "sidebar", "slide-in", "sort", "staggered", "status", "table", "tags", "theme", "toolbar", "tooltip", "user" ] }, { "name": "Input", "path": "Tailwind/Components/Input/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete input component family with 35 production-ready variants covering every input type from text to file uploads", "variantsCount": 38, "variants": [ { "name": "Animated Focus Input", "path": "Tailwind/Components/Input/animated-focus/", "type": "component", "description": "Input fields with smooth animated focus transitions", "tags": [ "input", "animated", "focus", "transition", "smooth" ], "styles": [ "Ring Expand", "Border Slide", "Floating Label", "Underline Expand" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Character Count Input", "path": "Tailwind/Components/Input/character-count/", "type": "component", "description": "Input fields with character counters, limits, and progress indicators", "tags": [ "input", "character-count", "counter", "limit", "tags" ], "styles": [ "Tweet Counter", "Warning State", "Tags Input", "Progress Bar" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Chat Input", "path": "Tailwind/Components/Input/chat-input/", "type": "component", "description": "Chat input components for messaging interfaces with attachments and emojis", "tags": [ "input", "chat", "message", "messaging", "chat-input" ], "features": [ "input", "chat", "message", "messaging", "chat-input" ], "styles": [ "Standard", "Modern", "Dark" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Checkbox Styled Input", "path": "Tailwind/Components/Input/checkbox-styled/", "type": "component", "description": "Styled checkbox components with various designs and descriptions", "tags": [ "input", "checkbox", "toggle", "select", "form" ], "styles": [ "Default", "Custom Styled", "With Description" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Color Picker Input", "path": "Tailwind/Components/Input/color-picker/", "type": "component", "description": "Color selection components including native picker and preset swatches", "tags": [ "input", "color", "picker", "swatches", "theme" ], "styles": [ "Native Picker", "Color Swatches", "Gradient Swatches" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Credit Card Input", "path": "Tailwind/Components/Input/credit-card/", "type": "component", "description": "Credit card input components with visual card styling and form fields", "tags": [ "input", "credit-card", "payment", "card", "checkout" ], "features": [ "input", "credit-card", "payment", "card", "checkout" ], "styles": [ "Visual Card", "Form Fields" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Currency Input", "path": "Tailwind/Components/Input/currency-input/", "type": "component", "description": "Currency input components with symbols and preset amounts", "tags": [ "input", "currency", "money", "price", "payment" ], "features": [ "input", "currency", "money", "price", "payment" ], "styles": [ "Dollar", "Euro", "Multi-currency", "Display" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dark Mode Input", "path": "Tailwind/Components/Input/dark-mode/", "type": "component", "description": "Input fields designed for dark backgrounds with terminal styles", "tags": [ "input", "dark", "dark-mode", "terminal", "code" ], "styles": [ "Standard", "Subtle Border", "Glow Effect", "Terminal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Date Picker Input", "path": "Tailwind/Components/Input/date-picker/", "type": "component", "description": "Date input components with calendar styling and date range support", "tags": [ "input", "date", "calendar", "picker", "schedule" ], "styles": [ "Standard", "With Icon", "Date Range", "Calendar Card" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Disabled Readonly Input", "path": "Tailwind/Components/Input/disabled-readonly/", "type": "component", "description": "Input fields with disabled and read-only states for non-editable content", "tags": [ "input", "disabled", "readonly", "form", "locked" ], "styles": [ "Disabled", "Read-only", "Disabled with Icon", "Read-only Card" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "File Upload Input", "path": "Tailwind/Components/Input/file-upload/", "type": "component", "description": "File upload components with drag-drop, preview, and progress states", "tags": [ "input", "file", "upload", "drag-drop", "attachment" ], "styles": [ "Drag Drop Zone", "File Preview", "Button Style" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Filled Input", "path": "Tailwind/Components/Input/filled/", "type": "component", "description": "Input fields with solid background colors that shift on focus", "tags": [ "input", "filled", "background", "solid" ], "styles": [ "Default Gray", "Colored", "Dark", "Pill Rounded" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Label Input", "path": "Tailwind/Components/Input/floating-label/", "type": "component", "description": "Material-inspired floating label inputs with smooth animations", "tags": [ "input", "floating", "label", "material", "animated" ], "styles": [ "Empty", "Filled", "Password" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Glassmorphism Input", "path": "Tailwind/Components/Input/glassmorphism/", "type": "component", "description": "Frosted glass effect input fields with backdrop blur", "tags": [ "input", "glass", "glassmorphism", "blur", "frosted" ], "styles": [ "Light Background", "Dark Background", "Blur Heavy", "Card Form" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Gradient Border Input", "path": "Tailwind/Components/Input/gradient-border/", "type": "component", "description": "Input fields with gradient border effects for visual impact", "tags": [ "input", "gradient", "border", "colorful", "modern" ], "styles": [ "Blue Purple", "Cyan Blue", "Warm Dark", "Dark Inner" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Icon Left Input", "path": "Tailwind/Components/Input/icon-left/", "type": "component", "description": "Input fields with icons positioned on the left side for visual context", "tags": [ "input", "icon", "left-icon", "search", "form" ], "styles": [ "Search", "Email", "User", "Password" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Markdown Editor", "path": "Tailwind/Components/Input/markdown-editor/", "type": "component", "description": "Markdown editor with toolbar and dark mode support", "tags": [ "input", "markdown", "editor", "textarea", "content" ], "features": [ "input", "markdown", "editor", "textarea", "content" ], "styles": [ "Simple", "With Toolbar", "Dark Mode" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mention Input", "path": "Tailwind/Components/Input/mention-input/", "type": "component", "description": "Mention input components with user suggestions and tag styles", "tags": [ "input", "mention", "@", "tag", "user" ], "features": [ "input", "mention", "@", "tag", "user" ], "styles": [ "Standard", "Tag Style", "Dark" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Neumorphism Input", "path": "Tailwind/Components/Input/neumorphism/", "type": "component", "description": "Soft UI neumorphic input fields with subtle shadows and depth", "tags": [ "input", "neumorphism", "soft-ui", "shadow", "depth" ], "styles": [ "Flat Inner", "Inset Shadow", "Raised", "Dark Theme" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Number Stepper Input", "path": "Tailwind/Components/Input/number-stepper/", "type": "component", "description": "Input fields with increment/decrement buttons for quantity selection", "tags": [ "input", "number", "stepper", "quantity", "counter" ], "styles": [ "Default", "Compact", "Pill", "With Limits" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "OTP 6-Digit Input", "path": "Tailwind/Components/Input/otp-6-digit/", "type": "component", "description": "One-time password input components with verification code styling", "tags": [ "input", "otp", "verification", "code", "auth" ], "features": [ "input", "otp", "verification", "code", "auth" ], "styles": [ "Standard", "Dark", "With Resend" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Outlined Input", "path": "Tailwind/Components/Input/outlined/", "type": "component", "description": "Classic bordered input fields with focus ring effects and multiple sizes", "tags": [ "input", "outlined", "bordered", "form" ], "styles": [ "Default", "Small", "Large", "Pre-filled" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Password Toggle Input", "path": "Tailwind/Components/Input/password-toggle/", "type": "component", "description": "Password inputs with visibility toggle and optional strength indicator", "tags": [ "input", "password", "toggle", "visibility", "strength" ], "styles": [ "Default", "With Strength Meter", "Matched" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Phone Input", "path": "Tailwind/Components/Input/phone-input/", "type": "component", "description": "Phone number input components with country code selection and formatting", "tags": [ "input", "phone", "tel", "mobile", "contact" ], "features": [ "input", "phone", "tel", "mobile", "contact" ], "styles": [ "Standard", "With Country Code", "Formatted", "WhatsApp Style" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Radio Styled Input", "path": "Tailwind/Components/Input/radio-styled/", "type": "component", "description": "Styled radio button components with card and button group styles", "tags": [ "input", "radio", "select", "option", "form" ], "styles": [ "Default", "Card Style", "Button Group" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Range Slider Input", "path": "Tailwind/Components/Input/range-slider/", "type": "component", "description": "Range slider components for numeric value selection", "tags": [ "input", "range", "slider", "volume", "price" ], "styles": [ "Standard", "With Labels", "Dual Handle", "With Steps" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Rich Text Editor", "path": "Tailwind/Components/Input/rich-text-editor/", "type": "component", "description": "Rich text editor components with formatting toolbar and comment styles", "tags": [ "input", "rich-text", "editor", "wysiwyg", "content" ], "features": [ "input", "rich-text", "editor", "wysiwyg", "content" ], "styles": [ "Full Toolbar", "Comment Style" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Search with Autocomplete", "path": "Tailwind/Components/Input/search-with-autocomplete/", "type": "component", "description": "Search input components with autocomplete dropdown suggestions", "tags": [ "input", "search", "autocomplete", "dropdown", "suggestions" ], "features": [ "input", "search", "autocomplete", "dropdown", "suggestions" ], "styles": [ "Country Search", "Command Palette" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Search with Filters", "path": "Tailwind/Components/Input/search-with-filters/", "type": "component", "description": "Search input components with filter chips and advanced filtering options", "tags": [ "input", "search", "filter", "search-bar", "filter-chips" ], "features": [ "input", "search", "filter", "search-bar", "filter-chips" ], "styles": [ "Inline", "With Chips", "Advanced" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Input", "path": "Tailwind/Components/Input/split-input/", "type": "component", "description": "Multi-part input fields for structured data like cards, OTPs, and dates", "tags": [ "input", "split", "otp", "card", "date", "phone" ], "styles": [ "Card Number", "OTP Code", "Phone Number", "Date Picker" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Tag Input", "path": "Tailwind/Components/Input/tag-input/", "type": "component", "description": "Input fields with tag/chip functionality for multiple selections", "tags": [ "input", "tag", "chips", "skills", "categories" ], "styles": [ "Default", "Pill Style", "Categories" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Textarea", "path": "Tailwind/Components/Input/textarea/", "type": "component", "description": "Multi-line text input components with various styling options", "tags": [ "input", "textarea", "multi-line", "form", "text" ], "styles": [ "Default", "Auto-resize", "With Counter", "Chat Style" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Toggle Switch Input", "path": "Tailwind/Components/Input/toggle-switch/", "type": "component", "description": "Toggle switch components for boolean settings and preferences", "tags": [ "input", "toggle", "switch", "boolean", "settings" ], "styles": [ "Default", "With Labels", "Colored States" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Underline Input", "path": "Tailwind/Components/Input/underline/", "type": "component", "description": "Minimal underline style input fields with floating labels that animate on focus", "tags": [ "input", "underline", "minimal", "floating-label" ], "styles": [ "Default", "With Value", "Dark Variant" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Validation States Input", "path": "Tailwind/Components/Input/validation-states/", "type": "component", "description": "Input fields with validation feedback states for error, success, warning, and info", "tags": [ "input", "validation", "error", "success", "form", "feedback" ], "styles": [ "Error", "Success", "Warning", "Info" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "With Helper Input", "path": "Tailwind/Components/Input/with-helper/", "type": "component", "description": "Input fields with helper text, hints, and guidance for users", "tags": [ "input", "helper", "hint", "guidance", "form" ], "styles": [ "Plain Text", "Icon Hint", "Tooltip", "With Link" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "With Prefix Input", "path": "Tailwind/Components/Input/with-prefix/", "type": "component", "description": "Input fields with prefixed text or symbols for context", "tags": [ "input", "prefix", "url", "phone", "form" ], "styles": [ "HTTPS", "At Symbol", "Phone Code", "Domain Suffix" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "With Suffix Input", "path": "Tailwind/Components/Input/with-suffix/", "type": "component", "description": "Input fields with suffixed text, units, or action buttons", "tags": [ "input", "suffix", "unit", "measurement", "form" ], "styles": [ "Unit Suffix", "Action Button", "Dimension Fields", "Select Unit" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "Input", "tags": [ "@", "animated", "attachment", "auth", "autocomplete", "background", "blur", "boolean", "border", "bordered", "both-sides", "business", "calendar", "card", "categories", "character-count", "chat", "chat-input", "checkbox", "checkout", "chips", "clear", "code", "color", "colorful", "command-palette", "contact", "content", "corporate", "counter", "credit-card", "currency", "cvc", "cvv", "dark", "dark-mode", "data", "date", "depth", "disabled", "drag-drop", "dropdown", "editor", "email", "enterprise", "error", "expiration", "feedback", "file", "filled", "filter", "filter-chips", "floating", "floating-label", "focus", "form", "frosted", "glass", "glassmorphism", "gradient", "guidance", "helper", "hint", "icon", "industrial", "input", "label", "left-icon", "limit", "link", "locked", "mail", "markdown", "material", "measurement", "mention", "message", "messaging", "minimal", "mobile", "modern", "money", "multi-line", "neumorphism", "number", "option", "otp", "outlined", "password", "payment", "phone", "picker", "pill", "prefix", "premium", "price", "quantity", "radio", "range", "readonly", "rectangular", "rich-text", "right-icon", "rounded", "saas", "schedule", "search", "search-bar", "security", "select", "settings", "shadow", "sharp", "skills", "slider", "smooth", "soft-ui", "solid", "split", "startup", "stepper", "strength", "subscription", "success", "suffix", "suggestions", "swatches", "switch", "tag", "tags", "tel", "terminal", "text", "textarea", "theme", "toggle", "transition", "underline", "unit", "upload", "url", "user", "validation", "verification", "visibility", "volume", "website", "wysiwyg" ] }, { "name": "Modals", "path": "Tailwind/Components/Modals/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete modal component family with 30 production-ready variants covering every use case from basic to advanced interactions", "variantsCount": 24, "variants": [ { "name": "Bottom Sheet", "path": "Tailwind/Components/Modals/bottom-sheet/", "type": "component", "description": "Mobile-first bottom sheet with action grid, quick actions, and recent files list. Features drag handle and touch-friendly design.", "tags": [ "modal", "bottom sheet", "mobile", "actions", "quick actions" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Checkout Modal", "path": "Tailwind/Components/Modals/checkout-modal/", "type": "component", "description": "Full checkout flow modal with order items, summary with pricing breakdown, promo code input, and payment method selection.", "tags": [ "modal", "checkout", "cart", "payment", "shopping" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Command Palette", "path": "Tailwind/Components/Modals/command-palette/", "type": "component", "description": "Spotlight-style command palette with search input, categorized commands, keyboard shortcuts, and navigation hints.", "tags": [ "modal", "command", "palette", "spotlight", "search" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Confirmation Modal", "path": "Tailwind/Components/Modals/confirmation-modal/", "type": "component", "description": "Confirmation dialog for destructive or important actions. Features warning icon and centered layout for critical decisions.", "tags": [ "modal", "dialog", "confirmation", "warning", "action" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Cookie Consent Modal", "path": "Tailwind/Components/Modals/cookie-consent-modal/", "type": "component", "description": "GDPR-compliant cookie consent banner with privacy message, manage preferences option, and accept/reject all buttons.", "tags": [ "modal", "cookie", "gdpr", "privacy", "consent" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Delete Confirmation Modal", "path": "Tailwind/Components/Modals/delete-confirmation-modal/", "type": "component", "description": "Destructive action modal with danger header, item preview, and checkbox confirmation for secure deletion workflows.", "tags": [ "modal", "delete", "destructive", "danger", "confirmation" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Error Modal", "path": "Tailwind/Components/Modals/error-modal/", "type": "component", "description": "Error feedback modal with gradient header, error codes, explanation text, and action buttons for recovery options.", "tags": [ "modal", "error", "alert", "payment", "failed" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Feedback Modal", "path": "Tailwind/Components/Modals/feedback-modal/", "type": "component", "description": "Feedback collection modal with star rating, category selection, text area, and optional email field for user feedback.", "tags": [ "modal", "feedback", "rating", "review", "survey" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Form Modal", "path": "Tailwind/Components/Modals/form-modal/", "type": "component", "description": "Comprehensive form modal with various input types including text, select, textarea, date pickers, file upload, and checkboxes.", "tags": [ "modal", "form", "input", "contact", "proposal" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Fullscreen Modal", "path": "Tailwind/Components/Modals/fullscreen-modal/", "type": "component", "description": "Full-screen application modal with header toolbar, floating toolbars, canvas area, and footer status bar for editor-style interfaces.", "tags": [ "modal", "fullscreen", "editor", "workspace", "immersive" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Image Preview Modal", "path": "Tailwind/Components/Modals/image-preview-modal/", "type": "component", "description": "Full-screen image lightbox with navigation controls, thumbnails, caption, and action toolbar for image viewing.", "tags": [ "modal", "image", "lightbox", "gallery", "preview" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Loading Modal", "path": "Tailwind/Components/Modals/loading-modal/", "type": "component", "description": "Loading state modal with animated spinner, progress bar, status indicator, and processing message for async operations.", "tags": [ "modal", "loading", "spinner", "progress", "processing" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Login Modal", "path": "Tailwind/Components/Modals/login-modal/", "type": "component", "description": "Complete login form modal with email/password inputs, social login buttons, remember me option, and forgot password link.", "tags": [ "modal", "login", "signin", "authentication", "form" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Multi-Step Modal", "path": "Tailwind/Components/Modals/multi-step-modal/", "type": "component", "description": "Multi-step wizard modal with progress indicators, form fields, template selection, and step navigation.", "tags": [ "modal", "wizard", "multi-step", "form", "onboarding" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "OTP Verification Modal", "path": "Tailwind/Components/Modals/otp-verification-modal/", "type": "component", "description": "One-time password verification modal with individual digit inputs, countdown timer, and alternative verification methods.", "tags": [ "modal", "otp", "verification", "security", "auth" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Payment Modal", "path": "Tailwind/Components/Modals/payment-modal/", "type": "component", "description": "Credit card payment form modal with card inputs, security toggle, amount display, and SSL security badge.", "tags": [ "modal", "payment", "credit card", "checkout", "billing" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Settings Modal", "path": "Tailwind/Components/Modals/settings-modal/", "type": "component", "description": "Settings panel modal with sidebar navigation, profile editing, avatar upload, and toggle switches for preferences.", "tags": [ "modal", "settings", "preferences", "profile", "dashboard" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Share Modal", "path": "Tailwind/Components/Modals/share-modal/", "type": "component", "description": "Social sharing modal with platform buttons, link copy functionality, and collaborators preview for file sharing.", "tags": [ "modal", "share", "social", "link", "collaboration" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Signup Modal", "path": "Tailwind/Components/Modals/signup-modal/", "type": "component", "description": "Registration form modal with name fields, email, password with strength indicator, terms agreement, and social signup options.", "tags": [ "modal", "signup", "register", "create account", "form" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Slide Over", "path": "Tailwind/Components/Modals/slide-over/", "type": "component", "description": "Slide-over panel from the left with task details, subtasks, assignees, priority selection, and activity feed.", "tags": [ "modal", "slide-over", "task", "details", "sidebar" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Success Modal", "path": "Tailwind/Components/Modals/success-modal/", "type": "component", "description": "Success feedback modal with animated checkmark, confetti effects, and timestamp details card for completion confirmations.", "tags": [ "modal", "success", "checkmark", "confirmation", "completion" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Update Available Modal", "path": "Tailwind/Components/Modals/update-available-modal/", "type": "component", "description": "Software update notification modal with version info, changelog, file size, and update/later action buttons.", "tags": [ "modal", "update", "software", "release", "notification" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Video Modal", "path": "Tailwind/Components/Modals/video-modal/", "type": "component", "description": "Full-screen video player modal with custom controls, progress bar, thumbnail preview, and video metadata display.", "tags": [ "modal", "video", "player", "media", "embed" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Warning Modal", "path": "Tailwind/Components/Modals/warning-modal/", "type": "component", "description": "Warning notification modal with gradient icon, progress bar, and action options for user attention and resolution.", "tags": [ "modal", "warning", "alert", "storage", "notification" ], "styles": [ "Default" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "action", "actions", "alert", "auth", "authentication", "basic", "billing", "bottom sheet", "cart", "checkmark", "checkout", "collaboration", "command", "completion", "confirmation", "consent", "contact", "cookie", "create account", "credit card", "danger", "dashboard", "delete", "destructive", "details", "dialog", "drawer", "editor", "embed", "error", "failed", "feedback", "forgot", "form", "fullscreen", "gallery", "gdpr", "image", "immersive", "input", "lightbox", "link", "loading", "login", "media", "mobile", "modal", "multi-step", "notification", "onboarding", "otp", "overlay", "palette", "panel", "password", "payment", "player", "popup", "preferences", "preview", "pricing", "privacy", "processing", "profile", "progress", "proposal", "quick actions", "rating", "register", "release", "reset", "review", "saas", "search", "security", "settings", "share", "shopping", "sidebar", "signin", "signup", "slide-in", "slide-over", "social", "software", "spinner", "spotlight", "storage", "subscription", "success", "survey", "task", "team", "toast", "update", "upgrade", "verification", "video", "warning", "wizard", "workspace" ] }, { "name": "Navbar (Tailwind)", "path": "Tailwind/Components/Navbar/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Navigation bars — transparent, sticky, mega menu, dashboard, glass, and floating styles.", "variantsCount": 11, "variants": [ { "name": "Documentation Navbar — Apple Inspired", "path": "Tailwind/Components/Navbar/apple-inspired/", "type": "component", "description": "Apple Inspired navbar: Docs navbar.", "tags": [ "navbar", "navigation", "header", "apple-inspired" ], "features": [ "docs navbar", "inline search", "cmd-k hint", "version badge", "responsive search" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Navbar — Bento Grid", "path": "Tailwind/Components/Navbar/bento-grid/", "type": "component", "description": "Bento Grid navbar: Dashboard navbar.", "tags": [ "navbar", "navigation", "header", "bento-grid" ], "features": [ "dashboard navbar", "workspace switcher", "search + notifications", "avatar", "sidebar toggle" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Pill Navbar — Cyber", "path": "Tailwind/Components/Navbar/cyber/", "type": "component", "description": "Cyber navbar: Pill navbar.", "tags": [ "navbar", "navigation", "header", "cyber" ], "features": [ "pill navbar", "single container", "contained links", "CTA inside", "responsive collapse" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Spotlight Navbar — Editorial", "path": "Tailwind/Components/Navbar/editorial/", "type": "component", "description": "Editorial navbar: Floating glass nav.", "tags": [ "navbar", "navigation", "header", "editorial" ], "features": [ "floating glass nav", "rounded pill bar", "inset margin", "centered links", "CTA actions" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "App Bar Navbar — Elegant Luxury", "path": "Tailwind/Components/Navbar/elegant-luxury/", "type": "component", "description": "Elegant Luxury navbar: App bar navbar.", "tags": [ "navbar", "navigation", "header", "elegant-luxury" ], "features": [ "app bar navbar", "context label", "active count badge", "avatar", "responsive nav" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Centered Navbar — Futuristic", "path": "Tailwind/Components/Navbar/futuristic/", "type": "component", "description": "Futuristic navbar: Centered stacked nav.", "tags": [ "navbar", "navigation", "header", "futuristic" ], "features": [ "centered stacked nav", "logo on top", "links below", "no hamburger", "minimal height" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mega Menu Navbar — Minimal", "path": "Tailwind/Components/Navbar/minimal/", "type": "component", "description": "Minimal navbar: Hover mega menu.", "tags": [ "navbar", "navigation", "header", "minimal" ], "features": [ "hover mega menu", "6-feature panel", "dropdown positioning", "z-40 stacking", "responsive" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Navbar with Announcement — Neo Brutalism", "path": "Tailwind/Components/Navbar/neo-brutalism/", "type": "component", "description": "Neo Brutalism navbar: Announcement + navbar.", "tags": [ "navbar", "navigation", "header", "neo-brutalism" ], "features": [ "announcement + navbar", "top promo bar", "new badge", "dismissable-looking", "responsive nav" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Navbar — Soft UI (Neumorphism)", "path": "Tailwind/Components/Navbar/soft-ui/", "type": "component", "description": "Soft UI navbar: Split navbar.", "tags": [ "navbar", "navigation", "header", "soft-ui" ], "features": [ "split navbar", "links both sides", "centered CTA", "sign-in + start", "responsive" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Navbar — Startup Landing", "path": "Tailwind/Components/Navbar/startup-landing/", "type": "component", "description": "Startup Landing navbar: Floating capsule nav.", "tags": [ "navbar", "navigation", "header", "startup-landing" ], "features": [ "floating capsule nav", "absolute positioning", "z-40 stacking", "centered links", "spacer block" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Sticky Navbar — Vercel / Linear", "path": "Tailwind/Components/Navbar/vercel/", "type": "component", "description": "Vercel / Linear navbar: Sticky positioning.", "tags": [ "navbar", "navigation", "header", "vercel" ], "features": [ "sticky positioning", "surface-backed bar", "z-30 stacking", "CTA actions", "mobile menu" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "navbar", "tags": [ "apple-inspired", "bento-grid", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "futuristic", "gradient-mesh", "header", "minimal", "monochrome", "navigation", "neo-brutalism", "soft-ui", "startup-landing", "vercel" ], "searchTerms": [ "navbar", "navbar", "tailwind", "section" ] }, { "name": "Navigation", "path": "Tailwind/Components/Navigation/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete navigation component family with 35 production-ready variants covering every use case from basic navbars to sidebars, breadcrumbs, pagination, and mega navigation", "variantsCount": 30, "variants": [ { "name": "Admin Sidebar", "path": "Tailwind/Components/Navigation/admin-sidebar/", "type": "component", "description": "Feature-rich dark admin sidebar with search, badge counts, and organized sections. Designed for comprehensive admin panels.", "tags": [ "navigation", "sidebar", "admin", "dark", "management" ], "features": [ "Dark theme with slate colors", "Integrated search bar", "Badge counts for items", "Organized section headers", "Admin role display" ], "styles": [ "sidebar", "admin", "dark", "management" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Basic Navbar", "path": "Tailwind/Components/Navigation/basic-navbar/", "type": "component", "description": "Clean horizontal navigation with essential links and actions. Perfect foundation for any marketing or product website.", "tags": [ "navigation", "navbar", "header", "horizontal" ], "features": [ "Responsive mobile menu", "Hover states", "Active link styling", "CTA button" ], "styles": [ "navbar", "header", "horizontal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Blog Navbar", "path": "Tailwind/Components/Navigation/blog-navbar/", "type": "component", "description": "Clean blog navigation with category links, subscribe CTA, and minimal design. Perfect for content-focused publishing platforms.", "tags": [ "navigation", "navbar", "blog", "content", "publishing" ], "features": [ "Clean minimal design", "Category navigation", "Subscribe CTA", "Search icon", "Content-focused layout" ], "styles": [ "navbar", "blog", "content", "publishing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bottom Navigation", "path": "Tailwind/Components/Navigation/bottom-navigation/", "type": "component", "description": "Mobile bottom tab navigation with centered floating action button. Perfect for social media and content creation apps.", "tags": [ "navigation", "bottom", "mobile", "tabs", "fab" ], "features": [ "Bottom tab bar layout", "Floating centered action button", "Badge notification indicator", "Profile avatar in navigation", "Hover states" ], "styles": [ "bottom", "mobile", "tabs", "fab" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Breadcrumb", "path": "Tailwind/Components/Navigation/breadcrumb/", "type": "component", "description": "Hierarchical path navigation showing user's location. Multiple styles with separators, icons, and collapsed variants.", "tags": [ "navigation", "breadcrumb", "path", "hierarchy" ], "features": [ "Standard separator style", "Icon-enhanced variant", "Collapsed variant", "aria-current page indicator", "SEO-friendly structure" ], "styles": [ "breadcrumb", "path", "hierarchy" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Centered Navbar", "path": "Tailwind/Components/Navigation/centered-navbar/", "type": "component", "description": "Logo-centered navigation with symmetrical link groups on both sides. Ideal for brand-focused marketing sites.", "tags": [ "navigation", "navbar", "centered", "logo" ], "features": [ "Centered logo with absolute positioning", "Balanced navigation groups", "Rounded CTA button", "Gradient logo text" ], "styles": [ "navbar", "centered", "logo" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Collapsible Sidebar", "path": "Tailwind/Components/Navigation/collapsible-sidebar/", "type": "component", "description": "Expandable sidebar with toggle functionality and collapsible menu sections. Features smooth animations and compact mode.", "tags": [ "navigation", "sidebar", "collapsible", "expandable" ], "features": [ "Toggle collapse functionality", "Collapsible menu sections", "Smooth CSS transitions", "Compact mode with hidden text", "Active state highlighting" ], "styles": [ "sidebar", "collapsible", "expandable" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Corporate Navbar", "path": "Tailwind/Components/Navigation/corporate-navbar/", "type": "component", "description": "Professional corporate navigation with search, help center, notifications, and user profile. Designed for enterprise applications.", "tags": [ "navigation", "navbar", "corporate", "enterprise", "dashboard" ], "features": [ "Professional corporate styling", "Integrated search bar", "User profile with role", "Notification indicator", "Help button" ], "styles": [ "navbar", "corporate", "enterprise", "dashboard" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Sidebar", "path": "Tailwind/Components/Navigation/dashboard-sidebar/", "type": "component", "description": "Professional dashboard sidebar with icon-based navigation, grouped sections, and user profile. Perfect for analytics and business dashboards.", "tags": [ "navigation", "sidebar", "dashboard", "admin" ], "features": [ "Fixed sidebar layout", "Icon-based navigation", "Grouped menu sections", "Active state highlighting", "User profile with logout" ], "styles": [ "sidebar", "dashboard", "admin" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dock Navigation", "path": "Tailwind/Components/Navigation/dock-navigation/", "type": "component", "description": "macOS-style dock navigation with magnification effect on hover. Modern operating system inspired design.", "tags": [ "navigation", "dock", "macOS", "icons" ], "features": [ "Magnification effect", "Tooltips on hover", "Gradient app icons", "Backdrop blur", "OS-style aesthetic" ], "styles": [ "dock", "macOS", "icons" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Documentation Navbar", "path": "Tailwind/Components/Navigation/documentation-navbar/", "type": "component", "description": "Dark-themed documentation navigation with version selector, search, and developer-focused links. Perfect for SDK and framework docs.", "tags": [ "navigation", "navbar", "docs", "documentation", "developer" ], "features": [ "Version selector dropdown", "Command palette search hint", "GitHub link", "Dark theme optimized for reading", "Changelog link" ], "styles": [ "navbar", "docs", "documentation", "developer" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Ecommerce Navbar", "path": "Tailwind/Components/Navigation/ecommerce-navbar/", "type": "component", "description": "Full-featured ecommerce navigation with top bar, search, categories, cart, wishlist, and account links. Complete shopping experience.", "tags": [ "navigation", "navbar", "ecommerce", "shop", "cart" ], "features": [ "Top information bar", "Integrated search with button", "Cart with item count badge", "Category navigation", "Wishlist and account buttons" ], "styles": [ "navbar", "ecommerce", "shop", "cart" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Navigation", "path": "Tailwind/Components/Navigation/floating-navigation/", "type": "component", "description": "Floating pill-shaped navigation bar with backdrop blur. Modern and elegant mobile-first navigation design.", "tags": [ "navigation", "floating", "pill", "mobile" ], "features": [ "Floating pill shape", "Backdrop blur effect", "Responsive labels", "Active state styling", "Hover transitions" ], "styles": [ "floating", "pill", "mobile" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Glass Navbar", "path": "Tailwind/Components/Navigation/glass-navbar/", "type": "component", "description": "Elegant frosted glass effect navigation with backdrop blur. Perfect for creative platforms and modern landing pages.", "tags": [ "navigation", "navbar", "glass", "blur", "frosted" ], "features": [ "Frosted glass effect with backdrop blur", "Semi-transparent backgrounds", "Gradient avatar", "Search bar with glass styling" ], "styles": [ "navbar", "glass", "blur", "frosted" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Gradient Navbar", "path": "Tailwind/Components/Navigation/gradient-navbar/", "type": "component", "description": "Vibrant gradient navigation with multi-color backgrounds. Perfect for creative brands and bold marketing pages.", "tags": [ "navigation", "navbar", "gradient", "colorful", "marketing" ], "features": [ "Multi-color gradient background", "Semi-transparent logo background", "High contrast text", "Bold marketing aesthetic" ], "styles": [ "navbar", "gradient", "colorful", "marketing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mega Navigation", "path": "Tailwind/Components/Navigation/mega-navigation/", "type": "component", "description": "Multi-column dropdown navigation with rich content. Perfect for e-commerce and content-heavy websites.", "tags": [ "navigation", "mega", "dropdown", "menu", "ecommerce" ], "features": [ "Multi-column dropdown layout", "Category grouping", "Featured promo section", "Hover reveal animation", "Cart with badge" ], "styles": [ "mega", "dropdown", "menu", "ecommerce" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mini Sidebar", "path": "Tailwind/Components/Navigation/mini-sidebar/", "type": "component", "description": "Compact icon-only sidebar with tooltips. Perfect for music apps, dashboards, and space-efficient navigation.", "tags": [ "navigation", "sidebar", "mini", "icon", "compact" ], "features": [ "Icon-only compact design", "Tooltip titles on hover", "Dark theme", "Profile avatar", "Add action button" ], "styles": [ "sidebar", "mini", "icon", "compact" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mobile Navigation", "path": "Tailwind/Components/Navigation/mobile-navigation/", "type": "component", "description": "Native-style mobile app navigation with top header and bottom tab bar. Perfect for fintech, social, and mobile-first applications.", "tags": [ "navigation", "mobile", "bottom", "tabs", "app" ], "features": [ "Top header with logo and actions", "Bottom tab navigation", "Safe area support", "Active state styling", "Notification badge" ], "styles": [ "mobile", "bottom", "tabs", "app" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Multi-level Navigation", "path": "Tailwind/Components/Navigation/multi-level-navigation/", "type": "component", "description": "Nested dropdown navigation with multiple levels. Perfect for complex documentation and admin interfaces.", "tags": [ "navigation", "nested", "dropdown", "multi-level" ], "features": [ "Nested dropdown structure", "3 levels deep", "Hover reveal", "Arrow indicators", "Active state highlighting" ], "styles": [ "nested", "dropdown", "multi-level" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Offcanvas Sidebar", "path": "Tailwind/Components/Navigation/offcanvas-sidebar/", "type": "component", "description": "Slide-out navigation for mobile with overlay. Perfect for food delivery apps, e-commerce, and mobile-first interfaces.", "tags": [ "navigation", "sidebar", "mobile", "offcanvas", "drawer" ], "features": [ "Slide-out animation", "Dark overlay backdrop", "Close button and tap-outside dismiss", "Category sections with emojis", "User profile at bottom" ], "styles": [ "sidebar", "mobile", "offcanvas", "drawer" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Pagination", "path": "Tailwind/Components/Navigation/pagination/", "type": "component", "description": "Page navigation component with multiple styles. Includes standard, compact, and first/last variants.", "tags": [ "navigation", "pagination", "pages", "navigation" ], "features": [ "Standard numbered pagination", "Previous/Next arrows", "Ellipsis for large page counts", "Compact variant with results count", "First/Last page buttons" ], "styles": [ "pagination", "pages" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Profile Navigation", "path": "Tailwind/Components/Navigation/profile-navigation/", "type": "component", "description": "User profile dropdown with header, menu items, and sign out action. Perfect for authenticated app navigation.", "tags": [ "navigation", "profile", "dropdown", "user" ], "features": [ "Profile avatar button", "Gradient header with user info", "Menu navigation items", "Sign out action", "Click-outside dismiss" ], "styles": [ "profile", "dropdown", "user" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "SaaS Navbar", "path": "Tailwind/Components/Navigation/saas-navbar/", "type": "component", "description": "Modern SaaS navigation with beta badge and marketing-focused layout. Perfect for software product landing pages.", "tags": [ "navigation", "navbar", "saas", "software", "landing" ], "features": [ "Beta badge indicator", "Modern SaaS styling", "Minimal navigation", "Strong CTA focus" ], "styles": [ "navbar", "saas", "software", "landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Search Navigation", "path": "Tailwind/Components/Navigation/search-navigation/", "type": "component", "description": "Search-focused navigation with filters and category pills. Perfect for file managers, docs, and content platforms.", "tags": [ "navigation", "search", "filter", "finder" ], "features": [ "Large search input", "Filter action buttons", "Category pills/chips", "Responsive layout", "Icon integration" ], "styles": [ "search", "filter", "finder" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Navbar", "path": "Tailwind/Components/Navigation/split-navbar/", "type": "component", "description": "Dark-themed split navigation with logo on left, centered links, and user actions on right. Perfect for SaaS dashboards.", "tags": [ "navigation", "navbar", "dark", "saas", "dashboard" ], "features": [ "Dark theme with slate colors", "Hover dropdown menu", "Notification bell icon", "User avatar" ], "styles": [ "navbar", "dark", "saas", "dashboard" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Step Navigation", "path": "Tailwind/Components/Navigation/step-navigation/", "type": "component", "description": "Multi-step process indicator with completed, current, and upcoming states. Perfect for wizards and checkout flows.", "tags": [ "navigation", "steps", "wizard", "progress", "checkout" ], "features": [ "Horizontal step indicator", "Completed step with checkmark", "Current active step", "Upcoming steps grayed out", "Connectors between steps" ], "styles": [ "steps", "wizard", "progress", "checkout" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Sticky Navbar", "path": "Tailwind/Components/Navigation/sticky-navbar/", "type": "component", "description": "Sticky navigation with backdrop blur that stays visible while scrolling. Includes integrated search bar and healthcare-themed design.", "tags": [ "navigation", "navbar", "sticky", "backdrop", "search" ], "features": [ "Sticky positioning with backdrop blur", "Integrated search bar", "Notification bell", "Healthcare-themed design" ], "styles": [ "navbar", "sticky", "backdrop", "search" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Tab Navigation", "path": "Tailwind/Components/Navigation/tab-navigation/", "type": "component", "description": "Horizontal tab navigation with bottom border indicator. Perfect for page sections and content organization.", "tags": [ "navigation", "tabs", "segments" ], "features": [ "Bottom border indicator", "Icon support", "Active state styling", "Hover transitions", "Pills variant" ], "styles": [ "tabs", "segments" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Transparent Navbar", "path": "Tailwind/Components/Navigation/transparent-navbar/", "type": "component", "description": "Overlay navigation designed for hero sections and landing pages. Features semi-transparent styling that blends with any background.", "tags": [ "navigation", "navbar", "transparent", "overlay", "landing" ], "features": [ "Absolute positioned", "Semi-transparent styling", "Hero-optimized layout", "CTA button with shadow" ], "styles": [ "navbar", "transparent", "overlay", "landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Vertical Navigation", "path": "Tailwind/Components/Navigation/vertical-navigation/", "type": "component", "description": "Stacked vertical menu items with icon support. Perfect for sidebar layouts and settings pages.", "tags": [ "navigation", "vertical", "sidebar", "menu" ], "features": [ "Vertical stacked layout", "Icon support", "Active state highlighting", "Hover transitions", "Rounded item styling" ], "styles": [ "vertical", "sidebar", "menu" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "account", "admin", "app", "backdrop", "blog", "blur", "bottom", "breadcrumb", "cart", "category", "centered", "checkout", "collapsible", "colorful", "compact", "content", "corporate", "dark", "dashboard", "developer", "directory", "dock", "docs", "documentation", "drawer", "dropdown", "ecommerce", "enterprise", "expandable", "fab", "filter", "finder", "floating", "frosted", "glass", "gradient", "hamburger", "header", "hierarchy", "horizontal", "icon", "icons", "landing", "logo", "macOS", "management", "marketing", "mega", "menu", "mini", "mobile", "multi-level", "navbar", "navigation", "nested", "offcanvas", "overlay", "pages", "pagination", "path", "pill", "preferences", "profile", "progress", "publishing", "saas", "search", "segments", "settings", "shop", "sidebar", "software", "steps", "sticky", "tabs", "toolbar", "transparent", "tree", "user", "vertical", "wizard" ] }, { "name": "Progress", "path": "Tailwind/Components/Progress/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete progress component family with 8 production-ready variants covering loading and completion states from linear bars and spinners to skeletons, steppers, timelines, and multi-file uploads", "variantsCount": 8, "variants": [ { "name": "Circular Spinner", "path": "Tailwind/Components/Progress/circular-spinner/", "type": "component", "description": "Spinning ring loading indicator in four sizes (xs, sm, md, lg) and multiple colors, with an optional text label. Pure CSS animation via Tailwind's animate-spin — no JavaScript required.", "tags": [ "progress", "spinner", "loading", "circular", "ring", "indicator", "css-only" ], "features": [ "4 sizes", "color variants", "optional label", "pure CSS animation", "role=status", "aria-live polite", "aria-hidden on decorative svg" ], "styles": [ "xs", "sm", "md", "lg", "Colored", "With label" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Goal Progress Tracker", "path": "Tailwind/Components/Progress/goal-progress/", "type": "component", "description": "Fundraising goal tracker card with an animated gradient progress bar, milestone markers, live stats, and quick-amount sponsor actions. Reaching the goal flips the card into a funded success state.", "tags": [ "progress", "goal", "tracker", "fundraising", "milestones", "calm-vibrant" ], "features": [ "calm-vibrant design language", "animated gradient progress bar with milestone dots", "role=progressbar with aria-valuenow and aria-valuetext", "quick-amount chips with aria-pressed", "funded success state at 100%", "aria-live polite status announcements", "reduced-motion safe transitions" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Linear Progress Bar", "path": "Tailwind/Components/Progress/linear-bar/", "type": "component", "description": "Animated horizontal progress bar with percentage label and gradient fill. Includes determinate (value-driven), completed (green), and indeterminate (sliding) modes. Accessible via role=progressbar with aria-valuenow/valuetext.", "tags": [ "progress", "bar", "linear", "loading", "determinate", "indeterminate", "percentage" ], "features": [ "determinate fill animation", "indeterminate sliding mode", "percentage label", "gradient fill", "completed state", "role=progressbar", "aria-valuenow/valuetext", "tabular-nums" ], "styles": [ "Determinate", "Indeterminate", "Completed" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Segmented Stepper", "path": "Tailwind/Components/Progress/segmented-stepper/", "type": "component", "description": "Horizontal multi-step progress stepper for checkouts and wizards. Each step shows completed (checkmark, filled), current (number, outlined), or upcoming (muted) state, with a connecting progress line that fills as steps complete.", "tags": [ "progress", "stepper", "wizard", "checkout", "steps", "multi-step", "navigation" ], "features": [ "completed/current/upcoming states", "connecting progress line", "checkmark on completed steps", "responsive labels", "interactive next/back", "data-stepper-step driven", "aria-hidden on decorative icons", "focus-visible ring" ], "styles": [ "Completed", "Current", "Upcoming", "3-step" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Skeleton Loader", "path": "Tailwind/Components/Progress/skeleton-loader/", "type": "component", "description": "Shimmering placeholder skeletons that match the shape of incoming content - card image, avatar, title, and text lines, plus a list-row variant. Pure CSS shimmer animation with prefers-reduced-motion support.", "tags": [ "progress", "skeleton", "placeholder", "loading", "shimmer", "card", "list", "css-only" ], "features": [ "card skeleton", "list-row skeleton", "shimmer animation", "layout-shift prevention", "prefers-reduced-motion safe", "role=status", "aria-live polite", "aria-label" ], "styles": [ "Card", "List row", "Text block" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Step Progress Timeline", "path": "Tailwind/Components/Progress/step-progress/", "type": "component", "description": "Vertical milestone timeline showing ordered stages with status dots (completed green check, current blue pulse with ring, pending muted), timestamps, and descriptions. Ideal for order tracking, deployment logs, and onboarding.", "tags": [ "progress", "timeline", "milestone", "tracking", "vertical", "status", "steps", "order" ], "features": [ "completed/current/pending states", "connecting vertical rail", "status dots with ring", "timestamps", "descriptions", "aria-hidden on decorative icons", "semantic ordered list", "responsive" ], "styles": [ "Completed", "Current", "Pending", "Vertical" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Upload Progress", "path": "Tailwind/Components/Progress/upload-progress/", "type": "component", "description": "Multi-file upload list where each file shows an animated progress bar and percentage, then transitions to a green success check when complete. Files can be removed mid-upload. Call addFile(name) to push files programmatically.", "tags": [ "progress", "upload", "files", "bar", "queue", "success", "feedback" ], "features": [ "per-file progress bars", "percentage labels", "success state transition", "remove mid-upload", "programmatic addFile()", "role=progressbar", "aria-valuenow", "tabular-nums", "focus-visible ring" ], "styles": [ "Uploading", "Completed", "Removable" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Usage Meter", "path": "Tailwind/Components/Progress/usage-meter/", "type": "component", "description": "Dark, minimal plan-usage panel with four accessible quota meters (bandwidth, invocations, image optimization, build minutes). Meters hydrate from data-used/data-limit attributes, animate to their values, and flag near-limit state in text — ideal for billing and account settings pages.", "tags": [ "progress", "usage", "meter", "quota", "billing", "dashboard", "minimal-vercel", "dark" ], "features": [ "Minimal Vercel design language", "data-attribute hydration (data-used / data-limit / data-unit)", "role=progressbar with aria-valuenow / aria-valuemax / aria-valuetext", "near-limit state communicated in text, not color alone", "animated fills with prefers-reduced-motion guard", "refresh action with aria-busy and spin feedback", "single teal accent on near-black with hairline borders", "tabular-nums values formatted with Intl.NumberFormat" ], "styles": [ "dark", "multi-meter", "animated", "near-limit" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "bar", "card", "checkout", "circular", "css-only", "determinate", "feedback", "files", "indeterminate", "indicator", "linear", "list", "loading", "milestone", "multi-step", "navigation", "order", "percentage", "placeholder", "progress", "queue", "ring", "shimmer", "skeleton", "spinner", "status", "stepper", "steps", "success", "timeline", "tracking", "upload", "vertical", "wizard" ] }, { "name": "Tables", "path": "Tailwind/Components/Tables/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete table component family with 20 production-ready variants covering every use case from basic data tables to expandable rows, filters, sorting, and pagination", "variantsCount": 18, "variants": [ { "name": "Analytics Table", "path": "Tailwind/Components/Tables/analytics-table/", "type": "component", "description": "Marketing analytics table showing traffic sources with channel icons, conversion metrics, revenue data, and inline sparkline trend charts.", "tags": [ "table", "analytics", "marketing", "metrics", "conversions", "dashboard" ], "features": [ "channel icons", "conversion rates", "sparkline charts", "revenue metrics", "trend indicators" ], "styles": [ "analytics", "marketing", "metrics", "conversions" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Basic Table", "path": "Tailwind/Components/Tables/basic-table/", "type": "component", "description": "Clean and professional data table with project information including icons, status badges, dates, and budget. Features subtle hover states and well-organized data hierarchy.", "tags": [ "table", "basic", "data", "projects", "dashboard" ], "features": [ "project icons", "status badges", "hover states", "clean hierarchy", "budget display" ], "styles": [ "basic", "data", "projects", "dashboard" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Compact Table", "path": "Tailwind/Components/Tables/compact-table/", "type": "component", "description": "Dense cryptocurrency market data table with compact spacing. Features cryptocurrency logos, inline sparkline charts, percentage changes with color coding, and efficient use of horizontal space.", "tags": [ "table", "compact", "crypto", "market", "dense", "data" ], "features": [ "compact spacing", "crypto logos", "sparklines", "percentage changes", "market data" ], "styles": [ "compact", "crypto", "market", "dense" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Expandable Table", "path": "Tailwind/Components/Tables/expandable-table/", "type": "component", "description": "Project management table with expandable rows. Click rows to reveal team members, dates, and budget details with animated expansion and color-coded borders.", "tags": [ "table", "expandable", "accordion", "projects", "nested", "interactive" ], "features": [ "expandable rows", "team avatars", "progress bars", "animated expansion", "detail panels" ], "styles": [ "expandable", "accordion", "projects", "nested" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "File Manager Table", "path": "Tailwind/Components/Tables/file-manager-table/", "type": "component", "description": "File explorer table with file type icons, modification dates, file sizes, and type labels. Features color-coded file type indicators and hover states.", "tags": [ "table", "files", "documents", "explorer", "manager", "media" ], "features": [ "file icons", "file sizes", "modification dates", "type labels", "hover states" ], "styles": [ "files", "documents", "explorer", "manager" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Filterable Table", "path": "Tailwind/Components/Tables/filterable-table/", "type": "component", "description": "Task management table with multi-filter dropdowns. Filter by status, priority, and category with reset functionality. Ideal for project management dashboards.", "tags": [ "table", "filter", "filterable", "tasks", "project", "management" ], "features": [ "multi-filter", "dropdown filters", "reset button", "task icons", "priority badges" ], "styles": [ "filter", "filterable", "tasks", "project" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Invoice Table", "path": "Tailwind/Components/Tables/invoice-table/", "type": "component", "description": "Financial invoice tracking table with client logos, invoice numbers, payment status badges, due dates, and action buttons for viewing and marking paid.", "tags": [ "table", "invoice", "billing", "finance", "payments", "accounting" ], "features": [ "client logos", "invoice numbers", "due dates", "status badges", "payment actions" ], "styles": [ "invoice", "billing", "finance", "payments" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Leaderboard Table", "path": "Tailwind/Components/Tables/leaderboard-table/", "type": "component", "description": "Gaming leaderboard with dark theme, medal badges, player avatars, levels, scores, and win rate. Features ranked display with premium styling for top 3 positions.", "tags": [ "table", "leaderboard", "gaming", "rankings", "scores", "dark" ], "features": [ "dark theme", "medal badges", "player avatars", "levels", "scores", "win rate" ], "styles": [ "leaderboard", "gaming", "rankings", "scores" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Order Management Table", "path": "Tailwind/Components/Tables/order-management-table/", "type": "component", "description": "E-commerce order tracking table with customer info, order details, status badges with animations, shipping locations, and action buttons for order management.", "tags": [ "table", "orders", "ecommerce", "shipping", "tracking", "management" ], "features": [ "order IDs", "customer avatars", "status badges", "shipping locations", "action buttons" ], "styles": [ "orders", "ecommerce", "shipping", "tracking" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Paginated Table", "path": "Tailwind/Components/Tables/paginated-table/", "type": "component", "description": "Subscription management table with complete pagination controls. Features per-page selection, page numbers, previous/next navigation, and result count display.", "tags": [ "table", "pagination", "paginated", "subscriptions", "billing", "navigation" ], "features": [ "pagination controls", "per-page selector", "page numbers", "navigation arrows", "result count" ], "styles": [ "pagination", "paginated", "subscriptions", "billing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing Comparison Table", "path": "Tailwind/Components/Tables/pricing-comparison-table/", "type": "component", "description": "Feature comparison matrix for SaaS pricing plans. Highlights popular tier, shows checkmarks and X marks for features, includes CTA buttons in footer row.", "tags": [ "table", "pricing", "comparison", "features", "plans", "saas" ], "features": [ "feature matrix", "highlighted column", "checkmarks", "pricing display", "CTA buttons" ], "styles": [ "pricing", "comparison", "features", "plans" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Product Inventory Table", "path": "Tailwind/Components/Tables/product-inventory-table/", "type": "component", "description": "E-commerce inventory management table with product images, SKU codes, category badges, stock level bars, and status indicators for stock tracking.", "tags": [ "table", "inventory", "products", "ecommerce", "stock", "catalog" ], "features": [ "product images", "SKU codes", "stock bars", "category badges", "status indicators" ], "styles": [ "inventory", "products", "ecommerce", "stock" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Responsive Table", "path": "Tailwind/Components/Tables/responsive-table/", "type": "component", "description": "Order management table with horizontal scrolling for mobile devices. Features customer avatars, order status badges, and adapts to different screen sizes while maintaining readability.", "tags": [ "table", "responsive", "orders", "horizontal scroll", "mobile" ], "features": [ "horizontal scroll", "mobile-friendly", "customer avatars", "status badges", "adaptive layout" ], "styles": [ "responsive", "orders", "horizontal scroll", "mobile" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Searchable Table", "path": "Tailwind/Components/Tables/searchable-table/", "type": "component", "description": "Article library table with real-time search functionality. Filters by title, excerpt, author, and category with smooth animations and a no-results empty state.", "tags": [ "table", "search", "searchable", "articles", "blog", "filter" ], "features": [ "real-time search", "multi-column filter", "empty state", "article thumbnails", "category badges" ], "styles": [ "search", "searchable", "articles", "blog" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Selectable Table", "path": "Tailwind/Components/Tables/selectable-table/", "type": "component", "description": "Employee selection table with bulk actions. Features select all checkbox, individual row selection, animated bulk action button, and row highlighting on selection.", "tags": [ "table", "selectable", "checkbox", "bulk", "selection", "actions" ], "features": [ "checkbox selection", "select all", "bulk actions", "animated button", "row highlighting" ], "styles": [ "selectable", "checkbox", "bulk", "selection" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Sortable Table", "path": "Tailwind/Components/Tables/sortable-table/", "type": "component", "description": "Employee directory table with interactive column sorting. Click any column header to sort data. Supports alphabetical, numeric, and custom data sorting with visual feedback.", "tags": [ "table", "sortable", "sorting", "employees", "directory", "interactive" ], "features": [ "click to sort", "multiple column types", "visual feedback", "performance bars", "hover states" ], "styles": [ "sortable", "sorting", "employees", "directory" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Striped Table", "path": "Tailwind/Components/Tables/striped-table/", "type": "component", "description": "Recruitment pipeline table with alternating row colors for improved readability. Features candidate photos, match scores with progress bars, and application status badges.", "tags": [ "table", "striped", "recruitment", "candidates", "pipeline" ], "features": [ "alternating rows", "candidate photos", "match scores", "progress bars", "status badges" ], "styles": [ "striped", "recruitment", "candidates", "pipeline" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "User Management Table", "path": "Tailwind/Components/Tables/user-management-table/", "type": "component", "description": "Professional admin table for managing users with avatars, role icons, department assignments, online status indicators, and action menus. Includes sidebar navigation for admin dashboard context.", "tags": [ "table", "admin", "dashboard", "users", "management", "team" ], "features": [ "user avatars", "status indicators", "role icons", "action menus", "department display" ], "styles": [ "admin", "dashboard", "users", "management" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "accordion", "accounting", "actions", "admin", "analytics", "animated", "articles", "basic", "billing", "blog", "bordered", "bulk", "business", "candidates", "catalog", "checkbox", "compact", "comparison", "conversions", "crypto", "dark", "dashboard", "data", "dense", "directory", "documents", "ecommerce", "employees", "events", "expandable", "explorer", "features", "files", "filter", "filterable", "finance", "financial", "gaming", "horizontal scroll", "hover", "interactive", "inventory", "invoice", "leaderboard", "management", "manager", "market", "marketing", "media", "metrics", "mobile", "navigation", "nested", "orders", "paginated", "pagination", "payments", "pipeline", "plans", "pricing", "products", "project", "projects", "rankings", "recruitment", "responsive", "revenue", "saas", "scores", "search", "searchable", "selectable", "selection", "shipping", "sortable", "sorting", "stock", "striped", "subscriptions", "table", "tasks", "team", "tracking", "users" ] }, { "name": "Tabs", "path": "Tailwind/Components/Tabs/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete tab component family with 15 production-ready variants covering documentation, dashboards, settings, mobile navigation, and animated indicators", "variantsCount": 12, "variants": [ { "name": "Animated Tabs", "path": "Tailwind/Components/Tabs/animated-tabs/", "type": "component", "description": "Tabs with a smoothly animating sliding underline indicator that glides between active tabs. Great for project management workspaces with board, timeline, calendar, and files views.", "tags": [ "tabs", "animated", "indicator", "slider", "project", "workspace" ], "features": [ "sliding underline", "smooth transition", "resize-aware", "kanban/timeline/calendar panels", "arrow-key navigation" ], "styles": [ "sliding underline", "smooth transition", "resize-aware", "kanban/timeline/calendar panels", "arrow-key navigation" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bordered Tabs", "path": "Tailwind/Components/Tabs/bordered-tabs/", "type": "component", "description": "Bordered enterprise tab set with a connected content panel, status badges, and data tables. Designed for dense operational dashboards like order and inventory management.", "tags": [ "tabs", "bordered", "enterprise", "dashboard", "operations", "data" ], "features": [ "connected content panel", "status badges", "data table", "audit log", "arrow-key navigation" ], "styles": [ "connected content panel", "status badges", "data table", "audit log", "arrow-key navigation" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Card Tabs", "path": "Tailwind/Components/Tabs/card-tabs/", "type": "component", "description": "Card switching interface where each tab is a selectable pricing card with a radio-style indicator. Selecting a card reveals its feature panel. Ideal for plan pickers.", "tags": [ "tabs", "cards", "pricing", "plans", "selection", "radio" ], "features": [ "selectable cards", "radio indicator", "popular badge", "feature panels", "arrow-key navigation" ], "styles": [ "selectable cards", "radio indicator", "popular badge", "feature panels", "arrow-key navigation" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Tabs", "path": "Tailwind/Components/Tabs/dashboard-tabs/", "type": "component", "description": "Analytics dashboard tabs switching metric panels (revenue, traffic, conversion, audience). Includes KPI cards, trend deltas, and a simple bar chart.", "tags": [ "tabs", "dashboard", "analytics", "kpi", "charts", "metrics" ], "features": [ "KPI cards", "trend deltas", "bar chart", "legend", "arrow-key navigation" ], "styles": [ "KPI cards", "trend deltas", "bar chart", "legend", "arrow-key navigation" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Icon Tabs", "path": "Tailwind/Components/Tabs/icon-tabs/", "type": "component", "description": "Settings tabs with prominent icons in a responsive grid. Active tab highlights its icon container. Great for account, security, and billing configuration.", "tags": [ "tabs", "icons", "settings", "account", "grid", "responsive" ], "features": [ "icon-led grid layout", "active icon container", "form panels", "arrow-key navigation", "mobile 2-col grid" ], "styles": [ "icon-led grid layout", "active icon container", "form panels", "arrow-key navigation", "mobile 2-col grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mobile Tabs", "path": "Tailwind/Components/Tabs/mobile-tabs/", "type": "component", "description": "Bottom mobile tab navigation bar with icons, labels, and a notification badge. Switches app screens within a phone-style frame. Built for native-feeling mobile web apps.", "tags": [ "tabs", "mobile", "bottom-nav", "app", "icons", "navigation" ], "features": [ "bottom tab bar", "icon + label", "notification badge", "app screen panels", "arrow-key navigation" ], "styles": [ "bottom tab bar", "icon + label", "notification badge", "app screen panels", "arrow-key navigation" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Pill Tabs", "path": "Tailwind/Components/Tabs/pill-tabs/", "type": "component", "description": "SaaS dashboard pill tabs with count badges for customer segments. Filled active pill, outlined inactive pills, and a contextual action toolbar.", "tags": [ "tabs", "pill", "saas", "dashboard", "crm", "badges" ], "features": [ "filled active pill", "count badges", "action toolbar", "responsive wrap", "arrow-key navigation" ], "styles": [ "filled active pill", "count badges", "action toolbar", "responsive wrap", "arrow-key navigation" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Scrollable Tabs", "path": "Tailwind/Components/Tabs/scrollable-tabs/", "type": "component", "description": "Horizontal scrollable category tabs with fade edges and hidden scrollbar for mobile marketplaces. Active tab auto-scrolls into view. Built for many categories on small screens.", "tags": [ "tabs", "scrollable", "categories", "mobile", "ecommerce", "horizontal-scroll" ], "features": [ "fade edge gradients", "hidden scrollbar", "auto-scroll active", "many categories", "touch-friendly" ], "styles": [ "fade edge gradients", "hidden scrollbar", "auto-scroll active", "many categories", "touch-friendly" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Segmented Tabs", "path": "Tailwind/Components/Tabs/segmented-tabs/", "type": "component", "description": "iOS-style segmented control with a sliding indicator that animates between segments. Used for switching time ranges and compact view modes.", "tags": [ "tabs", "segmented", "ios", "slider", "indicator", "control" ], "features": [ "sliding indicator", "smooth animation", "compact control", "arrow-key navigation", "resize-aware" ], "styles": [ "sliding indicator", "smooth animation", "compact control", "arrow-key navigation", "resize-aware" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Settings Tabs", "path": "Tailwind/Components/Tabs/settings-tabs/", "type": "component", "description": "Full settings page with a vertical nav tab list and content panels including general, account, appearance, integrations, and a danger zone.", "tags": [ "tabs", "settings", "vertical", "forms", "danger-zone", "appearance" ], "features": [ "vertical nav", "form panels", "theme picker", "danger zone", "mobile horizontal scroll" ], "styles": [ "vertical nav", "form panels", "theme picker", "danger zone", "mobile horizontal scroll" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Underline Tabs", "path": "Tailwind/Components/Tabs/underline-tabs/", "type": "component", "description": "Modern developer documentation tabs with a moving underline indicator, version badge, and embedded code samples. Built for docs sites and API references.", "tags": [ "tabs", "underline", "documentation", "developer", "api", "code" ], "features": [ "moving underline indicator", "version badge", "code samples", "arrow-key navigation", "overflow scroll" ], "styles": [ "moving underline indicator", "version badge", "code samples", "arrow-key navigation", "overflow scroll" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Vertical Tabs", "path": "Tailwind/Components/Tabs/vertical-tabs/", "type": "component", "description": "Documentation sidebar with vertical tabs controlling article content. Collapses to a horizontal scroll on mobile. Ideal for docs sites and onboarding flows.", "tags": [ "tabs", "vertical", "sidebar", "documentation", "onboarding" ], "features": [ "vertical orientation", "aria-orientation", "arrow up/down nav", "mobile horizontal scroll", "article panels" ], "styles": [ "vertical orientation", "aria-orientation", "arrow up/down nav", "mobile horizontal scroll", "article panels" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "tabs", "navigation", "tabbed", "segmented", "content-switcher" ] }, { "name": "Toasts", "path": "Tailwind/Components/Toasts/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete toast notification family with 7 production-ready variants covering every feedback use case from basic auto-dismiss to persistent progress and stacked queues", "variantsCount": 7, "variants": [ { "name": "Action Toast", "path": "Tailwind/Components/Toasts/action-toast/", "type": "component", "description": "Toast with an inline action button (Undo). Fires an onAction callback when the action button is clicked, otherwise auto-dismisses after 6 seconds. Ideal for reversible destructive actions like delete.", "tags": [ "toast", "notification", "undo", "action", "destructive", "feedback", "reversible" ], "features": [ "inline action button", "onAction callback", "6s auto-dismiss", "pause on hover", "close button", "role status", "aria-live polite", "focus-visible ring" ], "styles": [ "Undo action", "Destructive feedback", "Reversible" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Glass Toast", "path": "Tailwind/Components/Toasts/glass-toast/", "type": "component", "description": "Frosted-glass notification toasts in the glassmorphism design language — translucent backdrop-blur panels with semantic glowing accents, a live countdown progress bar, and pause-on-hover, presented over an animated aurora mesh backdrop.", "tags": [ "toast", "notification", "glassmorphism", "glass", "aurora", "dark", "countdown", "feedback" ], "features": [ "glassmorphism design language", "frosted backdrop-blur surfaces", "animated aurora mesh backdrop", "4 semantic types with glowing accents", "countdown progress bar", "pause on hover", "role=alert for errors/warnings", "role=status for success/info", "aria-live polite region", "prefers-reduced-motion safe", "focus-visible ring", "responsive" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Toast", "path": "Tailwind/Components/Toasts/minimal-toast/", "type": "component", "description": "Compact pill-shaped toast for terse, icon-led feedback like \"Copied!\" or \"Saved\". No body text — just an icon and a label. Appears centered at the bottom and fades after 2 seconds.", "tags": [ "toast", "notification", "minimal", "compact", "pill", "copied", "inline", "feedback" ], "features": [ "pill shape", "centered bottom position", "icon + label only", "2s auto-dismiss", "dark theme", "pause on hover", "role status", "aria-live polite" ], "styles": [ "Pill", "Compact", "Dark theme" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Persistent Toast", "path": "Tailwind/Components/Toasts/persistent-toast/", "type": "component", "description": "Toast that stays open until explicitly dismissed, with a shrinking progress bar showing the remaining time. The bar pauses on hover and resumes on leave. Ideal for upload results and important notices that shouldn't be missed.", "tags": [ "toast", "notification", "persistent", "progress", "countdown", "upload", "feedback" ], "features": [ "countdown progress bar", "stays open until dismissed", "pause on hover", "resume on leave", "close button", "role status", "aria-live polite", "focus-visible ring" ], "styles": [ "Progress bar", "Countdown", "Upload result" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Promise Toast", "path": "Tailwind/Components/Toasts/promise-toast/", "type": "component", "description": "Async-operation toast that opens in a loading state and transitions in place to success or error when a promise settles. Pass any promise to showPromiseToast() with loading/success/error copy; once settled it auto-dismisses behind a pause-on-hover countdown bar.", "tags": [ "toast", "notification", "promise", "async", "loading", "neo-brutal" ], "features": [ "promise-driven loading → success / error transition", "showPromiseToast() API", "pause-on-hover countdown bar", "role=status / role=alert by state", "Escape key + focus-aware dismissal", "reduced-motion safe", "neo-brutal design language" ], "styles": [ "Promise states", "Countdown bar", "Neo Brutal", "Hard shadow" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Stacked Toasts", "path": "Tailwind/Components/Toasts/stacked-toasts/", "type": "component", "description": "Notification queue that stacks incoming toasts vertically. New toasts push older ones up with a staggered slide-in, and each clears itself on its own 5-second timer. Includes a dismiss-all control.", "tags": [ "toast", "notification", "stack", "queue", "feed", "activity", "multiple" ], "features": [ "vertical stacking", "staggered slide-in", "individual auto-dismiss", "dismiss-all control", "pause on hover", "close button", "role status", "aria-live polite" ], "styles": [ "Queue", "Multiple", "Dismiss all" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Status Toasts", "path": "Tailwind/Components/Toasts/status-toasts/", "type": "component", "description": "Four semantic toast variants — success, error, warning, info — each with a matching icon, accent color, and ARIA role. Errors and warnings use role=alert; success and info use role=status.", "tags": [ "toast", "notification", "success", "error", "warning", "info", "feedback", "alert" ], "features": [ "4 semantic types", "matching icons and colors", "role=alert for errors/warnings", "role=status for success/info", "auto-dismiss", "pause on hover", "close button", "focus-visible ring" ], "styles": [ "Success", "Error", "Warning", "Info" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "action", "activity", "alert", "async", "auto-dismiss", "basic", "compact", "copied", "countdown", "destructive", "error", "feed", "feedback", "info", "inline", "loading", "minimal", "multiple", "neo-brutal", "notification", "persistent", "pill", "progress", "promise", "queue", "reversible", "stack", "success", "toast", "undo", "upload", "warning" ] }, { "name": "Tooltips", "path": "Tailwind/Components/Tooltips/", "tech": "Tailwind CSS", "type": "component", "category": "Components", "description": "Complete tooltip component family with 7 production-ready variants covering every use case from basic hover hints to directional positioning, selection-triggered toolbars, rich help content, delayed reveal, icon-button labeling, and status indicators.", "variantsCount": 7, "variants": [ { "name": "Delayed Tooltip", "path": "Tailwind/Components/Tooltips/delayed-tooltip/", "type": "component", "description": "Tooltip that waits 600ms before appearing on hover so quick mouse-overs don't flicker, then hides instantly on exit. Uses CSS transition-delay - no JavaScript timers. Appears instantly on keyboard focus.", "tags": [ "tooltip", "delay", "hover", "transition-delay", "css-only", "anti-flicker" ], "features": [ "600ms show delay", "instant hide on exit", "instant on keyboard focus", "transition-delay driven", "pure CSS no JS", "role=tooltip", "aria-describedby" ], "styles": [ "Delayed show", "Instant hide" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Directional Tooltip", "path": "Tailwind/Components/Tooltips/directional-tooltip/", "type": "component", "description": "Tooltips in all four directions - top, right, bottom, left - with arrows that reposition automatically. Direction is controlled by the data-tooltip-pos attribute. Pure CSS, no JavaScript.", "tags": [ "tooltip", "direction", "position", "arrow", "top", "right", "bottom", "left", "css-only" ], "features": [ "4 directions", "auto-positioned arrows", "data-tooltip-pos attribute", "hover + focus triggers", "fade + slide animation", "pure CSS no JS", "z-index layering" ], "styles": [ "Top", "Right", "Bottom", "Left" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Hotspot Tooltip", "path": "Tailwind/Components/Tooltips/hotspot-tooltip/", "type": "component", "description": "Onboarding hotspot beacon that opens a multi-step guided tour tooltip. Click the pulsing beacon to start; Next/Done walk the steps, Skip or Escape dismiss it.", "tags": [ "tooltip", "hotspot", "tour", "onboarding", "beacon", "minimal-vercel" ], "features": [ "multi-step guided tour", "pulsing beacon trigger", "step progress segments", "Escape and outside-click dismiss", "aria-expanded + role dialog", "optional kbd hint per step", "reduced-motion safe", "minimal-vercel design language" ], "styles": [ "Onboarding tour", "Beacon trigger", "Minimal Vercel", "Dark surface" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Icon Tooltip", "path": "Tailwind/Components/Tooltips/icon-tooltip/", "type": "component", "description": "Tooltip on an icon-only button - the key accessibility use case where the tooltip serves as the visible label. Each icon button carries aria-label and a role=tooltip companion so screen readers announce the action. Pure CSS.", "tags": [ "tooltip", "icon", "icon-button", "label", "accessibility", "toolbar", "css-only" ], "features": [ "icon-button labeling", "aria-label", "role=tooltip companion", "hover + focus triggers", "compact tooltip sizing", "pure CSS no JS", "focus-visible ring" ], "styles": [ "Share", "Settings", "Delete", "Toolbar" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Rich Tooltip", "path": "Tailwind/Components/Tooltips/rich-tooltip/", "type": "component", "description": "Wide tooltip with rich content - a title plus a multi-line description - ideal for help text on form fields and complex UI elements. Pure CSS using two data attributes, hover or focus to reveal.", "tags": [ "tooltip", "rich", "help", "multiline", "form", "css-only", "accessibility" ], "features": [ "title + description content", "multi-line wrapping", "wider tooltip box", "hover + focus triggers", "shadow elevation", "pure CSS no JS", "role=tooltip", "aria-describedby", "icon trigger" ], "styles": [ "Title + description", "Multi-line", "Wide box" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Selection Toolbar", "path": "Tailwind/Components/Tooltips/selection-toolbar/", "type": "component", "description": "A floating toolbar that appears above any selected text inside its article scope, offering Highlight (real wrap), Copy, and Share actions. Positions itself over the selection with viewport clamping and re-tracks on scroll and resize.", "tags": [ "tooltip", "selection", "toolbar", "neo-brutal", "highlight", "annotation" ], "features": [ "Floating toolbar above selected text", "Highlight wraps the range in a real ", "Copy and Share with clipboard fallback", "Screen-reader status via aria-live region", "Viewport clamping with scroll/resize re-positioning", "Neo-brutal design language with flat ink surfaces" ], "styles": [ "Selection trigger", "Highlight", "Copy", "Share" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Status Tooltip", "path": "Tailwind/Components/Tooltips/status-tooltip/", "type": "component", "description": "Status indicator dot with a color-themed tooltip - success (green), warning (amber), error (red), info (blue). The tooltip background and arrow match the semantic status. Pure CSS, hover or focus to reveal.", "tags": [ "tooltip", "status", "indicator", "dot", "success", "warning", "error", "info", "css-only" ], "features": [ "status dot indicators", "4 semantic colors", "themed tooltip + arrow", "data-tooltip-status attribute", "hover + focus triggers", "pure CSS no JS", "aria-label", "role=tooltip companion" ], "styles": [ "Success", "Warning", "Error", "Info" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "tags": [ "accessibility", "anti-flicker", "arrow", "bottom", "css-only", "delay", "direction", "dot", "error", "focus", "form", "help", "hover", "icon", "icon-button", "indicator", "info", "label", "left", "multiline", "position", "rich", "right", "status", "success", "toolbar", "tooltip", "top", "transition-delay", "warning" ] }, { "name": "404 (Tailwind)", "path": "Tailwind/Sections/404/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "404 error pages — minimal, funny, terminal, space, retro, and gradient themes.", "variantsCount": 15, "variants": [ { "name": "Premium SaaS 404 — Apple Inspired", "path": "Tailwind/Sections/404/apple-inspired/", "type": "section", "description": "Apple Inspired 404 page: Premium saas 404.", "tags": [ "404", "error", "not-found", "error-page", "apple-inspired" ], "features": [ "premium SaaS 404", "brand header", "error badge", "centered headline", "dual CTA" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard 404 — Bento Grid", "path": "Tailwind/Sections/404/bento-grid/", "type": "section", "description": "Bento Grid 404 page: Dashboard 404.", "tags": [ "404", "error", "not-found", "error-page", "bento-grid" ], "features": [ "dashboard 404", "bento card", "workspace header", "warning icon", "dual CTA" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Moody 404 — Cyber", "path": "Tailwind/Sections/404/cyber/", "type": "section", "description": "Cyber 404 page: Moody 404.", "tags": [ "404", "error", "not-found", "error-page", "cyber" ], "features": [ "moody 404", "accent glow", "oversized numeral", "dark hero", "dual CTA" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Gradient 404 — Dark Premium", "path": "Tailwind/Sections/404/dark-premium/", "type": "section", "description": "Dark Premium 404 page: Gradient 404.", "tags": [ "404", "error", "not-found", "error-page", "dark-premium" ], "features": [ "gradient 404", "oversized numeral", "single CTA" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Developer Theme 404 — Edge Glassmorphism", "path": "Tailwind/Sections/404/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism 404 page: Developer 404.", "tags": [ "404", "error", "not-found", "error-page", "edge-glassmorphism" ], "features": [ "edge glassmorphism", "terminal panel", "mesh background", "dual CTA" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Retro 404 — Editorial", "path": "Tailwind/Sections/404/editorial/", "type": "section", "description": "Editorial 404 page: Retro 404.", "tags": [ "404", "error", "not-found", "error-page", "editorial" ], "features": [ "retro 404", "drop-shadow numeral", "uppercase tracking", "display font", "dual CTA" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Spotlight 404 — Elegant Luxury", "path": "Tailwind/Sections/404/elegant-luxury/", "type": "section", "description": "Elegant Luxury 404 page: Spotlight 404.", "tags": [ "404", "error", "not-found", "error-page", "elegant-luxury" ], "features": [ "elegant luxury", "gold accents", "spotlight card", "dual CTA" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Vercel-Inspired 404 — Futuristic", "path": "Tailwind/Sections/404/futuristic/", "type": "section", "description": "Futuristic 404 page: Vercel-inspired 404.", "tags": [ "404", "error", "not-found", "error-page", "futuristic" ], "features": [ "futuristic 404", "cyan glow", "dual CTA" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal 404 — Gradient Mesh", "path": "Tailwind/Sections/404/gradient-mesh/", "type": "section", "description": "Gradient Mesh 404 page: Minimal 404.", "tags": [ "404", "error", "not-found", "error-page", "gradient-mesh" ], "features": [ "gradient mesh", "animated background", "dual CTA" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Illustration 404 — Minimal", "path": "Tailwind/Sections/404/minimal/", "type": "section", "description": "Minimal 404 page: Illustration 404.", "tags": [ "404", "error", "not-found", "error-page", "minimal" ], "features": [ "illustration 404", "SVG crosshair art", "centered", "dual CTA", "no images needed" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bold 404 — Monochrome", "path": "Tailwind/Sections/404/monochrome/", "type": "section", "description": "Monochrome 404 page: Brutalist 404.", "tags": [ "404", "error", "not-found", "error-page", "monochrome" ], "features": [ "monochrome 404", "tilted card", "dual CTA" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Space Theme 404 — Neo Brutalism", "path": "Tailwind/Sections/404/neo-brutalism/", "type": "section", "description": "Neo Brutalism 404 page: Space theme 404.", "tags": [ "404", "error", "not-found", "error-page", "neo-brutalism" ], "features": [ "space theme 404", "starfield bg", "satellite icon", "glowing numeral", "dual CTA" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Funny 404 — Soft UI (Neumorphism)", "path": "Tailwind/Sections/404/soft-ui/", "type": "section", "description": "Soft UI 404 page: Funny 404.", "tags": [ "404", "error", "not-found", "error-page", "soft-ui" ], "features": [ "funny 404", "ghost icon", "playful copy", "dual CTA", "centered" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Abstract 404 — Startup Landing", "path": "Tailwind/Sections/404/startup-landing/", "type": "section", "description": "Startup Landing 404 page: Abstract 404.", "tags": [ "404", "error", "not-found", "error-page", "startup-landing" ], "features": [ "startup landing 404", "abstract illustration", "split layout", "dual CTA" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Terminal 404 — Vercel / Linear", "path": "Tailwind/Sections/404/vercel/", "type": "section", "description": "Vercel / Linear 404 page: Terminal 404.", "tags": [ "404", "error", "not-found", "error-page", "vercel" ], "features": [ "terminal 404", "pure mono layout", "shell prompt", "blinking cursor", "dual CTA" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "404", "tags": [ "404", "apple-inspired", "bento-grid", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "error", "error-page", "futuristic", "gradient-mesh", "minimal", "monochrome", "neo-brutalism", "not-found", "soft-ui", "startup-landing", "vercel" ] }, { "name": "AI Product (Tailwind)", "path": "Tailwind/Sections/AI-Product/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "AI product sections — chat interfaces, model comparison, prompt libraries, and agent workflows.", "variantsCount": 12, "variants": [ { "name": "Agent Workflow — Neo-Brutalism", "path": "Tailwind/Sections/AI-Product/agent-workflow/neo-brutalism/", "type": "section", "description": "Brutalist agent execution stepper visualizing Plan, Search, Reason, Act, Reflect, Respond as a connected sequence. Hard black borders, offset shadows, and flat bright accents color each step by status. A Run button drives steps through pending → running → done on a timer with a filling progress bar and a live log line. Respects prefers-reduced-motion.", "tags": [ "agent-workflow", "stepper", "neo-brutalism", "brutalist", "workflow", "ai-agent", "progress", "execution" ], "features": [ "hard offset shadows", "flat bright accent palette", "step status colors (pending/running/done)", "filling progress bar", "Run button with timer-driven progression", "live run log line", "pulsing active-step node", "prefers-reduced-motion aware", "keyboard accessible buttons" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Agent Workflow — Sharp Glassmorphism", "path": "Tailwind/Sections/AI-Product/agent-workflow/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass agent execution stepper floating over a living gradient mesh, visualizing Plan, Search, Reason, Act, Reflect, Respond. Translucent layered nodes glow cyan when done and fuchsia when running, with a gradient filling progress bar. A Run button drives steps through pending → running → done on a timer with a live log line. Respects prefers-reduced-motion.", "tags": [ "agent-workflow", "stepper", "glassmorphism", "glass", "workflow", "ai-agent", "progress", "gradient" ], "features": [ "backdrop-blur glass panel", "animated gradient mesh backdrop", "luminous edge highlight", "cyan done + fuchsia running node glow", "gradient filling progress bar", "Run button with timer-driven progression", "live run log line", "pulsing active-step node", "prefers-reduced-motion aware", "keyboard accessible buttons" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Agent Workflow — Vercel", "path": "Tailwind/Sections/AI-Product/agent-workflow/vercel/", "type": "section", "description": "Refined dark monochrome agent execution stepper visualizing Plan, Search, Reason, Act, Reflect, Respond. Hairline borders, generous spacing, and a single teal accent color each step by status. A Run button drives steps through pending → running → done on a timer with a glowing filling progress bar and a live log line. Respects prefers-reduced-motion.", "tags": [ "agent-workflow", "stepper", "vercel", "dark-mode", "workflow", "ai-agent", "progress", "minimal" ], "features": [ "dark monochrome palette", "hairline borders + glow", "single teal accent", "step status colors (pending/running/done)", "glowing filling progress bar", "Run button with timer-driven progression", "live run log line", "pulsing active-step node", "prefers-reduced-motion aware", "keyboard accessible buttons" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "AI Chat Interface — Neo-Brutalism", "path": "Tailwind/Sections/AI-Product/ai-chat-interface/neo-brutalism/", "type": "section", "description": "Brutalist AI chat surface with hard black borders, offset drop shadows, flat bright accents, a typing indicator, prompt suggestion chips, and a wired input bar. Press-down hover states and monospace labels give it a raw, editorial character.", "tags": [ "ai-chat", "chatbot", "neo-brutalism", "brutalist", "chat-interface", "assistant", "prompt", "dark-accents" ], "features": [ "hard offset shadows", "flat bright accent palette", "press-down hover states", "animated typing indicator", "clickable prompt chips", "wired send + auto-reply", "custom scrollbar styling", "keyboard accessible inputs" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "AI Chat Interface — Sharp Glassmorphism", "path": "Tailwind/Sections/AI-Product/ai-chat-interface/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass AI chat surface floating over a living gradient mesh. Translucent layered panels, luminous edges, a cyan glow status dot, a bouncing typing indicator, prompt chips, and a gradient send button create depth and atmosphere.", "tags": [ "ai-chat", "chatbot", "glassmorphism", "glass", "chat-interface", "assistant", "gradient", "vibrant" ], "features": [ "backdrop-blur glass panels", "animated gradient mesh backdrop", "luminous edge highlights", "glowing status dot", "bouncing typing indicator", "pill prompt chips", "gradient send button", "keyboard accessible inputs" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "AI Chat Interface — Vercel", "path": "Tailwind/Sections/AI-Product/ai-chat-interface/vercel/", "type": "section", "description": "Refined dark monochrome AI chat surface with hairline borders, a subtle conic glow, a glowing ready-state dot, a streaming typing indicator, prompt chips, and a minimal input bar. Generous spacing and a single teal accent echo a premium dev-tool aesthetic.", "tags": [ "ai-chat", "chatbot", "vercel", "dark-mode", "chat-interface", "assistant", "minimal", "monochrome" ], "features": [ "dark monochrome palette", "hairline borders + glow", "glowing status dot", "bouncing typing indicator", "pill prompt chips", "wired send + auto-reply", "thin custom scrollbar", "keyboard accessible inputs" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Model Comparison — Neo-Brutalism", "path": "Tailwind/Sections/AI-Product/model-comparison/neo-brutalism/", "type": "section", "description": "Brutalist LLM comparison arena — three models (GPT-Snip, Claude-Snip, Llama-Snip) shown side by side with hard black borders, offset drop shadows, and flat bright accents per model. A 'Best for' metric selector crowns a winner, animates the metric bars, and updates the recommendation footer.", "tags": [ "model-comparison", "llm", "benchmark", "neo-brutalism", "brutalist", "comparison-table", "winner", "metrics", "ai-product" ], "features": [ "side-by-side model cards", "animated metric bars (context, speed, cost, quality)", "Best-for metric selector with winner highlight", "live recommendation footer", "hard offset shadows and flat accent palette", "press-down hover states", "radiogroup semantics with aria-checked", "keyboard accessible controls" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Model Comparison — Sharp Glassmorphism", "path": "Tailwind/Sections/AI-Product/model-comparison/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass LLM comparison panel floating over a vivid animated gradient mesh — three models compared side by side with luminous edges, gradient metric bars, and a glowing winner highlight that responds to the 'Best for' metric selector. Requires a colored backdrop behind the panel for the glass to read.", "tags": [ "model-comparison", "llm", "benchmark", "glassmorphism", "frosted-glass", "comparison-table", "winner", "metrics", "ai-product" ], "features": [ "side-by-side frosted-glass model cards", "animated gradient metric bars", "Best-for metric selector with glowing winner highlight", "gradient mesh backdrop with cyan glow accents", "live recommendation footer", "backdrop blur and luminous edges", "radiogroup semantics with aria-checked", "keyboard accessible controls" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Model Comparison — Vercel", "path": "Tailwind/Sections/AI-Product/model-comparison/vercel/", "type": "section", "description": "Refined dark monochrome LLM comparison panel — three models compared side by side with hairline borders, generous spacing, and a single teal accent. A 'Best for' metric selector moves the glowing winner marker, animates the metric bars, and updates the recommendation footer.", "tags": [ "model-comparison", "llm", "benchmark", "vercel", "comparison-table", "winner", "metrics", "dark", "ai-product" ], "features": [ "side-by-side model cards", "animated hairline metric bars", "Best-for metric selector with moving winner marker", "teal accent glow on the winning card", "live recommendation footer", "dark monochrome surfaces with hairline borders", "radiogroup semantics with aria-checked", "keyboard accessible controls" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Prompt Library — Neo-Brutalism", "path": "Tailwind/Sections/AI-Product/prompt-library/neo-brutalism/", "type": "section", "description": "Brutalist gallery of reusable prompt templates — hard black borders, offset drop shadows, and flat bright accents per category. Includes category filter chips (Writing, Code, Analysis, Image), live search, and a working copy-to-clipboard button on every card with a brief 'Copied!' state.", "tags": [ "prompt-library", "prompts", "templates", "neo-brutalism", "brutalist", "copy-clipboard", "filter", "gallery", "ai-product" ], "features": [ "hard offset shadows", "flat bright accent palette", "press-down hover states", "category filter chips (Writing/Code/Analysis/Image)", "live search across cards", "copy-to-clipboard with Copied! state", "empty state for no matches", "keyboard accessible controls" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Prompt Library — Sharp Glassmorphism", "path": "Tailwind/Sections/AI-Product/prompt-library/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass prompt gallery floating over a vivid animated gradient mesh — translucent panels, backdrop blur, and luminous gradient accents. Includes category filter chips (Writing, Code, Analysis, Image), live search, and a working copy-to-clipboard button on every card with a checkmark 'Copied!' state. Requires a colored backdrop behind the panel for the glass to read.", "tags": [ "prompt-library", "prompts", "templates", "glassmorphism", "frosted-glass", "gradient-mesh", "copy-clipboard", "filter", "ai-product" ], "features": [ "frosted-glass panels with backdrop blur", "animated gradient mesh backdrop", "gradient primary accents and cyan glow dot", "luminous top-edge highlight", "category filter chips (Writing/Code/Analysis/Image)", "live search across cards", "copy-to-clipboard with checkmark Copied! state", "empty state for no matches", "keyboard accessible controls" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Prompt Library — Vercel", "path": "Tailwind/Sections/AI-Product/prompt-library/vercel/", "type": "section", "description": "Refined dark monochrome prompt gallery with hairline borders, generous spacing, and a single teal accent. Includes category filter chips (Writing, Code, Analysis, Image), live search, and a working copy-to-clipboard button on every card that flips to a checkmark 'Copied!' state.", "tags": [ "prompt-library", "prompts", "templates", "vercel", "dark", "copy-clipboard", "filter", "gallery", "ai-product" ], "features": [ "dark monochrome surfaces", "hairline borders and subtle hover", "single teal accent dot", "category filter chips (Writing/Code/Analysis/Image)", "live search across cards", "copy-to-clipboard with checkmark Copied! state", "empty state for no matches", "keyboard accessible controls" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "ai-product", "tags": [ "agent-workflow", "ai-agent", "ai-chat", "ai-product", "assistant", "benchmark", "brutalist", "chat-interface", "chatbot", "comparison-table", "copy-clipboard", "dark", "dark-accents", "dark-mode", "execution", "filter", "frosted-glass", "gallery", "glass", "glassmorphism", "gradient", "gradient-mesh", "llm", "metrics", "minimal", "model-comparison", "monochrome", "neo-brutalism", "progress", "prompt", "prompt-library", "prompts", "stepper", "templates", "vercel", "vibrant", "winner", "workflow" ] }, { "name": "App UI (Tailwind)", "path": "Tailwind/Sections/App-UI/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "App UI sections — dashboard overviews and kanban boards for in-product surfaces.", "variantsCount": 6, "variants": [ { "name": "Dashboard Overview — Neo-Brutalism", "path": "Tailwind/Sections/App-UI/dashboard-overview/neo-brutalism/", "type": "section", "description": "Brutalist analytics dashboard overview with KPI stat cards and trend deltas, a pure-SVG dual bar chart, a recent-activity feed, and a wired 7d/30d/90d range selector that swaps hardcoded datasets live. Hard black borders, offset drop shadows, and flat bright accents.", "tags": [ "dashboard", "analytics", "neo-brutalism", "brutalist", "kpi", "stat-cards", "chart", "bar-chart", "activity-feed", "app-ui" ], "features": [ "KPI stat cards with trend deltas", "pure SVG bar chart (no libraries)", "wired 7d/30d/90d range switcher", "live dataset swap on range change", "recent activity feed", "hard offset shadows", "flat bright accent palette", "keyboard accessible range buttons" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Overview — Sharp Glassmorphism", "path": "Tailwind/Sections/App-UI/dashboard-overview/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass analytics dashboard overview floating over a living animated gradient mesh. Translucent KPI stat cards with trend deltas, a pure-SVG area + line chart, a recent-activity feed, and a wired 7d/30d/90d range selector that swaps hardcoded datasets live. Luminous edges and a gradient primary accent.", "tags": [ "dashboard", "analytics", "glassmorphism", "glass", "kpi", "stat-cards", "chart", "area-chart", "activity-feed", "app-ui", "gradient", "vibrant" ], "features": [ "backdrop-blur glass panels", "animated gradient mesh backdrop", "luminous edge highlights", "KPI stat cards with trend deltas", "pure SVG area + line chart (no libraries)", "wired 7d/30d/90d range switcher", "live dataset swap on range change", "glowing cyan status dot", "recent activity feed", "keyboard accessible range buttons" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Overview — Vercel", "path": "Tailwind/Sections/App-UI/dashboard-overview/vercel/", "type": "section", "description": "Refined dark monochrome analytics dashboard overview with KPI stat cards and trend deltas, a pure-SVG area + line chart, a recent-activity feed, and a wired 7d/30d/90d range selector that swaps hardcoded datasets live. Hairline borders, generous spacing, and a single teal accent.", "tags": [ "dashboard", "analytics", "vercel", "dark-mode", "kpi", "stat-cards", "chart", "area-chart", "activity-feed", "app-ui", "minimal", "monochrome" ], "features": [ "dark monochrome palette", "KPI stat cards with trend deltas", "pure SVG area + line chart (no libraries)", "wired 7d/30d/90d range switcher", "live dataset swap on range change", "glowing teal status dot", "hairline borders + subtle glow", "recent activity feed", "keyboard accessible range buttons" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Kanban Board — Neo-Brutalism", "path": "Tailwind/Sections/App-UI/kanban-board/neo-brutalism/", "type": "section", "description": "Brutalist project kanban board with hard black borders, offset drop shadows, and flat bright column headers. Draggable task cards move between Backlog, In Progress, Review, and Done via the HTML5 Drag and Drop API, count badges update live, and an add-card affordance creates new tasks per column. Press-down hover states and monospace labels keep the raw, editorial feel.", "tags": [ "kanban", "board", "neo-brutalism", "brutalist", "drag-and-drop", "task-board", "app-ui", "project-management" ], "features": [ "hard offset shadows on cards and panel", "flat bright accent column headers", "press-down hover states", "HTML5 drag-and-drop between columns", "live-updating count badges", "add-card affordance per column", "placeholder drop indicator", "keyboard-focusable draggable cards" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Kanban Board — Sharp Glassmorphism", "path": "Tailwind/Sections/App-UI/kanban-board/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass project kanban board floating over a living gradient mesh. Translucent columns, luminous top-edge highlights, a cyan glow status dot, gradient priority chips, and count chips. Draggable task cards move between Backlog, In Progress, Review, and Done via the HTML5 Drag and Drop API, count badges update live, and an add-card affordance creates new tasks per column. Requires a colored backdrop for the glass to read.", "tags": [ "kanban", "board", "glassmorphism", "glass", "drag-and-drop", "task-board", "app-ui", "project-management", "gradient", "vibrant" ], "features": [ "backdrop-blur glass columns", "animated gradient mesh backdrop", "luminous top-edge highlights", "glowing cyan status dots", "gradient priority chips", "HTML5 drag-and-drop between columns", "live-updating count chips", "keyboard-focusable draggable cards" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Kanban Board — Vercel", "path": "Tailwind/Sections/App-UI/kanban-board/vercel/", "type": "section", "description": "Refined dark monochrome project kanban board with hairline borders, a subtle radial glow, a single teal status accent, and count pills. Draggable task cards move between Backlog, In Progress, Review, and Done via the HTML5 Drag and Drop API, count badges update live, and an add-card affordance creates new tasks per column. Generous spacing and a premium dev-tool aesthetic.", "tags": [ "kanban", "board", "vercel", "dark-mode", "drag-and-drop", "task-board", "app-ui", "project-management", "minimal", "monochrome" ], "features": [ "dark monochrome palette", "hairline borders + radial glow", "glowing teal status dots", "pill count badges", "HTML5 drag-and-drop between columns", "live-updating counts", "dashed add-card affordance", "keyboard-focusable draggable cards" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "app-ui", "tags": [ "activity-feed", "analytics", "app-ui", "area-chart", "bar-chart", "board", "brutalist", "chart", "dark-mode", "dashboard", "drag-and-drop", "glass", "glassmorphism", "gradient", "kanban", "kpi", "minimal", "monochrome", "neo-brutalism", "project-management", "stat-cards", "task-board", "vercel", "vibrant" ] }, { "name": "Blog (Tailwind)", "path": "Tailwind/Sections/Blog/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Blog sections — featured articles, magazine, bento, editorial, and news layouts.", "variantsCount": 15, "variants": [ { "name": "Card Layout — Apple Inspired", "path": "Tailwind/Sections/Blog/apple-inspired/", "type": "section", "description": "Apple Inspired blog layout: Card layout.", "tags": [ "blog", "articles", "content", "posts", "apple-inspired" ], "features": [ "card layout", "6 posts", "equal-height cards", "gradient covers", "responsive 1/2/3-col" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Sidebar Blog — Bento Grid", "path": "Tailwind/Sections/Blog/bento-grid/", "type": "section", "description": "Bento Grid blog layout: Sidebar blog layout.", "tags": [ "blog", "articles", "content", "posts", "bento-grid" ], "features": [ "sidebar blog layout", "horizontal post rows", "category counts", "tag cloud", "responsive split" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Recent Posts — Cyber", "path": "Tailwind/Sections/Blog/cyber/", "type": "section", "description": "Cyber blog layout: Recent posts.", "tags": [ "blog", "articles", "content", "posts", "cyber" ], "features": [ "recent posts", "view-all link", "4 posts", "section header", "responsive 1/2/4-col" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Articles — Dark Premium", "path": "Tailwind/Sections/Blog/dark-premium/", "type": "section", "description": "Dark Premium blog layout: Minimal article list.", "tags": [ "blog", "articles", "content", "posts", "dark-premium" ], "features": [ "minimal article list", "no images", "hairline dividers", "typographic", "narrow max width" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Editorial Grid — Edge Glassmorphism", "path": "Tailwind/Sections/Blog/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism blog layout: Editorial grid.", "tags": [ "blog", "articles", "content", "posts", "edge-glassmorphism" ], "features": [ "editorial grid", "lead essay + list", "serif headline", "category tags", "responsive split" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "News Layout — Editorial", "path": "Tailwind/Sections/Blog/editorial/", "type": "section", "description": "Editorial blog layout: News layout.", "tags": [ "blog", "articles", "content", "posts", "editorial" ], "features": [ "news layout", "lead + 5 side", "4-col grid", "dense composition", "gradient covers" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Magazine Layout — Elegant Luxury", "path": "Tailwind/Sections/Blog/elegant-luxury/", "type": "section", "description": "Elegant Luxury blog layout: Magazine layout.", "tags": [ "blog", "articles", "content", "posts", "elegant-luxury" ], "features": [ "magazine layout", "large lead + 4 side", "3-col grid", "gradient covers", "author meta" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Three-Column Grid — Futuristic", "path": "Tailwind/Sections/Blog/futuristic/", "type": "section", "description": "Futuristic blog layout: Three-column grid.", "tags": [ "blog", "articles", "content", "posts", "futuristic" ], "features": [ "three-column grid", "9 posts", "gradient covers", "read time + date", "responsive 1/2/3-col" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Featured Blog — Gradient Mesh", "path": "Tailwind/Sections/Blog/gradient-mesh/", "type": "section", "description": "Gradient Mesh blog layout: Split featured blog.", "tags": [ "blog", "articles", "content", "posts", "gradient-mesh" ], "features": [ "split featured blog", "large + list", "2-col split", "gradient covers", "responsive" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Modern Blog — Minimal", "path": "Tailwind/Sections/Blog/minimal/", "type": "section", "description": "Minimal blog layout: Modern blog layout.", "tags": [ "blog", "articles", "content", "posts", "minimal" ], "features": [ "modern blog layout", "featured + 3 grid", "gradient covers", "author meta", "responsive" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Featured Article — Monochrome", "path": "Tailwind/Sections/Blog/monochrome/", "type": "section", "description": "Monochrome blog layout: Featured article hero.", "tags": [ "blog", "articles", "content", "posts", "monochrome" ], "features": [ "featured article hero", "2-col split", "gradient cover", "read CTA", "author meta" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bento Articles — Neo Brutalism", "path": "Tailwind/Sections/Blog/neo-brutalism/", "type": "section", "description": "Neo Brutalism blog layout: Bento articles.", "tags": [ "blog", "articles", "content", "posts", "neo-brutalism" ], "features": [ "bento articles", "1 large + 6 small", "2/4-col grid", "gradient covers", "responsive" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Category Blog — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Blog/soft-ui/", "type": "section", "description": "Soft UI blog layout: Category blog.", "tags": [ "blog", "articles", "content", "posts", "soft-ui" ], "features": [ "category blog", "filter tabs", "active state", "6 posts", "responsive 1/2/3-col" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Article List — Startup Landing", "path": "Tailwind/Sections/Blog/startup-landing/", "type": "section", "description": "Startup Landing blog layout: Article list.", "tags": [ "blog", "articles", "content", "posts", "startup-landing" ], "features": [ "article list", "icon rows", "clickable cards", "6 posts", "narrow max width" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Blog — Vercel / Linear", "path": "Tailwind/Sections/Blog/vercel/", "type": "section", "description": "Vercel / Linear blog layout: Startup blog grid.", "tags": [ "blog", "articles", "content", "posts", "vercel" ], "features": [ "startup blog grid", "3 posts", "read links", "category tags", "responsive 1/3-col" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "blog", "tags": [ "apple-inspired", "articles", "bento-grid", "blog", "content", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "futuristic", "gradient-mesh", "minimal", "monochrome", "neo-brutalism", "posts", "soft-ui", "startup-landing", "vercel" ] }, { "name": "Contact (Tailwind)", "path": "Tailwind/Sections/Contact/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Contact sections with forms, office locations, support channels, and team directories.", "variantsCount": 15, "variants": [ { "name": "Contact + Sidebar Info — Apple Inspired", "path": "Tailwind/Sections/Contact/apple-inspired/", "type": "section", "description": "Apple Inspired contact layout: Form + sidebar info.", "tags": [ "contact", "form", "get-in-touch", "apple-inspired" ], "features": [ "form + sidebar info", "response time + office", "social follow", "1fr+280px split", "responsive stack" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Inline Contact Cards — Bento Grid", "path": "Tailwind/Sections/Contact/bento-grid/", "type": "section", "description": "Bento Grid contact layout: Inline contact rows.", "tags": [ "contact", "form", "get-in-touch", "bento-grid" ], "features": [ "inline contact rows", "list-based layout", "per-row CTA", "narrow max width", "responsive" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Support Center — Cyber", "path": "Tailwind/Sections/Contact/cyber/", "type": "section", "description": "Cyber contact layout: Support center grid.", "tags": [ "contact", "form", "get-in-touch", "cyber" ], "features": [ "support center grid", "6 channels", "arrow indicators", "iconified cards", "responsive 1/2/3-col" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Contact + Subscribe — Dark Premium", "path": "Tailwind/Sections/Contact/dark-premium/", "type": "section", "description": "Dark Premium contact layout: Contact + newsletter combo.", "tags": [ "contact", "form", "get-in-touch", "dark-premium" ], "features": [ "contact + newsletter combo", "dual forms", "subscribe aside", "responsive split", "two CTAs" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Centered Contact — Edge Glassmorphism", "path": "Tailwind/Sections/Contact/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism contact layout: Centered hero form.", "tags": [ "contact", "form", "get-in-touch", "edge-glassmorphism" ], "features": [ "centered hero form", "single email field", "direct email fallback", "max-width panel", "submit CTA" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Onboarding Contact — Editorial", "path": "Tailwind/Sections/Contact/editorial/", "type": "section", "description": "Editorial contact layout: Onboarding steps.", "tags": [ "contact", "form", "get-in-touch", "editorial" ], "features": [ "onboarding steps", "numbered cards", "final CTA tile", "4-col bento", "responsive" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Contact Form — Elegant Luxury", "path": "Tailwind/Sections/Contact/elegant-luxury/", "type": "section", "description": "Elegant Luxury contact layout: Minimal centered form.", "tags": [ "contact", "form", "get-in-touch", "elegant-luxury" ], "features": [ "minimal centered form", "narrow max width", "3 fields", "accessible", "single CTA" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Contact with Map — Futuristic", "path": "Tailwind/Sections/Contact/futuristic/", "type": "section", "description": "Futuristic contact layout: Map placeholder panel.", "tags": [ "contact", "form", "get-in-touch", "futuristic" ], "features": [ "map placeholder panel", "grid overlay", "you-are-here pin", "contact form", "location + hours" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Contact Method Cards — Gradient Mesh", "path": "Tailwind/Sections/Contact/gradient-mesh/", "type": "section", "description": "Gradient Mesh contact layout: Contact method cards.", "tags": [ "contact", "form", "get-in-touch", "gradient-mesh" ], "features": [ "contact method cards", "4 channels", "iconified", "hover lift", "responsive 1/2/4-col" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mega Contact Grid — Minimal", "path": "Tailwind/Sections/Contact/minimal/", "type": "section", "description": "Minimal contact layout: Mega contact grid.", "tags": [ "contact", "form", "get-in-touch", "minimal" ], "features": [ "mega contact grid", "4 channel cards", "side form", "2-col layout", "responsive collapse" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Office Locations — Monochrome", "path": "Tailwind/Sections/Contact/monochrome/", "type": "section", "description": "Monochrome contact layout: Office location cards.", "tags": [ "contact", "form", "get-in-touch", "monochrome" ], "features": [ "office location cards", "regional badges", "local time display", "3 regions", "responsive grid" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Contact — Neo Brutalism", "path": "Tailwind/Sections/Contact/neo-brutalism/", "type": "section", "description": "Neo Brutalism contact layout: Startup contact form.", "tags": [ "contact", "form", "get-in-touch", "neo-brutalism" ], "features": [ "startup contact form", "social aside", "2-col field grid", "single CTA", "responsive split" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Team Contact Directory — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Contact/soft-ui/", "type": "section", "description": "Soft UI contact layout: Team contact directory.", "tags": [ "contact", "form", "get-in-touch", "soft-ui" ], "features": [ "team contact directory", "role-tagged profiles", "direct emails", "4 contacts", "responsive grid" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Contact Layout — Startup Landing", "path": "Tailwind/Sections/Contact/startup-landing/", "type": "section", "description": "Startup Landing contact layout: Split form + info.", "tags": [ "contact", "form", "get-in-touch", "startup-landing" ], "features": [ "split form + info", "email/phone/address", "accessible labels", "submit CTA", "responsive 2-col" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Contact — Vercel / Linear", "path": "Tailwind/Sections/Contact/vercel/", "type": "section", "description": "Vercel / Linear contact layout: Floating contact panel.", "tags": [ "contact", "form", "get-in-touch", "vercel" ], "features": [ "floating contact panel", "2/3 + 1/3 split", "contact aside list", "3 fields", "responsive stack" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "contact", "tags": [ "apple-inspired", "bento-grid", "contact", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "form", "futuristic", "get-in-touch", "gradient-mesh", "minimal", "monochrome", "neo-brutalism", "soft-ui", "startup-landing", "vercel" ] }, { "name": "Developer (Tailwind)", "path": "Tailwind/Sections/Developer/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Developer sections — code playgrounds and command palettes for dev-tool surfaces.", "variantsCount": 6, "variants": [ { "name": "Code Playground — Neo-Brutalism", "path": "Tailwind/Sections/Developer/code-playground/neo-brutalism/", "type": "section", "description": "Brutalist code playground with hard black borders, offset drop shadows, and flat bright accents. A tabbed editor pane (HTML/JS/CSS) with line numbers sits beside a live sandboxed iframe output, plus a wired Run button and reset control.", "tags": [ "code-playground", "editor", "neo-brutalism", "brutalist", "live-preview", "iframe", "sandbox", "tabs", "developer", "line-numbers" ], "features": [ "hard offset shadows", "flat bright accent palette", "press-down hover states", "file tab switcher (HTML/JS/CSS)", "line-numbered code editor", "wired Run button renders sandboxed iframe", "live char + line counters", "reset control restores defaults", "keyboard accessible controls" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Code Playground — Sharp Glassmorphism", "path": "Tailwind/Sections/Developer/code-playground/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass code playground floating over a vibrant animated gradient mesh. A tabbed editor pane (HTML/JS/CSS) with line numbers sits beside a live sandboxed iframe output, with a cyan glow status dot and a gradient wired Run button. Requires a colored backdrop behind the panel for the glass to read.", "tags": [ "code-playground", "editor", "sharp-glassmorphism", "glassmorphism", "live-preview", "iframe", "sandbox", "tabs", "developer", "line-numbers" ], "features": [ "frosted-glass panels with backdrop blur", "animated gradient mesh backdrop", "gradient primary buttons + cyan glow dot", "top highlight edge line", "file tab switcher (HTML/JS/CSS)", "line-numbered code editor", "wired Run button renders sandboxed iframe", "live char + line counters", "reset control restores defaults", "keyboard accessible controls" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Code Playground — Vercel", "path": "Tailwind/Sections/Developer/code-playground/vercel/", "type": "section", "description": "Refined dark monochrome code playground with hairline borders, a subtle radial glow, and a teal status dot. A tabbed editor pane (HTML/JS/CSS) with line numbers sits beside a live sandboxed iframe output, plus a single white wired Run button and reset control.", "tags": [ "code-playground", "editor", "vercel", "dark", "live-preview", "iframe", "sandbox", "tabs", "developer", "line-numbers" ], "features": [ "dark monochrome surfaces with hairline borders", "teal glowing status dot", "subtle masked grid backdrop behind title", "file tab switcher (HTML/JS/CSS)", "line-numbered code editor", "wired Run button renders sandboxed iframe", "live char + line counters", "reset control restores defaults", "keyboard accessible controls" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Command Palette — Neo-Brutalism", "path": "Tailwind/Sections/Developer/command-palette/neo-brutalism/", "type": "section", "description": "Brutalist Cmd+K command palette overlay with hard black borders, offset drop shadows, and flat bright accents. Live search filters grouped commands, arrow keys move the highlight, Enter runs the selected command with a confirmation toast, Escape closes, and Cmd/Ctrl+K toggles open. Focus is trapped inside the palette and restored to the trigger on close.", "tags": [ "command-palette", "cmd-k", "neo-brutalism", "brutalist", "keyboard", "search", "overlay", "dialog", "developer" ], "features": [ "hard offset shadows and bright flat accents", "live search filtering across grouped commands", "arrow-key navigation with aria-activedescendant", "Enter runs command with confirmation toast", "Escape closes, Cmd/Ctrl+K toggles open", "focus trap while open, focus restore on close", "role dialog and role option with aria-selected", "custom scrollbar styling" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Command Palette — Sharp Glassmorphism", "path": "Tailwind/Sections/Developer/command-palette/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass Cmd+K command palette floating over an animated gradient mesh, with luminous edges, blurred surfaces, and a fuchsia-to-indigo active highlight. Live search filters grouped commands, arrow keys move the highlight, Enter runs the selected command with a confirmation toast, Escape closes, and Cmd/Ctrl+K toggles open. Focus is trapped inside the palette and restored to the trigger on close. The glass needs a colored backdrop behind the panel to read.", "tags": [ "command-palette", "cmd-k", "glassmorphism", "frosted-glass", "gradient-mesh", "keyboard", "search", "overlay", "dialog", "developer" ], "features": [ "frosted-glass panel with backdrop blur over animated mesh", "luminous top edge and glow shadows", "gradient active highlight on selected option", "live search filtering across grouped commands", "arrow-key navigation with aria-activedescendant", "Enter runs command with confirmation toast", "Escape closes, Cmd/Ctrl+K toggles open", "focus trap while open, focus restore on close", "role dialog and role option with aria-selected" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Command Palette — Vercel", "path": "Tailwind/Sections/Developer/command-palette/vercel/", "type": "section", "description": "Refined dark monochrome Cmd+K command palette with hairline borders, a subtle radial glow, and a single teal accent. Live search filters grouped commands, arrow keys move the highlight, Enter runs the selected command with a confirmation toast, Escape closes, and Cmd/Ctrl+K toggles open. Focus is trapped inside the palette and restored to the trigger on close.", "tags": [ "command-palette", "cmd-k", "vercel", "dark", "keyboard", "search", "overlay", "dialog", "developer" ], "features": [ "dark monochrome surface with hairline borders", "single teal accent and radial glow", "live search filtering across grouped commands", "arrow-key navigation with aria-activedescendant", "Enter runs command with confirmation toast", "Escape closes, Cmd/Ctrl+K toggles open", "focus trap while open, focus restore on close", "role dialog and role option with aria-selected" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "developer", "tags": [ "brutalist", "cmd-k", "code-playground", "command-palette", "dark", "developer", "dialog", "editor", "frosted-glass", "glassmorphism", "gradient-mesh", "iframe", "keyboard", "line-numbers", "live-preview", "neo-brutalism", "overlay", "sandbox", "search", "sharp-glassmorphism", "tabs", "vercel" ] }, { "name": "FAQ (Tailwind)", "path": "Tailwind/Sections/FAQ/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Frequently-asked-question sections with accordions, search, and categorized layouts.", "variantsCount": 15, "variants": [ { "name": "Accordion FAQ — Apple Inspired", "path": "Tailwind/Sections/FAQ/apple-inspired/", "type": "section", "description": "Apple Inspired FAQ layout: Native
accordion.", "tags": [ "faq", "accordion", "questions", "apple-inspired" ], "features": [ "native
accordion", "rotating plus icon", "no-JS expand", "keyboard focusable", "6 questions" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Two-Column FAQ — Bento Grid", "path": "Tailwind/Sections/FAQ/bento-grid/", "type": "section", "description": "Bento Grid FAQ layout: Two-column layout.", "tags": [ "faq", "accordion", "questions", "bento-grid" ], "features": [ "two-column layout", "8 questions", "responsive collapse", "native accordions", "balanced height" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Spotlight FAQ — Cyber", "path": "Tailwind/Sections/FAQ/cyber/", "type": "section", "description": "Cyber FAQ layout: Spotlight accordion.", "tags": [ "faq", "accordion", "questions", "cyber" ], "features": [ "spotlight accordion", "plus badge toggle", "centered column", "soft panels", "native disclosure" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Sidebar Categories FAQ — Dark Premium", "path": "Tailwind/Sections/FAQ/dark-premium/", "type": "section", "description": "Dark Premium FAQ layout: Sidebar categories nav.", "tags": [ "faq", "accordion", "questions", "dark-premium" ], "features": [ "sidebar categories nav", "active state", "sticky-ish aside", "responsive stack", "scoped accordion list" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Tabbed FAQ UI — Edge Glassmorphism", "path": "Tailwind/Sections/FAQ/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism FAQ layout: Tabbed categories (ui).", "tags": [ "faq", "accordion", "questions", "edge-glassmorphism" ], "features": [ "tabbed categories (UI)", "active tab state", "role=tab a11y", "tablist nav", "responsive wrap" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Searchable FAQ UI — Editorial", "path": "Tailwind/Sections/FAQ/editorial/", "type": "section", "description": "Editorial FAQ layout: Search bar (ui only).", "tags": [ "faq", "accordion", "questions", "editorial" ], "features": [ "search bar (UI only)", "keyboard hint chip", "filtered-looking list", "native accordions", "centered search" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal FAQ — Elegant Luxury", "path": "Tailwind/Sections/FAQ/elegant-luxury/", "type": "section", "description": "Elegant Luxury FAQ layout: Static definition list.", "tags": [ "faq", "accordion", "questions", "elegant-luxury" ], "features": [ "static definition list", "no interactivity", "hairline dividers", "typographic rhythm", "max readability" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing FAQ — Futuristic", "path": "Tailwind/Sections/FAQ/futuristic/", "type": "section", "description": "Futuristic FAQ layout: Pricing-specific faq.", "tags": [ "faq", "accordion", "questions", "futuristic" ], "features": [ "pricing-specific FAQ", "split intro panel", "CTA to pricing", "scoped accordion list", "responsive split" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "SaaS FAQ — Gradient Mesh", "path": "Tailwind/Sections/FAQ/gradient-mesh/", "type": "section", "description": "Gradient Mesh FAQ layout: Saas feature faq grid.", "tags": [ "faq", "accordion", "questions", "gradient-mesh" ], "features": [ "SaaS feature FAQ grid", "3-column cards", "iconized categories", "disclosure answers", "responsive collapse" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "FAQ with Contact CTA — Minimal", "path": "Tailwind/Sections/FAQ/minimal/", "type": "section", "description": "Minimal FAQ layout: Faq + contact cta.", "tags": [ "faq", "accordion", "questions", "minimal" ], "features": [ "FAQ + contact CTA", "split aside panel", "support escalation", "scoped accordions", "responsive split" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Compact FAQ — Monochrome", "path": "Tailwind/Sections/FAQ/monochrome/", "type": "section", "description": "Monochrome FAQ layout: Single-panel list.", "tags": [ "faq", "accordion", "questions", "monochrome" ], "features": [ "single-panel list", "divided rows", "monospace toggle", "compact density", "edge-to-edge rules" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Categorized FAQ — Neo Brutalism", "path": "Tailwind/Sections/FAQ/neo-brutalism/", "type": "section", "description": "Neo Brutalism FAQ layout: Grouped by category.", "tags": [ "faq", "accordion", "questions", "neo-brutalism" ], "features": [ "grouped by category", "sectioned accordions", "icon headers", "vertical rhythm", "responsive stack" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Documentation FAQ — Soft UI (Neumorphism)", "path": "Tailwind/Sections/FAQ/soft-ui/", "type": "section", "description": "Soft UI FAQ layout: Docs-style anchor nav.", "tags": [ "faq", "accordion", "questions", "soft-ui" ], "features": [ "docs-style anchor nav", "table of contents", "numbered questions", "scoped accordions", "responsive stack" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Modern FAQ Cards — Startup Landing", "path": "Tailwind/Sections/FAQ/startup-landing/", "type": "section", "description": "Startup Landing FAQ layout: Card-style accordions.", "tags": [ "faq", "accordion", "questions", "startup-landing" ], "features": [ "card-style accordions", "iconized questions", "chevron rotation", "2-column grid", "hover lift" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Rich Content FAQ — Vercel / Linear", "path": "Tailwind/Sections/FAQ/vercel/", "type": "section", "description": "Vercel / Linear FAQ layout: Rich answer rows.", "tags": [ "faq", "accordion", "questions", "vercel" ], "features": [ "rich answer rows", "related-doc chip", "video chip", "chevron rotation", "scoped accordions" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "faq", "tags": [ "accordion", "apple-inspired", "bento-grid", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "faq", "futuristic", "gradient-mesh", "minimal", "monochrome", "neo-brutalism", "questions", "soft-ui", "startup-landing", "vercel" ] }, { "name": "Footer (Tailwind)", "path": "Tailwind/Sections/Footer/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Site footers with multi-column links, newsletters, social, and legal rows.", "variantsCount": 15, "variants": [ { "name": "Minimal Footer — Apple Inspired", "path": "Tailwind/Sections/Footer/apple-inspired/", "type": "section", "description": "Apple Inspired footer: Minimal footer.", "tags": [ "footer", "navigation", "site-footer", "apple-inspired" ], "features": [ "minimal footer", "single row", "inline links", "copyright", "responsive stack" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Multi-Column Footer — Bento Grid", "path": "Tailwind/Sections/Footer/bento-grid/", "type": "section", "description": "Bento Grid footer: 5-column footer.", "tags": [ "footer", "navigation", "site-footer", "bento-grid" ], "features": [ "5-column footer", "15 links", "brand-free", "social row", "responsive collapse" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Mega Footer — Cyber", "path": "Tailwind/Sections/Footer/cyber/", "type": "section", "description": "Cyber footer: Mega multi-column.", "tags": [ "footer", "navigation", "site-footer", "cyber" ], "features": [ "mega multi-column", "brand + blurb", "social icons", "legal + status row", "6-col grid" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Compact Footer — Dark Premium", "path": "Tailwind/Sections/Footer/dark-premium/", "type": "section", "description": "Dark Premium footer: Compact footer.", "tags": [ "footer", "navigation", "site-footer", "dark-premium" ], "features": [ "compact footer", "single-line layout", "inline nav", "social + copyright", "responsive" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Footer — Edge Glassmorphism", "path": "Tailwind/Sections/Footer/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism footer: Startup footer.", "tags": [ "footer", "navigation", "site-footer", "edge-glassmorphism" ], "features": [ "startup footer", "dual CTAs", "2 link columns", "social row", "brand + blurb" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Social-First Footer — Editorial", "path": "Tailwind/Sections/Footer/editorial/", "type": "section", "description": "Editorial footer: Social-first footer.", "tags": [ "footer", "navigation", "site-footer", "editorial" ], "features": [ "social-first footer", "5 social links", "centered composition", "large icon targets", "follow CTA" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "SaaS Footer — Elegant Luxury", "path": "Tailwind/Sections/Footer/elegant-luxury/", "type": "section", "description": "Elegant Luxury footer: Saas footer.", "tags": [ "footer", "navigation", "site-footer", "elegant-luxury" ], "features": [ "SaaS footer", "compliance badges", "3 link columns", "brand + blurb", "responsive 4-col" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Centered Footer — Futuristic", "path": "Tailwind/Sections/Footer/futuristic/", "type": "section", "description": "Futuristic footer: Centered footer.", "tags": [ "footer", "navigation", "site-footer", "futuristic" ], "features": [ "centered footer", "inline nav", "blurb", "social row", "copyright" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Grid Footer — Gradient Mesh", "path": "Tailwind/Sections/Footer/gradient-mesh/", "type": "section", "description": "Gradient Mesh footer: Grid footer.", "tags": [ "footer", "navigation", "site-footer", "gradient-mesh" ], "features": [ "grid footer", "4-col links", "3-col meta row", "address", "social end-aligned" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Branded Footer — Minimal", "path": "Tailwind/Sections/Footer/minimal/", "type": "section", "description": "Minimal footer: Premium centered footer.", "tags": [ "footer", "navigation", "site-footer", "minimal" ], "features": [ "premium centered footer", "uppercase tagline", "4-col links", "social row", "responsive grid" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Newsletter Footer — Monochrome", "path": "Tailwind/Sections/Footer/monochrome/", "type": "section", "description": "Monochrome footer: Newsletter banner.", "tags": [ "footer", "navigation", "site-footer", "monochrome" ], "features": [ "newsletter banner", "4-col links", "subscribe form", "social row", "responsive split" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Documentation Footer — Neo Brutalism", "path": "Tailwind/Sections/Footer/neo-brutalism/", "type": "section", "description": "Neo Brutalism footer: Documentation footer.", "tags": [ "footer", "navigation", "site-footer", "neo-brutalism" ], "features": [ "documentation footer", "version badge", "edit/report links", "3 link columns", "responsive split" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Four-Column Footer — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Footer/soft-ui/", "type": "section", "description": "Soft UI footer: 4-column footer.", "tags": [ "footer", "navigation", "site-footer", "soft-ui" ], "features": [ "4-column footer", "16 links", "brand + copyright", "legal inline", "responsive collapse" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "CTA Footer — Startup Landing", "path": "Tailwind/Sections/Footer/startup-landing/", "type": "section", "description": "Startup Landing footer: Cta banner footer.", "tags": [ "footer", "navigation", "site-footer", "startup-landing" ], "features": [ "CTA banner footer", "dual buttons", "social row", "copyright", "responsive" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Editorial Footer — Vercel / Linear", "path": "Tailwind/Sections/Footer/vercel/", "type": "section", "description": "Vercel / Linear footer: Editorial footer.", "tags": [ "footer", "navigation", "site-footer", "vercel" ], "features": [ "editorial footer", "serif tagline", "2x2 link grid", "social row", "responsive split" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "footer", "tags": [ "apple-inspired", "bento-grid", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "footer", "futuristic", "gradient-mesh", "minimal", "monochrome", "navigation", "neo-brutalism", "site-footer", "soft-ui", "startup-landing", "vercel" ] }, { "name": "Logos (Tailwind)", "path": "Tailwind/Sections/Logos/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Logo clouds and brand walls — infinite scroll, grids, partners, and trusted-by rows.", "variantsCount": 15, "variants": [ { "name": "Grid Logos — Apple Inspired", "path": "Tailwind/Sections/Logos/apple-inspired/", "type": "section", "description": "Apple Inspired logos layout: Logo grid.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "apple-inspired" ], "features": [ "logo grid", "8 cells", "card-style tiles", "hover lift", "responsive 2/3/4-col" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Partner Showcase — Bento Grid", "path": "Tailwind/Sections/Logos/bento-grid/", "type": "section", "description": "Bento Grid logos layout: Partner showcase.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "bento-grid" ], "features": [ "partner showcase", "split + grid", "partner CTA", "6 logos", "responsive" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Logo Strip — Cyber", "path": "Tailwind/Sections/Logos/cyber/", "type": "section", "description": "Cyber logos layout: Logo strip.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "cyber" ], "features": [ "logo strip", "single container", "inline logos", "opacity hover", "wrap-friendly" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Trusted By — Dark Premium", "path": "Tailwind/Sections/Logos/dark-premium/", "type": "section", "description": "Dark Premium logos layout: Trusted-by row.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "dark-premium" ], "features": [ "trusted-by row", "wrap-friendly", "inline logos", "headline count", "low chrome" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Marquee Logos — Edge Glassmorphism", "path": "Tailwind/Sections/Logos/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism logos layout: Marquee logos.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "edge-glassmorphism" ], "features": [ "marquee logos", "CSS mask fades", "duplicated track", "hover opacity", "pure CSS" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Investors — Editorial", "path": "Tailwind/Sections/Logos/editorial/", "type": "section", "description": "Editorial logos layout: Investors grid.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "editorial" ], "features": [ "investors grid", "10 logos", "backed-by badge", "centered tiles", "responsive 2/3/5-col" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Stat + Logos — Elegant Luxury", "path": "Tailwind/Sections/Logos/elegant-luxury/", "type": "section", "description": "Elegant Luxury logos layout: Stat + logos.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "elegant-luxury" ], "features": [ "stat + logos", "headline count", "split layout", "6 tiles", "responsive" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Monochrome Logos — Futuristic", "path": "Tailwind/Sections/Logos/futuristic/", "type": "section", "description": "Futuristic logos layout: Minimal monochrome logos.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "futuristic" ], "features": [ "minimal monochrome logos", "no cards", "opacity hover", "inline wrap", "8 logos" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Premium Logos — Gradient Mesh", "path": "Tailwind/Sections/Logos/gradient-mesh/", "type": "section", "description": "Gradient Mesh logos layout: Premium logo panel.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "gradient-mesh" ], "features": [ "premium logo panel", "brand header", "uppercase tagline", "6 logos", "centered" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Brand Wall — Minimal", "path": "Tailwind/Sections/Logos/minimal/", "type": "section", "description": "Minimal logos layout: Brand wall.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "minimal" ], "features": [ "brand wall", "12 logos", "boxed container", "hover opacity", "responsive 2/3/6-col" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Categorized Logos — Monochrome", "path": "Tailwind/Sections/Logos/monochrome/", "type": "section", "description": "Monochrome logos layout: Categorized logos.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "monochrome" ], "features": [ "categorized logos", "grouped by sector", "3 groups", "inline wrap", "uppercase labels" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Gradient Logo Cloud — Neo Brutalism", "path": "Tailwind/Sections/Logos/neo-brutalism/", "type": "section", "description": "Neo Brutalism logos layout: Gradient logo cloud.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "neo-brutalism" ], "features": [ "gradient logo cloud", "tinted backdrop", "8 logos", "inline wrap", "hover opacity" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Logos — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Logos/soft-ui/", "type": "section", "description": "Soft UI logos layout: Startup logos.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "soft-ui" ], "features": [ "startup logos", "12 tiles", "soft cards", "section header", "responsive 2/3/6-col" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bento Logos — Startup Landing", "path": "Tailwind/Sections/Logos/startup-landing/", "type": "section", "description": "Startup Landing logos layout: Bento logo cloud.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "startup-landing" ], "features": [ "bento logo cloud", "boxed container", "8 logos", "4-col grid", "responsive 2/4-col" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Infinite-Scroll Logos — Vercel / Linear", "path": "Tailwind/Sections/Logos/vercel/", "type": "section", "description": "Vercel / Linear logos layout: Infinite-scroll marquee.", "tags": [ "logos", "brand-cloud", "social-proof", "customers", "vercel" ], "features": [ "infinite-scroll marquee", "duplicated track", "edge fades", "hover opacity", "pure CSS animation" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "logos", "tags": [ "apple-inspired", "bento-grid", "brand-cloud", "customers", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "futuristic", "gradient-mesh", "logos", "minimal", "monochrome", "neo-brutalism", "social-proof", "soft-ui", "startup-landing", "vercel" ] }, { "name": "Marketing (Tailwind)", "path": "Tailwind/Sections/Marketing/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Marketing sections — feature grids and hero landings for top-of-funnel pages.", "variantsCount": 6, "variants": [ { "name": "Feature Grid — Neo-Brutalism", "path": "Tailwind/Sections/Marketing/feature-grid/neo-brutalism/", "type": "section", "description": "Brutalist marketing feature grid with a bold uppercase section heading, six hard-bordered feature cards with offset drop shadows, rotating flat accent icon tiles, a highlighted featured card with a New badge, press-down hover states, and a staggered entrance animation that respects prefers-reduced-motion.", "tags": [ "feature-grid", "marketing", "neo-brutalism", "brutalist", "features", "landing", "cards", "grid" ], "features": [ "bold uppercase section heading", "six feature cards in a responsive grid", "hard black borders + offset shadows", "rotating flat accent icon tiles", "featured card with New badge", "press-down hover states", "staggered entrance animation", "prefers-reduced-motion guard", "keyboard accessible focus states" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Feature Grid — Sharp Glassmorphism", "path": "Tailwind/Sections/Marketing/feature-grid/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass marketing feature grid floating over a vibrant animated gradient mesh. Translucent layered cards with luminous edge highlights, glowing gradient icon chips, a highlighted featured card with a gradient tint and cyan glow badge, lift-on-hover interaction, and a staggered IntersectionObserver entrance that respects prefers-reduced-motion.", "tags": [ "feature-grid", "marketing", "glassmorphism", "glass", "features", "landing", "gradient", "vibrant" ], "features": [ "backdrop-blur glass cards", "animated gradient mesh backdrop", "luminous edge highlights", "glowing gradient icon chips", "featured card with gradient tint + glow badge", "lift-on-hover interaction", "staggered IntersectionObserver entrance", "prefers-reduced-motion guard", "keyboard accessible focus states" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Feature Grid — Vercel", "path": "Tailwind/Sections/Marketing/feature-grid/vercel/", "type": "section", "description": "Refined dark monochrome marketing feature grid with hairline borders, a subtle masked grid backdrop, a single teal accent, a glowing icon tile on the featured card, soft hover reveals, and a staggered IntersectionObserver entrance that respects prefers-reduced-motion.", "tags": [ "feature-grid", "marketing", "vercel", "dark-mode", "features", "landing", "minimal", "monochrome" ], "features": [ "dark monochrome palette", "hairline grid divider layout", "masked grid backdrop", "single teal accent", "featured card with glowing badge", "soft hover reveals", "staggered IntersectionObserver entrance", "prefers-reduced-motion guard", "keyboard accessible focus states" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Hero Landing — Neo-Brutalism", "path": "Tailwind/Sections/Marketing/hero-landing/neo-brutalism/", "type": "section", "description": "Brutalist marketing hero with a bold uppercase headline, dual press-down CTAs, a wordmark trust row, and a mock product screenshot card built from hard borders, offset shadows, and flat bright accents. A staggered entrance animation respects prefers-reduced-motion.", "tags": [ "hero", "landing", "marketing", "neo-brutalism", "brutalist", "cta", "trust-row", "screenshot" ], "features": [ "bold uppercase headline", "dual press-down CTAs", "wordmark trust row", "mock product screenshot card", "offset drop shadows", "flat bright accent palette", "staggered entrance animation", "prefers-reduced-motion guard", "keyboard accessible links" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Hero Landing — Sharp Glassmorphism", "path": "Tailwind/Sections/Marketing/hero-landing/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass marketing hero floating over an animated gradient mesh. Translucent layered panels, a gradient primary CTA, luminous top edges, a cyan glow status dot, a star rating trust row, and a floating glass preview card create depth and atmosphere. Staggered entrance animation respects prefers-reduced-motion.", "tags": [ "hero", "landing", "marketing", "glassmorphism", "glass", "gradient", "cta", "trust-row", "vibrant" ], "features": [ "backdrop-blur glass panels", "animated gradient mesh backdrop", "gradient primary CTA", "luminous edge highlights", "cyan glow status dot", "star rating trust row", "floating glass preview card", "decorative blurred orbs", "staggered entrance animation", "prefers-reduced-motion guard" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Hero Landing — Vercel", "path": "Tailwind/Sections/Marketing/hero-landing/vercel/", "type": "section", "description": "Refined dark monochrome marketing hero with hairline borders, a masked grid backdrop, a single teal glowing accent, dual CTAs, a star-rating trust row, and a floating glass-dark product preview card with a luminous top edge. Staggered fade-up entrance respects prefers-reduced-motion.", "tags": [ "hero", "landing", "marketing", "vercel", "dark-mode", "monochrome", "cta", "trust-row" ], "features": [ "dark monochrome palette", "hairline borders + glow", "single teal accent", "dual minimal CTAs", "star rating trust row", "floating preview card", "luminous top edge", "masked grid backdrop", "staggered entrance animation", "prefers-reduced-motion guard" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "marketing", "tags": [ "brutalist", "cards", "cta", "dark-mode", "feature-grid", "features", "glass", "glassmorphism", "gradient", "grid", "hero", "landing", "marketing", "minimal", "monochrome", "neo-brutalism", "screenshot", "trust-row", "vercel", "vibrant" ] }, { "name": "Newsletter (Tailwind)", "path": "Tailwind/Sections/Newsletter/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Newsletter subscribe CTAs — centered, split, glass, gradient, and bento styles.", "variantsCount": 15, "variants": [ { "name": "Benefits Newsletter CTA — Apple Inspired", "path": "Tailwind/Sections/Newsletter/apple-inspired/", "type": "section", "description": "Apple Inspired newsletter layout: Benefits newsletter.", "tags": [ "newsletter", "subscribe", "email", "cta", "apple-inspired" ], "features": [ "benefits newsletter", "split + perks list", "3 benefit rows", "stacked form", "responsive" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Compact Newsletter CTA — Bento Grid", "path": "Tailwind/Sections/Newsletter/bento-grid/", "type": "section", "description": "Bento Grid newsletter layout: Compact newsletter cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "bento-grid" ], "features": [ "compact newsletter CTA", "horizontal panel", "inline mini form", "responsive stack", "low height" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Subscribe — Cyber", "path": "Tailwind/Sections/Newsletter/cyber/", "type": "section", "description": "Cyber newsletter layout: Minimal subscribe.", "tags": [ "newsletter", "subscribe", "email", "cta", "cyber" ], "features": [ "minimal subscribe", "no container", "inline form", "centered", "low chrome" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Newsletter — Dark Premium", "path": "Tailwind/Sections/Newsletter/dark-premium/", "type": "section", "description": "Dark Premium newsletter layout: Split newsletter.", "tags": [ "newsletter", "subscribe", "email", "cta", "dark-premium" ], "features": [ "split newsletter", "left intro + right form", "subscriber stats", "badge header", "responsive" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Inline Newsletter Strip — Edge Glassmorphism", "path": "Tailwind/Sections/Newsletter/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism newsletter layout: Inline strip.", "tags": [ "newsletter", "subscribe", "email", "cta", "edge-glassmorphism" ], "features": [ "inline strip", "horizontal layout", "compact form", "side-by-side", "responsive stack" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Centered Newsletter CTA — Editorial", "path": "Tailwind/Sections/Newsletter/editorial/", "type": "section", "description": "Editorial newsletter layout: Centered cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "editorial" ], "features": [ "centered CTA", "icon header", "subscriber count", "privacy note", "inline form" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Newsletter CTA — Elegant Luxury", "path": "Tailwind/Sections/Newsletter/elegant-luxury/", "type": "section", "description": "Elegant Luxury newsletter layout: Startup newsletter cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "elegant-luxury" ], "features": [ "startup newsletter CTA", "split panel", "launch badge", "stacked form", "responsive" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bold Newsletter CTA — Futuristic", "path": "Tailwind/Sections/Newsletter/futuristic/", "type": "section", "description": "Futuristic newsletter layout: Bold newsletter cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "futuristic" ], "features": [ "bold newsletter CTA", "accent-tinted panel", "icon header", "inline form", "centered" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Gradient Newsletter CTA — Gradient Mesh", "path": "Tailwind/Sections/Newsletter/gradient-mesh/", "type": "section", "description": "Gradient Mesh newsletter layout: Gradient cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "gradient-mesh" ], "features": [ "gradient CTA", "full-bleed color", "glass input", "white CTA button", "centered" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Stat + Newsletter CTA — Minimal", "path": "Tailwind/Sections/Newsletter/minimal/", "type": "section", "description": "Minimal newsletter layout: Stat + newsletter.", "tags": [ "newsletter", "subscribe", "email", "cta", "minimal" ], "features": [ "stat + newsletter", "big number", "split layout", "stacked form", "responsive" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Premium Newsletter CTA — Monochrome", "path": "Tailwind/Sections/Newsletter/monochrome/", "type": "section", "description": "Monochrome newsletter layout: Premium newsletter cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "monochrome" ], "features": [ "premium newsletter CTA", "brand header", "members badge", "inline form", "centered" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Footer Newsletter — Neo Brutalism", "path": "Tailwind/Sections/Newsletter/neo-brutalism/", "type": "section", "description": "Neo Brutalism newsletter layout: Footer newsletter.", "tags": [ "newsletter", "subscribe", "email", "cta", "neo-brutalism" ], "features": [ "footer newsletter", "brand + social", "split layout", "stacked form", "responsive" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bento Newsletter CTA — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Newsletter/soft-ui/", "type": "section", "description": "Soft UI newsletter layout: Bento newsletter.", "tags": [ "newsletter", "subscribe", "email", "cta", "soft-ui" ], "features": [ "bento newsletter", "form + stat tile", "2/3 + 1/3 split", "subscriber count", "avatar stack" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Floating Newsletter CTA — Startup Landing", "path": "Tailwind/Sections/Newsletter/startup-landing/", "type": "section", "description": "Startup Landing newsletter layout: Floating glass cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "startup-landing" ], "features": [ "floating glass CTA", "radial glow", "centered headline", "inline form", "responsive" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Card Newsletter CTA — Vercel / Linear", "path": "Tailwind/Sections/Newsletter/vercel/", "type": "section", "description": "Vercel / Linear newsletter layout: Card newsletter cta.", "tags": [ "newsletter", "subscribe", "email", "cta", "vercel" ], "features": [ "card newsletter CTA", "narrow max width", "icon header", "inline form", "centered" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "newsletter", "tags": [ "apple-inspired", "bento-grid", "cta", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "email", "futuristic", "gradient-mesh", "minimal", "monochrome", "neo-brutalism", "newsletter", "soft-ui", "startup-landing", "subscribe", "vercel" ] }, { "name": "Premium Visual (Tailwind)", "path": "Tailwind/Sections/Premium-Visual/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Premium visual sections — aurora hero and other high-impact, animation-forward headers.", "variantsCount": 3, "variants": [ { "name": "Aurora Hero — Neo-Brutalism", "path": "Tailwind/Sections/Premium-Visual/aurora-hero/neo-brutalism/", "type": "section", "description": "Brutalist premium hero that reimagines the aurora as sharp-edged flat-color blocks (pink, yellow, cyan, green) drifting on a slow marquee behind a hard-bordered headline and dual CTAs. Offset shadows, a grid backdrop, and zero rounded corners keep the editorial identity while color blocks carry the glow. Pure CSS, reduced-motion safe.", "tags": [ "hero", "aurora", "neo-brutalism", "brutalist", "premium-visual", "marquee", "color-blocks", "landing" ], "features": [ "sharp-edged color-block aurora", "slow seamless marquee drift", "hard black borders + offset shadows", "flat bright accent palette", "press-down hover states", "grid backdrop overlay", "pure CSS, no images", "prefers-reduced-motion safe" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Aurora Hero — Sharp Glassmorphism", "path": "Tailwind/Sections/Premium-Visual/aurora-hero/sharp-glassmorphism/", "type": "section", "description": "Vibrant premium hero where the aurora takes center stage — multiple large blurred gradient blobs (fuchsia, indigo, cyan, purple) drift and blend with screen mix-mode over an animated dark mesh, with a frosted-glass headline panel floating on top. Luminous edge highlights, a cyan glow dot, and a gradient CTA. The full, luminous glassmorphism take on aurora. Pure CSS, reduced-motion safe.", "tags": [ "hero", "aurora", "glassmorphism", "glass", "premium-visual", "gradient-blobs", "backdrop-blur", "vibrant", "landing" ], "features": [ "multiple drifting blurred gradient blobs", "screen-blend blob compositing", "animated gradient mesh backdrop", "frosted-glass floating headline panel", "luminous top-edge highlight", "cyan glow status dot + gradient CTA", "grain overlay for texture", "prefers-reduced-motion safe" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Aurora Hero — Vercel", "path": "Tailwind/Sections/Premium-Visual/aurora-hero/vercel/", "type": "section", "description": "Refined, restrained premium dark hero. A single soft conic/radial aurora glow slowly drifts behind a monochrome headline and minimal CTA on a near-black canvas, with hairline borders, a masked grid backdrop, and one teal status accent. The premium, minimal take on aurora. Pure CSS, reduced-motion safe.", "tags": [ "hero", "aurora", "vercel", "dark-mode", "premium-visual", "conic-gradient", "minimal", "monochrome", "landing" ], "features": [ "single drifting conic/radial aurora glow", "near-black monochrome palette", "hairline borders + masked grid backdrop", "teal glowing status dot accent", "white primary + ghost secondary CTAs", "generous spacing & type hierarchy", "pure CSS, no images", "prefers-reduced-motion safe" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "premium-visual", "tags": [ "aurora", "backdrop-blur", "brutalist", "color-blocks", "conic-gradient", "dark-mode", "glass", "glassmorphism", "gradient-blobs", "hero", "landing", "marquee", "minimal", "monochrome", "neo-brutalism", "premium-visual", "vercel", "vibrant" ] }, { "name": "SaaS (Tailwind)", "path": "Tailwind/Sections/SaaS/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "SaaS sections — heroes, pricing, testimonials, metrics, CTAs, and footers for SaaS sites.", "variantsCount": 17, "variants": [ { "name": "Bento Feature Showcase — Sharp Glassmorphism", "path": "Tailwind/Sections/SaaS/bento-showcase/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass asymmetric bento grid over an animated gradient mesh — a large hero tile with an animated waveform, medium tiles for integrations and a mini command palette, and small tiles for security and global edge. Luminous top edges, gradient icon chips, and hover lift states.", "tags": [ "bento", "bento-grid", "sharp-glassmorphism", "glassmorphism", "saas", "features", "gradient-mesh" ], "features": [ "asymmetric bento layout", "large hero tile with animated waveform", "integration grid tile", "mini command palette tile", "security + global edge tiles", "gradient icon chips", "luminous top edges", "hover lift states" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Preview Hero — Sharp Glassmorphism", "path": "Tailwind/Sections/SaaS/dashboard-hero/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass dashboard preview hero over an animated gradient mesh — centered headline with luminous top-edge highlight, gradient primary CTA, and a translucent analytics dashboard mock with KPI cards, a sparkline chart, an activity feed, and floating glass stat bubbles. Cyan glow accents and hover lift states add depth.", "tags": [ "hero", "dashboard", "sharp-glassmorphism", "glassmorphism", "frosted-glass", "gradient-mesh", "saas", "analytics" ], "features": [ "centered headline with luminous edge highlight", "gradient primary CTA", "frosted-glass dashboard mock", "KPI cards with sparklines", "activity feed", "floating glass stat bubbles", "cyan glow accents", "hover lift states" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Enterprise SaaS Footer — Vercel", "path": "Tailwind/Sections/SaaS/enterprise-footer/vercel/", "type": "section", "description": "Dark monochrome enterprise SaaS footer with a newsletter signup, a 5-column link grid, a status pill, social icons, compliance badges, and a bottom legal bar. Hairline borders, white/white-50/white-35 hierarchy, a single teal accent on the status dot, and a working email form.", "tags": [ "footer", "enterprise", "vercel", "dark", "saas", "newsletter", "compliance", "teal-accent" ], "features": [ "newsletter signup with email form", "5-column link grid", "status pill with teal dot", "social icons", "compliance badges row", "bottom legal bar with locale", "hairline borders", "white/white-50/white-35 hierarchy" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "SaaS Feature Grid — Neo-Brutalism", "path": "Tailwind/Sections/SaaS/feature-grid/neo-brutalism/", "type": "section", "description": "Brutalist 6-up feature grid with hard black borders, rotating bright accent panels, numbered monospace tags, offset shadows, and a zig-zag offset layout. Each card has a thick icon tile, a punchy feature title, and a body line. Press-down hover states animate the shadow.", "tags": [ "features", "feature-grid", "neo-brutalism", "brutalist", "saas", "bento", "offset-shadows" ], "features": [ "6-up feature grid", "rotating bright accent panels", "numbered monospace tags", "zig-zag offset layout", "thick icon tiles", "offset shadows", "press-down hover states" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Launch Hero — Neo-Brutalism", "path": "Tailwind/Sections/SaaS/launch-hero/neo-brutalism/", "type": "section", "description": "Brutalist launch hero with a giant boxed headline, a black launch badge with a countdown ticker, dual offset-shadow CTAs, a diagonal grid background, and a stacked product-card collage with bright accent panels. Press-down hover states and monospace labels give it a raw, modern startup announcement feel.", "tags": [ "hero", "launch", "neo-brutalism", "brutalist", "countdown", "saas", "announcement", "offset-shadows" ], "features": [ "giant boxed headline with yellow accent", "live countdown ticker script", "dual offset-shadow CTAs", "diagonal grid background", "stacked product-card collage", "bright accent panels", "press-down hover states", "monospace labels" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Customer Logo Cloud — Vercel", "path": "Tailwind/Sections/SaaS/logo-cloud/vercel/", "type": "section", "description": "Dark monochrome customer logo cloud with a centered headline, a marquee-free responsive wrap of wordmark-style SVG logos, a count badge, and a pull-quote with avatar. Hairline borders, white/white-40 logo hierarchy, and a single teal accent on the count chip.", "tags": [ "logos", "logo-cloud", "customers", "vercel", "dark", "saas", "wordmarks", "teal-accent" ], "features": [ "centered headline with count chip", "responsive wordmark-style SVG logo grid", "white/white-40 logo hierarchy", "hairline panel borders", "pull-quote with avatar", "teal accent on count chip", "single teal dot" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "SaaS Metrics / Stats — Neo-Brutalism", "path": "Tailwind/Sections/SaaS/metrics/neo-brutalism/", "type": "section", "description": "Brutalist metrics section with a giant stat block, an offset grid of stat cards with rotating accent panels, a live count-up ticker on mount, a diagonal grid background, and a bold section divider. Press-down hover and monospace labels give it a raw, editorial dashboard feel.", "tags": [ "metrics", "stats", "numbers", "neo-brutalism", "brutalist", "count-up", "saas", "offset-shadows" ], "features": [ "giant featured stat block", "offset grid of stat cards", "rotating bright accent panels", "live count-up ticker on mount", "diagonal grid background", "bold section divider", "press-down hover states", "monospace labels" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing Comparison Table — Vercel", "path": "Tailwind/Sections/SaaS/pricing-comparison/vercel/", "type": "section", "description": "Dark monochrome comparison matrix with a sticky plan header row (Starter / Scale / Enterprise), grouped feature sections, and check/dash/slash glyphs. Hairline grid borders, a single teal accent on the popular column, sticky first column on desktop, and white CTAs per column.", "tags": [ "pricing", "comparison", "matrix", "vercel", "dark", "saas", "plans", "teal-accent" ], "features": [ "sticky plan header row", "grouped feature sections", "check/dash/slash glyphs", "sticky first column on desktop", "hairline grid borders", "teal accent on popular column", "per-column white CTAs", "monochrome hierarchy" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing Table — Neo-Brutalism", "path": "Tailwind/Sections/SaaS/pricing-table/neo-brutalism/", "type": "section", "description": "Brutalist three-tier SaaS pricing table with hard black borders, offset drop shadows, flat bright accents, check/dash feature lists, a highlighted popular tier, and a working monthly/annual billing toggle that swaps the displayed prices live. Press-down hover states and monospace labels give it a raw, editorial character.", "tags": [ "pricing", "pricing-table", "neo-brutalism", "brutalist", "billing-toggle", "saas", "plans", "cta", "monochrome-accents" ], "features": [ "three pricing tiers", "working monthly/annual billing toggle", "highlighted popular tier with badge", "check/dash feature lists", "hard offset shadows", "flat bright accent palette", "press-down hover states", "keyboard accessible toggle buttons" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing Table — Sharp Glassmorphism", "path": "Tailwind/Sections/SaaS/pricing-table/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass three-tier SaaS pricing table floating over an animated gradient mesh — translucent panels with backdrop blur, luminous top edge highlights, a gradient CTA on the popular tier with a cyan glow badge, check/dash feature lists, and a working monthly/annual billing toggle that swaps the displayed prices live. Hover lift states add depth to the glass cards.", "tags": [ "pricing", "pricing-table", "sharp-glassmorphism", "glassmorphism", "frosted-glass", "gradient-mesh", "billing-toggle", "saas", "plans" ], "features": [ "three pricing tiers", "working monthly/annual billing toggle", "highlighted popular tier with gradient CTA and cyan glow badge", "check/dash feature lists", "frosted-glass panels with backdrop blur", "animated gradient mesh backdrop", "luminous top-edge highlight lines", "hover lift states", "keyboard accessible toggle buttons" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Pricing Table — Vercel", "path": "Tailwind/Sections/SaaS/pricing-table/vercel/", "type": "section", "description": "Dark monochrome three-tier SaaS pricing table with hairline borders, generous spacing, white/white-50/white-35 text hierarchy, a single teal accent on the popular badge, check/dash feature lists, and a working monthly/annual billing toggle that swaps the displayed prices live. White primary CTA and subtle hover fills give it a refined, product-grade feel.", "tags": [ "pricing", "pricing-table", "vercel", "dark", "monochrome", "billing-toggle", "saas", "plans", "teal-accent" ], "features": [ "three pricing tiers", "working monthly/annual billing toggle", "highlighted popular tier with teal dot badge", "check/dash feature lists", "hairline borders and dark panels", "white primary CTA", "subtle hover fills", "keyboard accessible toggle buttons" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "SaaS Product Hero — Vercel", "path": "Tailwind/Sections/SaaS/product-hero/vercel/", "type": "section", "description": "Minimal monochrome SaaS product hero with a left-aligned two-line gradient headline, dual CTAs, trust logo row, a masked grid backdrop, and a framed dark product UI preview with sidebar, inbox rows, and a floating SLA stat chip. Single teal accent and hairline borders for a premium enterprise feel.", "tags": [ "hero", "product-hero", "vercel", "dark", "monochrome", "saas", "product-preview", "trust-logos", "teal-accent" ], "features": [ "left-aligned two-line gradient headline", "primary white CTA + secondary ghost demo CTA", "announcement pill with teal dot", "trust logo row", "masked grid backdrop", "framed product UI preview with sidebar and inbox", "floating SLA stat chip", "hairline borders and dark panel" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Product Workflow Section — Vercel", "path": "Tailwind/Sections/SaaS/product-workflow/vercel/", "type": "section", "description": "Dark monochrome numbered workflow section with a left step rail and a right sticky code/command preview that swaps per step. Three steps (ingest, route, resolve) with teal accent connectors, and a working step switcher that updates the preview panel live via a scoped script.", "tags": [ "workflow", "how-it-works", "vercel", "dark", "saas", "steps", "code-preview", "teal-accent" ], "features": [ "numbered three-step workflow", "left step rail with teal connectors", "right sticky code/command preview", "working step switcher that swaps preview live", "teal accent on active step", "dark panels and hairline borders", "scoped keyboard-accessible buttons" ], "styles": [ "vercel" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Product Screenshot Showcase — Sharp Glassmorphism", "path": "Tailwind/Sections/SaaS/screenshot-showcase/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass product screenshot showcase over an animated gradient mesh — a tabbed gallery with a large framed screenshot, thumbnail tabs, and caption metadata. Active tab swaps the preview live via a scoped script. Cyan glow accents and luminous edges.", "tags": [ "screenshots", "gallery", "showcase", "sharp-glassmorphism", "glassmorphism", "saas", "tabs", "product-preview" ], "features": [ "tabbed screenshot gallery", "large framed preview", "thumbnail tabs that swap preview live", "caption metadata rail", "cyan glow accents", "luminous top edges", "scoped keyboard-accessible tabs" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Testimonial Grid — Sharp Glassmorphism", "path": "Tailwind/Sections/SaaS/testimonials/sharp-glassmorphism/", "type": "section", "description": "Frosted-glass asymmetric testimonial grid over an animated gradient mesh — one large featured quote tile with gradient quote mark, two medium quote tiles, and two compact stat-quote tiles. Avatar initials chips, role labels, and luminous top edges with hover lift.", "tags": [ "testimonials", "social-proof", "sharp-glassmorphism", "glassmorphism", "saas", "quotes", "gradient-mesh" ], "features": [ "asymmetric testimonial layout", "large featured quote tile with gradient quote mark", "medium and compact quote tiles", "avatar initials chips", "role and company labels", "luminous top edges", "hover lift states" ], "styles": [ "sharp-glassmorphism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Free Trial CTA — Neo-Brutalism", "path": "Tailwind/Sections/SaaS/trial-cta/neo-brutalism/", "type": "section", "description": "Brutalist full-bleed free trial CTA banner with a giant headline, a no-credit-card checklist strip, dual offset-shadow CTAs, a diagonal grid background, and a rotated guarantee sticker. Press-down hover states and bright accent blocks give it a loud, confident close.", "tags": [ "cta", "trial", "neo-brutalism", "brutalist", "saas", "banner", "offset-shadows", "conversion" ], "features": [ "full-bleed CTA banner", "giant headline with accent block", "no-credit-card checklist strip", "dual offset-shadow CTAs", "diagonal grid background", "rotated guarantee sticker", "press-down hover states" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] }, { "name": "Usage Based Pricing — Neo-Brutalism", "path": "Tailwind/Sections/SaaS/usage-pricing/neo-brutalism/", "type": "section", "description": "Brutalist usage-based pricing section with a draggable usage slider that recomputes the live estimate, a stacked tier-rate table with hard borders, a volume savings bar, and offset-shadow CTAs. Monospace labels and bright accent panels give it a raw, transparent pricing feel.", "tags": [ "pricing", "usage-based", "neo-brutalism", "brutalist", "slider", "metered", "saas", "offset-shadows" ], "features": [ "draggable usage slider that recomputes live estimate", "stacked tier-rate table", "volume savings bar", "offset-shadow CTAs", "monospace labels", "bright accent panels", "press-down hover states", "keyboard accessible slider" ], "styles": [ "neo-brutalism" ], "files": [ "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "saas", "tags": [ "analytics", "announcement", "banner", "bento", "bento-grid", "billing-toggle", "brutalist", "code-preview", "comparison", "compliance", "conversion", "count-up", "countdown", "cta", "customers", "dark", "dashboard", "enterprise", "feature-grid", "features", "footer", "frosted-glass", "gallery", "glassmorphism", "gradient-mesh", "hero", "how-it-works", "launch", "logo-cloud", "logos", "matrix", "metered", "metrics", "monochrome", "monochrome-accents", "neo-brutalism", "newsletter", "numbers", "offset-shadows", "plans", "pricing", "pricing-table", "product-hero", "product-preview", "quotes", "saas", "screenshots", "sharp-glassmorphism", "showcase", "slider", "social-proof", "stats", "steps", "tabs", "teal-accent", "testimonials", "three-tier", "trial", "trust-logos", "usage-based", "vercel", "wordmarks", "workflow" ] }, { "name": "Stats (Tailwind)", "path": "Tailwind/Sections/Stats/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Stats and metrics sections — KPI cards, dashboards, counters, and progress bars.", "variantsCount": 15, "variants": [ { "name": "Circular Stats — Apple Inspired", "path": "Tailwind/Sections/Stats/apple-inspired/", "type": "section", "description": "Apple Inspired stats layout: Circular progress stats.", "tags": [ "stats", "metrics", "kpi", "numbers", "apple-inspired" ], "features": [ "circular progress stats", "SVG ring charts", "4 metrics", "dasharray fills", "responsive 1/2/4-col" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "KPI Cards — Bento Grid", "path": "Tailwind/Sections/Stats/bento-grid/", "type": "section", "description": "Bento Grid stats layout: 4 kpi cards.", "tags": [ "stats", "metrics", "kpi", "numbers", "bento-grid" ], "features": [ "4 KPI cards", "delta indicators", "iconified", "hover lift", "responsive 1/2/4-col" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Premium Stats — Cyber", "path": "Tailwind/Sections/Stats/cyber/", "type": "section", "description": "Cyber stats layout: Premium stat panel.", "tags": [ "stats", "metrics", "kpi", "numbers", "cyber" ], "features": [ "premium stat panel", "iconized tiles", "centered composition", "boxed container", "responsive 2/4-col" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Company Metrics — Dark Premium", "path": "Tailwind/Sections/Stats/dark-premium/", "type": "section", "description": "Dark Premium stats layout: Company metrics grid.", "tags": [ "stats", "metrics", "kpi", "numbers", "dark-premium" ], "features": [ "company metrics grid", "4 stats", "delta badges", "2-col mobile", "responsive 2/4-col" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Progress Bar Stats — Edge Glassmorphism", "path": "Tailwind/Sections/Stats/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism stats layout: Progress bar stats.", "tags": [ "stats", "metrics", "kpi", "numbers", "edge-glassmorphism" ], "features": [ "progress bar stats", "horizontal bars", "5 metrics", "value + label", "accent fills" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Dashboard Stats — Editorial", "path": "Tailwind/Sections/Stats/editorial/", "type": "section", "description": "Editorial stats layout: Dashboard stat panel.", "tags": [ "stats", "metrics", "kpi", "numbers", "editorial" ], "features": [ "dashboard stat panel", "bar chart placeholder", "month axis", "3 KPI tiles", "responsive" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bold Stats — Elegant Luxury", "path": "Tailwind/Sections/Stats/elegant-luxury/", "type": "section", "description": "Elegant Luxury stats layout: Bold stat grid.", "tags": [ "stats", "metrics", "kpi", "numbers", "elegant-luxury" ], "features": [ "brutalist stat grid", "edge-to-edge borders", "mono numerals", "2x2 grid", "uppercase labels" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Animated Counter Stats — Futuristic", "path": "Tailwind/Sections/Stats/futuristic/", "type": "section", "description": "Futuristic stats layout: Animated counter ui.", "tags": [ "stats", "metrics", "kpi", "numbers", "futuristic" ], "features": [ "animated counter UI", "data-counter hooks", "4 stats", "suffix support", "responsive 1/2/4-col" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bento Stats — Gradient Mesh", "path": "Tailwind/Sections/Stats/gradient-mesh/", "type": "section", "description": "Gradient Mesh stats layout: Bento stats grid.", "tags": [ "stats", "metrics", "kpi", "numbers", "gradient-mesh" ], "features": [ "bento stats grid", "large hero stat", "bar chart inset", "4 supporting tiles", "responsive 2/4-col" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Inline Stat Strip — Minimal", "path": "Tailwind/Sections/Stats/minimal/", "type": "section", "description": "Minimal stats layout: Inline stat strip.", "tags": [ "stats", "metrics", "kpi", "numbers", "minimal" ], "features": [ "inline stat strip", "divided columns", "compact container", "centered values", "responsive 2/4-col" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Spotlight Stats — Monochrome", "path": "Tailwind/Sections/Stats/monochrome/", "type": "section", "description": "Monochrome stats layout: Spotlight stat cards.", "tags": [ "stats", "metrics", "kpi", "numbers", "monochrome" ], "features": [ "spotlight stat cards", "mini progress bars", "6 metrics", "icon + value", "responsive 1/2/3-col" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Stats — Neo Brutalism", "path": "Tailwind/Sections/Stats/neo-brutalism/", "type": "section", "description": "Neo Brutalism stats layout: Split stat layout.", "tags": [ "stats", "metrics", "kpi", "numbers", "neo-brutalism" ], "features": [ "split stat layout", "large headline number", "2x2 supporting grid", "asymmetric balance", "responsive" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Stats — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Stats/soft-ui/", "type": "section", "description": "Soft UI stats layout: Minimal text stats.", "tags": [ "stats", "metrics", "kpi", "numbers", "soft-ui" ], "features": [ "minimal text stats", "no cards", "centered values", "2/4-col grid", "low chrome" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Growth Stats — Startup Landing", "path": "Tailwind/Sections/Stats/startup-landing/", "type": "section", "description": "Startup Landing stats layout: Startup growth panel.", "tags": [ "stats", "metrics", "kpi", "numbers", "startup-landing" ], "features": [ "startup growth panel", "headline percentage", "3 progress bars", "accent fills", "responsive split" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Comparison Stats — Vercel / Linear", "path": "Tailwind/Sections/Stats/vercel/", "type": "section", "description": "Vercel / Linear stats layout: Year-over-year comparison.", "tags": [ "stats", "metrics", "kpi", "numbers", "vercel" ], "features": [ "year-over-year comparison", "two panels", "mini bar charts", "period labels", "responsive 2-col" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "stats", "tags": [ "apple-inspired", "bento-grid", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "futuristic", "gradient-mesh", "kpi", "metrics", "minimal", "monochrome", "neo-brutalism", "numbers", "soft-ui", "startup-landing", "stats", "vercel" ] }, { "name": "Team (Tailwind)", "path": "Tailwind/Sections/Team/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Team sections — grids, founders, hierarchy, circular, and detailed profile cards.", "variantsCount": 15, "variants": [ { "name": "Featured Team — Apple Inspired", "path": "Tailwind/Sections/Team/apple-inspired/", "type": "section", "description": "Apple Inspired team layout: Featured + grid team.", "tags": [ "team", "people", "about", "profiles", "apple-inspired" ], "features": [ "featured + grid team", "large profile card", "2x2 supporting", "responsive split", "social links" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Compact Team Grid — Bento Grid", "path": "Tailwind/Sections/Team/bento-grid/", "type": "section", "description": "Bento Grid team layout: Compact team grid.", "tags": [ "team", "people", "about", "profiles", "bento-grid" ], "features": [ "compact team grid", "12 members", "small tiles", "responsive 2/3/6-col", "truncate names" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bento Team — Cyber", "path": "Tailwind/Sections/Team/cyber/", "type": "section", "description": "Cyber team layout: Bento team grid.", "tags": [ "team", "people", "about", "profiles", "cyber" ], "features": [ "bento team grid", "compact tiles", "8 members", "centered avatars", "responsive 2/4-col" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Avatar Wall Team — Dark Premium", "path": "Tailwind/Sections/Team/dark-premium/", "type": "section", "description": "Dark Premium team layout: Avatar wall.", "tags": [ "team", "people", "about", "profiles", "dark-premium" ], "features": [ "avatar wall", "24 avatars", "headline count", "careers CTA", "centered composition" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Bold Team Cards — Edge Glassmorphism", "path": "Tailwind/Sections/Team/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism team layout: Bold team cards.", "tags": [ "team", "people", "about", "profiles", "edge-glassmorphism" ], "features": [ "brutalist team cards", "mono labels", "uppercase names", "8 members", "responsive 2/4-col" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Detailed Profile Cards — Editorial", "path": "Tailwind/Sections/Team/editorial/", "type": "section", "description": "Editorial team layout: Detailed profile cards.", "tags": [ "team", "people", "about", "profiles", "editorial" ], "features": [ "detailed profile cards", "stat sub-tiles", "verified badge", "4 members", "responsive 1/2-col" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Circular Profiles — Elegant Luxury", "path": "Tailwind/Sections/Team/elegant-luxury/", "type": "section", "description": "Elegant Luxury team layout: Circular profiles.", "tags": [ "team", "people", "about", "profiles", "elegant-luxury" ], "features": [ "circular profiles", "6 members", "ringed avatars", "centered captions", "responsive 2/3/6-col" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Team Grid — Futuristic", "path": "Tailwind/Sections/Team/futuristic/", "type": "section", "description": "Futuristic team layout: Team grid.", "tags": [ "team", "people", "about", "profiles", "futuristic" ], "features": [ "team grid", "8 members", "social links", "hover lift", "responsive 1/2/4-col" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Executive Cards — Gradient Mesh", "path": "Tailwind/Sections/Team/gradient-mesh/", "type": "section", "description": "Gradient Mesh team layout: Executive cards.", "tags": [ "team", "people", "about", "profiles", "gradient-mesh" ], "features": [ "executive cards", "experience badges", "6 leaders", "social links", "responsive 1/2/3-col" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Profiles — Minimal", "path": "Tailwind/Sections/Team/minimal/", "type": "section", "description": "Minimal team layout: Minimal profiles.", "tags": [ "team", "people", "about", "profiles", "minimal" ], "features": [ "minimal profiles", "inline rows", "avatar + name", "no cards", "responsive 1/2/3-col" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Editorial Team — Monochrome", "path": "Tailwind/Sections/Team/monochrome/", "type": "section", "description": "Monochrome team layout: Editorial team layout.", "tags": [ "team", "people", "about", "profiles", "monochrome" ], "features": [ "editorial team layout", "featured profile", "side list", "serif headline", "responsive split" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Spotlight Team — Neo Brutalism", "path": "Tailwind/Sections/Team/neo-brutalism/", "type": "section", "description": "Neo Brutalism team layout: Spotlight team cards.", "tags": [ "team", "people", "about", "profiles", "neo-brutalism" ], "features": [ "spotlight team cards", "verified badges", "6 members", "social links", "responsive 1/2/3-col" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Startup Founders — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Team/soft-ui/", "type": "section", "description": "Soft UI team layout: Founders spotlight.", "tags": [ "team", "people", "about", "profiles", "soft-ui" ], "features": [ "founders spotlight", "large feature card", "2 supporting cards", "2/3 + 1/3 split", "social links" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Leadership Row — Startup Landing", "path": "Tailwind/Sections/Team/startup-landing/", "type": "section", "description": "Startup Landing team layout: Leadership row.", "tags": [ "team", "people", "about", "profiles", "startup-landing" ], "features": [ "leadership row", "4 executives", "centered cards", "ringed avatars", "responsive 1/2/4-col" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Company Hierarchy — Vercel / Linear", "path": "Tailwind/Sections/Team/vercel/", "type": "section", "description": "Vercel / Linear team layout: Org hierarchy.", "tags": [ "team", "people", "about", "profiles", "vercel" ], "features": [ "org hierarchy", "3-tier layout", "CEO + C-level + leads", "tree composition", "responsive" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "team", "tags": [ "about", "apple-inspired", "bento-grid", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "futuristic", "gradient-mesh", "minimal", "monochrome", "neo-brutalism", "people", "profiles", "soft-ui", "startup-landing", "team", "vercel" ] }, { "name": "Testimonials (Tailwind)", "path": "Tailwind/Sections/Testimonials/", "tech": "Tailwind CSS", "type": "section", "category": "Sections", "description": "Customer testimonial layouts with ratings, avatars, and quotes for social proof.", "variantsCount": 15, "variants": [ { "name": "User Avatar Wall — Apple Inspired", "path": "Tailwind/Sections/Testimonials/apple-inspired/", "type": "section", "description": "Apple Inspired testimonials layout: Avatar wall.", "tags": [ "testimonials", "social-proof", "ratings", "apple-inspired" ], "features": [ "avatar wall", "featured quote banner", "12 profile tiles", "responsive 3/4/6-col", "community count" ], "styles": [ "apple-inspired" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Rating Summary Testimonials — Bento Grid", "path": "Tailwind/Sections/Testimonials/bento-grid/", "type": "section", "description": "Bento Grid testimonials layout: Aggregate rating summary.", "tags": [ "testimonials", "social-proof", "ratings", "bento-grid" ], "features": [ "aggregate rating summary", "distribution bars", "4.9/5 headline", "review count", "side-by-side quotes" ], "styles": [ "bento-grid" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Metrics + Testimonials — Cyber", "path": "Tailwind/Sections/Testimonials/cyber/", "type": "section", "description": "Cyber testimonials layout: Quote + metric tiles.", "tags": [ "testimonials", "social-proof", "ratings", "cyber" ], "features": [ "quote + metric tiles", "quantified proof", "2/3 + 1/3 grid", "KPI cards", "responsive stack" ], "styles": [ "cyber" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Split Testimonial Spotlight — Dark Premium", "path": "Tailwind/Sections/Testimonials/dark-premium/", "type": "section", "description": "Dark Premium testimonials layout: Split spotlight layout.", "tags": [ "testimonials", "social-proof", "ratings", "dark-premium" ], "features": [ "split spotlight layout", "large feature quote", "2x2 supporting grid", "asymmetric balance", "rating stars" ], "styles": [ "dark-premium" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Masonry Testimonial Wall — Edge Glassmorphism", "path": "Tailwind/Sections/Testimonials/edge-glassmorphism/", "type": "section", "description": "Edge Glassmorphism testimonials layout: Css masonry via columns.", "tags": [ "testimonials", "social-proof", "ratings", "edge-glassmorphism" ], "features": [ "CSS masonry via columns", "9 testimonials", "varying card heights", "break-inside-avoid", "responsive collapse" ], "styles": [ "edge-glassmorphism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Video Testimonial Placeholders — Editorial", "path": "Tailwind/Sections/Testimonials/editorial/", "type": "section", "description": "Editorial testimonials layout: Video placeholder tiles.", "tags": [ "testimonials", "social-proof", "ratings", "editorial" ], "features": [ "video placeholder tiles", "play button overlay", "duration badge", "gradient poster", "captioned profiles" ], "styles": [ "editorial" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Before/After Testimonials — Elegant Luxury", "path": "Tailwind/Sections/Testimonials/elegant-luxury/", "type": "section", "description": "Elegant Luxury testimonials layout: Before/after comparison.", "tags": [ "testimonials", "social-proof", "ratings", "elegant-luxury" ], "features": [ "before/after comparison", "two-panel layout", "state badges", "accent-tinted after card", "narrative arc" ], "styles": [ "elegant-luxury" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Minimal Testimonial Wall — Futuristic", "path": "Tailwind/Sections/Testimonials/futuristic/", "type": "section", "description": "Futuristic testimonials layout: Dense minimal wall.", "tags": [ "testimonials", "social-proof", "ratings", "futuristic" ], "features": [ "dense minimal wall", "12 short quotes", "4-column grid", "low-chrome cards", "author attribution" ], "styles": [ "futuristic" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Featured + Grid Testimonials — Gradient Mesh", "path": "Tailwind/Sections/Testimonials/gradient-mesh/", "type": "section", "description": "Gradient Mesh testimonials layout: Featured wide card.", "tags": [ "testimonials", "social-proof", "ratings", "gradient-mesh" ], "features": [ "featured wide card", "2/3 + 1/3 split", "secondary quotes grid", "visual hierarchy", "responsive stack" ], "styles": [ "gradient-mesh" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Company Reviews — Minimal", "path": "Tailwind/Sections/Testimonials/minimal/", "type": "section", "description": "Minimal testimonials layout: Company-branded cards.", "tags": [ "testimonials", "social-proof", "ratings", "minimal" ], "features": [ "company-branded cards", "verified badges", "company + reviewer", "2-column grid", "rating summary" ], "styles": [ "minimal" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Stacked Quote Testimonials — Monochrome", "path": "Tailwind/Sections/Testimonials/monochrome/", "type": "section", "description": "Monochrome testimonials layout: Stacked single-column.", "tags": [ "testimonials", "social-proof", "ratings", "monochrome" ], "features": [ "stacked single-column", "horizontal avatar-quote", "5 testimonials", "narrow max width", "sequential reading" ], "styles": [ "monochrome" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Card Grid Testimonials — Neo Brutalism", "path": "Tailwind/Sections/Testimonials/neo-brutalism/", "type": "section", "description": "Neo Brutalism testimonials layout: 3-column responsive grid.", "tags": [ "testimonials", "social-proof", "ratings", "neo-brutalism" ], "features": [ "3-column responsive grid", "star ratings", "gradient initial avatars", "hover lift", "semantic article/figcaption" ], "styles": [ "neo-brutalism" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Logo + Quote Testimonials — Soft UI (Neumorphism)", "path": "Tailwind/Sections/Testimonials/soft-ui/", "type": "section", "description": "Soft UI testimonials layout: Logo-tagged quotes.", "tags": [ "testimonials", "social-proof", "ratings", "soft-ui" ], "features": [ "logo-tagged quotes", "split spotlight", "company attribution", "star ratings", "responsive 2-col" ], "styles": [ "soft-ui" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Large Quote Feature — Startup Landing", "path": "Tailwind/Sections/Testimonials/startup-landing/", "type": "section", "description": "Startup Landing testimonials layout: Oversized pull quote.", "tags": [ "testimonials", "social-proof", "ratings", "startup-landing" ], "features": [ "oversized pull quote", "centered composition", "decorative quote glyph", "avatar + role", "5-star rating" ], "styles": [ "startup-landing" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] }, { "name": "Carousel-Style Testimonials — Vercel / Linear", "path": "Tailwind/Sections/Testimonials/vercel/", "type": "section", "description": "Vercel / Linear testimonials layout: Horizontal snap carousel (no js).", "tags": [ "testimonials", "social-proof", "ratings", "vercel" ], "features": [ "horizontal snap carousel (no JS)", "hidden scrollbar", "pagination dots", "responsive card widths", "keyboard scrollable" ], "styles": [ "vercel" ], "files": [ "README.md", "code.html", "metadata.json", "preview.html" ] } ], "subcategory": "testimonials", "tags": [ "apple-inspired", "bento-grid", "cyber", "dark-premium", "edge-glassmorphism", "editorial", "elegant-luxury", "futuristic", "gradient-mesh", "minimal", "monochrome", "neo-brutalism", "ratings", "social-proof", "soft-ui", "startup-landing", "testimonials", "vercel" ] }, { "name": "AI SaaS Platform (Template)", "path": "Tailwind/Templates/ai-saas-platform/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "Premium multi-page AI SaaS startup website template — 11 connected pages (marketing site, docs, auth, and a matching application dashboard) sharing one dark, glass-and-gradient design system. Tailwind CDN + vanilla JS, fully responsive.", "variantsCount": 1, "variants": [ { "name": "AI SaaS Platform", "path": "Tailwind/Templates/ai-saas-platform/", "type": "template", "description": "AI SaaS Platform", "tags": [ "ai", "saas", "startup", "dashboard", "landing-page", "editorial", "terracotta" ], "styles": [ "editorial-warm-saas" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/blog-post.html", "pages/blog.html", "pages/customers.html", "pages/dashboard.html", "pages/docs.html", "pages/features.html", "pages/index.html", "pages/integrations.html", "pages/login.html", "pages/pricing.html", "pages/signup.html", "components/buttons.html", "components/footer.html", "components/navbar.html", "components/reusable-ui.html" ] } ], "tags": [ "ai", "saas", "startup", "dashboard", "landing-page", "template", "tailwind", "multipage" ], "searchTerms": [ "ai saas template", "saas website template", "multi-page tailwind template", "startup landing page", "saas dashboard template", "saas pricing page", "saas docs template", "dark saas template" ] }, { "name": "Atlas Analytics Platform", "path": "Tailwind/Templates/atlas-analytics/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "A flagship 11-page Tailwind CSS product-analytics application template for Atlas Analytics, a fictional enterprise analytics platform. A minimal, light, editorial, data-dense design language — white canvas, near-black text, 1px hairline borders, small radii, restrained shadows and a single controlled blue accent. Eleven independently-usable pages (overview, analytics explorer, funnels, cohorts, retention, revenue, reports, dashboards, segments, events, settings) share one Atlas shell (sticky topbar + fixed sidebar + calm dark-mode toggle). All charts are hand-built inline SVG; Tailwind CDN + scoped vanilla JS, fully responsive from 320px up, no build step.", "variantsCount": 1, "variants": [ { "name": "Atlas Analytics Platform", "path": "Tailwind/Templates/atlas-analytics/", "type": "template", "description": "A flagship 11-page Tailwind CSS product-analytics application template for Atlas Analytics, a fictional enterprise analytics platform. A minimal, light, editorial, data-dense design language — white canvas, near-black text, 1px hairline borders, small radii, restrained shadows and a single controlled blue accent. Eleven independently-usable pages (overview, analytics explorer, funnels, cohorts, retention, revenue, reports, dashboards, segments, events, settings) share one Atlas shell (sticky topbar + fixed sidebar + calm dark-mode toggle). All charts are hand-built inline SVG; Tailwind CDN + scoped vanilla JS, fully responsive from 320px up, no build step.", "tags": [ "analytics", "product-analytics", "dashboard", "funnels", "cohorts", "retention", "revenue", "segments", "saas", "data-dense", "minimal", "editorial", "tailwind", "multipage", "template" ], "features": [ "11 independently-usable application pages sharing one Atlas shell (sticky topbar + fixed sidebar)", "minimal editorial design system: white canvas, near-black text, 1px hairline borders, small radii, restrained shadows, single blue accent", "shared shell with Cmd+K command palette, environment selector, persisted no-flash dark-mode toggle and responsive sidebar drawer", "Overview page: KPI grid with sparklines, weekly active-users chart, top sources table, recent activity feed", "Analytics explorer: metric trend chart with range/metric switching, events table, distribution bar chart", "Funnel analysis: 4-stage conversion funnel SVG with stage drop-off, step table and comparison toggle", "Cohort analysis: triangular retention heatmap with percentage cells and cohort size column", "Retention curves: overlapping retention curves by cohort with legend and N-week table", "Revenue analytics: MRR/ARR KPIs, revenue trend area chart, plan breakdown, transactions table", "Reports: saved report cards with schedule badges and a report builder prompt", "Dashboards: custom dashboard grid with widget cards and an empty-state prompt", "Segments: audience segment table with size, composition and trend sparkline", "Events explorer: event frequency table, naming convention guidance and sample events", "Settings: tabbed workspace/general/billing tabs with form controls, toggles and a danger zone", "hand-built inline SVG charts (sparklines, area, bar, funnel, heatmap, curves) in a restrained neutral palette", "semantic HTML, skip link, single h1 per page, ARIA on tabs/drawer/toggle, visible focus rings and prefers-reduced-motion support", "calm dark mode (inverted same system — never neon purple or glassmorphism) via CSS custom properties", "Tailwind CSS via CDN with a small inline theme extension and no build step" ], "styles": [ "minimal-editorial-analytics" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/analytics.html", "pages/cohorts.html", "pages/dashboards.html", "pages/events.html", "pages/funnels.html", "pages/index.html", "pages/reports.html", "pages/retention.html", "pages/revenue.html", "pages/segments.html", "pages/settings.html" ] } ], "tags": [ "analytics", "cohorts", "dashboard", "data-dense", "editorial", "funnels", "minimal", "multipage", "product-analytics", "retention", "revenue", "saas", "segments", "tailwind", "template" ], "searchTerms": [ "analytics dashboard template", "product analytics template", "saas dashboard tailwind", "funnel analysis template", "cohort retention heatmap", "revenue analytics dashboard", "multipage admin template", "tailwind admin template", "data dashboard template", "analytics platform template" ] }, { "name": "Baseline Conference (Template)", "path": "Tailwind/Templates/baseline-conference/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "Multi-page design & engineering conference website template in a bold Neo-Brutalist design system — six connected pages (home, speakers, schedule, venue, register, code of conduct) sharing one cream + black + bright-accent language with hard borders and offset shadows. Tailwind CDN + vanilla JS, fully responsive from 320px up.", "variantsCount": 1, "variants": [ { "name": "Baseline Design & Engineering Conference", "path": "Tailwind/Templates/baseline-conference/", "type": "template", "description": "A premium multi-page website template for a design & engineering conference, built in a bold Neo-Brutalist design system. Six connected pages (home, speakers, schedule, venue, register, code of conduct) sharing one cream + black + bright-accent language with hard borders and offset shadows. Tailwind CDN + vanilla JS, fully responsive from 320px up.", "tags": [ "conference", "event", "neo-brutalism", "landing-page", "schedule", "tickets", "template", "tailwind", "multipage" ], "features": [ "6 connected pages sharing one Neo-Brutalist design system", "shared sticky navbar with mobile menu (scoped vanilla JS)", "shared footer with newsletter and social links", "hero with oversized type and offset ticket card", "speakers grid with filterable track chips (scoped JS)", "two-day schedule with day tabs and session cards (scoped JS)", "venue page with CSS-map illustration and travel info", "ticketed register page with order summary and validation", "code-of-conduct long-form article layout", "fully responsive (mobile-first, 320px to 1920px+)", "accessible: semantic HTML, ARIA, focus rings, reduced-motion safe" ], "styles": [ "neo-brutalism" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/conduct.html", "pages/index.html", "pages/register.html", "pages/schedule.html", "pages/speakers.html", "pages/venue.html" ] } ], "tags": [ "conference", "event", "neo-brutalism", "landing-page", "schedule", "tickets", "template", "tailwind", "multipage" ], "searchTerms": [ "conference website template", "event landing page", "neo-brutalism template", "design conference template", "speaker schedule template", "ticket registration page", "tailwind event template", "multi-page conference template" ] }, { "name": "DevSnips Curated Design Store", "path": "Tailwind/Templates/devsnips-store/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "A premium six-page Tailwind CSS ecommerce template for DevSnips, a fictional curated store of considered design objects. Editorial Modern meets Monochrome Luxury — a warm neutral palette (ink, paper, bone, cream) with a single clay accent, a high-contrast Fraunces serif for display, Inter for body and JetBrains Mono for labels. Six connected pages (home, shop, product, cart, checkout, journal) plus an about/atelier page share one design system of hairline rules, square geometry and generous whitespace. Tailwind CDN + scoped vanilla JS, fully responsive from 320px up.", "variantsCount": 1, "variants": [ { "name": "DevSnips Curated Design Store", "path": "Tailwind/Templates/devsnips-store/", "type": "template", "description": "A premium six-page Tailwind CSS ecommerce template for DevSnips, a fictional curated store of considered design objects. Editorial Modern meets Monochrome Luxury — a warm neutral palette (ink, paper, bone, cream) with a single clay accent, a high-contrast Fraunces serif for display, Inter for body and JetBrains Mono for labels. Six connected pages (home, shop, product, cart, checkout, journal) plus an about/atelier page share one design system of hairline rules, square geometry and generous whitespace. Tailwind CDN + scoped vanilla JS, fully responsive from 320px up.", "tags": [ "ecommerce", "shopping", "store", "editorial", "monochrome-luxury", "design-objects", "homewares", "tailwind", "multipage", "template" ], "features": [ "6 connected pages sharing one editorial-luxury design system", "shared sticky navbar (centered [D] logo, cart badge, scoped mobile menu) and footer", "editorial issue-cover hero with oversized serif headline, featured object panel and numbered collection index", "product grid with hover-reveal detail strips and inline SVG object illustrations", "material-spectrum swatch visualization and a quiet metrics band", "shop page with category filter chips, sort dropdown and live result count (scoped JS)", "product page with thumbnail gallery, finish swatches, quantity stepper and single-open care-guide accordion (CSS-grid, ARIA, keyboard)", "receipt-style cart order summary with working quantity steppers, line totals, shipping estimate and empty state (scoped JS)", "stepper-led checkout with contact, shipping, payment and a fixed order summary", "editorial journal index with featured entry, tag filters and magazine-style article cards", "atelier/about page with principles, process timeline and maker studio cards", "consistent token system: warm neutrals, hairline rules, square radii, single clay accent, no gradients/shadows", "semantic HTML, skip link, ARIA, visible focus states and prefers-reduced-motion support", "Tailwind CSS via CDN with no build step" ], "styles": [ "editorial-modern-monochrome-luxury" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/about.html", "pages/cart.html", "pages/checkout.html", "pages/index.html", "pages/journal.html", "pages/product.html", "pages/shop.html" ] } ], "tags": [ "ecommerce", "shopping", "store", "editorial", "monochrome-luxury", "design-objects", "homewares", "tailwind", "multipage", "template" ] }, { "name": "Krat Adventure Wilderness", "path": "Tailwind/Templates/krat-adventure/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "A cinematic wilderness landing page inspired by premium outdoor editorial campaigns, combining oversized typography, saturated photography, asymmetrical adventure cards, field-note details, and a deep navy palette.", "variantsCount": 1, "variants": [ { "name": "Krat Adventure Wilderness", "path": "Tailwind/Templates/krat-adventure/", "type": "template", "description": "A cinematic wilderness landing page inspired by premium outdoor editorial campaigns, combining oversized typography, saturated photography, asymmetrical adventure cards, field-note details, and a deep navy palette.", "tags": [ "adventure", "travel", "wilderness", "editorial", "cinematic", "outdoor", "dark", "tailwind" ], "features": [ "cinematic full-screen hero with oversized editorial typography", "asymmetrical three-card adventure grid", "responsive field-notes editorial section", "featured expedition image with route statistics", "staggered journal cards", "full-screen navigation overlay", "scroll progress indicator and subtle hover motion", "mobile-first layouts from 320px through 1920px+", "semantic HTML, keyboard focus states, skip link, alt text, and reduced-motion support", "no build step required; Tailwind CSS CDN" ], "styles": [ "cinematic-editorial" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/index.html" ] } ], "tags": [ "adventure", "travel", "wilderness", "editorial", "cinematic", "outdoor", "dark", "tailwind" ] }, { "name": "Meridian Incident Command Platform (Template)", "path": "Tailwind/Templates/meridian/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "Premium single-page Tailwind CSS template for an incident command platform built for on-call engineering teams — Neo-Industrial utility language fused with Swiss Minimal discipline (1px hairline rules, graph-paper blueprint surfaces, Space Grotesk display + JetBrains Mono metadata). Hand-built incident command-surface hero with a live latency sparkline and floating signal/escalation cards, a directed alert-routing graph visualization, a five-step incident lifecycle workflow, dark customer-outcome metrics, engineer testimonials, per-on-call-team pricing, a scoped single-open FAQ accordion, and a dark corner-tick conversion CTA. Tailwind CDN + vanilla JS, fully responsive from 320px up.", "variantsCount": 1, "variants": [ { "name": "Meridian Incident Command Platform", "path": "Tailwind/Templates/meridian/", "type": "template", "description": "A premium single-page Tailwind CSS template for an incident command platform built for on-call engineering teams. Neo-Industrial utility language meets Swiss Minimal discipline — 1px hairline rules, graph-paper blueprint surfaces, Space Grotesk display type, JetBrains Mono metadata, a hand-built incident command-surface hero with a live latency sparkline and floating signal/escalation cards, a directed alert-routing graph visualization, a five-step incident lifecycle workflow, dark customer-outcome metrics, engineer testimonials, per-on-call-team pricing, a scoped single-open FAQ accordion, and a dark corner-tick conversion CTA.", "tags": [ "incident-management", "on-call", "observability", "alert-routing", "neo-industrial", "swiss-minimal", "b2b-saas", "developer-tools", "landing-page", "dashboard-preview", "tailwind", "single-page", "template" ], "features": [ "single-page responsive landing page (320px → 1920px+)", "editorial-technical split hero with incident command-surface product visualization (live status, latency sparkline, responders, timeline, runbook footer)", "floating signal-correlation + stepped-escalation mini-cards layered around the hero panel", "hairline-divided three-pillar panels (Route / Respond / Learn)", "signature directed alert-routing graph (signal → correlate → rule → page) with animated edges and an ack-fallback branch", "five-step incident lifecycle workflow with per-step timings and a signed-state rail", "dark customer-outcome metrics band (MTTA / MTTR / noise / burnout) on a divided grid", "featured pull-quote testimonial + secondary engineer testimonial cards", "three-tier per-on-call-team pricing with featured Squad plan", "scoped single-open FAQ accordion (CSS-grid animation, ARIA, keyboard)", "dark conversion CTA with corner-tick framing and a three-line onboarding panel", "five-column footer with live system-status indicator", "sticky navbar with scoped vanilla-JS mobile menu (escape-safe)", "consistent Neo-Industrial + Swiss Minimal token system: 1px hairlines, square radii, single amber accent, blueprint graph-paper surfaces, restrained tonal elevation", "semantic HTML, skip link, ARIA, visible focus states, and prefers-reduced-motion support", "Tailwind CSS via CDN with no build step" ], "styles": [ "neo-industrial-swiss-minimal" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/index.html" ] } ], "tags": [ "incident-management", "on-call", "observability", "alert-routing", "neo-industrial", "swiss-minimal", "b2b-saas", "developer-tools", "landing-page", "dashboard-preview", "tailwind", "single-page", "template" ], "searchTerms": [ "incident management template", "on-call landing page", "alert routing website", "observability platform template", "neo-industrial saas template", "swiss minimal landing page", "developer tools website", "incident command template", "tailwind developer template", "pagerduty alternative landing page" ] }, { "name": "Northline Atelier Architecture Studio", "path": "Tailwind/Templates/northline-atelier/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "A premium four-page architecture studio template pairing an editorial grid with warm neutrals, quiet typography, generous whitespace, and restrained interactions. Built as a responsive Tailwind CSS site without local assets.", "variantsCount": 1, "variants": [ { "name": "Northline Atelier Architecture Studio", "path": "Tailwind/Templates/northline-atelier/", "type": "template", "description": "A premium four-page architecture studio template pairing an editorial grid with warm neutrals, quiet typography, generous whitespace, and restrained interactions. Built as a responsive Tailwind CSS site without local assets.", "tags": [ "architecture", "studio", "portfolio", "soft-modern", "minimal", "editorial", "tailwind", "multipage" ], "features": [ "4 connected pages sharing one Soft Modern design system", "editorial home page with featured project and studio metrics", "responsive project archive with category filters", "studio page with practice principles and team profiles", "contact page with project enquiry form and studio details", "inline SVG project diagrams and architectural motifs", "mobile-first layouts from 320px through 1920px+", "semantic HTML, accessible labels, focus states, and reduced-motion support" ], "styles": [ "soft-modern" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/contact.html", "pages/index.html", "pages/projects.html", "pages/studio.html" ] } ], "tags": [ "architecture", "studio", "portfolio", "soft-modern", "minimal", "editorial", "tailwind", "multipage" ] }, { "name": "Quiet Place", "path": "Tailwind/Templates/quiet-place/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "A calm, illustration-led Tailwind landing page inspired by a quiet lakeside sanctuary, pairing a muted mint canvas, condensed editorial typography, soft coral CTAs, and a detailed inline SVG pixel-art landscape.", "variantsCount": 1, "variants": [ { "name": "Quiet Place", "path": "Tailwind/Templates/quiet-place/", "type": "template", "description": "A calm, illustration-led Tailwind landing page inspired by a quiet lakeside sanctuary, pairing a muted mint canvas, condensed editorial typography, soft coral CTAs, and a detailed inline SVG pixel-art landscape.", "tags": [ "wellness", "mindfulness", "creative", "cozy", "pixel-art", "illustration", "soft-modern", "landing-page", "tailwind" ], "features": [ "single-page responsive landing page", "illustration-led hero composition", "detailed inline SVG forest, lake, fisherman, clouds, flowers, reeds, and water reflections", "soft mint and coral visual system", "responsive three-column feature layout", "mobile navigation and touch-friendly CTAs", "semantic HTML and accessible SVG title/description", "reduced-motion support", "Tailwind CSS via CDN with no build step" ], "styles": [ "soft-modern" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/index.html" ] } ], "tags": [ "wellness", "mindfulness", "creative", "cozy", "pixel-art", "illustration", "soft-modern", "landing-page", "tailwind" ] }, { "name": "Stratum Fintech Ops Platform (Template)", "path": "Tailwind/Templates/stratum/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "Premium single-page Tailwind CSS template for a vertical fintech operations platform — Neo-Brutalist geometry fused with editorial typography (thick 2px borders, offset hard shadows, Archivo display + JetBrains Mono metadata). Hand-built treasury command-surface hero with live sparkline, approval-routing graph, staggered pillar cards, bento capabilities, five-step workflow, metrics, testimonials, cash-managed pricing, scoped FAQ accordion, and dark conversion CTA. Tailwind CDN + vanilla JS, fully responsive from 320px up.", "variantsCount": 1, "variants": [ { "name": "Stratum Fintech Ops Platform", "path": "Tailwind/Templates/stratum/", "type": "template", "description": "A premium single-page Tailwind CSS template for a vertical fintech operations platform. Neo-Brutalist geometry meets editorial typography — thick 2px borders, offset hard shadows, Archivo display type, JetBrains Mono metadata, a hand-built treasury command-surface hero with live sparkline, an approval-routing graph visualization, staggered pillar cards, a bento capabilities grid, a five-step workflow, customer-outcome metrics, testimonial proof, cash-managed pricing, a scoped single-open FAQ accordion, and a dark conversion CTA.", "tags": [ "fintech", "finance-ops", "treasury", "bill-pay", "neo-brutalism", "editorial", "b2b-saas", "landing-page", "dashboard-preview", "tailwind", "single-page", "template" ], "features": [ "single-page responsive landing page (320px → 1920px+)", "editorial split hero with treasury command-surface product visualization (live status, sparkline, account ledger)", "floating approval + FX mini-cards layered around the hero panel", "staggered three-pillar offset cards (Treasury / Bill pay / Spend control)", "bento capabilities grid with policy-as-code approval-routing graph", "five-step capture-to-reconcile workflow with per-step timings", "dark customer-outcome metrics band on a divided grid", "featured pull-quote testimonial + secondary testimonial cards", "three-tier cash-managed pricing with featured Growth plan", "scoped single-open FAQ accordion (CSS-grid animation, ARIA, keyboard)", "dark CTA section with corner-tick framing", "five-column footer with live system-status indicator", "sticky navbar with scoped vanilla-JS mobile menu (escape-safe)", "consistent Neo-Brutalist token system: 2px borders, square radii, 4/8/12px offset shadows, press interactions", "semantic HTML, skip link, ARIA, visible focus states, and prefers-reduced-motion support", "Tailwind CSS via CDN with no build step" ], "styles": [ "neo-brutalism-editorial" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/index.html" ] } ], "tags": [ "fintech", "finance-ops", "treasury", "bill-pay", "neo-brutalism", "editorial", "b2b-saas", "landing-page", "dashboard-preview", "tailwind", "single-page", "template" ], "searchTerms": [ "fintech website template", "finance ops landing page", "treasury dashboard template", "neo-brutalism saas template", "b2b fintech template", "bill pay website", "vertical saas template", "editorial brutalist landing page", "tailwind fintech template", "spend management website" ] }, { "name": "Vesper Attack-Surface Management Platform (Template)", "path": "Tailwind/Templates/vesper/", "tech": "Tailwind CSS", "type": "template", "category": "Templates", "description": "Premium single-page Tailwind CSS template for an external attack-surface management platform built for security teams — Glassmorphism surfaces fused with Cyber Minimal discipline (translucent frosted panels over an atmospheric fuchsia/indigo/cyan mesh, Sora display + JetBrains Mono metadata). Hand-built attack-surface command-console hero with a live surface radar, sparkline, and floating critical-exposure/new-asset mini-cards, a signature asset-topology reachability graph with the exposed path animated in cyan, a five-step signed-state EASM lifecycle workflow, dark customer-outcome metrics, security-leader testimonials, per-asset pricing, a scoped single-open FAQ accordion, and a glass conversion CTA with a three-step onboarding panel. Tailwind CDN + vanilla JS, fully responsive from 320px up.", "variantsCount": 1, "variants": [ { "name": "Vesper Attack-Surface Management Platform", "path": "Tailwind/Templates/vesper/", "type": "template", "description": "A premium single-page Tailwind CSS template for an external attack-surface management platform built for security teams. Glassmorphism surfaces meet Cyber Minimal discipline — translucent frosted panels over an atmospheric fuchsia/indigo/cyan mesh, Sora display type, JetBrains Mono metadata, a hand-built attack-surface command-console hero with a live surface radar and sparkline plus floating critical-exposure/new-asset mini-cards, a signature asset-topology reachability graph with an exposed path highlighted in cyan, a five-step signed-state EASM lifecycle workflow, dark customer-outcome metrics, security-leader testimonials, per-asset pricing, a scoped single-open FAQ accordion, and a glass conversion CTA with a three-step onboarding panel.", "tags": [ "cybersecurity", "attack-surface-management", "easm", "threat-intel", "glassmorphism", "cyber-minimal", "b2b-saas", "developer-tools", "landing-page", "dashboard-preview", "tailwind", "single-page", "template" ], "features": [ "single-page responsive landing page (320px → 1920px+)", "editorial-cyber split hero with attack-surface command-console visualization (live scanning status, severity bar, exposure rows, surface radar, exposures-per-day sparkline, floating critical-exposure + new-asset mini-cards)", "atmospheric glassmorphism backdrop — translucent frosted panels over a low-opacity fuchsia/indigo/cyan mesh with slow drift + fine cyber-grid + vignette", "three frosted-glass pillar panels (Discover / Prioritize / Remediate) with severity-colored icon chips", "signature asset-topology reachability graph (internet → load balancer → API gateway → K8s API / Postgres / S3) with the exposed path animated in cyan and a critical-asset node in red", "five-step EASM lifecycle workflow (Discover → Classify → Prioritize → Remediate → Verify) with per-step timings and a signed-state rail", "dark customer-outcome metrics grid (MTTR, critical exposures, shadow assets, alert noise)", "featured pull-quote testimonial + secondary security-leader testimonial cards", "three-tier per-asset pricing with featured Team plan and Most-popular tag", "scoped single-open FAQ accordion (CSS-grid animation, ARIA, keyboard)", "glass conversion CTA with corner-tick framing and a three-step onboarding panel", "six-column footer with live system-status indicator", "sticky glass navbar with scoped vanilla-JS mobile menu (escape-safe)", "consistent Glassmorphism + Cyber Minimal token system: translucent surfaces, 1px white hairlines, rounded-2xl glass, single cyan accent, amber/red/ok severity-only", "semantic HTML, skip link, ARIA, visible focus states, and prefers-reduced-motion support", "Tailwind CSS via CDN with no build step" ], "styles": [ "glassmorphism-cyber-minimal" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/index.html" ] } ], "tags": [ "cybersecurity", "attack-surface-management", "easm", "threat-intel", "glassmorphism", "cyber-minimal", "b2b-saas", "developer-tools", "landing-page", "dashboard-preview", "tailwind", "single-page", "template" ], "searchTerms": [ "cybersecurity template", "attack surface management website", "easm landing page", "threat intelligence template", "glassmorphism saas template", "cyber minimal landing page", "security platform website", "external attack surface template", "tailwind security template", "ciso landing page" ] }, { "name": "Accordions", "path": "Vanilla/Components/Accordions/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla accordion and collapsible components with pure HTML, CSS, and minimal JavaScript. Includes CSS-only accordions, panels, and animated collapsibles.", "variantsCount": 2, "variants": [ { "name": "Accordion Panel", "path": "Vanilla/Components/Accordions/accordion-panel/", "type": "component", "description": "Accordion Panel.", "tags": [ "accordion", "animation", "hover-effect", "shadow", "layout", "button", "form", "dropdown" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "accordion", "animation", "hover-effect", "shadow" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Collapsible Accordion", "path": "Vanilla/Components/Accordions/collapsible-accordion/", "type": "component", "description": "Collapsible Accordion.", "tags": [ "accordion", "animation", "hover-effect", "responsive", "flexbox", "center", "layout", "button" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible" ], "styles": [ "accordion", "animation", "hover-effect", "responsive" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "accordions", "tags": [ "accessibility", "accordion", "animation", "border", "button", "center", "color", "dropdown", "flexbox", "form", "hover-effect", "layout", "responsive", "shadow", "table" ], "searchTerms": [ "accordions" ] }, { "name": "Alerts", "path": "Vanilla/Components/Alerts/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla alert and notification banner components. Includes alert messages with animations and cookie consent banners.", "variantsCount": 2, "variants": [ { "name": "Alert Messages", "path": "Vanilla/Components/Alerts/alert-messages/", "type": "component", "description": "Alert Messages.", "tags": [ "animation", "hover-effect", "button", "badge", "typography", "color", "click" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "animation", "hover-effect", "button", "badge" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Cookie Consent Banner", "path": "Vanilla/Components/Alerts/cookie-consent-banner/", "type": "component", "description": "Cookie Consent Banner.", "tags": [ "storage", "center", "button", "form", "typography", "color", "border" ], "features": [ "focus-visible" ], "styles": [ "storage", "center", "button", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "alerts", "tags": [ "animation", "badge", "border", "button", "center", "click", "color", "form", "hover-effect", "storage", "table", "typography" ], "searchTerms": [ "alerts" ] }, { "name": "Avatars", "path": "Vanilla/Components/Avatars/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla avatar and contact chip components for user representation.", "variantsCount": 1, "variants": [ { "name": "Contact Chip", "path": "Vanilla/Components/Avatars/contact-chip/", "type": "component", "description": "Contact Chip.", "tags": [ "typography", "color", "border", "image", "api" ], "features": [ "focus-visible" ], "styles": [ "table", "typography", "color", "border" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "avatars", "tags": [ "api", "border", "color", "image", "table", "typography" ], "searchTerms": [ "avatars" ] }, { "name": "Badges", "path": "Vanilla/Components/Badges/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla notification badge components including CSS-only and interactive variants.", "variantsCount": 1, "variants": [ { "name": "Notification Badge", "path": "Vanilla/Components/Badges/notification-badge/", "type": "component", "description": "Notification Badge and hover interactions.", "tags": [ "badge", "hover-effect", "typography", "color", "border", "pseudo-class" ], "features": [ "focus-visible" ], "styles": [ "badge", "hover-effect", "typography", "color" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "badges", "tags": [ "accessibility", "animation", "badge", "border", "color", "form", "hover-effect", "pseudo-class", "table", "theming", "typography" ], "searchTerms": [ "badges" ] }, { "name": "Buttons", "path": "Vanilla/Components/Buttons/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla button components in many styles - 3D, gradient, neumorphic, floating action, social, split, and more. Pure HTML, CSS, and JS.", "variantsCount": 8, "variants": [ { "name": "3d Button Effect", "path": "Vanilla/Components/Buttons/3d-button-effect/", "type": "component", "description": "3d Button Effect.", "tags": [ "ripple", "button", "animation", "shadow", "color", "border", "click" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "ripple", "button", "animation", "shadow" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Back To Top Button", "path": "Vanilla/Components/Buttons/back-to-top-button/", "type": "component", "description": "Back To Top Button.", "tags": [ "glassmorphism", "button", "tooltip", "badge", "loader", "theming", "color", "touch" ], "features": [ "ARIA", "focus-visible", "keyboard nav" ], "styles": [ "glassmorphism", "button", "tooltip", "badge" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Download Button", "path": "Vanilla/Components/Buttons/download-button/", "type": "component", "description": "Download Button.", "tags": [ "button", "typography", "color", "border", "api", "icons" ], "features": [ "focus-visible" ], "styles": [ "button", "typography", "color", "border" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Floating Action Button", "path": "Vanilla/Components/Buttons/floating-action-button/", "type": "component", "description": "Floating Action Button.", "tags": [ "button", "landing-page", "animation", "hover-effect", "shadow", "responsive", "flexbox", "center" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Pulsing Button", "path": "Vanilla/Components/Buttons/pulsing-button/", "type": "component", "description": "Pulsing Button.", "tags": [ "pulse", "button", "animation", "shadow", "color", "border", "click" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "pulse", "button", "animation", "shadow" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Skewed Button", "path": "Vanilla/Components/Buttons/skewed-button/", "type": "component", "description": "Skewed Button.", "tags": [ "button", "animation", "hover-effect", "form", "color", "border", "form-element" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "button", "animation", "hover-effect", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Social Buttons", "path": "Vanilla/Components/Buttons/social-buttons/", "type": "component", "description": "Social Buttons and hover interactions.", "tags": [ "button", "hover-effect", "center", "typography", "color", "api", "pseudo-class" ], "features": [ "focus-visible" ], "styles": [ "button", "hover-effect", "center", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Split Button", "path": "Vanilla/Components/Buttons/split-button/", "type": "component", "description": "Split Button and hover interactions.", "tags": [ "button", "string", "hover-effect", "shadow", "dropdown", "navbar", "typography" ], "features": [ "focus-visible" ], "styles": [ "button", "string", "hover-effect", "shadow" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "buttons", "tags": [ "animation", "api", "badge", "border", "button", "center", "click", "color", "dropdown", "flexbox", "form", "form-element", "glassmorphism", "gradient", "hover-effect" ], "searchTerms": [ "buttons" ] }, { "name": "Cards", "path": "Vanilla/Components/Cards/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla card components - product cards, profile cards, pricing cards, flip cards, glassmorphism cards, and equal-height layouts.", "variantsCount": 7, "variants": [ { "name": "Blog Post Card", "path": "Vanilla/Components/Cards/blog-post-card/", "type": "component", "description": "Blog Post Card.", "tags": [ "card", "blog", "animation", "hover-effect", "shadow", "layout", "image" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "card", "blog", "animation", "hover-effect" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Equal Height Cards Grid", "path": "Vanilla/Components/Cards/equal-height-cards-grid/", "type": "component", "description": "Equal Height Cards Grid.", "tags": [ "grid", "card", "typography", "shadow", "layout", "color", "border" ], "features": [ "focus-visible" ], "styles": [ "grid", "card", "typography", "shadow" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Flipping Card", "path": "Vanilla/Components/Cards/flipping-card/", "type": "component", "description": "Flipping Card.", "tags": [ "card", "animation", "hover-effect", "flexbox", "center", "form", "typography" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "card", "animation", "hover-effect", "flexbox" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Glassmorphism Card", "path": "Vanilla/Components/Cards/glassmorphism-card/", "type": "component", "description": "Glassmorphism Card with responsive design.", "tags": [ "glassmorphism", "card", "shadow", "responsive", "color", "border", "drag" ], "features": [ "responsive", "focus-visible" ], "styles": [ "glassmorphism", "card", "shadow", "responsive" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Pricing Card", "path": "Vanilla/Components/Cards/pricing-card/", "type": "component", "description": "Pricing Card.", "tags": [ "card", "ecommerce", "layout", "button", "accessibility", "semantic", "form-element" ], "features": [ "ARIA", "focus-visible", "semantic HTML" ], "styles": [ "card", "ecommerce", "layout", "button" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Product Card", "path": "Vanilla/Components/Cards/product-card/", "type": "component", "description": "Product Card.", "tags": [ "card", "ecommerce", "shadow", "center", "button", "typography", "color" ], "features": [ "focus-visible" ], "styles": [ "card", "ecommerce", "shadow", "center" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Profile Card", "path": "Vanilla/Components/Cards/profile-card/", "type": "component", "description": "Profile Card.", "tags": [ "card", "shadow", "center", "button", "typography", "color", "border" ], "features": [ "focus-visible" ], "styles": [ "card", "shadow", "center", "button" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "cards", "tags": [ "404", "accessibility", "animation", "blog", "border", "button", "card", "center", "color", "container-queries", "container-query", "drag", "dropdown", "ecommerce", "flexbox" ], "searchTerms": [ "cards" ] }, { "name": "Display", "path": "Vanilla/Components/Display/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla display and layout components - dark mode toggle, footers, sticky footers, table layouts, and visibility toggles.", "variantsCount": 2, "variants": [ { "name": "Simple Footer", "path": "Vanilla/Components/Display/simple-footer/", "type": "component", "description": "Simple Footer.", "tags": [ "card", "semantic", "center", "form", "navbar", "typography", "color" ], "features": [ "focus-visible", "semantic HTML" ], "styles": [ "card", "semantic", "center", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Sticky Footer", "path": "Vanilla/Components/Display/sticky-footer/", "type": "component", "description": "Sticky Footer.", "tags": [ "card", "semantic", "center", "typography", "color", "scroll", "date" ], "features": [ "focus-visible", "semantic HTML" ], "styles": [ "card", "semantic", "center", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "dark-mode-toggle", "tags": [ "border", "button", "card", "center", "click", "color", "dark-mode", "date", "flexbox", "form", "layout", "navbar", "responsive", "scroll", "semantic" ], "searchTerms": [ "display" ] }, { "name": "Forms", "path": "Vanilla/Components/Forms/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla form components organized by type - contact, login, register, newsletter, search, and other form inputs.", "variantsCount": 22, "variants": [ { "name": "Checkbox Group", "path": "Vanilla/Components/Forms/checkbox-group/", "type": "component", "description": "Checkbox Group.", "tags": [ "form", "form-element" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Contact Form", "path": "Vanilla/Components/Forms/contact-form/", "type": "component", "description": "Contact Form.", "tags": [ "animation", "form", "form-element", "hover-effect", "glassmorphism", "shadow", "responsive", "flexbox" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Datalist Autocomplete", "path": "Vanilla/Components/Forms/datalist-autocomplete/", "type": "component", "description": "Datalist Autocomplete.", "tags": [ "form-element", "form", "dropdown" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Date Time Picker", "path": "Vanilla/Components/Forms/date-time-picker/", "type": "component", "description": "Date Time Picker.", "tags": [ "validation", "date", "animation", "hover-effect", "shadow", "responsive", "flexbox", "grid" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "keyboard nav" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Dropdown Menu", "path": "Vanilla/Components/Forms/dropdown-menu/", "type": "component", "description": "Dropdown Menu and hover interactions.", "tags": [ "dropdown", "navbar", "drag", "hover-effect", "shadow", "typography", "color" ], "features": [ "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "File Upload Input", "path": "Vanilla/Components/Forms/file-upload-input/", "type": "component", "description": "File Upload Input.", "tags": [ "form", "animation", "hover-effect", "shadow", "responsive", "flexbox", "center", "layout" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "keyboard nav" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Floating Label", "path": "Vanilla/Components/Forms/floating-label/", "type": "component", "description": "Floating Label.", "tags": [ "form-element", "animation", "responsive", "form", "typography", "color", "border" ], "features": [ "responsive", "reduced-motion", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Form Validation", "path": "Vanilla/Components/Forms/form-validation/", "type": "component", "description": "Form Validation.", "tags": [ "animation", "form", "validation", "form-element", "flexbox", "button", "typography" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Inline Form", "path": "Vanilla/Components/Forms/inline-form/", "type": "component", "description": "Inline Form.", "tags": [ "animation", "form", "form-element", "hover-effect", "glassmorphism", "shadow", "responsive", "flexbox" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Input Pattern Validation", "path": "Vanilla/Components/Forms/input-pattern-validation/", "type": "component", "description": "Input Pattern Validation.", "tags": [ "form", "validation", "button", "form-element", "login" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Login Form", "path": "Vanilla/Components/Forms/login-form/", "type": "component", "description": "Login Form.", "tags": [ "animation", "form", "form-element", "login", "button", "typography" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Mobile Dropdown", "path": "Vanilla/Components/Forms/mobile-dropdown/", "type": "component", "description": "Mobile Dropdown.", "tags": [ "responsive", "dropdown", "drag", "animation", "shadow", "flexbox", "center", "form" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Multi Select Dropdown", "path": "Vanilla/Components/Forms/multi-select-dropdown/", "type": "component", "description": "Multi Select Dropdown.", "tags": [ "form", "dropdown", "drag", "form-element" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Newsletter Signup", "path": "Vanilla/Components/Forms/newsletter-signup/", "type": "component", "description": "Newsletter Signup.", "tags": [ "login", "animation", "hover-effect", "glassmorphism", "shadow", "responsive", "flexbox", "center" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Radio Button Group", "path": "Vanilla/Components/Forms/radio-button-group/", "type": "component", "description": "Radio Button Group.", "tags": [ "form", "form-element", "radio" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Registration Form", "path": "Vanilla/Components/Forms/registration-form/", "type": "component", "description": "Registration Form.", "tags": [ "animation", "form", "form-element", "button", "typography", "login" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Responsive Form", "path": "Vanilla/Components/Forms/responsive-form/", "type": "component", "description": "Responsive Form.", "tags": [ "animation", "responsive", "form", "form-element", "layout", "button", "dropdown", "badge" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Search Autocomplete", "path": "Vanilla/Components/Forms/search-autocomplete/", "type": "component", "description": "Search Autocomplete.", "tags": [ "accessibility", "animation", "hover-effect", "shadow", "responsive", "flexbox", "center", "layout" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "keyboard nav" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Select Dropdown", "path": "Vanilla/Components/Forms/select-dropdown/", "type": "component", "description": "Select Dropdown.", "tags": [ "form", "dropdown", "drag", "badge", "form-element" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Select With Optgroup", "path": "Vanilla/Components/Forms/select-with-optgroup/", "type": "component", "description": "Select With Optgroup.", "tags": [ "form", "dropdown", "drag", "form-element" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Textarea Label", "path": "Vanilla/Components/Forms/textarea-label/", "type": "component", "description": "Textarea Label.", "tags": [ "form", "typography", "form-element" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Toggle Switch", "path": "Vanilla/Components/Forms/toggle-switch/", "type": "component", "description": "Toggle Switch.", "tags": [ "animation", "shadow", "responsive", "form", "carousel", "color", "border" ], "features": [ "responsive", "reduced-motion", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "forms", "tags": [ "contact", "forms", "login", "newsletter", "other", "register", "search" ], "searchTerms": [ "forms" ] }, { "name": "Loaders", "path": "Vanilla/Components/Loaders/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla loading indicators - bouncing loaders, progress bars, circular progress, skeleton loaders, and progress steps.", "variantsCount": 6, "variants": [ { "name": "Bouncing Loader", "path": "Vanilla/Components/Loaders/bouncing-loader/", "type": "component", "description": "Bouncing Loader.", "tags": [ "bounce", "loader", "animation", "flexbox", "center", "form", "badge" ], "features": [ "reduced-motion", "ARIA", "focus-visible" ], "styles": [ "bounce", "loader", "animation", "flexbox" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Circular Progress Bar", "path": "Vanilla/Components/Loaders/circular-progress-bar/", "type": "component", "description": "Circular Progress Bar.", "tags": [ "navbar", "sidebar", "loader", "form-element", "gradient", "flexbox", "center" ], "features": [ "ARIA", "focus-visible" ], "styles": [ "navbar", "sidebar", "loader", "form-element" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Css Only Progress Bar", "path": "Vanilla/Components/Loaders/css-only-progress-bar/", "type": "component", "description": "Css Only Progress Bar.", "tags": [ "navbar", "sidebar", "loader", "theming", "accessibility", "form-element", "animation", "gradient" ], "features": [ "reduced-motion", "ARIA", "focus-visible" ], "styles": [ "navbar", "sidebar", "loader", "theming" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Loader", "path": "Vanilla/Components/Loaders/loader/", "type": "component", "description": "Loader.", "tags": [ "loader", "animation", "form", "badge", "border", "form-element" ], "features": [ "reduced-motion", "ARIA", "focus-visible" ], "styles": [ "loader", "animation", "form", "badge" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Progress Steps", "path": "Vanilla/Components/Loaders/progress-steps/", "type": "component", "description": "Progress Steps.", "tags": [ "loader", "form-element", "flexbox", "center", "form", "badge", "color" ], "features": [ "ARIA", "focus-visible" ], "styles": [ "loader", "form-element", "flexbox", "center" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Skeleton Loader", "path": "Vanilla/Components/Loaders/skeleton-loader/", "type": "component", "description": "Skeleton Loader.", "tags": [ "loader", "animation", "card", "accessibility", "semantic", "form-element", "blog" ], "features": [ "ARIA", "focus-visible", "semantic HTML" ], "styles": [ "loader", "animation", "card", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "loaders", "tags": [ "accessibility", "animation", "badge", "blog", "border", "bounce", "card", "center", "color", "flexbox", "form", "form-element", "gradient", "loader", "navbar" ], "searchTerms": [ "loaders" ] }, { "name": "Media", "path": "Vanilla/Components/Media/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla media components - images, audio/video players, iframes, canvas, picture element, image maps, sliders, and responsive embeds.", "variantsCount": 10, "variants": [ { "name": "Canvas Element", "path": "Vanilla/Components/Media/canvas-element/", "type": "component", "description": "Canvas Element.", "tags": [ "web-components", "canvas", "typography", "color", "border" ], "features": [ "focus-visible" ], "styles": [ "web-components", "canvas", "table", "typography" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Figure Figcaption", "path": "Vanilla/Components/Media/figure-figcaption/", "type": "component", "description": "Figure Figcaption.", "tags": [ "image", "api" ], "features": [ "focus-visible", "semantic HTML" ], "styles": [ "table", "image", "api" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Html5 Audio Player", "path": "Vanilla/Components/Media/html5-audio-player/", "type": "component", "description": "Html5 Audio Player.", "tags": [ "image", "video" ], "features": [ "focus-visible" ], "styles": [ "table", "image", "video" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Html5 Video Player", "path": "Vanilla/Components/Media/html5-video-player/", "type": "component", "description": "Html5 Video Player.", "tags": [ "video", "image" ], "features": [ "focus-visible" ], "styles": [ "video", "table", "image" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Iframe Embed", "path": "Vanilla/Components/Media/iframe-embed/", "type": "component", "description": "Iframe Embed.", "tags": [ "video", "image", "api" ], "features": [ "focus-visible" ], "styles": [ "video", "table", "image", "api" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Image Slider", "path": "Vanilla/Components/Media/image-slider/", "type": "component", "description": "Image Slider.", "tags": [ "carousel", "image", "shadow", "flexbox", "center", "button", "form", "dropdown" ], "features": [ "focus-visible" ], "styles": [ "carousel", "image", "shadow", "flexbox" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Pop Up Image", "path": "Vanilla/Components/Media/pop-up-image/", "type": "component", "description": "Pop Up Image.", "tags": [ "modal", "tooltip", "image", "keyboard", "login", "animation", "hover-effect", "center" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "modal", "tooltip", "image", "keyboard" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Responsive Picture", "path": "Vanilla/Components/Media/responsive-picture/", "type": "component", "description": "Responsive Picture.", "tags": [ "responsive", "image", "api", "media-query" ], "features": [ "focus-visible" ], "styles": [ "responsive", "image", "table", "api" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Responsive Video Container", "path": "Vanilla/Components/Media/responsive-video-container/", "type": "component", "description": "Responsive Video Container.", "tags": [ "responsive", "layout", "video", "container-query", "container-queries", "typography", "color" ], "features": [ "focus-visible" ], "styles": [ "responsive", "layout", "video", "container-query" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Video Background", "path": "Vanilla/Components/Media/video-background/", "type": "component", "description": "Video Background.", "tags": [ "color", "video", "layout", "image", "api", "semantic", "media-query" ], "features": [ "focus-visible" ], "styles": [ "color", "video", "layout", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "media", "tags": [ "accessibility", "animation", "api", "array", "border", "button", "canvas", "carousel", "center", "click", "clip-path", "color", "container-queries", "container-query", "dropdown" ], "searchTerms": [ "media" ] }, { "name": "Modals", "path": "Vanilla/Components/Modals/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla modal and dialog components - modal boxes, dialogs, focus-trap modals, popup chat windows, toast notifications, and device-optimized modals.", "variantsCount": 4, "variants": [ { "name": "Device Optimized Modal", "path": "Vanilla/Components/Modals/device-optimized-modal/", "type": "component", "description": "Device Optimized Modal.", "tags": [ "modal", "animation", "hover-effect", "shadow", "responsive", "flexbox", "center", "button" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "semantic HTML", "keyboard nav" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Dialog Element", "path": "Vanilla/Components/Modals/dialog-element/", "type": "component", "description": "Dialog Element.", "tags": [ "modal", "web-components", "button", "form", "form-element" ], "features": [ "focus-visible" ], "styles": [ "modal", "web-components", "button", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Popup Chat Window", "path": "Vanilla/Components/Modals/popup-chat-window/", "type": "component", "description": "Popup Chat Window.", "tags": [ "modal", "layout", "button", "form", "typography", "color", "border" ], "features": [ "focus-visible" ], "styles": [ "modal", "layout", "button", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Toast Notification", "path": "Vanilla/Components/Modals/toast-notification/", "type": "component", "description": "Toast Notification.", "tags": [ "badge", "animation", "hover-effect", "shadow", "flexbox", "center", "layout", "button" ], "features": [ "reduced-motion", "ARIA", "focus-visible" ], "styles": [ "badge", "shadow", "button", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "modals", "tags": [ "accessibility", "animation", "aspect-ratio", "backdrop-filter", "badge", "border", "button", "center", "click", "color", "date", "drag", "dropdown", "flexbox", "form" ], "searchTerms": [ "modals" ] }, { "name": "Navigation", "path": "Vanilla/Components/Navigation/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla navigation components - breadcrumbs, menus, navbars, pagination, sidebars, scroll-to-top, and sticky headers.", "variantsCount": 13, "variants": [ { "name": "Bottom Navigation", "path": "Vanilla/Components/Navigation/bottom-navigation/", "type": "component", "description": "Bottom Navigation and hover interactions.", "tags": [ "navbar", "semantic", "hover-effect", "responsive", "center", "typography", "color" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Breadcrumb Nav", "path": "Vanilla/Components/Navigation/breadcrumb-nav/", "type": "component", "description": "Breadcrumb Nav.", "tags": [ "navbar", "sidebar", "pagination", "semantic", "animation", "hover-effect", "responsive", "flexbox" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Circular Menu", "path": "Vanilla/Components/Navigation/circular-menu/", "type": "component", "description": "Circular Menu.", "tags": [ "navbar", "animation", "center", "form", "typography", "color", "border" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Fixed Sidebar", "path": "Vanilla/Components/Navigation/fixed-sidebar/", "type": "component", "description": "Fixed Sidebar.", "tags": [ "sidebar", "navbar", "typography", "color", "scroll", "semantic" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Hamburger Menu", "path": "Vanilla/Components/Navigation/hamburger-menu/", "type": "component", "description": "Hamburger Menu.", "tags": [ "navbar", "animation", "responsive", "button", "form", "color", "icon" ], "features": [ "reduced-motion", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Mega Menu", "path": "Vanilla/Components/Navigation/mega-menu/", "type": "component", "description": "Mega Menu and hover interactions.", "tags": [ "navbar", "hover-effect", "shadow", "typing-effect", "flexbox", "center", "button", "dropdown" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Pagination Component", "path": "Vanilla/Components/Navigation/pagination-component/", "type": "component", "description": "Pagination Component.", "tags": [ "pagination", "web-components", "flexbox", "navbar", "typography", "color", "border" ], "features": [ "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Responsive Navbar", "path": "Vanilla/Components/Navigation/responsive-navbar/", "type": "component", "description": "Responsive Navbar.", "tags": [ "responsive", "navbar", "semantic", "animation", "shadow", "flexbox", "center", "form" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Scroll To Top", "path": "Vanilla/Components/Navigation/scroll-to-top/", "type": "component", "description": "Scroll To Top.", "tags": [ "parallax", "button", "tooltip", "badge", "loader", "theming", "scroll", "touch" ], "features": [ "focus-visible" ], "styles": [ "parallax", "button", "tooltip", "badge" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Side Navigation", "path": "Vanilla/Components/Navigation/side-navigation/", "type": "component", "description": "Side Navigation.", "tags": [ "navbar", "sidebar", "semantic", "animation", "hover-effect", "button", "accordion" ], "features": [ "reduced-motion", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Simple Navigation Menu", "path": "Vanilla/Components/Navigation/simple-navigation-menu/", "type": "component", "description": "Simple Navigation Menu and hover interactions.", "tags": [ "navbar", "semantic", "hover-effect", "center", "typography", "color", "pseudo-class" ], "features": [ "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Top Navigation", "path": "Vanilla/Components/Navigation/top-navigation/", "type": "component", "description": "Top Navigation and hover interactions.", "tags": [ "navbar", "semantic", "hover-effect", "responsive", "center", "button", "typography", "color" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Vertical Menu", "path": "Vanilla/Components/Navigation/vertical-menu/", "type": "component", "description": "Vertical Menu and hover interactions.", "tags": [ "navbar", "hover-effect", "typography", "color", "semantic", "pseudo-class" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "navigation", "tags": [ "animation", "badge", "breadcrumb", "button", "card", "loader", "menu", "navbar", "navigation", "other", "pagination", "parallax", "responsive", "scroll", "semantic" ], "searchTerms": [ "navigation" ] }, { "name": "Other", "path": "Vanilla/Components/Other/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla misc components - a large collection of UI elements including carousels, timelines, calendars, code blocks, countdown timers, social media, layouts, semantic elements, and more.", "variantsCount": 38, "variants": [ { "name": "Blockquote Citation", "path": "Vanilla/Components/Other/blockquote-citation/", "type": "component", "description": "Blockquote Citation.", "tags": [ "typography", "color", "border", "image" ], "features": [ "focus-visible" ], "styles": [ "table", "typography", "color", "border" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Calendar Widget", "path": "Vanilla/Components/Other/calendar-widget/", "type": "component", "description": "Calendar Widget.", "tags": [ "grid", "center", "typography", "color", "border", "date", "string" ], "features": [ "focus-visible" ], "styles": [ "grid", "center", "table", "typography" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Carousel", "path": "Vanilla/Components/Other/carousel/", "type": "component", "description": "Carousel.", "tags": [ "carousel", "animation", "layout", "button", "form", "dropdown", "typography" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "carousel", "animation", "layout", "button" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Centered Website", "path": "Vanilla/Components/Other/centered-website/", "type": "component", "description": "Centered Website.", "tags": [ "center", "layout" ], "features": [ "focus-visible" ], "styles": [ "center", "layout", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Code Block", "path": "Vanilla/Components/Other/code-block/", "type": "component", "description": "Code Block.", "tags": [ "form", "typography", "utility", "form-element" ], "features": [ "focus-visible" ], "styles": [ "form", "table", "typography", "utility" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Corner Ribbon", "path": "Vanilla/Components/Other/corner-ribbon/", "type": "component", "description": "Corner Ribbon.", "tags": [ "animation", "shadow", "center", "form", "typography", "color", "border" ], "features": [ "focus-visible" ], "styles": [ "animation", "shadow", "center", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Countdown Timer", "path": "Vanilla/Components/Other/countdown-timer/", "type": "component", "description": "Countdown Timer.", "tags": [ "badge", "date", "center", "typography", "utility", "ecommerce" ], "features": [ "focus-visible" ], "styles": [ "badge", "table", "date", "center" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Creative Image Hover", "path": "Vanilla/Components/Other/creative-image-hover/", "type": "component", "description": "Creative Image Hover.", "tags": [ "hover-effect", "tooltip", "image", "pseudo-class", "animation", "flexbox", "center", "layout" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "hover-effect", "tooltip", "image", "pseudo-class" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Dark Mode Toggle", "path": "Vanilla/Components/Other/dark-mode-toggle/", "type": "component", "description": "Dark Mode Toggle.", "tags": [ "dark-mode", "animation", "hover-effect", "flexbox", "center", "button", "form", "dropdown" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Device Mockups", "path": "Vanilla/Components/Other/device-mockups/", "type": "component", "description": "Device Mockups.", "tags": [ "color", "border", "image", "api", "portfolio", "ecommerce" ], "features": [ "focus-visible" ], "styles": [ "table", "color", "border", "image" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Diagonal Background", "path": "Vanilla/Components/Other/diagonal-background/", "type": "component", "description": "Diagonal Background.", "tags": [ "color", "animation", "layout", "form", "navbar", "border", "semantic" ], "features": [ "focus-visible" ], "styles": [ "color", "animation", "layout", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Fieldset Legend", "path": "Vanilla/Components/Other/fieldset-legend/", "type": "component", "description": "Fieldset Legend.", "tags": [ "form-element", "form", "typography" ], "features": [ "focus-visible" ], "styles": [ "form-element", "form", "typography" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Filter List", "path": "Vanilla/Components/Other/filter-list/", "type": "component", "description": "Filter List.", "tags": [ "glassmorphism", "array", "form-element", "backdrop-filter", "form", "typography", "color" ], "features": [ "focus-visible" ], "styles": [ "glassmorphism", "array", "form-element", "backdrop-filter" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Full Screen Search", "path": "Vanilla/Components/Other/full-screen-search/", "type": "component", "description": "Full Screen Search.", "tags": [ "accessibility", "center", "button", "form", "modal", "typography", "color" ], "features": [ "focus-visible" ], "styles": [ "accessibility", "center", "button", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Glowing Icon", "path": "Vanilla/Components/Other/glowing-icon/", "type": "component", "description": "Glowing Icon.", "tags": [ "icon", "animation", "hover-effect", "shadow", "button", "typography", "color" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "icon", "animation", "hover-effect", "shadow" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Holy Grail Layout Grid", "path": "Vanilla/Components/Other/holy-grail-layout-grid/", "type": "component", "description": "Holy Grail Layout Grid with responsive design.", "tags": [ "grid", "layout", "responsive", "center", "navbar", "sidebar", "typography" ], "features": [ "responsive", "focus-visible", "semantic HTML" ], "styles": [ "grid", "layout", "responsive", "center" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Image Zoom On Hover", "path": "Vanilla/Components/Other/image-zoom-on-hover/", "type": "component", "description": "Image Zoom On Hover.", "tags": [ "animation", "hover-effect", "gradient", "responsive", "flexbox", "layout", "button", "dropdown" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "animation", "hover-effect", "gradient", "responsive" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "List Group", "path": "Vanilla/Components/Other/list-group/", "type": "component", "description": "List Group.", "tags": [ "form-element", "flexbox", "color", "border", "api" ], "features": [ "focus-visible" ], "styles": [ "form-element", "flexbox", "color", "border" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Media Object", "path": "Vanilla/Components/Other/media-object/", "type": "component", "description": "Media Object.", "tags": [ "responsive", "media-query", "flexbox", "typography", "image", "api", "blog" ], "features": [ "focus-visible" ], "styles": [ "responsive", "media-query", "flexbox", "typography" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Meter Element", "path": "Vanilla/Components/Other/meter-element/", "type": "component", "description": "Meter Element.", "tags": [ "form-element", "web-components" ], "features": [ "focus-visible" ], "styles": [ "form-element", "web-components", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Mixed Column Layout", "path": "Vanilla/Components/Other/mixed-column-layout/", "type": "component", "description": "Mixed Column Layout.", "tags": [ "layout", "responsive", "flexbox", "sidebar", "typography", "semantic" ], "features": [ "focus-visible" ], "styles": [ "layout", "responsive", "flexbox", "sidebar" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Output Element", "path": "Vanilla/Components/Other/output-element/", "type": "component", "description": "Output Element.", "tags": [ "form-element", "web-components", "form" ], "features": [ "focus-visible" ], "styles": [ "form-element", "web-components", "form", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Parallax Scrolling Effect", "path": "Vanilla/Components/Other/parallax-scrolling-effect/", "type": "component", "description": "Parallax Scrolling Effect.", "tags": [ "parallax", "ripple", "scroll", "center", "layout", "typography", "color" ], "features": [ "focus-visible" ], "styles": [ "parallax", "ripple", "scroll", "center" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Password Visibility Toggle", "path": "Vanilla/Components/Other/password-visibility-toggle/", "type": "component", "description": "Password Visibility Toggle.", "tags": [ "login", "animation", "hover-effect", "shadow", "responsive", "flexbox", "center", "layout" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Pills", "path": "Vanilla/Components/Other/pills/", "type": "component", "description": "Pills.", "tags": [ "flexbox", "navbar", "color", "border", "semantic" ], "features": [ "focus-visible" ], "styles": [ "flexbox", "navbar", "color", "border" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Portfolio Gallery", "path": "Vanilla/Components/Other/portfolio-gallery/", "type": "component", "description": "Portfolio Gallery.", "tags": [ "portfolio", "responsive", "flexbox", "center", "image", "api", "media-query" ], "features": [ "focus-visible" ], "styles": [ "portfolio", "responsive", "flexbox", "center" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Range Slider", "path": "Vanilla/Components/Other/range-slider/", "type": "component", "description": "Range Slider.", "tags": [ "carousel", "form", "form-element" ], "features": [ "focus-visible" ], "styles": [ "carousel", "form", "table", "form-element" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Responsive Image Gallery", "path": "Vanilla/Components/Other/responsive-image-gallery/", "type": "component", "description": "Responsive Image Gallery with responsive design.", "tags": [ "responsive", "image", "portfolio", "flexbox", "border", "api", "media-query" ], "features": [ "responsive", "focus-visible" ], "styles": [ "responsive", "image", "portfolio", "flexbox" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Semantic Layout", "path": "Vanilla/Components/Other/semantic-layout/", "type": "component", "description": "Semantic Layout.", "tags": [ "layout", "semantic", "form", "navbar", "sidebar", "typography", "border" ], "features": [ "focus-visible", "semantic HTML" ], "styles": [ "layout", "semantic", "form", "navbar" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Skill Bar", "path": "Vanilla/Components/Other/skill-bar/", "type": "component", "description": "Skill Bar.", "tags": [ "navbar", "sidebar", "animation", "typography", "color", "border", "portfolio" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "navbar", "sidebar", "animation", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Skip Link", "path": "Vanilla/Components/Other/skip-link/", "type": "component", "description": "Skip Link.", "tags": [ "typing-effect", "color", "keyboard", "semantic", "pseudo-class" ], "features": [ "focus-visible" ], "styles": [ "typing-effect", "table", "color", "keyboard" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Social Media Icons", "path": "Vanilla/Components/Other/social-media-icons/", "type": "component", "description": "Social Media Icons.", "tags": [ "responsive", "icon", "media-query", "animation", "hover-effect", "layout", "typography" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "responsive", "icon", "media-query", "animation" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Social Media Share Links", "path": "Vanilla/Components/Other/social-media-share-links/", "type": "component", "description": "Social Media Share Links.", "tags": [ "responsive", "media-query", "form", "accordion", "typography", "color", "border" ], "features": [ "focus-visible" ], "styles": [ "responsive", "media-query", "form", "accordion" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Sticky Notes", "path": "Vanilla/Components/Other/sticky-notes/", "type": "component", "description": "Sticky Notes.", "tags": [ "shadow", "color" ], "features": [ "focus-visible" ], "styles": [ "shadow", "table", "color" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Sticky Social Bar", "path": "Vanilla/Components/Other/sticky-social-bar/", "type": "component", "description": "Sticky Social Bar.", "tags": [ "navbar", "sidebar", "animation", "center", "form", "typography", "color" ], "features": [ "reduced-motion", "focus-visible" ], "styles": [ "navbar", "sidebar", "animation", "center" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Text With Background Image", "path": "Vanilla/Components/Other/text-with-background-image/", "type": "component", "description": "Text With Background Image.", "tags": [ "form", "tooltip", "typography", "color", "image", "canvas", "api" ], "features": [ "focus-visible" ], "styles": [ "form", "tooltip", "table", "typography" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Timeline", "path": "Vanilla/Components/Other/timeline/", "type": "component", "description": "Timeline.", "tags": [ "date", "layout", "color", "border", "media-query", "pseudo-class" ], "features": [ "focus-visible" ], "styles": [ "date", "layout", "table", "color" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Weather Widget", "path": "Vanilla/Components/Other/weather-widget/", "type": "component", "description": "Weather Widget.", "tags": [ "center", "typography", "border", "icon", "api", "icons" ], "features": [ "focus-visible" ], "styles": [ "table", "center", "typography", "border" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "other", "tags": [ "accessibility", "accordion", "animation", "api", "array", "backdrop-filter", "badge", "blog", "border", "button", "canvas", "card", "carousel", "center", "click" ], "searchTerms": [ "other" ] }, { "name": "Ratings", "path": "Vanilla/Components/Ratings/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla rating components - CSS-only star ratings, interactive rating stars, and user rating widgets.", "variantsCount": 2, "variants": [ { "name": "Css Only Star Rating", "path": "Vanilla/Components/Ratings/css-only-star-rating/", "type": "component", "description": "Css Only Star Rating.", "tags": [ "theming", "touch", "accessibility", "form", "typography", "color", "form-element" ], "features": [ "focus-visible" ], "styles": [ "theming", "touch", "accessibility", "form" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Rating Stars", "path": "Vanilla/Components/Ratings/rating-stars/", "type": "component", "description": "Rating Stars.", "tags": [ "animation", "hover-effect", "shadow", "responsive", "flexbox", "center", "layout", "button" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "ratings", "tags": [ "accessibility", "animation", "api", "button", "center", "color", "flexbox", "form", "form-element", "hover-effect", "icons", "layout", "responsive", "shadow", "table" ], "searchTerms": [ "ratings" ] }, { "name": "Tables", "path": "Vanilla/Components/Tables/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla table components - simple tables, captions, merged cells, and scoped tables.", "variantsCount": 5, "variants": [ { "name": "Simple Table", "path": "Vanilla/Components/Tables/simple-table/", "type": "component", "description": "Simple Table.", "tags": [ "tabs", "table", "navbar", "typography", "border", "semantic" ], "features": [ "focus-visible" ], "styles": [ "tabs", "table", "navbar", "typography" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Table Caption", "path": "Vanilla/Components/Tables/table-caption/", "type": "component", "description": "Table Caption.", "tags": [ "tabs", "table" ], "features": [ "focus-visible" ], "styles": [ "tabs", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Table Header Body Footer", "path": "Vanilla/Components/Tables/table-header-body-footer/", "type": "component", "description": "Table Header Body Footer.", "tags": [ "table", "semantic", "thead", "tbody", "tfoot" ], "features": [ "focus-visible" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Table Merged Cells", "path": "Vanilla/Components/Tables/table-merged-cells/", "type": "component", "description": "Table Merged Cells.", "tags": [ "tabs", "table", "border" ], "features": [ "focus-visible" ], "styles": [ "tabs", "table", "border" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Table Scope", "path": "Vanilla/Components/Tables/table-scope/", "type": "component", "description": "Table Scope.", "tags": [ "tabs", "table" ], "features": [ "focus-visible" ], "styles": [ "tabs", "table" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "tables", "tags": [ "border", "navbar", "semantic", "table", "tabs", "typography" ], "searchTerms": [ "tables" ] }, { "name": "Tabs", "path": "Vanilla/Components/Tabs/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla tab components - tabbed content, CSS tabs, full-page tabs, and tab components.", "variantsCount": 2, "variants": [ { "name": "Full Page Tabs", "path": "Vanilla/Components/Tabs/full-page-tabs/", "type": "component", "description": "Full Page Tabs.", "tags": [ "404", "tabs", "pagination", "typing-effect", "center", "button", "typography" ], "features": [ "focus-visible" ], "styles": [ "404", "tabs", "pagination", "typing-effect" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Tabbed Content", "path": "Vanilla/Components/Tabs/tabbed-content/", "type": "component", "description": "Tabbed Content.", "tags": [ "tabs", "animation", "responsive", "flexbox", "layout", "button", "form", "dropdown" ], "features": [ "responsive", "reduced-motion", "ARIA", "focus-visible", "keyboard nav" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "tabs", "tags": [ "404", "animation", "border", "button", "center", "color", "dropdown", "flexbox", "form", "hover-effect", "layout", "navbar", "pagination", "responsive", "table" ], "searchTerms": [ "tabs" ] }, { "name": "Tooltips", "path": "Vanilla/Components/Tooltips/", "tech": "Vanilla HTML/CSS/JS", "type": "component", "category": "Components", "description": "Vanilla tooltip components - CSS-only tooltips, interactive tooltips, and tooltip text variants.", "variantsCount": 1, "variants": [ { "name": "Tooltip", "path": "Vanilla/Components/Tooltips/tooltip/", "type": "component", "description": "Tooltip.", "tags": [ "tooltip", "animation", "hover-effect", "responsive", "center", "button", "form" ], "features": [ "responsive", "reduced-motion", "focus-visible" ], "styles": [ "tooltip", "animation", "hover-effect", "responsive" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "tooltips", "tags": [ "accessibility", "animation", "button", "canvas", "center", "form", "form-element", "hover-effect", "responsive", "table", "theming", "tooltip", "typography" ], "searchTerms": [ "tooltips" ] }, { "name": "Contact", "path": "Vanilla/Sections/Contact/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Contact sections: split form, routing cards, and office locations with time zones.", "variantsCount": 3, "variants": [ { "name": "Contact Cards", "path": "Vanilla/Sections/Contact/contact-cards/", "type": "section", "description": "Contact routing cards (sales/security/careers).", "tags": [ "contact", "cards" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Contact Form", "path": "Vanilla/Sections/Contact/contact-form/", "type": "section", "description": "Split contact section with info + accessible form.", "tags": [ "contact", "form", "split" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Office Locations", "path": "Vanilla/Sections/Contact/contact-office-locations/", "type": "section", "description": "Office location cards with time zones.", "tags": [ "contact", "offices", "locations" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "contact", "tags": [ "contact", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "contact", "neo brutalist", "section", "vanilla" ] }, { "name": "Content", "path": "Vanilla/Sections/Content/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Content sections: blog grid, featured articles, documentation preview, and resources.", "variantsCount": 4, "variants": [ { "name": "Blog Grid", "path": "Vanilla/Sections/Content/content-blog-grid/", "type": "section", "description": "3-up blog post cards with category badges.", "tags": [ "blog", "grid", "cards" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Documentation Preview", "path": "Vanilla/Sections/Content/content-documentation-preview/", "type": "section", "description": "Docs layout with sidebar nav and a code block.", "tags": [ "docs", "documentation", "sidebar" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Featured Articles", "path": "Vanilla/Sections/Content/content-featured-articles/", "type": "section", "description": "Featured article + side list of recent posts.", "tags": [ "blog", "featured", "editorial" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Resources", "path": "Vanilla/Sections/Content/content-resources/", "type": "section", "description": "Filterable resources grid with type tags.", "tags": [ "resources", "grid", "filters" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "content", "tags": [ "content", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "content", "neo brutalist", "section", "vanilla" ] }, { "name": "CTA", "path": "Vanilla/Sections/CTA/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Call-to-action sections: banner, split, download with QR, and newsletter signup.", "variantsCount": 4, "variants": [ { "name": "Banner CTA", "path": "Vanilla/Sections/CTA/cta-banner/", "type": "section", "description": "Bold banner CTA on a colored panel with blobs.", "tags": [ "cta", "banner", "gradient" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Download CTA", "path": "Vanilla/Sections/CTA/cta-download/", "type": "section", "description": "Download CTA with store buttons and a QR mock.", "tags": [ "cta", "download", "qr" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Newsletter CTA", "path": "Vanilla/Sections/CTA/cta-newsletter/", "type": "section", "description": "Newsletter signup CTA with consent checkbox.", "tags": [ "cta", "newsletter", "form" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Split CTA", "path": "Vanilla/Sections/CTA/cta-split/", "type": "section", "description": "Two-pane split CTA (offer + actions).", "tags": [ "cta", "split" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "cta", "tags": [ "cta", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "cta", "neo brutalist", "section", "vanilla" ] }, { "name": "FAQ", "path": "Vanilla/Sections/FAQ/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "FAQ sections: accessible single-open accordion and searchable + filterable FAQ.", "variantsCount": 2, "variants": [ { "name": "Accordion FAQ", "path": "Vanilla/Sections/FAQ/faq-accordion/", "type": "section", "description": "Accessible single-open accordion FAQ.", "tags": [ "faq", "accordion" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Searchable FAQ", "path": "Vanilla/Sections/FAQ/faq-searchable/", "type": "section", "description": "Searchable + category-filterable FAQ.", "tags": [ "faq", "search", "filter" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "faq", "tags": [ "faq", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "faq", "neo brutalist", "section", "vanilla" ] }, { "name": "Features", "path": "Vanilla/Sections/Features/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Feature presentation sections: grid, icons, bento, timeline, and comparison table.", "variantsCount": 5, "variants": [ { "name": "Bento Features", "path": "Vanilla/Sections/Features/feature-bento/", "type": "section", "description": "Bento feature grid mixing tile sizes and colors.", "tags": [ "features", "bento", "grid" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Comparison Features", "path": "Vanilla/Sections/Features/feature-comparison/", "type": "section", "description": "Feature comparison table vs. competitors.", "tags": [ "features", "comparison" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Feature Grid", "path": "Vanilla/Sections/Features/feature-grid/", "type": "section", "description": "3-column feature grid with colored icon tiles.", "tags": [ "features", "grid", "icons" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Icon Features", "path": "Vanilla/Sections/Features/feature-icons/", "type": "section", "description": "Compact icon + text feature list in a 4-col grid.", "tags": [ "features", "icons", "compact" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Feature Timeline", "path": "Vanilla/Sections/Features/feature-timeline/", "type": "section", "description": "Vertical/zig-zag timeline doubling as a feature walk.", "tags": [ "features", "timeline", "steps" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "features", "tags": [ "features", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "features", "neo brutalist", "section", "vanilla" ] }, { "name": "Footer", "path": "Vanilla/Sections/Footer/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Footer sections: minimal, multi-column, and large newsletter footer.", "variantsCount": 3, "variants": [ { "name": "Large Footer", "path": "Vanilla/Sections/Footer/footer-large/", "type": "section", "description": "Large colored footer with newsletter + link groups.", "tags": [ "footer", "large", "newsletter" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Minimal Footer", "path": "Vanilla/Sections/Footer/footer-minimal/", "type": "section", "description": "Minimal footer with brand, links and socials.", "tags": [ "footer", "minimal" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Multi-column Footer", "path": "Vanilla/Sections/Footer/footer-multi-column/", "type": "section", "description": "Multi-column footer with brand + 4 link groups.", "tags": [ "footer", "multi-column", "links" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "footer", "tags": [ "footer", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "footer", "neo brutalist", "section", "vanilla" ] }, { "name": "Gallery", "path": "Vanilla/Sections/Gallery/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Gallery sections: masonry, portfolio with filters, and project case-study cards.", "variantsCount": 3, "variants": [ { "name": "Masonry Gallery", "path": "Vanilla/Sections/Gallery/gallery-masonry/", "type": "section", "description": "CSS masonry gallery with varied aspect ratios.", "tags": [ "gallery", "masonry", "images" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Portfolio", "path": "Vanilla/Sections/Gallery/gallery-portfolio/", "type": "section", "description": "Portfolio grid with category filters.", "tags": [ "portfolio", "gallery", "filters" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Projects", "path": "Vanilla/Sections/Gallery/gallery-projects/", "type": "section", "description": "Project case-study cards with tags.", "tags": [ "projects", "gallery", "cards" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "gallery", "tags": [ "gallery", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "gallery", "neo brutalist", "section", "vanilla" ] }, { "name": "Hero", "path": "Vanilla/Sections/Hero/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "10 production-ready hero sections (minimal, startup, SaaS, product, gradient, image, split, bento, center, animated).", "variantsCount": 10, "variants": [ { "name": "Animated Hero", "path": "Vanilla/Sections/Hero/hero-animated/", "type": "section", "description": "Animated rotating-word hero with floating blobs.", "tags": [ "hero", "animated", "text-cycle" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Bento Hero", "path": "Vanilla/Sections/Hero/hero-bento/", "type": "section", "description": "Bento-grid hero summarizing multiple value props at once.", "tags": [ "hero", "bento", "grid" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Center Hero", "path": "Vanilla/Sections/Hero/hero-center/", "type": "section", "description": "Center-stage hero with social proof avatars.", "tags": [ "hero", "center", "social-proof" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Gradient Hero", "path": "Vanilla/Sections/Hero/hero-gradient/", "type": "section", "description": "Bold gradient-text hero on a spinning conic backdrop.", "tags": [ "hero", "gradient", "colorful", "animated" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Image Hero", "path": "Vanilla/Sections/Hero/hero-image/", "type": "section", "description": "Image-led hero with a floating product tag.", "tags": [ "hero", "image", "split" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Minimal Hero", "path": "Vanilla/Sections/Hero/hero-minimal/", "type": "section", "description": "A minimal, centered hero with eyebrow, headline, lead and dual CTA.", "tags": [ "hero", "minimal", "centered", "cta" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Product Hero", "path": "Vanilla/Sections/Hero/hero-product/", "type": "section", "description": "Product hero showcasing three feature shots in a grid.", "tags": [ "hero", "product", "showcase" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "SaaS Hero", "path": "Vanilla/Sections/Hero/hero-saas/", "type": "section", "description": "SaaS hero with a floating metric mock and reassurance line.", "tags": [ "hero", "saas", "dashboard", "mrr" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Split Hero", "path": "Vanilla/Sections/Hero/hero-split/", "type": "section", "description": "Two-pane split hero comparing value vs. included features.", "tags": [ "hero", "split", "comparison" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Startup Hero", "path": "Vanilla/Sections/Hero/hero-startup/", "type": "section", "description": "Split startup hero with inline stats and a product preview pane.", "tags": [ "hero", "startup", "split", "stats" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "hero", "tags": [ "hero", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "hero", "neo brutalist", "section", "vanilla" ] }, { "name": "Logos", "path": "Vanilla/Sections/Logos/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Social-proof logo sections: static cloud, infinite marquee, and client cards.", "variantsCount": 3, "variants": [ { "name": "Client Logos", "path": "Vanilla/Sections/Logos/logo-clients/", "type": "section", "description": "Client cards with a short quote each.", "tags": [ "logos", "clients", "cards" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Logo Cloud", "path": "Vanilla/Sections/Logos/logo-cloud/", "type": "section", "description": "Static logo cloud grid with hover lift.", "tags": [ "logos", "cloud", "social-proof" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Trusted By", "path": "Vanilla/Sections/Logos/logo-trusted-by/", "type": "section", "description": "Infinite marquee of client names with edge fades.", "tags": [ "logos", "marquee", "animated" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "logos", "tags": [ "logos", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "logos", "neo brutalist", "section", "vanilla" ] }, { "name": "Navigation (Sections)", "path": "Vanilla/Sections/Navigation/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Neo-brutalist navigation page sections — simple, sticky, and mega-menu navbars plus a sidebar layout.", "variantsCount": 4, "variants": [ { "name": "Mega Menu", "path": "Vanilla/Sections/Navigation/navbar-mega-menu/", "type": "section", "description": "Navbar with a click-to-open mega menu panel.", "tags": [ "nav", "navbar", "mega-menu" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Simple Navbar", "path": "Vanilla/Sections/Navigation/navbar-simple/", "type": "section", "description": "Simple sticky navbar with a mobile drawer.", "tags": [ "nav", "navbar", "responsive", "drawer" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Sticky Navbar", "path": "Vanilla/Sections/Navigation/navbar-sticky/", "type": "section", "description": "Sticky navbar with scroll shadow and a slide-in mobile sheet.", "tags": [ "nav", "navbar", "sticky", "sheet" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Sidebar Navigation", "path": "Vanilla/Sections/Navigation/sidebar-navigation/", "type": "section", "description": "App sidebar + content area, collapsible on mobile.", "tags": [ "nav", "sidebar", "dashboard" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "navigation", "tags": [ "animation", "badge", "breadcrumb", "button", "card", "loader", "menu", "navbar", "navigation", "other", "pagination", "parallax", "responsive", "scroll", "semantic" ], "searchTerms": [ "navigation" ] }, { "name": "Pricing", "path": "Vanilla/Sections/Pricing/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Pricing sections: simple, SaaS with toggle, comparison matrix, and enterprise CTA.", "variantsCount": 4, "variants": [ { "name": "Comparison Pricing", "path": "Vanilla/Sections/Pricing/pricing-comparison/", "type": "section", "description": "Full pricing comparison matrix table.", "tags": [ "pricing", "comparison" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Enterprise Pricing", "path": "Vanilla/Sections/Pricing/pricing-enterprise/", "type": "section", "description": "Enterprise CTA panel with feature checklist.", "tags": [ "pricing", "enterprise", "cta" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "SaaS Pricing", "path": "Vanilla/Sections/Pricing/pricing-saas/", "type": "section", "description": "3-tier SaaS pricing with monthly/yearly toggle.", "tags": [ "pricing", "saas", "toggle" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Simple Pricing", "path": "Vanilla/Sections/Pricing/pricing-simple/", "type": "section", "description": "Two-plan simple pricing with feature lists.", "tags": [ "pricing", "simple", "plans" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "pricing", "tags": [ "pricing", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "pricing", "neo brutalist", "section", "vanilla" ] }, { "name": "Process", "path": "Vanilla/Sections/Process/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Process sections: alternating timeline, horizontal workflow, numbered steps, and how-it-works.", "variantsCount": 4, "variants": [ { "name": "How It Works", "path": "Vanilla/Sections/Process/process-how-it-works/", "type": "section", "description": "Split how-it-works with numbered steps and a preview.", "tags": [ "process", "how-it-works", "split" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Process Steps", "path": "Vanilla/Sections/Process/process-steps/", "type": "section", "description": "Numbered step cards in a 4-col grid.", "tags": [ "process", "steps", "numbered" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Process Timeline", "path": "Vanilla/Sections/Process/process-timeline/", "type": "section", "description": "Alternating vertical timeline of process steps.", "tags": [ "process", "timeline", "steps" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Process Workflow", "path": "Vanilla/Sections/Process/process-workflow/", "type": "section", "description": "Horizontal (stacked on mobile) workflow with arrows.", "tags": [ "process", "workflow", "flow" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "process", "tags": [ "process", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "process", "neo brutalist", "section", "vanilla" ] }, { "name": "Products", "path": "Vanilla/Sections/Products/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Product sections: showcase, dashboard preview, mobile app, integrations, roadmap, and changelog.", "variantsCount": 6, "variants": [ { "name": "Changelog", "path": "Vanilla/Sections/Products/product-changelog/", "type": "section", "description": "Vertical changelog with version tags and timeline.", "tags": [ "product", "changelog", "timeline" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Dashboard Preview", "path": "Vanilla/Sections/Products/product-dashboard-preview/", "type": "section", "description": "Mock dashboard preview with sidebar, KPIs and a bar chart.", "tags": [ "product", "dashboard", "preview" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Integrations", "path": "Vanilla/Sections/Products/product-integrations/", "type": "section", "description": "Grid of integration cards with 'new' tags.", "tags": [ "product", "integrations", "grid" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Mobile App Showcase", "path": "Vanilla/Sections/Products/product-mobile-app/", "type": "section", "description": "Mobile app showcase with two phone mockups and store buttons.", "tags": [ "product", "mobile", "phones" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Roadmap", "path": "Vanilla/Sections/Products/product-roadmap/", "type": "section", "description": "Three-column roadmap: shipped / in progress / next.", "tags": [ "product", "roadmap", "columns" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Product Showcase", "path": "Vanilla/Sections/Products/product-showcase/", "type": "section", "description": "Split product showcase with checklist and device frame.", "tags": [ "product", "showcase", "split" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "products", "tags": [ "products", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "products", "neo brutalist", "section", "vanilla" ] }, { "name": "Statistics", "path": "Vanilla/Sections/Statistics/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Statistics sections: animated counters, achievement band, and KPI cards with progress bars.", "variantsCount": 3, "variants": [ { "name": "Achievement Numbers", "path": "Vanilla/Sections/Statistics/stats-achievement-numbers/", "type": "section", "description": "Bold achievement stats on a colored band.", "tags": [ "stats", "achievements", "band" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Stats Grid", "path": "Vanilla/Sections/Statistics/stats-grid/", "type": "section", "description": "4 colored stat tiles with animated counters.", "tags": [ "stats", "counters", "animated" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "KPI Cards", "path": "Vanilla/Sections/Statistics/stats-kpi-cards/", "type": "section", "description": "KPI cards with trend chips and progress bars.", "tags": [ "stats", "kpi", "cards" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "statistics", "tags": [ "statistics", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "statistics", "neo brutalist", "section", "vanilla" ] }, { "name": "Team", "path": "Vanilla/Sections/Team/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Team sections: member grid, leadership cards, and advisor strip.", "variantsCount": 3, "variants": [ { "name": "Advisors", "path": "Vanilla/Sections/Team/team-advisors/", "type": "section", "description": "Compact advisor strip with initials and prior roles.", "tags": [ "team", "advisors", "strip" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Team Grid", "path": "Vanilla/Sections/Team/team-grid/", "type": "section", "description": "Team member grid with avatar placeholders and social links.", "tags": [ "team", "grid", "members" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Leadership", "path": "Vanilla/Sections/Team/team-leadership/", "type": "section", "description": "Leadership cards with initials, role and tenure.", "tags": [ "team", "leadership", "exec" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "team", "tags": [ "team", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "team", "neo brutalist", "section", "vanilla" ] }, { "name": "Testimonials", "path": "Vanilla/Sections/Testimonials/", "tech": "Vanilla HTML/CSS/JS", "type": "section", "category": "Sections", "description": "Testimonial sections: cards, auto-rotating carousel, masonry wall, and video layout.", "variantsCount": 4, "variants": [ { "name": "Testimonial Cards", "path": "Vanilla/Sections/Testimonials/testimonials-cards/", "type": "section", "description": "3-column testimonial cards with star ratings.", "tags": [ "testimonials", "cards", "ratings" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Testimonial Carousel", "path": "Vanilla/Sections/Testimonials/testimonials-carousel/", "type": "section", "description": "Auto-rotating carousel with dots and arrows.", "tags": [ "testimonials", "carousel", "slider" ], "features": [ "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Testimonial Masonry", "path": "Vanilla/Sections/Testimonials/testimonials-masonry/", "type": "section", "description": "Masonry wall of testimonials of varying heights.", "tags": [ "testimonials", "masonry", "wall" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] }, { "name": "Video Testimonial", "path": "Vanilla/Sections/Testimonials/testimonials-video/", "type": "section", "description": "Video testimonial layout with play button and stats.", "tags": [ "testimonials", "video", "feature" ], "features": [ "responsive", "light/dark", "reduced-motion", "ARIA", "focus-visible", "semantic HTML" ], "files": [ "README.md", "code.html", "metadata.json" ] } ], "subcategory": "testimonials", "tags": [ "testimonials", "neo-brutalist", "vanilla", "responsive", "dark-mode" ], "searchTerms": [ "testimonials", "neo brutalist", "section", "vanilla" ] }, { "name": "Agency", "path": "Vanilla/Templates/agency/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "A premium editorial agency website template for DevSnips built with semantic HTML, CSS (Pico CSS foundation), and vanilla JavaScript. A dark-first, high-contrast editorial layout combining bold typography, an asymmetric hero, an about + statistics section, an editorial services list, selected work with alternating project layouts, a featured case study, a five-step process, a capabilities grid, a team grid, testimonials, an insights/blog section, and a contact CTA, plus a sticky header with responsive mobile navigation, scroll-reveal animations, and scrollspy active navigation. Split into modular files: code.html + style.css + script.js, with preview.html as a self-contained single-file preview. Follows the shared design-tokens.md system.", "variantsCount": 1, "variants": [ { "name": "Agency", "path": "Vanilla/Templates/agency/", "type": "template", "description": "A premium editorial agency website template for DevSnips built with semantic HTML, CSS (Pico CSS foundation), and vanilla JavaScript. A dark-first, high-contrast editorial layout combining bold typography, an asymmetric hero, an about + statistics section, an editorial services list, selected work with alternating project layouts, a featured case study, a five-step process, a capabilities grid, a team grid, testimonials, an insights/blog section, and a contact CTA, plus a sticky header with responsive mobile navigation, scroll-reveal animations, and scrollspy active navigation. Split into modular files: code.html + style.css + script.js, with preview.html as a self-contained single-file preview. Follows the shared design-tokens.md system.", "tags": [ "agency", "creative-agency", "portfolio", "editorial", "case-study", "services", "projects", "responsive", "pico-css", "vanilla-js", "typography", "dark-theme", "accessibility", "design-system" ], "features": [ "dark-first high-contrast editorial agency layout", "sticky header with responsive mobile navigation (aria-expanded toggle)", "large-typography hero with asymmetric text + image grid", "about section with two-up statistics", "editorial numbered services list", "selected work with alternating image/content project layouts", "featured case study (challenge, approach, solution, results)", "five-step process grid", "four-up capabilities grid", "four-up team grid", "three-up testimonials", "insights/blog section with meta (category, date, read time)", "contact CTA section", "scroll-reveal animations via IntersectionObserver", "scrollspy active navigation state with aria-current", "reduced-motion support (prefers-reduced-motion)", "Pico CSS foundation", "modular file split (code.html + style.css + script.js)" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/code.html", "pages/script.js", "pages/style.css" ] } ], "subcategory": "agency", "tags": [ "agency", "creative-agency", "portfolio", "editorial", "case-study", "services", "projects", "responsive", "pico-css", "vanilla-js", "typography", "dark-theme", "accessibility", "design-system" ] }, { "name": "Developer Portfolio", "path": "Vanilla/Templates/developer-portfolio/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "", "variantsCount": 1, "variants": [ { "name": "Developer Portfolio", "path": "Vanilla/Templates/developer-portfolio/", "type": "template", "description": "A personal, technical, editorial-minimal portfolio template for a software / design engineer, built with semantic HTML, CSS, and vanilla JavaScript. Light, neutral, and typography-driven: a sticky header with brand mark, anchor nav, theme toggle, and a responsive mobile drawer; an editorial intro with a clamp() lead, status badge, and metadata grid; a selected-work list of project cards (index, title, role, year, description, stack tags, case-study link); an about/capabilities split with a capability table and a four-up stat row; a notes/writing list with date + category meta; and a contact section with a lead, channels list, and footer. Split into modular files: code.html (HTML structure) + style.css (the design system, following the shared design-tokens.md --ds-* token layer with light-default + calm opt-in dark mode and reduced-motion guard) + script.js (theme toggle, mobile nav, scrollspy active nav, IntersectionObserver reveal), with preview.html as a self-contained single-file preview. No React, Vue, Next.js, Tailwind, Bootstrap, or backend.", "tags": [ "portfolio", "developer", "personal", "editorial", "minimal", "design-system", "css-variables", "responsive", "dark-mode", "accessibility", "vanilla-js", "typography", "scrollspy", "reveal", "light-default" ], "features": [ "sticky header with brand mark, anchor nav, theme toggle, and responsive mobile drawer (aria-expanded)", "editorial intro with clamp() oversized lead, availability status badge, and metadata grid", "selected-work list of project cards (index, title, role, year, description, stack tags, case-study link)", "about / capabilities split layout with capability table and four-up stat row", "notes / writing list with date + category meta and hover affordance", "contact section with lead, channels list (email / GitHub / calendar), and footer", "light-default theme with calm opt-in dark mode (no-flash pre-paint script + persisted toggle)", "scrollspy active nav state (aria-current=location via IntersectionObserver)", "IntersectionObserver scroll-reveal (.reveal -> .is-visible, threshold 0.12, unobserved after)", "DevSnips --ds-* shared design-token layer (design-tokens.md) with template tokens on top", "hairline 1px borders, small controlled radii, restrained shadows, single controlled accent", "modular file split (code.html + style.css + script.js)" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/code.html", "pages/script.js", "pages/style.css" ] } ], "subcategory": "freelancer-portfolio", "tags": [ "animation", "center", "flexbox", "grid", "hover-effect", "portfolio", "responsive", "shadow" ] }, { "name": "Documentation Site", "path": "Vanilla/Templates/documentation-site/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "A premium, minimal, light-mode-first developer-documentation template for DevSnips built with plain HTML, CSS (Pico CSS foundation), and vanilla JavaScript. Split into modular files: code.html (HTML structure) + style.css (the design system) + script.js (router, content, interactions), with preview.html as a self-contained single-file preview. Layout: header + nested left documentation sidebar + main content + sticky On-this-page TOC. Covers 15 documentation sections via hash routing with nested sidebar nav, breadcrumbs, scrollspy TOC, previous/next navigation, a Cmd+K search command palette, syntax-highlighted code blocks with copy buttons and tabs, callouts, responsive tables, badges, API reference blocks, an edit-on-GitHub action, last-updated metadata, and opt-in light/dark mode. Neutral-first design with one blue accent, hairline borders, restrained shadows, and editorial typography. Fully responsive (320px to 1920px).", "variantsCount": 1, "variants": [ { "name": "Documentation Site", "path": "Vanilla/Templates/documentation-site/", "type": "template", "description": "A premium, minimal, light-mode-first developer-documentation template for DevSnips built with plain HTML, CSS (Pico CSS foundation), and vanilla JavaScript. Split into modular files: code.html (HTML structure) + style.css (the design system) + script.js (router, content, interactions), with preview.html as a self-contained single-file preview of the UI. Layout: header + nested left documentation sidebar + main content + sticky On-this-page TOC. Covers 15 documentation sections (Documentation Home, Introduction, Getting Started, Installation, Quick Start, Vanilla, Components, Templates, Design Tokens, Guides, API Reference, Examples, FAQ, Changelog, Roadmap, Contributing) via hash routing. Includes nested sidebar navigation with active page state, breadcrumbs, sticky scrollspy table of contents, previous/next navigation, a Cmd+K search command palette, code blocks with a lightweight syntax highlighter, copy buttons, tabbed code blocks, callouts, responsive tables, badges, API reference blocks, an edit-on-GitHub action, last-updated metadata, and opt-in light/dark mode. Neutral-first design with one blue accent (never violet/neon), hairline borders, restrained shadows, light code blocks, and editorial typography — following the shared design-tokens.md specification. Fully responsive: sidebar becomes an off-canvas drawer, TOC becomes a collapsible panel, code blocks remain usable, tables adapt without page overflow, from 320px to 1920px. No React, Vue, Next.js, Tailwind, Bootstrap, backend, database, or CMS.", "tags": [ "documentation", "docs", "spa", "sidebar", "table-of-contents", "scrollspy", "search", "command-palette", "syntax-highlighting", "code-blocks", "copy-button", "code-tabs", "callouts", "breadcrumbs", "prev-next", "dark-mode", "responsive", "pico-css", "css-variables", "accessibility", "editorial", "typography", "hash-routing", "drawer" ], "features": [ "hash-routed single-page app", "15 documentation sections", "nested sidebar navigation", "active page state", "breadcrumbs", "sticky scrollspy TOC", "previous/next navigation", "Cmd+K search command palette", "syntax-highlighted code blocks", "copy buttons", "tabbed code blocks", "callouts (info/note/tip/warning/danger)", "responsive tables", "status badges", "API reference blocks", "edit-on-GitHub action", "last-updated metadata", "reading-time estimate", "opt-in light/dark mode", "mobile sidebar drawer", "collapsible mobile TOC", "nav filter", "reduced-motion safe", "focus-visible rings", "keyboard operable", "Pico CSS foundation", "modular file split (code.html + style.css + script.js)" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/code.html", "pages/script.js", "pages/style.css" ] } ], "subcategory": "documentation-site", "tags": [ "documentation", "docs", "spa", "sidebar", "table-of-contents", "scrollspy", "search", "command-palette", "syntax-highlighting", "code-blocks", "copy-button", "code-tabs", "callouts", "breadcrumbs", "prev-next", "dark-mode", "responsive", "pico-css", "css-variables", "accessibility", "editorial", "typography", "hash-routing", "drawer" ], "searchTerms": [ "documentation", "docs", "sidebar", "table of contents", "on this page", "scrollspy", "command palette", "search", "code blocks", "copy button", "syntax highlighting", "callouts", "breadcrumbs", "previous next", "dark mode", "pico css", "editorial", "technical", "developer documentation", "devsnips docs" ] }, { "name": "Event Conference", "path": "Vanilla/Templates/event-conference/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "Event Conference with animations and hover interactions.", "variantsCount": 1, "variants": [ { "name": "Event Conference", "path": "Vanilla/Templates/event-conference/", "type": "template", "description": "A dense, structured single-track conference website template built with semantic HTML, CSS, and vanilla JavaScript. Light, neutral, and typography-driven: a sticky header with brand mark, date, anchor nav, theme toggle, and responsive mobile drawer; an editorial hero with a clamp() headline, facts grid (dates / location / talks / capacity), and a live countdown card; an about section with highlights table and a four-up stat row; a speakers grid (avatar initials, name, role, talk); a two-day schedule with an ARIA tablist (arrow-key nav, Home/End) and a time-rail slot list; a venue section with details table; a capped sponsorship tier list; and a three-tier register panel (early-bird / standard / workshop) + footer. Split into modular files: code.html + style.css (the --ds-* design-token system from design-tokens.md, light-default + calm opt-in dark mode, reduced-motion guard) + script.js (theme toggle, mobile nav, schedule tabs, live countdown, reveal), with preview.html as a self-contained single-file preview. No React, Vue, Next.js, Tailwind, Bootstrap, or backend.", "tags": [ "event", "conference", "schedule", "speakers", "tickets", "countdown", "tabs", "tablist", "venue", "sponsors", "pricing", "design-system", "css-variables", "responsive", "dark-mode", "accessibility", "vanilla-js", "editorial", "minimal", "light-default" ], "features": [ "sticky header with brand mark, date, anchor nav, theme toggle, and responsive mobile drawer (aria-expanded)", "editorial hero with clamp() headline and facts grid (dates / location / talks / capacity)", "live countdown card counting down to event start (days/hours/mins/secs), paused when tab hidden", "about section with highlights table and four-up stat row", "speakers grid (avatar initials, name, role, talk title)", "two-day schedule with ARIA tablist (arrow-key + Home/End navigation) and time-rail slot list", "venue section with details table (venue / address / transit / doors / access)", "capped sponsorship tier list (Partner / Supporter)", "three-tier register panel (early-bird / standard / workshop) with feature lists", "light-default theme with calm opt-in dark mode (no-flash pre-paint script + persisted toggle)", "IntersectionObserver scroll-reveal (.reveal -> .is-visible, reduced-motion safe)", "DevSnips --ds-* shared design-token layer (design-tokens.md) with template tokens on top", "hairline 1px borders, small controlled radii, restrained shadows, single controlled accent", "modular file split (code.html + style.css + script.js)" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/code.html", "pages/script.js", "pages/style.css" ] } ], "subcategory": "event-conference", "tags": [ "animation", "hover-effect", "gradient", "shadow", "typing-effect", "flexbox", "grid", "center" ] }, { "name": "Html5 Boilerplate", "path": "Vanilla/Templates/html5-boilerplate/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "Html5 Boilerplate.", "variantsCount": 1, "variants": [ { "name": "HTML5 Boilerplate", "path": "Vanilla/Templates/html5-boilerplate/", "type": "template", "description": "A minimal, clean HTML5 starter template aligned with the DevSnips design system. A single self-contained index.html with the doctype, head, and body, plus the core --ds-* design-token foundation (light-default + calm opt-in dark mode via [data-theme=\"dark\"]), a no-flash pre-paint theme script, system-font stack (Inter + JetBrains Mono with fallbacks), box-sizing reset, :focus-visible ring, and a prefers-reduced-motion guard. Intentionally bare so a new page can build on the shared token base from the first line. No framework, no build step, no external dependencies.", "tags": [ "boilerplate", "starter", "html5", "minimal", "design-system", "css-variables", "dark-mode", "accessibility", "reduced-motion", "light-default" ], "features": [ "minimal HTML5 document skeleton (doctype, head, body)", "core --ds-* design-token foundation (semantic + accent tokens, fonts, radii, spacing, motion)", "light-default theme with calm opt-in dark mode via [data-theme=\"dark\"]", "no-flash pre-paint theme script (saved preference or system preference)", "system-font stack (Inter + JetBrains Mono with fallbacks; no external download required to function)", "box-sizing reset and base body styles on tokens", ":focus-visible ring for keyboard users", "prefers-reduced-motion guard" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/index.html" ] } ], "subcategory": "html5-boilerplate", "tags": [ "table" ] }, { "name": "Job Board", "path": "Vanilla/Templates/job-board/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "A dense, structured developer job-board template for DevSnips built with semantic HTML, CSS, and vanilla JavaScript. Light, neutral, and information-dense: a sticky navigation bar with a responsive mobile menu, a jobs view with keyword search plus location and job-type filters, category chips, a result count, and a paginated job list; a job detail view with company sidebar (apply / save) and a details sidebar; a companies directory grid and a company detail view with open positions; a saved jobs view with an empty state; and a candidate area with a sidebar and profile, applications (status table), and saved-jobs tabs. Includes a scoped apply modal, toast notifications, and a mobile filter drawer. Split into modular files: code.html (HTML structure) + style.css (the design system, following the shared design-tokens.md --ds-* token layer with an opt-in dark mode and reduced-motion guard) + script.js (all views, rendering, filtering, pagination, save/apply, and interactions), with preview.html as a self-contained single-file preview of the UI. No React, Vue, Next.js, Tailwind, Bootstrap, backend, database, or job-posting API.", "variantsCount": 1, "variants": [ { "name": "Job Board", "path": "Vanilla/Templates/job-board/", "type": "template", "description": "A dense, structured developer job-board template for DevSnips built with semantic HTML, CSS, and vanilla JavaScript. Light, neutral, and information-dense: a sticky navigation bar with a responsive mobile menu, a jobs view with keyword search plus location and job-type filters, category chips, a result count, and a paginated job list; a job detail view with company sidebar (apply / save) and a details sidebar; a companies directory grid and a company detail view with open positions; a saved jobs view with an empty state; and a candidate area with a sidebar and profile, applications (status table), and saved-jobs tabs. Includes a scoped apply modal, toast notifications, and a mobile filter drawer. Split into modular files: code.html (HTML structure) + style.css (the design system, following the shared design-tokens.md --ds-* token layer with an opt-in dark mode and reduced-motion guard) + script.js (all views, rendering, filtering, pagination, save/apply, and interactions), with preview.html as a self-contained single-file preview of the UI. No React, Vue, Next.js, Tailwind, Bootstrap, backend, database, or job-posting API.", "tags": [ "job-board", "jobs", "careers", "recruitment", "search", "filters", "pagination", "companies", "candidate", "applications", "saved-jobs", "modal", "toast", "filter-drawer", "responsive", "vanilla-js", "css-variables", "accessibility", "dark-mode", "design-system", "data-dense" ], "features": [ "sticky navigation with responsive mobile menu (aria-expanded toggle)", "jobs view with keyword search (title, skill, company, location)", "location and job-type filter selects", "category filter chips (all, remote, frontend, backend, full stack, devops, data, design)", "live result count", "paginated job list (8 per page) with prev/next and numbered pages", "job cards with company logo letter, title, company, meta (location, salary, work mode, posted), and skill tags", "save / unsave jobs (bookmark) with toast feedback", "job detail view with description, responsibilities, requirements, skills, and benefits plus a company info sidebar and apply/save actions", "companies directory grid (auto-fill responsive cards)", "company detail view with about, info sidebar, and open positions list", "saved jobs view with empty state", "candidate area with sidebar (avatar, name, role) and profile, applications, and saved tabs", "applications table with status badges (applied, pending, shortlisted, interview, rejected, accepted)", "scoped apply modal (role=dialog, aria-modal, Escape to close, click-overlay to close)", "toast notifications (success and default)", "mobile filter drawer (location, type, category chips) with overlay and Escape handling", "single-page view switching (jobs, job detail, companies, company detail, saved, candidate)", "opt-in dark mode via prefers-color-scheme (calm inverted system, accent preserved)", "reduced-motion support (prefers-reduced-motion disables animations and smooth scroll)", "DevSnips --ds-* shared design-token layer (design-tokens.md) with template tokens mapped on top", "modular file split (code.html + style.css + script.js)" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/code.html", "pages/script.js", "pages/style.css" ] } ], "subcategory": "job-board", "tags": [ "job-board", "jobs", "careers", "recruitment", "search", "filters", "pagination", "companies", "candidate", "applications", "saved-jobs", "modal", "toast", "filter-drawer", "responsive", "vanilla-js", "css-variables", "accessibility", "dark-mode", "design-system", "data-dense" ] }, { "name": "Product Launch", "path": "Vanilla/Templates/product-launch/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "Product Launch with responsive design with animations and hover interactions.", "variantsCount": 1, "variants": [ { "name": "Product Launch", "path": "Vanilla/Templates/product-launch/", "type": "template", "description": "A clean, restrained product launch / waitlist landing page for a dev-focused product, built with semantic HTML, CSS, and vanilla JavaScript. Light, neutral, and typography-driven: a sticky header with brand mark, anchor nav, theme toggle, and responsive mobile drawer; an editorial hero with a clamp() headline, status meta, and a working waitlist card (name + email validation, simulated submission, success state, beta-capacity progress bar); a social-proof logo row; a three-column feature grid; a four-step how-it-works list; a two-plan pricing teaser; a single-open FAQ accordion (CSS-grid 0fr->1fr, aria-expanded/controls/region); and a final CTA panel + footer. Split into modular files: code.html + style.css (the --ds-* design-token system from design-tokens.md, light-default + calm opt-in dark mode, reduced-motion guard) + script.js (theme toggle, mobile nav, accordion, waitlist form validation, reveal), with preview.html as a self-contained single-file preview. No React, Vue, Next.js, Tailwind, Bootstrap, or backend.", "tags": [ "product-launch", "waitlist", "landing-page", "saas", "beta", "pricing", "faq", "accordion", "form-validation", "design-system", "css-variables", "responsive", "dark-mode", "accessibility", "vanilla-js", "editorial", "minimal", "light-default" ], "features": [ "sticky header with brand mark, version badge, anchor nav, theme toggle, and responsive mobile drawer (aria-expanded)", "editorial hero with clamp() headline, status meta row (status / launch / platforms)", "working waitlist card: name + work-email fields with inline validation, simulated submission, success state, and beta-capacity progress bar", "social-proof logo row", "three-column responsive feature grid (six features)", "four-step how-it-works list with numbered rail", "two-plan pricing teaser (Free / Team) with per-team pricing and feature lists", "single-open FAQ accordion (CSS-grid 0fr->1fr, aria-expanded/aria-controls/role=region, chevron rotate)", "final CTA panel with primary + secondary actions", "light-default theme with calm opt-in dark mode (no-flash pre-paint script + persisted toggle)", "IntersectionObserver scroll-reveal (.reveal -> .is-visible, reduced-motion safe)", "DevSnips --ds-* shared design-token layer (design-tokens.md) with template tokens on top", "hairline 1px borders, small controlled radii, restrained shadows, single controlled accent", "modular file split (code.html + style.css + script.js)" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/code.html", "pages/script.js", "pages/style.css" ] } ], "subcategory": "product-launch", "tags": [ "ecommerce", "animation", "hover-effect", "glassmorphism", "gradient", "shadow", "parallax", "pulse" ] }, { "name": "SaaS Dashboard", "path": "Vanilla/Templates/saas-dashboard/", "tech": "Vanilla HTML/CSS/JS", "type": "template", "category": "Templates", "description": "A self-contained Vanilla HTML/CSS/JS SaaS admin dashboard template with KPI cards, an interactive revenue chart, an activity feed, a customer table, dark mode, and a responsive sidebar layout. No frameworks or build step required.", "variantsCount": 1, "variants": [ { "name": "SaaS Dashboard", "path": "Vanilla/Templates/saas-dashboard/", "type": "template", "description": "A complete, commercial-grade Vanilla HTML/CSS/JS SaaS dashboard template: 30 interconnected pages sharing one coherent mock dataset, a JS-injected app shell, and a single Northstar design system. Covers overview (dashboard, analytics, reports, activity), customer management (customers, details, activity, segments, invitations), revenue (billing, plans, payment methods, invoices, transactions), communication (3-panel inbox, notifications, preferences), workspace (team, roles & permissions matrix, integrations, settings), settings (general, profile, security, sessions, API keys, webhooks), and support (help center, support, system status). Includes interactive SVG charts, sortable/paginated/filterable tables with bulk selection, modals, drawers, toasts, loading/empty/error states, light/dark mode, and a responsive sidebar that becomes an off-canvas drawer. No frameworks, no build step, no backend.", "tags": [ "dashboard", "saas", "admin", "analytics", "charts", "sparklines", "dark-mode", "responsive", "grid", "css-variables", "accessibility", "sidebar", "table", "data-layer", "multi-page", "inbox", "billing", "permissions", "api-keys", "webhooks", "integrations", "system-status" ], "features": [ "30 interconnected pages across 8 sections, all reachable from a single JS-injected sidebar (no dead links)", "Coherent mock SaaS dataset (DB) shared across every page — customers, team, invoices, transactions, activity, conversations, notifications reference the same entities", "Shared Northstar design system (css/app.css + js/app.js): cool-stone neutrals, one indigo accent, hairline borders, semantic status colors, light/dark tokens — identical on every page", "Overview: dashboard (KPIs + revenue chart + plan breakdown + activity + transactions + customers table), deep analytics (MRR/ARR/retention/churn/conversion/traffic/engagement/sessions), reports (list + preview + builder + CSV/PDF/Excel), full activity audit feed with filters", "Customer management: sortable/filterable/paginated table with bulk selection + bulk actions, customer details with 6 tabs (overview/activity/invoices/transactions/notes/metadata), per-customer activity timeline, dynamic segments with creation UI, invitations with resend/revoke", "Revenue: billing overview (plan/usage/payment method/upcoming charges), plan comparison + feature matrix + upgrade/downgrade flows, payment methods (cards + billing address), invoices with modal invoice viewer, transactions with detail drawer + retry", "3-panel support inbox: conversation list + thread + customer sidebar, search, filters, priority/tags, reply (Cmd+Enter), resolve — collapses to stacked panels on mobile", "Notification center (unread/read tabs, mark-as-read) + polished notification dropdown in the global header + notification preferences with per-category channels", "Workspace: team members with roles/2FA/status, clean permissions matrix (Owner/Admin/Manager/Member/Viewer × 14 capabilities), integrations marketplace with connect/configure/disconnect flows, workspace settings with branding + danger zone", "Settings: general + appearance, profile, security (password/2FA/sessions/login history/alerts), sessions with trusted devices, API keys with create-key modal + quickstart, webhooks with endpoints/events/delivery status/retries", "Support: help center (search/categories/FAQ), support ticket form + history, system status (overall status/component uptime bars/incident history)", "Interactive SVG charts: line charts with comparison + hover/touch tooltip, bar charts, donut, sparklines — all with mock data and redraw on theme/resize", "Application states: loading skeletons, meaningful empty states, error states with retry — plus disabled/selected/active/inactive/pending/failed/success throughout", "Reusable components: modal, drawer, confirmation dialog, toast, tabs, breadcrumbs, switches, pagination, pills, avatars — all programmatic via window.NS", "Light/dark mode: no-flash system preference detection + persisted header toggle, charts redraw on theme change", "Responsive: sidebar → off-canvas drawer (Esc/backdrop), tables → stacked cards, multi-panel inbox → stacked, settings nav → horizontal scroll, forms → single column — no horizontal overflow at any width from 320px to 1920px", "Accessible: skip link, semantic landmarks, ARIA on interactive controls, focus-visible rings, keyboard-operable (Escape closes overlays, Enter activates conversation items), reduced-motion safe", "Zero dependencies — only external request is Google Fonts. Open preview.html (the template gallery) or any page in pages/ directly in a browser" ], "files": [ "AGENTS.md", "README.md", "metadata.json", "preview.html", "pages/activity.html", "pages/analytics.html", "pages/api-keys.html", "pages/billing.html", "pages/code.html", "pages/customer-activity.html", "pages/customer-details.html", "pages/customer-segments.html", "pages/customers.html", "pages/dashboard.html", "pages/help-center.html", "pages/inbox.html", "pages/integrations.html", "pages/invitations.html", "pages/invoices.html", "pages/notifications.html", "pages/payment-methods.html", "pages/plans.html", "pages/preferences.html", "pages/profile.html", "pages/reports.html", "pages/roles.html", "pages/security.html", "pages/sessions.html", "pages/settings.html", "pages/support.html", "pages/system-status.html", "pages/team.html", "pages/transactions.html", "pages/webhooks.html", "pages/workspace-settings.html" ] } ], "subcategory": "saas-dashboard", "tags": [ "dashboard", "saas", "admin", "analytics", "charts", "dark-mode", "responsive", "grid", "css-variables", "accessibility", "sidebar", "table" ] }, { "name": "Accordion", "path": "React/Components/Accordion/", "tech": "React", "type": "component", "category": "Components", "description": "", "variantsCount": 12, "variants": [ { "name": "Accordion", "path": "React/Components/Accordion/accordion/", "type": "component", "description": "The reference accordion: single-expansion disclosure built from the shared compound primitives — real button triggers in headings, `aria-expanded`/`aria-controls` wiring, grid-rows height animation, and a clean border-divided list treatment. Every other variant in the family is built from these same primitives.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "reference", "single", "compound", "disclosure" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "single expansion", "controlled + uncontrolled", "compound regions", "grid-rows animation" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Bordered Accordion", "path": "React/Components/Accordion/accordion-bordered/", "type": "component", "description": "The contained treatment: the same accordion framed in a `radius-md` bordered surface — an alternate structure for settings panels and cards, driven entirely by the root's `className`. The trigger's inset focus ring is what makes this work: it is never clipped by the container's `overflow-hidden`.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "bordered", "contained", "layout", "surface" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "contained bordered treatment", "radius-md surface", "inset focus ring", "className-driven" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Collapsible Accordion", "path": "React/Components/Accordion/accordion-collapsible/", "type": "component", "description": "Single-expansion mode with `collapsible`: the open item can be closed again by activating its trigger, so zero or one items are open. Shown side-by-side with the default mandatory behavior, where activating the open item's trigger is a no-op and exactly one item stays open.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "collapsible", "single", "toggle", "behavior" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "collapsible single mode", "mandatory single-open contrast", "zero-open state" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Disabled Accordion Items", "path": "React/Components/Accordion/accordion-disabled/", "type": "component", "description": "Items disabled at the `` level: the trigger renders as a natively disabled button — unfocusable, not activatable by pointer or keyboard, exposed as disabled to assistive technology, and skipped by Tab. Disabled items can never open.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "disabled", "states", "permissions" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "item-level disabled", "native disabled semantics", "skipped in tab order", "state not color alone" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "FAQ Accordion", "path": "React/Components/Accordion/accordion-faq/", "type": "component", "description": "A realistic frequently-asked-questions accordion: question/answer pairs with roomier region padding, body-sm answer copy, and semantic question text in the trigger (the question IS the button label — no redundant ARIA question roles).", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "faq", "questions", "support", "content" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "question/answer semantics", "roomier region padding", "multiple mode", "realistic support copy" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Loading Accordion", "path": "React/Components/Accordion/accordion-loading/", "type": "component", "description": "A region that loads asynchronously: while data is pending the content area renders geometry-preserving skeleton bars (aria-hidden) with an sr-only announcement and `aria-busy` on the region — then swaps to the real data without a layout jump. The pulse is disabled under reduced motion.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "loading", "skeleton", "aria-busy", "async" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "skeleton bars", "aria-busy region", "sr-only announcement", "geometry preserved", "reduced-motion pulse off" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Multiple Accordion", "path": "React/Components/Accordion/accordion-multiple/", "type": "component", "description": "Multiple-expansion mode: any number of items can stay open at once. `value` and `onValueChange` become `string[]` — the TypeScript types are discriminated by `type=\"multiple\"`, so the compiler enforces the array shape. Includes a controlled demo with external Expand all / Collapse all actions.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "multiple", "controlled", "uncontrolled", "state" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "multiple open items", "discriminated union types", "controlled with external actions", "open-count readout" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Nested Accordion", "path": "React/Components/Accordion/accordion-nested/", "type": "component", "description": "An accordion inside an accordion's region: each `` instance owns an independent state and id base (via `useId`), so nested items toggle without touching the parent, ids never collide, and keyboard behavior stays the predictable native-button model at every depth.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "nested", "independent state", "hierarchy", "composite" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "independent nested state", "no id collisions", "parent stays open", "predictable tab order" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Accordion with Actions", "path": "React/Components/Accordion/accordion-with-actions/", "type": "component", "description": "Accordion regions that contain real actions — buttons and links inside the expanded content. The trigger itself stays a single clean button (no nested controls); actions live in the region, where they are fully keyboard reachable and operable while the item is open.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "actions", "buttons", "links", "composite" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "real buttons in content", "real links in content", "keyboard reachable actions", "no nested trigger controls" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Accordion with Badge", "path": "React/Components/Accordion/accordion-with-badge/", "type": "component", "description": "Triggers with a status or count badge via the `badge` prop — a neutral token-styled pill pinned before the chevron. The badge is plain, non-interactive text inside the button: it never intercepts clicks and never creates a confusing accessible name.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "badge", "status", "count", "pill" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "trailing badge pill", "non-interactive badge", "accessible-name safe", "token-styled pill" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Accordion with Description", "path": "React/Components/Accordion/accordion-with-description/", "type": "component", "description": "Triggers with a title plus a short supporting line via the `description` prop — a muted 13px second row under the title that keeps a clean two-level hierarchy. Useful for documentation and settings sections where the title alone is ambiguous.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "description", "two-line trigger", "docs", "hierarchy" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "title + description trigger", "muted supporting line", "wrapping two-line layout" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Accordion with Icons", "path": "React/Components/Accordion/accordion-with-icons/", "type": "component", "description": "Triggers with a leading icon via the `icon` prop — a ReactNode rendered in a fixed 16px `aria-hidden` slot. Icons supplement the trigger text (settings sections with recognizable glyphs); they never replace it, so the accessible name always comes from real text.", "tags": [ "accordion", "disclosure", "react", "tailwind", "accessible", "responsive", "tokens", "icons", "leading-icon", "settings" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "WAI-ARIA disclosure", "token-driven surface", "leading icon slot", "aria-hidden icons", "16px icon sizing", "icon + text hierarchy" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] } ], "subcategory": "Core", "tags": [ "accessible", "accordion", "actions", "aria-busy", "async", "badge", "behavior", "bordered", "buttons", "collapsible", "composite", "compound", "contained", "content", "controlled", "count", "description", "disabled", "disclosure", "docs", "faq", "hierarchy", "icons", "independent state", "layout", "leading-icon", "links", "loading", "multiple", "nested", "permissions", "pill", "questions", "react", "reference", "responsive", "settings", "single", "skeleton", "state", "states", "status", "support", "surface", "tailwind", "toggle", "tokens", "two-line trigger", "uncontrolled" ] }, { "name": "Alerts", "path": "React/Components/Alerts/", "tech": "React", "type": "component", "category": "Components", "description": "", "variantsCount": 12, "variants": [ { "name": "Alert", "path": "React/Components/Alerts/alert/", "type": "component", "description": "The reference alert: a restrained inline feedback surface (radius-md, 1px border) with the title / description / icon / action / close primitives and role-matched live-region behavior. Every other variant in the family is built from these same primitives.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "reference", "compound", "composition", "status" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "compound regions", "registered title/description association", "role override" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Compact Alert", "path": "React/Components/Alerts/alert-compact/", "type": "component", "description": "The `size=\"sm\"` density: reduced padding and gaps for dense interfaces — settings panels, inspector sidebars, data-dense admin screens — while keeping the full compound API, roles, and wrapping behavior.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "compact", "dense", "size", "density" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "size=sm density", "same compound API", "stacked dense layout" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Destructive Alert", "path": "React/Components/Alerts/alert-destructive/", "type": "component", "description": "Failures and blocking errors: a red tint derived from the `color.destructive` token, the error glyph, and an assertive `role=\"alert\"` — for failed operations and validation summaries the user must resolve.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "destructive", "error", "alert-role", "assertive", "validation" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "destructive tint + error glyph", "assertive role=alert", "error-summary pattern" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Dismissible Alert", "path": "React/Components/Alerts/alert-dismissible/", "type": "component", "description": "An alert the user can dismiss: a real close button with an accessible name, controlled (`open` + `onDismiss`) or uncontrolled (`defaultOpen`) state, and focus management that never strands keyboard users when the alert unmounts.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "dismissible", "close", "controlled", "uncontrolled", "focus management" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "real close button", "controlled + uncontrolled", "focus relocation on dismiss", "custom close label" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Info Alert", "path": "React/Components/Alerts/alert-info/", "type": "component", "description": "Informational feedback: a neutral-blue tint derived from the `color.info` token, the info glyph, and a polite `role=\"status\"` — for neutral, non-urgent messages the user should know about but does not have to act on.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "info", "informational", "status", "polite" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "info tint + glyph", "polite role=status", "long-content wrapping" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Live-Region Alert", "path": "React/Components/Alerts/alert-live/", "type": "component", "description": "Dynamic application feedback done right: alerts mounted on the event announce through their role — `role=\"status\"` politely for outcomes, `role=\"alert\"` assertively for failures — with one live region per message so nothing is announced twice.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "live region", "aria-live", "async", "status", "dynamic" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "mount-on-event announcements", "polite vs assertive roles", "no duplicate announcements" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Rich Alert", "path": "React/Components/Alerts/alert-rich/", "type": "component", "description": "The full composition: semantic icon, title, description, action row, and a dismiss button working together — the shape for product updates and operational incidents that carry both context and next steps.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "rich", "composite", "actions", "dismissible", "full composition" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "icon + title + description + actions + close", "mixed buttons and anchors", "graceful mobile collapse" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Success Alert", "path": "React/Components/Alerts/alert-success/", "type": "component", "description": "Confirmation of a completed operation: a green tint derived from the `color.success` token, the check glyph, and a polite `role=\"status\"` — for \"it worked\" feedback after saves, payments, backups, and syncs.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "success", "confirmation", "status", "polite" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "success tint + check glyph", "polite role=status" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Warning Alert", "path": "React/Components/Alerts/alert-warning/", "type": "component", "description": "Caution that needs attention before it becomes a failure: an amber tint derived from the `color.warning` token, the triangle glyph, and an assertive `role=\"alert\"` — for quota, deprecation, and expiring-access messages.", "tags": [ "alert", "feedback", "react", "tailwind", "accessible", "responsive", "tokens", "warning", "caution", "alert-role", "assertive" ], "features": [ "responsive", "light/dark", "reduced-motion", "focus-visible", "live-region roles", "token-driven surface", "warning tint + triangle glyph", "assertive role=alert", "deprecation pattern" ], "files": [ "README.md", "code.jsx", "code.tsx", "metadata.json", "preview.html" ] }, { "name": "Alert with Action", "path": "React/Components/Alerts/alert-with-action/", "type": "component", "description": "An alert with real action buttons in the `AlertAction` row — for messages that ask the user to do something: upgrade, retry, update billing. Actions are native `