Compass
Tabs. One area, several panels. Arrow keys move between tabs, in a row or down the side.
- Component
- Tabs
- Pattern
- APG Tabs
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Compass · React + TailwindFull width
| Keys | What happens |
|---|---|
| Tab | Move to the selected tab, then on to its panel. The other tabs are skipped. |
| ← → | Move between tabs in a row. Up and Down when the tabs are stacked. |
| HomeorEnd | Jump to the first or last tab. |
| EnterorSpace | Show the focused tab's panel. Only needed when activation is manual. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/tabs.json"Run it in your project root. It writes components/tabs.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).