Scalar UI
Marketing UIApp UIAIChartsBackgrounds
Sign inGet started
Scalar UI
Scalar UI© 2026 Scalar Limited

React · Tailwind CSS · Motion

Browse

HomeAll components 213

Collections

Marketing UI 107App UI 94AI 16Charts 45Backgrounds 2Text 43

More

Text 43

Getting started

Installation

Primitives

AccordionsAlert DialogsAlerts2Aspect RatiosAvatars2BadgesBreadcrumbsButton GroupsButtons2CalendarsCheckboxesCollapsiblesComboboxesCommand MenusContext MenusDate PickersDialogsDropdown MenusEmpty StatesFields2FormsHover CardsInput OTPInputs3KbdMenubarsNavigation MenusPaginationPassword InputsPopoversProgress2Radio GroupsResizableScroll AreasSelectsSeparatorsSheetsSkeletonsSlidersSpinnersSwitchesTablesTabsToastsToggles2ToolbarsTooltipsSortablesStatus DotsTree ViewsFile UploadsSteppers

Layouts

SidebarsNavbarsApp Shells

Blocks

SchedulersBoards3CanvasesWorkflowsAI apps4Developer tools3AuthenticationOnboardingSettingsPricing & upgrades2Help & feedback4System pages7Admin console

Other

Cards

Resources

Docs & installScalar Design
App UIPrimitives

Dialogs

Accessible Radix modal with focus trapping and scroll lock, a spring-in panel, blurred overlay and composable header, footer and close parts.

PreviousDate PickersNextDropdown Menus

On this page

Header and FooterGray FooterIcon HeaderIntegration HeaderImage HeaderImage FooterFormWithout Close ButtonScrollable Content

Dialog

radix-ui · motion · lucide-react

Header and Footer

Bordered header and footer bars around the body, with a status line beside the actions.

Gray Footer

Actions sit on a light gray footer that separates them from the content.

Icon Header

A raised white icon tile above a centered title, for confirmations and security prompts.

Integration Header

Two raised app icons joined by a link, for connect and permission flows.

Image Header

A tall full-bleed photo across the top of the panel.

Image Footer

An announcement: text on top, an image along the bottom and no buttons, only the close.

Form

A dialog that edits a few fields, with Cancel and Save.

Without Close Button

Pass showClose={false} for a single-action acknowledgement.

Scrollable Content

Cap the body's height so long content scrolls inside the panel.