Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTabs whose active tab lives in location.hash, so links open the right tab, reload keeps it and Back steps through tabs, with the first render always on the first tab.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this for settings and profile pages that people link to or reload: #billing should open Billing.
Do not use it for tabs that are really different pages (use routes), or on pages that already use the hash for something else.
It builds on tabs, which the CLI installs for you.
import { TabsUrlHash } from "@/components/tabs-url-hash"<TabsUrlHash
tabs={[{ value: "billing", label: "Billing", content: <Billing /> }]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
tabs | { value, label, content }[] | - | The tabs; value is what appears after the #. |
hashchange keeps the tabs in step with Back and Forward.id (the panel keeps its own generated id for aria-controls), so the browser can also scroll to it.| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | change tab and the hash |
The pattern ships a Testing Library test (tabs-url-hash.test.tsx) that covers the default, a hash on load, an unknown hash, writing the hash and following hashchange.