A settings sidebar with a back link, grouped items and a search field that filters items live and highlights the match.
Security
Keep your account safe.
npx shadcn@latest add https://hyperblur.dev/r/sidebar-settings-nav.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-settings-nav.tsx.
import { SidebarSettingsNav } from "@/components/hyperblur/sidebar-settings-nav"
<SidebarSettingsNav defaultActive="security" backHref="/dashboard" />| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { id: string; title: string; items: { id: string; label: string; icon?: SidebarSettingsIconName; keywords?: string[]; badge?: string }[] }[] | Account and Workspace groups | Groups and items. Search matches the label and any keywords. Groups with no match disappear. |
| active | string | Controlled active item id. Pair with onChange. | |
| defaultActive | string | first item | Initially active id when uncontrolled. |
| onChange | (id: string) => void | Called when an item is chosen. | |
| query | string | Controlled search text. Pair with onQueryChange. | |
| defaultQuery | string | "" | Initial search text when uncontrolled. |
| onQueryChange | (query: string) => void | Called as the search text changes. | |
| onBack | () => void | Called when the back link is pressed. | |
| backHref | string | Renders the back link as an anchor with this href instead of a button. | |
| backLabel | string | "Back to app" | Text of the back link. |
| title | string | "Settings" | Heading and accessible name of the sidebar. An empty string hides the heading. |
| placeholder | string | "Search settings" | Placeholder and label of the search field. |
| emptyText | string | "Nothing matches your search." | Hint shown under the no results heading. |
| accent | string | "#2f7bff" | Accent for focus rings, icons and the match highlight. |