{"id":33319431,"url":"https://github.com/webrenew/tailwind-theme-previewer","last_synced_at":"2026-05-16T10:31:14.017Z","repository":{"id":324772486,"uuid":"1098416673","full_name":"WebRenew/Tailwind-Theme-Previewer","owner":"WebRenew","description":"A tool to generate Tailwind Themes made solely on v0.","archived":false,"fork":false,"pushed_at":"2025-11-17T18:56:49.000Z","size":4309,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-17T20:30:27.993Z","etag":null,"topics":["opensource-projects","tailwindcss","tailwindthemes","v0","vercel"],"latest_commit_sha":null,"homepage":"https://v0-tailwind-theme-previewer.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebRenew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-17T16:57:04.000Z","updated_at":"2025-11-17T18:57:15.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/WebRenew/Tailwind-Theme-Previewer","commit_stats":null,"previous_names":["webrenew/tailwind-theme-previewer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/WebRenew/Tailwind-Theme-Previewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebRenew%2FTailwind-Theme-Previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebRenew%2FTailwind-Theme-Previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebRenew%2FTailwind-Theme-Previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebRenew%2FTailwind-Theme-Previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebRenew","download_url":"https://codeload.github.com/WebRenew/Tailwind-Theme-Previewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebRenew%2FTailwind-Theme-Previewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285319005,"owners_count":27151474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-19T02:00:05.673Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["opensource-projects","tailwindcss","tailwindthemes","v0","vercel"],"created_at":"2025-11-19T20:00:49.699Z","updated_at":"2025-11-19T20:02:58.429Z","avatar_url":"https://github.com/WebRenew.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Theme Previewer\n\n![Preview](public/Tailwind_Theme_Previewer.png)\n\nA satirical, interactive design system exploration tool themed around \"Cubicloud\" - celebrating corporate cubicle culture with tongue-in-cheek humor. Build, customize, and export complete Tailwind CSS design tokens with a playful, data-driven dashboard interface.\n\n## Overview\n\nTailwind Theme Previewer is a Next.js application that lets you create, customize, and preview complete design systems. Featuring YOLO mode for random theme generation, dynamic theme naming, interactive animated eyes that react to user actions, and a fire emoji confetti celebration on export.\n\n## Features\n\n### Core Functionality\n- **Interactive Brand Token Editor** - Customize colors, typography, spacing, and shadows in real-time\n- **YOLO Mode** - Randomly generate complete design systems with contextually-named themes\n- **Live Preview Dashboard** - See your design tokens applied to a satirical \"Cubicle Metrics\" dashboard\n- **Multi-Format Export** - Download design tokens as CSS variables, Tailwind v3 config, or Tailwind v4 config\n- **Dynamic Theme Naming** - Automatically generates creative theme names based on primary color hue\n\n### Interactive Elements\n- **Animated Eyes** - Eyes in the navbar that track cursor movement and react with shocked expressions\n- **Fire Confetti Celebration** - Exploding fire emojis from all corners when exporting tokens\n- **Collapsible Sidebar** - Responsive controls panel that adapts to mobile and desktop\n\n### Design Token Categories\n- **Colors** - Primary brand color with 9 shades, plus 3 neutral colors\n- **Typography** - Font families (heading, body, mono), sizes, weights, and line heights\n- **Spacing** - Consistent spacing scale from xs to 3xl\n- **Borders** - Border radius tokens (sm, md, lg, full)\n- **Shadows** - Shadow presets (sm, md, lg, xl)\n\n### Preview Components\n- **Cubicle Activity Feed** - Live metrics with satirical workplace categories\n- **Satisfaction Score Chart** - Bar graph with vertical grid lines\n- **Stats Cards** - Income, Expenses, and Savings with sparkline graphs\n- **Button States** - Primary and Soft button variants (default, hover, active, disabled)\n- **Theme Token Display** - Visual reference of current design system values\n\n## Tech Stack\n\n- **Framework:** Next.js 15 with App Router\n- **Language:** TypeScript\n- **Styling:** Tailwind CSS v4\n- **UI Components:** shadcn/ui\n- **Color Processing:** tinycolor2\n- **State Management:** React hooks with Context API\n- **Fonts:** Geist Sans and Geist Mono\n\n## Project Structure\n\n\\`\\`\\`\ntailwind-theme-previewer/\n├── app/\n│   ├── layout.tsx              # Root layout with fonts and metadata\n│   ├── page.tsx                # Main page with sidebar and preview\n│   └── globals.css             # Tailwind v4 config and theme tokens\n├── components/\n│   ├── animated-eyes.tsx       # Interactive eyes with cursor tracking\n│   ├── app-navbar.tsx          # Header with logo and eyes\n│   ├── brand-color-manager.tsx # Color palette editor with YOLO mode\n│   ├── brand-controls-panel.tsx # Main control panel container\n│   ├── brand-preview.tsx       # Live preview dashboard\n│   ├── design-tokens-sheet.tsx # Export modal with fire confetti\n│   ├── emoji-confetti.tsx      # Fire emoji animation system\n│   ├── mobile-controls-menu.tsx # Mobile drawer for controls\n│   └── ui/                     # shadcn/ui components\n├── hooks/\n│   └── use-brand-tokens.ts     # Global state management for design tokens\n├── lib/\n│   ├── color-utils.ts          # Color generation and manipulation\n│   └── theme-name-generator.ts # Dynamic theme naming based on hues\n├── types/\n│   └── brand.ts                # TypeScript interfaces for design tokens\n└── public/\n    ├── cubicloud-hero.png      # 3D isometric cubicle office render\n    └── Tailwind_Theme_Previewer.png\n\\`\\`\\`\n\n## Installation\n\n\\`\\`\\`bash\n# Clone the repository\ngit clone https://github.com/yourusername/tailwind-theme-previewer.git\n\n# Navigate to the project directory\ncd tailwind-theme-previewer\n\n# Install dependencies\nnpm install\n\n# Run the development server\nnpm run dev\n\\`\\`\\`\n\nOpen [http://localhost:3000](http://localhost:3000) to view the application.\n\n## Usage\n\n### Creating a Theme\n\n1. **Open the Controls Panel** - Click the sidebar button or use the mobile menu\n2. **Customize Brand Tokens:**\n   - **Colors:** Select primary brand color and neutrals\n   - **Typography:** Choose fonts, sizes, and weights\n   - **Spacing:** Adjust spacing scale values\n   - **Borders:** Set border radius tokens\n   - **Shadows:** Configure shadow presets\n3. **Preview in Real-Time** - See changes instantly in the dashboard preview\n4. **Export Your Theme** - Click \"Export Tokens\" for CSS, Tailwind v3, or Tailwind v4 formats\n\n### YOLO Mode\n\nClick the \"YOLO\" button in the color manager to randomly generate a complete design system:\n- Randomly selects a primary brand color\n- Generates 9 color shades automatically\n- Picks 3 complementary neutral colors\n- Creates a contextually-named theme (e.g., \"Arctic Cascade\" for blue, \"Coral Sunset\" for orange)\n- Updates the entire preview instantly\n\n### Interactive Features\n\n- **Eye Tracking:** Move your cursor across the navbar to see the eyes follow\n- **Export Celebration:** Click \"Export Tokens\" to trigger fire emoji confetti from all corners\n- **Shocked Eyes:** Eyes grow wide when confetti animation plays\n- **Responsive Layout:** Collapsible sidebar adapts to mobile and desktop viewports\n\n## Design System\n\n### Color Generation\nThe app uses tinycolor2 to generate 9 shades from a base color:\n- Shades 50-400: Lighter tints\n- Shade 500: Base color\n- Shades 600-900: Darker tones\n\n### Theme Naming\nDynamic names are generated based on primary color hue ranges:\n- **Blues (190-250°):** Arctic Cascade, Ocean Depths, Midnight Sky, Sapphire Dream, Azure Horizon\n- **Greens (90-170°):** Emerald Isle, Forest Canopy, Mint Breeze, Jade Garden, Olive Grove\n- **Purples (270-330°):** Violet Dusk, Lavender Fields, Plum Twilight, Orchid Bloom, Amethyst Crown\n- **Reds (330-30°):** Crimson Fire, Ruby Glow, Scarlet Dawn, Cherry Blossom, Burgundy Wine\n- And more...\n\n### Typography Scale\n- **Headings:** 3xl (1.875rem), 2xl (1.5rem), xl (1.25rem), lg (1.125rem)\n- **Body:** Base (1rem), sm (0.875rem), xs (0.75rem)\n- **Weights:** Regular (400), Medium (500), Semibold (600), Bold (700)\n\n## Satirical Theme: Cubicloud\n\nThe preview showcases a \"Cubicle Metrics Dashboard\" with tongue-in-cheek corporate humor:\n- **Cubicle Activity Feed:** Coffee Breaks, Paper Jams Fixed, TPS Reports Filed, Meetings Survived\n- **Satisfaction Score:** \"94.2% - Metrics not evaluated by HR\"\n- **Meaningless Metrics:** Data-driven dashboards scientifically designed to justify workspace investment\n\n## Export Formats\n\n### CSS Variables\n\\`\\`\\`css\n:root {\n  --color-primary-500: #3b82f6;\n  --font-heading: 'Geist', sans-serif;\n  --spacing-md: 1rem;\n}\n\\`\\`\\`\n\n### Tailwind v3 Config\n\\`\\`\\`js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: { 500: '#3b82f6' }\n      }\n    }\n  }\n}\n\\`\\`\\`\n\n### Tailwind v4 Config\n\\`\\`\\`css\n@theme inline {\n  --color-primary-500: #3b82f6;\n  --font-heading: 'Geist';\n}\n\\`\\`\\`\n\n## Contributing\n\nContributions are welcome! Feel free to open issues or submit pull requests.\n\n## License\n\nMIT License - feel free to use this project for personal or commercial purposes.\n\n## Acknowledgments\n\n- Built with Next.js 15 and Tailwind CSS v4\n- UI components from shadcn/ui\n- Inspired by corporate cubicle culture and data-driven decision making\n- Hero image: 3D isometric office cubicle render\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebrenew%2Ftailwind-theme-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebrenew%2Ftailwind-theme-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebrenew%2Ftailwind-theme-previewer/lists"}