Component Library Checklist
Posted:
The following is a checklist I like to use to ensure I'm covering all the bases when building a component library. It's a work in progress, but I hope it can be useful to others.
Visual Language
- Color
- Palettes, by category
- Dark mode
- Typography
- Headings
- Text
- Paragraph
- Lead paragraphs
- Readable text
- Iconography
- Icons
- Meaning
- Space
- Units / measurements
Text
- Block quote
- Unordered list
- Ordered list
- Internal link
- External link
- Code
Buttons
- Buttons
- Primary
- Secondary
- Button groups
- Menu buttons
- Split buttons
- Floating action button
- Brand buttons (Google, FB, Discord)
Forms
- Form controls
- Text input
- Email/number/other variant inputs
- Multi-line text area
- Radio and radio group
- Checkbox and checkbox group
- Select
- File upload
- Label
- Required label
- Switch
- Slider
- Calendar picker
- Rich text editor
- Form structure
Layout
- Divider
- Box
- Marketing grid
- App grid
- Page transitions
- Resopnsive breakpoints
Content
- Image
- Avatar
- Code block
- Footnotes
- Thumbnails
- Video
- Map widget
UI Components
- Alerts
- Accordion
- Back to top
- Badges/tags/chips/pills
- Breadcrumbs
- Caption
- Cards
- Panel
- Callout
- Chat
- Comments
- Tables
- Data table
- Property table
- Drawer
- Filters
- Footer
- Header
- Error (standard error handler)
- Loading / spinner / shimmer
- Toast
- Notification / badge (dot)
- Modal
- Pagination
- Popover
- Progress bar
- Search
- Sidebar
- Sort by
- Tabs
- Tooltips
Navigation
- Action bar / toolbar
- Main menu / Megamenu
- Inline menu
Marketing
- Contact us
- Cookie notification
- Hero billboard
- Hero carousel
- Legend
- Pull quote
- Ratings
- Reviews
- Social networking
- Status (alpha, beta)
- Tips / tutorial
UI Patterns
- Authentication
- Create account
- Permissions
- Purchase/checkout
- Settings
- Site / app structure