Comet

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.

✨ Key Features

• 🎨 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

Table of Contents

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

Overview

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

Packages

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

Core Packages

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.

Development Tools

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

Getting Started

Option 1: Comet Starter App (Recommended)

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

Option 2: Adding to Existing Project

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

Running the Project Locally

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
   

Documentation & Demo

• 📚 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

Publishing Packages

If you're a maintainer looking to publish new versions of Comet packages to NPM, please refer to our detailed release documentation:

📦 Release Process Guide - Complete instructions for publishing comet-uswds, comet-extras, comet-data-viz, and other packages

The release guide covers:

• Semantic versioning guidelines
• Step-by-step release workflows
• GitHub Actions automation
• NPM publishing verification

Want to help?

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