Drawer

An overlay component that slides out from the edge of the screen to present secondary content.

Placement

Use the placement prop on the Drawer.Content to set the placement of the component. Values can include start, end, top, bottom.

Sizes

Use the drawer-content-{size} class to control the component size.

Size values can include:smmdlgxl.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-drawer-z-index: 50;
  --ex-drawer-overlay-z-index: 45;
 
  --ex-drawer-font-size-sm: var(--text-sm);
  --ex-drawer-font-size-md: var(--text-sm);
  --ex-drawer-font-size-lg: var(--text-sm);
  --ex-drawer-font-size-xl: var(--text-sm);
 
  --ex-drawer-radius-sm: 0;
  --ex-drawer-radius-md: 0;
  --ex-drawer-radius-lg: 0;
  --ex-drawer-radius-xl: 0;
 
  --ex-drawer-shadow-sm: var(--shadow-xl);
  --ex-drawer-shadow-md: var(--shadow-xl);
  --ex-drawer-shadow-lg: var(--shadow-xl);
  --ex-drawer-shadow-xl: var(--shadow-xl);
 
  --ex-drawer-size-sm: var(--container-sm);
  --ex-drawer-size-md: var(--container-md);
  --ex-drawer-size-lg: var(--container-lg);
  --ex-drawer-size-xl: var(--container-xl);
 
  --ex-drawer-gap-x-sm: calc(var(--spacing) * 2.5);
  --ex-drawer-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-drawer-gap-x-lg: calc(var(--spacing) * 2.5);
  --ex-drawer-gap-x-xl: calc(var(--spacing) * 2.5);
 
  --ex-drawer-gap-y-sm: calc(var(--spacing) * 2);
  --ex-drawer-gap-y-md: calc(var(--spacing) * 2);
  --ex-drawer-gap-y-lg: calc(var(--spacing) * 2);
  --ex-drawer-gap-y-xl: calc(var(--spacing) * 2);
 
  --ex-drawer-section-px-sm: calc(var(--spacing) * 5);
  --ex-drawer-section-px-md: calc(var(--spacing) * 5);
  --ex-drawer-section-px-lg: calc(var(--spacing) * 5);
  --ex-drawer-section-px-xl: calc(var(--spacing) * 5);
 
  --ex-drawer-section-py-sm: calc(var(--spacing) * 5);
  --ex-drawer-section-py-md: calc(var(--spacing) * 5);
  --ex-drawer-section-py-lg: calc(var(--spacing) * 5);
  --ex-drawer-section-py-xl: calc(var(--spacing) * 5);
 
  --ex-drawer-title-font-size-sm: var(--text-base);
  --ex-drawer-title-font-size-md: var(--text-base);
  --ex-drawer-title-font-size-lg: var(--text-base);
  --ex-drawer-title-font-size-xl: var(--text-base);
 
  --ex-drawer-title-font-weight: var(--font-weight-semibold);
 
  --ex-drawer-description-font-size-sm: var(--text-sm);
  --ex-drawer-description-font-size-md: var(--text-sm);
  --ex-drawer-description-font-size-lg: var(--text-sm);
  --ex-drawer-description-font-size-xl: var(--text-sm);
 
  --ex-drawer-description-font-weight: var(--font-weight-normal);
  --ex-drawer-description-opacity: var(--ex-options-opacity-muted);
}

API

Drawer

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Drawer Trigger

Element	Selector
`Drawer.Trigger`	`.ex-drawer-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Drawer Content

Element	Selector
`Drawer.Content`	`.ex-drawer-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`side`	`enum of ["start", "end", "top", "bottom"]`	`end`

Drawer Section

Element	Selector
`Drawer.Section`	`.ex-drawer-section`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Drawer Title

Element	Selector
`Drawer.Title`	`.ex-drawer-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Drawer Description

Element	Selector
`Drawer.Description`	`.ex-drawer-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`

Drawer Overlay

Element	Selector
`Drawer.Overlay`	`.ex-drawer-overlay`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Drawer Close

Element	Selector
`Drawer.Close`	`.ex-drawer-close`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`