Components

Drawer

Bottom-anchored panel powered by vaul. Slide-up mobile pattern with a drag handle. Use Sheet on desktop; Drawer on mobile-adjacent prototypes.

Updated Jul 10, 2026 by Leonardo Posada
Not sure this is the right surface?
Dialog, Sheet, Drawer and full-screen views compete for similar jobs. Read the decision guide to pick the right one for your case. Overlays & full-screen guide.

Variants

<Drawer>
  <DrawerTrigger asChild><Button>Open drawer</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit rule</DrawerTitle>
      <DrawerDescription>Bottom-anchored panel for mobile flows.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Save</Button>
      <DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Recipes

Ready-to-copy compositions covering the most common Yuno usages of this atom.

With icon in Header

For status-carrying Drawers (Info / Warning on mobile), place a Phosphor icon (weight='light') to the left of the title inside DrawerHeader. Use text-primary for informational, text-destructive for warnings. Same 'flex-row items-center gap-3' pattern as Sheet/Dialog. Do NOT tint the whole Drawer.

<DrawerContent>
  <DrawerHeader className="flex-row items-center gap-3">
    <Info weight="light" className="size-4 shrink-0 text-primary" />
    <DrawerTitle>Read-only mode</DrawerTitle>
  </DrawerHeader>
  <DrawerFooter>
    <DrawerClose asChild><Button>Got it</Button></DrawerClose>
  </DrawerFooter>
</DrawerContent>
With provider logo in Header

For provider-scoped Drawers on mobile prototypes (Connect Stripe, Configure Adyen, etc.), load the provider logo from the Yuno CDN and place it inline with the title. Sized at size-6 (24px, bigger than a Phosphor icon because logos are brand marks). CDN pattern: https://icons.prod.y.uno/{slug}_logosimbolo.png. Verified slugs: stripe / adyen / dlocal / payu / mercadopago / 2c2p / visa / mastercard / amex. Never tint the logo.

<DrawerContent>
  <DrawerHeader className="flex-row items-center gap-3">
    {/* Provider logo from Yuno CDN */}
    <img
      src="https://icons.prod.y.uno/stripe_logosimbolo.png"
      alt="Stripe"
      className="size-6 shrink-0 object-contain"
    />
    <DrawerTitle>Connect Stripe</DrawerTitle>
  </DrawerHeader>
  <DrawerFooter>
    <Button>Connect</Button>
    <DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose>
  </DrawerFooter>
</DrawerContent>

When to use

  • Mobile-adjacent prototypes.
  • Contextual actions launched from the bottom on small screens.

When not to use

  • Full desktop shell — use Sheet.
  • Critical decisions — use Dialog.

Usage

Do
  • Keep the drag handle visible.
  • Anchor the primary CTA in the footer.
Don't
  • Don't stack drawers.
  • Don't hide the handle.