Are the ai2 Content drawers free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Content drawers

Five bottom drawers that differ by their inner content layout: menu, form, list, detail and grid. Each is self-contained (no radix or vaul), sized, token-driven, and closes on backdrop click, Escape or the grab handle.

DrawerContent

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/drawer-content

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/drawer-content.tsx

"use client"

import * as React from "react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"
import {
  BarChart3,
  Bell,
  Calendar,
  Check,
  ChevronRight,
  Copy,
  Hash,
  House,
  Link2,
  Mail,
  MapPin,
  MessageCircle,
  Search,
  Settings,
  Share2,
  Tag,
  User,
  Users,
  X,
} from "lucide-react"

import { cn } from "@/lib/utils"

/* Content-themed drawer family: 5 drawers opening from the bottom. They all carry
   the same self-contained shell (NO radix/vaul/portal), the same slide-up from the
   bottom edge and the same token colors; the DIFFERENCE IS THE INNER CONTENT LAYOUT
   of the panel - each export brings a real usage scenario to life with tokenized
   placeholder content (bars/icons/cards). The shell: a fixed inset-0 backdrop + a
   fixed panel pinned to the bottom edge (z-50), sliding up from below. Internal
   state (defaultOpen) or controlled (open + onOpenChange). A backdrop click /
   Escape / the close button / the handle closes it. The panel takes focus on open.
   The slide runs through AnimatePresence; only a fade under reduced-motion. Color
   comes ONLY from tokens, with transparency via color-mix. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

/* size = panel yuksekligi (alt kenardan). */
const panelHeight: Record<StyledSize, string> = {
  sm: "h-[35vh]",
  md: "h-[50vh]",
  lg: "h-[68vh]",
  xl: "h-[82vh]",
}

interface DrawerProps {
  size?: StyledSize
  trigger?: React.ReactNode
  title?: React.ReactNode
  className?: string
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (o: boolean) => void
}

/* Controlled/uncontrolled acik durum yonetimi. */
function useControllableOpen(
  open: boolean | undefined,
  defaultOpen: boolean | undefined,
  onOpenChange: ((o: boolean) => void) | undefined
) {
  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false)
  const isControlled = open !== undefined
  const value = isControlled ? open : uncontrolled
  const setValue = React.useCallback(
    (next: boolean) => {
      if (!isControlled) setUncontrolled(next)
      onOpenChange?.(next)
    },
    [isControlled, onOpenChange]
  )
  return [value, setValue] as const
}

/* An icon box that keeps both lucide <svg> and remixicon <i> children aligned. */
const iconBox =
  "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

