Comet is a React with TypeScript Component Library based on the U.S. Web Design System (USWDS).

What started as a USWDS implementation has evolved into a comprehensive toolkit for building modern government and enterprise applications. Comet provides modular packages that accelerate developer productivity and simplify the adoption of design systems, particularly USWDS. Whether you need core USWDS components, data visualizations, or custom UI elements, Comet has you covered.

• 🎨 Complete USWDS Implementation - All USWDS components built with React and TypeScript
• 📊 Data Visualization - Chart components powered by Victory.js
• 🔧 Custom Components - Additional UI elements not provided by USWDS
• 🤖 AI-Powered Workflow - Model Context Protocol (MCP) server for enhanced development
• ⚡ Developer Experience - TypeScript support, Storybook documentation, and comprehensive testing
• 🚀 Quick Start - Starter templates and CLI tools to get up and running fast

1. Overview
2. Packages
3. Getting Started
4. Running the Project Locally
5. Documentation & Demo
6. Want to help?

Comet is built around the U.S. Web Design System (USWDS), the design system for the federal government. USWDS provides a comprehensive set of design principles, components, and patterns to help government agencies build accessible, mobile-friendly websites and applications.

Comet takes USWDS to the next level by providing:

• Modern React Implementation - All USWDS components as reusable React components with TypeScript support
• Enhanced Developer Experience - Comprehensive documentation, testing, and development tools
• Extended Functionality - Additional components and features beyond the core USWDS specification

Comet consists of multiple packages, each providing specific functionality. These packages can be used independently or together, depending on your use case:

Package	Description	NPM
comet-uswds	Complete USWDS component library implemented in React with TypeScript. Includes all standard USWDS components like buttons, forms, navigation, and layouts.
comet-extras	Custom components that fill gaps where USWDS doesn't provide implementations. Includes advanced UI elements like tabs, modals, and complex form controls.
comet-data-viz	Data visualization components built on Victory.js, providing charts, graphs, and data display components with USWDS styling.

Package	Description	NPM
comet-mcp	Model Context Protocol server for AI-enhanced development workflow. Provides intelligent code assistance and automation for Comet projects.

The quickest way to get started is with our starter app, which includes pre-configured tooling and examples:

1. Clone the starter repository:

   git clone https://github.com/MetroStar/comet-starter.git my-project
   cd my-project

2. Install dependencies:

   npm install

3. Start development:

   npm run dev

The starter app includes:

• Pre-configured USWDS setup and styling
• Example components and pages
• Testing framework setup
• Build and deployment configurations
• TypeScript and linting configurations

If you have an existing React project, you can add Comet packages individually. See each package's README for detailed setup instructions:

• comet-uswds
• comet-extras
• comet-data-viz

To contribute to Comet or run the project locally for development:

1. Clone the repository:

   git clone https://github.com/MetroStar/comet.git
   cd comet

2. Install dependencies:

   npm install

3. Start Storybook for component development:

   npm run storybook

4. Run tests:

   npm test

5. Build packages:

   npm run build:comet-uswds
   npm run build:comet-extras
   npm run build:comet-data-viz

• 📚 Component Documentation & Examples - Interactive Storybook with all components, usage examples, and documentation
• 🚀 Live Demo App - See Comet in action with a full application example
• 📖 USWDS Documentation - Official U.S. Web Design System documentation

Interested in contributing to any of the packages in this project? Review our contributing info here: Contributing.