Action Sheet React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Action Sheet is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ActionSheet from @/components/ui/action-sheet.

"use client"

import { MoreHorizontal, Pencil, Share, Trash2 } from "lucide-react"
import { ActionSheet, ActionSheetProvider, useActionSheet } from "@/components/ui/action-sheet"
import { Button } from "@/components/ui/button"

// declarative: pass a trigger and the actions
export function ListingMenu() {
  return (
    <ActionSheet
      title="2-bedroom apartment, Brooklyn"
      cancelLabel="Cancel"
      trigger={
        <Button variant="ghost" size="icon" radius="full" aria-label="Listing actions">
          <MoreHorizontal />
        </Button>
      }
      actions={[
        { id: "edit", label: "Edit listing", icon: <Pencil /> },
        { id: "promote", label: "Promote", tone: "brand", badge: "from $19" },
        { id: "share", label: "Share", icon: <Share /> },
        {
          id: "delete",
          label: "Delete listing",
          icon: <Trash2 />,
          tone: "danger",
          onSelect: () => new Promise((resolve) => setTimeout(resolve, 1200)),
        },
      ]}
      onAction={(id) => console.log(id)}
    />
  )
}

// imperative: useActionSheet().show(options) opens the provider's sheet and resolves with the
// chosen action's id, or null on cancel or dismiss. options are the ActionSheet props without
// open / defaultOpen / onOpenChange / trigger. a second show() replaces the open sheet (the first
// resolves null), focus returns to whatever had it, and the hook throws without a provider.
function PhotoMenu() {
  const actionSheet = useActionSheet()
  const open = async () => {
    const id = await actionSheet.show({
      actions: [
        { id: "save", label: "Save to photos" },
        { id: "delete", label: "Delete for me", tone: "danger" },
      ],
    })
    if (id) console.log(id)
  }
  return <Button onClick={open}>Photo options</Button>
}

// mount ActionSheetProvider once near the root; its defaults prop (ActionSheetOptions) sits
// under every show() call's own options, e.g. translated labels or a house variant
export function App() {
  return (
    <ActionSheetProvider defaults={{ cancelLabel: "Cancel" }}>
      <ListingMenu />
      <PhotoMenu />
    </ActionSheetProvider>
  )
}

Props

• titledefault ""
  ReactNode

  What the actions are about, e.g. the listing's name. Small and gray in the iOS card, a heading in material and the dialog, a group label in the menu. Without one the sheet still has a hidden title (labels.sheetTitle).

• messagedefault ""
  ReactNode

  A short explanation under the title; it becomes the sheet's accessible description.

• actions
  ActionSheetAction[]

  { id, label, icon?, description?, tone?: "neutral" | "brand" | "danger", disabled?, onSelect?: () => void | Promise<unknown>, keepOpen?, badge? }. A promise from onSelect keeps the sheet open with a spinner in the row until it settles; a rejection shakes the row. keepOpen runs it without closing.

• groups
  ActionSheetAction[][]

  Several groups: separate cards on iOS, separated blocks in material and on desktop. Replaces actions.

• cancelLabeldefault "Cancel"
  string

  The Cancel button's text (wins over labels.cancel).

• labels
  Partial<ActionSheetLabels>

  { cancel, sheetTitle }, merged over the English defaults ("Cancel", "Actions"; see Parts). sheetTitle is the hidden accessible title while title is empty.

• trigger
  ReactNode

  The element that opens it, rendered with asChild (a single element that takes a ref, e.g. a Button).

• variantdefault "ios"
  "ios" | "material"

  ios: floating cards with 56px centered rows and a separate Cancel card. material: one attached sheet with a handle, 48px rows with icons at the start and Cancel as the last row.

• aligndefault "auto"
  "auto" | "center" | "start"

  Row text alignment. auto centers the iOS sheet's rows and starts material and desktop rows (icons at the start).

• showIconsdefault false
  boolean

  Shows each action's icon at the row's start. When unset: off for the iOS sheet, on for material and on desktop; true forces them on, false off.

• showCanceldefault true
  boolean

  The Cancel button. Without it the sheet closes by drag, a tap on the dimmed page or Escape. The anchored menu never shows one.

• classNames
  Partial<Record<ActionSheetSlot, string>>

  Classes for the parts: overlay, content, header, title, message, group, action, icon, label, description, badge, spinner, cancel. className goes on the root (action-sheet).

• defaultOpendefault false
  boolean

  Starts open (uncontrolled). Pass open and onOpenChange instead to control it.

• open
  boolean

  Controlled open state; pair it with onOpenChange.

• onOpenChange
  (open: boolean) => void

  Called when it opens or closes. Closes are refused while an action's promise is running.

• desktopdefault "dialog"
  "dialog" | "popover" | "sheet"

  What renders at 768px and up: a compact 400px dialog, a menu anchored to the trigger, or the phone sheet. Phones always get the sheet; without a trigger popover falls back to the dialog.

• container
  HTMLElement | null

  Portal target; document.body by default.

• closeOnActiondefault true
  boolean

  Closes after an action runs (after its promise resolves). Off: the sheet stays open until Cancel or a dismiss; an action can also opt out with keepOpen.

• onAction
  (id: string) => void

  Fires for every chosen action with its id, after its onSelect (after the promise resolves).

Parts

FAQ

Used in

More React mobile components