Search
Search components and blocks
Built from the Dialog and Switch components.
Cookie Preference Dialog
Open pageA real-world composition, not a new primitive — the compact Dialog, the Switch, per-category icons, and the ActionSwapButton for the save action, which confirms 'Saved!' before the dialog closes itself.
Install
Props
NecessarySwitch checked disabled, ShieldCheckIconalways onAnalytics / Marketing / FunctionalSwitch + onCheckedChange, per-category iconper-category stateReject allresets every optional category to off, closes immediately—Save preferencesActionSwapButton — confirms "Saved!", then closes the dialogresetAfter: 1100msThe pattern every agentic AI app needs before it runs something on the user's behalf — the risk badge, the literal command it's about to execute, an 'always allow' escape hatch for repeat calls, and Deny/Approve actions with the same confirm-then-close ActionSwapButton pattern as the cookie dialog. It opens as a Center Morph Modal: the dialog unfolds from its exact center and folds back the same way.
Props
Risk badgepulsing dot + label — swap color/copy per risk levelamber ("Caution")Command<pre><code> — the literal command/args the agent wants to run—Always allow this commandSwitch — persists a standing approval for this exact calloffDenycloses without running anything—ApproveActionSwapButton — confirms "Approved", then closes the dialogresetAfter: 1100msAn email chip input for inviting teammates: type-or-paste-and-Enter to add, a per-row role Select, and a Send button whose label pluralizes with the pending count before confirming and closing — the flow every team workspace or shared AI project needs.
Props
Addvalidates the email, skips duplicates, appends with the default "Can edit" role—Per-row role SelectViewer / Editor / Admin — reuses the Select component"editor"Remove (X)drops that invite from the pending list—Send N invitesActionSwapButton — label pluralizes with the count, confirms "Sent!", then closesdisabled when emptyA settings surface with a tabbed sidebar instead of a form wall — an animated pill tracks the active tab, theme cards share a selection ring, the avatar reveals a change overlay on hover, Billing shows plan usage and invoice history as read-only actions, and an unsaved-changes bar slides in only once the draft actually differs from what's saved, with Discard reverting it exactly.
Props
Sidebar tabslayoutId pill slides between Profile / Notifications / Appearance / Billing"profile"Profile photohidden file input — hover reveals a Change overlay, shows the picked filenamenoneTheme cardslayoutId selection ring — Light / Dark / System"system"Billingplan usage bar, payment method, invoice history — read-only, not part of the dirty diff—Unsaved changes barheight/opacity spring — appears when the draft differs from the last savehiddenDiscard / Save changesDiscard reverts to the last saved snapshot; Save confirms "Saved!" via ActionSwapButton—A type-to-confirm delete dialog on the Center Morph Modal, for the actions people regret. It unfolds from its center, lists exactly what will be lost, and keeps Delete locked until the project name is typed exactly, with a check appearing in the field when it matches. Delete then runs Deleting, Deleted and closes itself, and the dialog cannot be dismissed mid-delete. Enter submits from the field. Sample project is fictional, swap in your own and wire onDelete to your API.
Props
projectNamestring—impact{ icon: ReactNode; count: number; label: string }[]files, collaborators, deploymentsonDelete() => void—classNamestring—