Component Library Kickstarter
Generate a starter component library with consistent design tokens
Create a starter component library for my project. **Design vibe:** [DESCRIBE — e.g., "clean and minimal like Linear", "bold and playful like Vercel", "dark hacker aesthetic"] **Colors:** [PRIMARY_COLOR or "you pick based on the vibe"] Generate these foundational components (React + TypeScript + Tailwind): 1. **Button** — primary, secondary, ghost, destructive variants + sizes (sm, md, lg) + loading state 2. **Input** — text, email, password + label, placeholder, error state, helper text 3. **Card** — basic container with header, body, footer slots 4. **Badge** — for tags/status indicators, 6 color variants 5. **Modal/Dialog** — with overlay, close button, accessibility (focus trap, escape key) 6. **Toast/Notification** — success, error, warning, info + auto-dismiss For each component: - Fully typed props with JSDoc descriptions - Keyboard accessible - Composable (slots/children, not rigid templates) - Demo usage example Also generate: - **Design tokens** file — colors, spacing, radii, shadows as CSS variables - **Index file** — barrel export for clean imports - **Usage guide** — markdown showing every variant Keep the total under 500 lines. Lean > bloated.
How to Use This Prompt
- 1Copy the prompt template above
- 2Paste into claude
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Frontend Prompts
Related frontend templates from the vault
Vibe-to-Code: App from Vibes
Describe an app idea in casual language and get a working prototype
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
Responsive Landing Page Builder
Generate a complete, conversion-optimized landing page
Infinite Scroll with Virtualization
Use this prompt to infinite scroll with virtualization with AI assistance
You Might Also Like
Prompts from other categories that share similar tags
Full-Stack App Scaffold from Description
Generate a complete project structure and boilerplate from a plain-English app description
AI Pair Programming Session
Set up an interactive pair programming session with AI as your coding partner
Component Testing with Testing Library
Use this prompt to component testing with testing library with AI assistance
Manual DOM to React Components
Use this prompt to manual dom to react components with AI assistance
Keep Exploring the Vault