This is a component registry — not an official government website

shadcn/ui Registry

Treasury Department Design System

A collection of 37+ accessible, customizable React components following federal design standards. Built on shadcn/ui with the Treasury color palette.

Get Started View on GitHub

Quick Start

1. Configure Registry

Add the TDDS registry to your components.json:

{
  "registries": {
    "@tdds": "https://tdds-registry.gregjohns.dev/r/{name}.json"
  }
}

2. Install Components

Use the shadcn CLI to add components:

npx shadcn@latest add @tdds/button
npx shadcn@latest add @tdds/alert
npx shadcn@latest add @tdds/gov-banner

Install the style first

For the best experience, install the TDDS style to get all color tokens:npx shadcn@latest add @tdds/tdds-style

Component Showcase

Button Variants

TDDS buttons with Treasury color palette

Blocks

Pre-built, composable components for common UI patterns

Official website

TTB Label Verification

COMPONENTSGITHUBLINKEDIN

Public Header

Landing page header with government banner, navigation, and command palette

View demo

TTB Label Verification

Queue

History

App Header

Authenticated header with mobile menu, user dropdown, and search

View demo

Advanced Data Table

Full-featured table with search, filters, sorting, and pagination

View demo

Available Components

Accordion

Collapsible accordion sections

pnpm dlx shadcn@latest add @tdds/accordion

Alert

TDDS-styled alert with info, warning, error, and success variants

pnpm dlx shadcn@latest add @tdds/alert

Alert Dialog

Confirmation dialog with Treasury styling

pnpm dlx shadcn@latest add @tdds/alert-dialog

Badge

Treasury-themed status badges

pnpm dlx shadcn@latest add @tdds/badge

Breadcrumb

TDDS-styled navigation breadcrumb

pnpm dlx shadcn@latest add @tdds/breadcrumb

Button

TDDS-styled button with Treasury color variants (primary, secondary, warning, outline)

pnpm dlx shadcn@latest add @tdds/button

Button Group

Grouped button layout with horizontal and vertical orientations

pnpm dlx shadcn@latest add @tdds/button-group

Card

Card component with Treasury border styling

pnpm dlx shadcn@latest add @tdds/card

Checkbox

Treasury-styled checkbox

pnpm dlx shadcn@latest add @tdds/checkbox

Data Box

Compact data display box with label and large value, ideal for KPIs and metrics

pnpm dlx shadcn@latest add @tdds/data-box

Dialog

Modal dialog component

pnpm dlx shadcn@latest add @tdds/dialog

Dropdown Menu

Context menu dropdown

pnpm dlx shadcn@latest add @tdds/dropdown-menu

Government Banner

Official U.S. government website banner component

pnpm dlx shadcn@latest add @tdds/gov-banner

Hover Card

Hover-triggered card component

pnpm dlx shadcn@latest add @tdds/hover-card

Input

TDDS-styled form input

pnpm dlx shadcn@latest add @tdds/input

Kbd

Keyboard shortcut display component

pnpm dlx shadcn@latest add @tdds/kbd

Label

Form label component

pnpm dlx shadcn@latest add @tdds/label

Pagination

Page navigation component

pnpm dlx shadcn@latest add @tdds/pagination

Popover

Floating popover content

pnpm dlx shadcn@latest add @tdds/popover

Progress

Progress indicator bar

pnpm dlx shadcn@latest add @tdds/progress

Radio Group

Treasury-styled radio button group

pnpm dlx shadcn@latest add @tdds/radio-group

Select

Styled select dropdown

pnpm dlx shadcn@latest add @tdds/select

Separator

Visual divider component

pnpm dlx shadcn@latest add @tdds/separator

Skeleton

Loading placeholder component

pnpm dlx shadcn@latest add @tdds/skeleton

Sonner

Toast notification component

pnpm dlx shadcn@latest add @tdds/sonner

Table

Data table component

pnpm dlx shadcn@latest add @tdds/table

Tabs

Tabs component with TDDS variant featuring top border accents

pnpm dlx shadcn@latest add @tdds/tabs

Textarea

Multi-line text input

pnpm dlx shadcn@latest add @tdds/textarea

Tooltip

Info tooltip component

pnpm dlx shadcn@latest add @tdds/tooltip