/* Shared shell: trigger plus an AnimatePresence backdrop plus a bottom-edge panel. body draws the panel's inner content per variant; defaultTitle is the variant's title. The Essentials slide and close mechanism (outwards past the bottom edge) is preserved. */
function DrawerContentShell({
  props,
  defaultTitle,
  body,
}: {
  props: DrawerProps
  defaultTitle: React.ReactNode
  body: React.ReactNode
}) {
  const { size = "md", trigger, title, className, open, defaultOpen, onOpenChange } = props
  const reduce = useReducedMotion()
  const [isOpen, setOpen] = useControllableOpen(open, defaultOpen, onOpenChange)
  const panelRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    if (!isOpen) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false)
    }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [isOpen, setOpen])

  // Bottom edge: the panel slides down past its own bottom edge. This value keeps
  // the mechanism intact for vertical edges so the top edge derives the same way.
  const enter = { y: "100%" }
  const heading = title ?? defaultTitle

  return (
    <div data-slot="styled-drawer" className="inline-flex">
      {/* The ARIA state lives on the REAL trigger. There used to be a
          span role="button" tabIndex={-1} wrapper, which produced TWO buttons
          in the AX tree: one carrying the state (not focusable) and one that
          took focus (stateless). A screen-reader user never heard "has dialog"
          or "expanded" - measured with the CDP AX tree. */}
      {React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(trigger) ? (
        React.cloneElement(trigger, {
          "aria-haspopup": "dialog",
          "aria-expanded": isOpen,
          onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
            trigger.props.onClick?.(event)
            setOpen(true)
          },
        })
      ) : (
        <button
          type="button"
          aria-haspopup="dialog"
          aria-expanded={isOpen}
          onClick={() => setOpen(true)}
          className={cn(
              "inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none whitespace-nowrap transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50",
              iconBox
            )}
        >
          {trigger ?? "Open"}
        </button>
      )}

      <AnimatePresence>
        {isOpen ? (
          <div className="fixed inset-0 z-50">
            <motion.div
              data-slot="styled-drawer-backdrop"
              onClick={() => setOpen(false)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: reduce ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
              className="absolute inset-0 bg-[color-mix(in_oklab,var(--color-foreground)_50%,transparent)]"
            />
            <motion.div
              ref={panelRef}
              data-slot="styled-drawer-panel"
              role="dialog"
              aria-modal="true"
              tabIndex={-1}
              onAnimationComplete={() => panelRef.current?.focus()}
              initial={reduce ? { opacity: 0 } : enter}
              animate={reduce ? { opacity: 1 } : { y: 0 }}
              exit={reduce ? { opacity: 0 } : enter}
              transition={
                reduce ? { duration: 0 } : { type: "spring", stiffness: 320, damping: 34 }
              }
              className={cn(
                "fixed inset-x-0 bottom-0 flex flex-col rounded-t-2xl border-t border-border bg-card text-card-foreground shadow-lg outline-none",
                panelHeight[size],
                className
              )}
            >
              {/* Tutamac (grab handle) - tiklayinca kapatir. */}
              <button
                type="button"
                aria-label="Close drawer"
                onClick={() => setOpen(false)}
                className="flex w-full shrink-0 cursor-pointer items-center justify-center py-3 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-inset"
              >
                <span className="h-1.5 w-12 rounded-full bg-[color-mix(in_oklab,var(--color-foreground)_25%,transparent)]" />
              </button>

              <div className="flex items-start justify-between gap-4 border-b border-border px-5 pb-4">
                <h2
                  data-slot="styled-drawer-title"
                  className="text-base font-semibold text-foreground"
                >
                  {heading}
                </h2>
                <button
                  type="button"
                  onClick={() => setOpen(false)}
                  aria-label="Close"
                  className={cn(
                    "relative -m-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-surface-3 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:-inset-2",
                    iconBox
                  )}
                >
                  <X />
                </button>
              </div>

              <div className="min-h-0 flex-1 overflow-auto p-5 text-sm text-muted-foreground">
                {body}
              </div>
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* A token placeholder bar: a token-colored bar instead of real text. */
function Bar({ className }: { className?: string }) {
  return <span className={cn("block h-2 rounded-full bg-muted", className)} aria-hidden />
}

/* MenuDrawer: a horizontal quick-action strip at the top (icon tiles) with a vertical nav menu below - each row an icon plus a label bar; the first item is active (primary soft). */
export function MenuDrawer(props: DrawerProps) {
  const quick = [Search, Bell, Share2, Settings]
  const items = [
    { Icon: House, w: "w-16", active: true },
    { Icon: Users, w: "w-24", active: false },
    { Icon: Calendar, w: "w-20", active: false },
    { Icon: BarChart3, w: "w-28", active: false },
    { Icon: Settings, w: "w-20", active: false },
  ]
  return (
    <DrawerContentShell
      props={props}
      defaultTitle="Menu"
      body={
        <div className="flex flex-col gap-4">
          {/* Yatay ikon seridi. */}
          <div className={cn("flex items-center gap-3", iconBox)}>
            {quick.map((Icon, i) => (
              <span
                key={i}
                className="flex size-12 flex-1 items-center justify-center rounded-xl border border-border bg-muted text-foreground"
              >
                <Icon />
              </span>
            ))}
          </div>
          {/* Dikey nav menusu. */}
          <nav className="flex flex-col gap-1">
            {items.map(({ Icon, w, active }, i) => (
              <span
                key={i}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-2.5",
                  iconBox,
                  active
                    ? "bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-primary"
                    : "text-foreground hover:bg-muted"
                )}
              >
                <Icon />
                <Bar
                  className={cn(
                    w,
                    active &&
                      "bg-[color-mix(in_oklab,var(--color-primary)_45%,transparent)]"
                  )}
                />
              </span>
            ))}
          </nav>
        </div>
      }
    />
  )
}

/* FormDrawer: token label + input placeholder satirlari + submit. Girisler bos
   bordered kutu (gorunum yeterli). */
export function FormDrawer(props: DrawerProps) {
  const fields = [
    { label: "w-16", input: "h-9" },
    { label: "w-20", input: "h-9" },
    { label: "w-14", input: "h-20" },
  ]
  return (
    <DrawerContentShell
      props={props}
      defaultTitle="New item"
      body={
        <form className="flex flex-col gap-5" onSubmit={(e) => e.preventDefault()}>
          {fields.map((f, i) => (
            <div key={i} className="flex flex-col gap-2">
              <Bar className={cn("h-2", f.label)} />
              <div className={cn("rounded-lg border border-border bg-background", f.input)} />
            </div>
          ))}
          <button
            type="submit"
            className={cn(
              "mt-1 inline-flex h-9 w-full select-none items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground outline-none transition-[color,background-color] duration-(--motion-fast) ease-(--motion-ease) hover:bg-[color-mix(in_oklab,var(--color-primary)_88%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50",
              iconBox
            )}
          >
            <Check />
            Submit
          </button>
        </form>
      }
    />
  )
}

/* ListDrawer: token liste satirlari - avatar daire + iki metin cubugu + chevron. */
export function ListDrawer(props: DrawerProps) {
  const rows = [
    { name: "w-24", sub: "w-32" },
    { name: "w-20", sub: "w-28" },
    { name: "w-28", sub: "w-24" },
    { name: "w-16", sub: "w-36" },
    { name: "w-24", sub: "w-20" },
  ]
  return (
    <DrawerContentShell
      props={props}
      defaultTitle="Members"
      body={
        <ul className="flex flex-col">
          {rows.map((r, i) => (
            <li
              key={i}
              className={cn(
                "flex items-center gap-3 border-b border-border py-3 last:border-0",
                iconBox
              )}
            >
              <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
                <User />
              </span>
              <div className="flex flex-1 flex-col gap-1.5">
                <Bar className={cn("h-2", r.name)} />
                <Bar
                  className={cn(
                    "h-1.5 bg-[color-mix(in_oklab,var(--color-muted-foreground)_25%,transparent)]",
                    r.sub
                  )}
                />
              </div>
              <ChevronRight className="text-muted-foreground" />
            </li>
          ))}
        </ul>
      }
    />
  )
}

/* DetailDrawer: a header block at the top (avatar plus name) with key/value detail fields below - each row an icon label plus a value bar. */
export function DetailDrawer(props: DrawerProps) {
  const rows = [
    { Icon: Tag, value: "w-24" },
    { Icon: Calendar, value: "w-20" },
    { Icon: User, value: "w-28" },
    { Icon: MapPin, value: "w-16" },
    { Icon: Hash, value: "w-24" },
  ]
  return (
    <DrawerContentShell
      props={props}
      defaultTitle="Overview"
      body={
        <div className="flex flex-col gap-5">
          <div className="flex items-center gap-3">
            <span className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground [&_svg]:size-5">
              <User />
            </span>
            <div className="flex flex-col gap-2">
              <Bar className="h-2.5 w-32" />
              <Bar className="h-2 w-20 bg-[color-mix(in_oklab,var(--color-muted-foreground)_25%,transparent)]" />
            </div>
          </div>
          <div className="flex flex-col divide-y divide-border rounded-lg border border-border">
            {rows.map(({ Icon, value }, i) => (
              <div
                key={i}
                className={cn("flex items-center justify-between gap-4 px-3 py-2.5", iconBox)}
              >
                <span className="flex items-center gap-2 text-muted-foreground">
                  <Icon />
                  <Bar className="h-2 w-14" />
                </span>
                <Bar className={cn("h-2", value)} />
              </div>
            ))}
          </div>
        </div>
      }
    />
  )
}

/* GridDrawer: a token card grid - icon plus label tiles like share options, with a copyable link row at the top. */
export function GridDrawer(props: DrawerProps) {
  const options = [
    { Icon: Copy, w: "w-10" },
    { Icon: Link2, w: "w-12" },
    { Icon: Mail, w: "w-8" },
    { Icon: MessageCircle, w: "w-12" },
    { Icon: Users, w: "w-10" },
    { Icon: Share2, w: "w-8" },
  ]
  return (
    <DrawerContentShell
      props={props}
      defaultTitle="Share"
      body={
        <div className="flex flex-col gap-4">
          {/* Kopyalanabilir baglanti satiri. */}
          <div className={cn("flex items-center gap-3 rounded-lg border border-border bg-muted px-3 py-2.5", iconBox)}>
            <Link2 className="text-muted-foreground" />
            <Bar className="h-2 flex-1" />
            <span className="flex items-center gap-1.5 text-xs font-medium text-primary [&_svg]:size-3.5">
              <Copy />
              Copy
            </span>
          </div>
          {/* Grid of share options. */}
          <div className="grid grid-cols-3 gap-3">
            {options.map(({ Icon, w }, i) => (
              <span
                key={i}
                className={cn(
                  "flex flex-col items-center gap-2 rounded-xl border border-border bg-background p-4 text-foreground transition-colors hover:bg-muted",
                  iconBox
                )}
              >
                <span className="flex size-10 items-center justify-center rounded-full bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)] text-primary">
                  <Icon />
                </span>
                <Bar className={cn("h-1.5", w)} />
              </span>
            ))}
          </div>
        </div>
      }
    />
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

A horizontal quick-action strip above a vertical navigation menu.

Form

Stacked label and input rows with a submit button.

List

Avatar and text rows for a members or results list.

Detail

A header block above a key and value detail grid.

Grid

A copyable link row above a grid of share option tiles.

ai2 Content drawers: 5 styled variations on the token system

The ai2 Content drawers are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around bottom drawers that differ by their inner content layout. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion slides the drawer up from the bottom edge; the backdrop fades. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the slide is skipped and the drawer fades or shows instantly.

What is in the ai2 Content drawers?

5 exports in one file: Menu, Form, List, Detail and Grid. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion slides the drawer up from the bottom edge; the backdrop fades.
Reduced-motion aware: Under prefers-reduced-motion, the slide is skipped and the drawer fades or shows instantly.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Content drawers sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.