Settings Dialog (Sidebar In A Dialog)

block

A settings dialog: the xl Dialog as a canvas, a non-collapsing Sidebar of sections down its left edge, and a scrolling panel of controls — switches, selects, and an input group. Below the sm breakpoint a Select takes over navigation.

pnpm dlx shadcn@latest add "https://www.fluidfunctionalism.com/r/dialog-sidebar.json"

Sign In

Settings Dialog (Sidebar In A Dialog)

block

A settings dialog: the xl Dialog as a canvas, a non-collapsing Sidebar of sections down its left edge, and a scrolling panel of controls — switches, selects, and an input group. Below the sm breakpoint a Select takes over navigation.

pnpm dlx shadcn@latest add "https://www.fluidfunctionalism.com/r/dialog-sidebar.json"

components/dialog-sidebar/settings-dialog.tsx