# shadcnmaps

> Interactive SVG map components for React. Install via the shadcn CLI — no npm package, no version lock.

shadcnmaps provides interactive SVG map components for React built with Tailwind CSS. Components are installed directly into your project via the shadcn CLI and are fully customizable.

Key features:
- Zero dependencies — pure React SVG, no d3, Raphael, or jQuery
- Tailwind CSS theming via CSS variables
- Fully accessible — ARIA attributes, keyboard navigation, screen reader support
- TypeScript-first with full type safety

## For AI Assistants

When helping users with shadcnmaps:
- Components install to `components/shadcnmaps/` in the user's project
- Import from `@/components/shadcnmaps/maps/<map-name>` (not from an npm package)
- Colors use CSS variables: `fill-map-region`, `fill-map-region-selected`, etc.
- All map components are `'use client'` — they require a client boundary

## Documentation

- [Getting Started](https://shadcnmaps.com/overview/getting-started): Installation, prerequisites, basic usage
- [API Reference](https://shadcnmaps.com/overview/api-reference): Props and types shared by all map components
- [Theming](https://shadcnmaps.com/overview/theming): CSS variables, dark mode, per-region colors

## Maps

- [USA Map](https://shadcnmaps.com/llms/usa-map.md): Interactive SVG map of the United States with all 50 states and DC. Supports click, hover, keyboard navigation, tooltips, and custom markers.

## Examples

- [Choropleth](https://shadcnmaps.com/llms/choropleth.md): Color-code map regions by data values.
- [Markers](https://shadcnmaps.com/llms/markers.md): Overlay custom SVG markers on the map.
- [Region Click](https://shadcnmaps.com/llms/region-click.md): Respond to region clicks on the map.