Component Library / Style Guide #38
Description
Description
Create a visual component library showing all reusable UI components with all states, variants, and usage examples. This will be the reference for frontend developers.
Requirements and Context
- Must include all components
- Show all states and variants
- Include usage examples
- Accessible to developers
- Can be in Figma, Storybook, or documentation site
Detailed Design Specifications
Components to Include:
Buttons:
- Primary, secondary, tertiary
- Sizes (small, medium, large)
- States (default, hover, active, disabled, loading)
- With icons
- Full width
Inputs:
- Text input
- Number input
- Textarea
- Select/dropdown
- Checkbox
- Radio button
- Switch/toggle
- File upload
- All states (default, focus, error, disabled)
Cards:
- Default card
- Elevated card
- Outlined card
- With header/footer
- With actions
Tables:
- Default table
- Sortable table
- Selectable table
- Responsive table
Modals:
- Default modal
- Confirmation modal
- Full-screen modal (mobile)
Navigation:
- Top navigation
- Sidebar navigation
- Breadcrumbs
- Tabs
- Pagination
Feedback:
- Toast notifications
- Alerts
- Loading spinners
- Progress bars
- Skeletons
Data Display:
- Charts (line, bar, pie)
- Stats cards
- Badges
- Tags
- Tooltips
Each Component:
- Visual design
- All variants
- All states
- Usage guidelines
- Do's and don'ts
- Code reference (if applicable)
Deliverables
- Component library file (Figma/Sketch)
- Or Storybook documentation
- Or web documentation
- Usage guidelines
- Design specifications
Guidelines
- Complete component set
- Clear variants and states
- Developer-friendly
- Accessible components
- Timeframe: 96 hours
- Project details: #