COMET
GitHub
Component Showcase
Interactive demonstration of all 12 COMET design system components

COMET Design System

Complete component showcase featuring all 12 production-ready components. Built with accessibility, performance, and developer experience in mind.

12
Components
100%
Complete
WCAG
Accessible
📱
Responsive

Interactive Controls

Core interactive elements including buttons, form controls, and dropdown menus. All components support keyboard navigation and screen readers.

Button System 6 variants • 5 sizes • Icons

Form Controls Inputs • Select • Textarea • Validation

Dropdown Menus Positioning • Search • Keyboard Nav

View Details Edit Item
Delete Item
Regular User Administrator Team Member

Content Display

Components for organizing and displaying content including cards, badges, and user avatars. Flexible layouts that adapt to different screen sizes.

Card System Interactive • Images • Actions

Simple Card

Basic card layout

Clean and minimal design for displaying content.

User

John Doe

Senior Developer

Online

Badge System 8 variants • Sizes • Interactive

Default Primary Secondary Success Warning Error Info Accent
Outline Large Verified

Avatar System 5 sizes • Images • Initials • Icons

XS Avatar
SM Avatar
MD Avatar
LG Avatar
XL Avatar
JD
AB

Feedback & Communication

User feedback components including alerts, banners, and modal dialogs. Designed for clear communication and user guidance.

Alert System 4 variants • Dismissible • Actions

Information
This is an informational message.
Success
Operation completed successfully.
Warning
Please review before proceeding.
Error
Something went wrong. Please try again.

Banner System Dismissible • Animations • Positioning

New Features Available
Check out our latest updates and improvements!
Settings saved successfully!

Modal System Focus Trapping • Sizes • Accessibility

Demo Modal

Example modal dialog

This is a demo modal showing the modal component in action. Modals support focus trapping, keyboard navigation, and proper accessibility attributes.

Add New User

Enter user information

Confirm Action

This action cannot be undone

Are you sure you want to delete this item?

This action is permanent and cannot be reversed.

COMET Documentation

Component usage and examples

Component Categories

Interactive Controls

  • • Button System (6 variants, 5 sizes)
  • • Form Controls (Input, Select, Textarea)
  • • Dropdown Menus (Positioning, Search)

Content Display

  • • Card System (Interactive, Images)
  • • Badge System (8 variants, Sizes)
  • • Avatar System (5 sizes, Multiple types)

Feedback & Communication

  • • Alert System (4 variants, Actions)
  • • Banner System (Dismissible, Animations)
  • • Modal System (Focus Trapping, Sizes)

Navigation & Layout

  • • Tab System (Horizontal, Vertical)
  • • FAB System (Positioning, Colors)
  • • Mobile Navigation (Responsive, Overlay)

Key Features

✓ Accessibility

  • • WCAG 2.1 AA compliance
  • • Keyboard navigation support
  • • Screen reader compatibility
  • • Focus management

✓ Performance

  • • Optimized CSS bundle
  • • Minimal JavaScript footprint
  • • Proper cleanup and memory management
  • • Responsive design patterns
View on GitHub