# shadcnmaps — Full Documentation
> Interactive SVG map components for React. No dependencies, pure Tailwind.
---
# Getting Started
## Prerequisites
- React 18+ project with Tailwind CSS v4
- [shadcn/ui](https://ui.shadcn.com) configured in your project
## Installation
Install a map using the shadcn CLI. Here we'll use the USA map as an example, but the same command works for [any map](/maps). This pulls the component directly into your project — no npm package, no version lock.
```bash
npx shadcn@latest add @shadcnmaps/usa
```
This installs the following files:
| File | Description |
| --------------------------------------- | ------------------------------------ |
| `components/shadcnmaps/map.tsx` | Core SVG renderer |
| `components/shadcnmaps/map-context.tsx` | Shared state context |
| `components/shadcnmaps/map-region.tsx` | Individual region (path) |
| `components/shadcnmaps/map-tooltip.tsx` | Hover/click tooltip |
| `components/shadcnmaps/map-marker.tsx` | SVG marker overlay |
| `components/shadcnmaps/map-listbox.tsx` | Accessible keyboard listbox |
| `components/shadcnmaps/types.ts` | Shared TypeScript types |
| `components/shadcnmaps/maps/usa.tsx` | `USAMap` component |
| `components/shadcnmaps/map-data/usa.ts` | SVG path data for all 50 states + DC |
## Basic usage
```tsx
import { USAMap } from '@/components/shadcnmaps/maps/usa'
export default function Page() {
return
}
```
That's it. The map is interactive out of the box — hover states, tooltips, and full keyboard navigation are included by default.
## Build a state selector
This example builds a clickable state selector that highlights the selected state and shows a tooltip with the state name.
```tsx
'use client'
import { useState } from 'react'
import { USAMap, type RegionId } from '@/components/shadcnmaps/maps/usa'
export function StatePicker() {
const [selected, setSelected] = useState(null)
return (
{selected ? `Selected: ${selected}` : 'Click a state'}