Skip to main content

Subcomponents API

Temper uses standard, unstyled primitives powered by Radix UI's Dialog engine.

Drawer.Trigger​

The button or clickable element that opens the drawer.

  • Props: Standard HTML button props + Radix Dialog Trigger props (asChild).
  • Example: 
    <Drawer.Trigger asChild>
      <button className="btn">Custom Trigger</button>
    </Drawer.Trigger>

Drawer.Portal​

Portals children outside the local DOM hierarchy into document.body or a specified container to avoid overflow clipping.

  • Props:
    • container?: HTMLElement | null: Target container element for portal. Defaults to document.body.
    • children: React nodes (<Drawer.Overlay />, <Drawer.Content />).

Drawer.Overlay​

The backdrop element displayed behind the drawer.

  • Props: Standard HTML div props.
  • Example: 
    <Drawer.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50" />

Drawer.Title​

Accessible title for screen readers. Required for WCAG / ARIA Dialog compliance.

  • Props: Standard HTML h2 props + Radix Dialog Title props.
  • Example: 
    <Drawer.Title className="text-lg font-semibold text-gray-900">
      Edit Profile
    </Drawer.Title>

Drawer.Description​

Accessible description element for screen readers.

  • Props: Standard HTML p props + Radix Dialog Description props.
  • Example: 
    <Drawer.Description className="text-sm text-gray-500">
      Update your personal details below.
    </Drawer.Description>

Drawer.Close​

Button component that closes the drawer on click.

  • Props: Standard HTML button props + Radix Dialog Close props (asChild).
  • Example: 
    <Drawer.Close className="px-4 py-2 bg-gray-200 rounded-md">
      Cancel
    </Drawer.Close>