Settings Dialog (Sidebar in a Dialog)

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.

Library

Fluid Functionalism

Framework

React

Type

block

License

MIT

Install

npx shadcn@latest add @fluid/dialog-sidebar

Files

• registry/blocks/dialog-sidebar/settings-dialog.tsx
• registry/default/lib/utils.ts
• registry/default/lib/font-weight.ts
• registry/default/lib/icon-context.tsx
• registry/radix/dialog.tsx
• registry/radix/sidebar.tsx
• registry/default/sidebar-core.tsx
• registry/default/sidebar-menu.tsx

Source

https://github.com/mickadesign/fluid-functionalism

Categories

• Modal Components
• React Modal Components
• Tailwind CSS Modal Components
• Animated Modal Components
• shadcn/ui Modal Components
• Navigation Components
• React Navigation Components
• Tailwind CSS Navigation Components
• Animated Navigation Components
• shadcn/ui Navigation Components
• Overlay Components
• React Overlay Components

More from Fluid Functionalism

• Dialog
• Dialog (Base UI)
• Sidebar
• App Sidebar
• Sidebar
• Accordion
• Accordion (Base UI)
• Ask User Questions
• Badge
• Banner
• Breadcrumb
• Button