Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe settings-page layout with a vertical tab list on the left, ArrowUp and ArrowDown navigation, a heading at the top of each panel and stacking on narrow screens.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for settings and account pages with five to eight sections that each hold a form.
Do not use it for more than about ten sections (use a nested sidebar) or for sections that need their own URL.
It builds on tabs, which the CLI installs for you.
import { TabsVerticalSettings } from "@/components/tabs-vertical-settings"<TabsVerticalSettings
sections={[
{
value: "general",
label: "General",
title: "General settings",
content: <General />,
},
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
sections | { value, label, title, content }[] | - | The sections. |
defaultValue | string | first | Initial section. |
aria-label | string | Settings sections | Name of the tab list. |
aria-orientation="vertical", so assistive technology announces Up and Down as the keys.h3, so the page has a heading outline.sm breakpoint.| Key | Action |
|---|---|
| ArrowDown / ArrowUp | move between sections |
| Home / End | first / last section |
| Tab | into the panel |
The pattern ships a Testing Library test (tabs-vertical-settings.test.tsx) that covers the vertical list, Up and Down keys and per-panel headings.