Tessina UI
Tessina UI
GitHubIntroduction
InstallationUsageTheming
Components
ButtonIconButtonLinkSpinnerBadgeAvatarStatusChipShortcutSkeletonSurfaceProgressMeterRating
LabelFieldFieldsetCheckboxRadioSwitchSliderSelectComboboxSearchTextareaNumberFieldDate PickerTime PickerOTP InputFile UploadCalendar
AlertBannerToastTooltip
TabsAccordionCollapsibleBreadcrumbPaginationStepperSegmentedControlButtonGroupToggleButtonToggleGroupToolbarNavigation MenuMenubarBottom NavSidebar
Split ButtonFABDropdown MenuContextMenuCommandPopoverHoverCard
ContainerStackFlexGridAspectRatioSpacerCardCarouselDividerScroll Area
Table
ChatBubblePromptInputCodeBlock
ModalAlertDialogDrawerAction SheetTop Header MobileTop Header DesktopEmptyStateForm
Contributing
ComponentsSurfaces

Action Sheet

A mobile-first bottom sheet presenting a set of contextual actions. Built on Base UI Dialog. Compound component pattern with Header, Group, Item, Separator, and Cancel. Three sizes. Five corner-rounding options. Destructive intent, loading state, icon slots. LTR and RTL support.

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  ActionSheet,
  ActionSheetTrigger,
  ActionSheetContent,
  ActionSheetHeader,
  ActionSheetTitle,
  ActionSheetDescription,
  ActionSheetGroup,
  ActionSheetSeparator,
  ActionSheetItem,
  ActionSheetCancel,
} from "@tessinaui/ui";
<ActionSheet>
  <ActionSheetTrigger className="...">Open</ActionSheetTrigger>

  <ActionSheetContent>
    <ActionSheetHeader>
      <ActionSheetTitle>Actions</ActionSheetTitle>
      <ActionSheetDescription>Choose an action below.</ActionSheetDescription>
    </ActionSheetHeader>

    <ActionSheetGroup>
      <ActionSheetItem icon={<Share2 />}>Share</ActionSheetItem>
      <ActionSheetItem icon={<Copy />}>Copy link</ActionSheetItem>
      <ActionSheetSeparator />
      <ActionSheetItem intent="destructive" icon={<Trash2 />}>Delete</ActionSheetItem>
    </ActionSheetGroup>

    <ActionSheetCancel />
  </ActionSheetContent>
</ActionSheet>

Showcase

API Reference

ActionSheet

Root component. Provides context and wraps Base UI Dialog.Root.

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Max-height of the sheet panel (50dvh / 70dvh / 90dvh)
dir"ltr" | "rtl""ltr"Text direction applied to the panel and all children
openboolean—Controlled open state
defaultOpenboolean—Uncontrolled initial open state
onOpenChange(open: boolean, event: Event) => void—Called when the open state changes
dismissiblebooleantrueWhether tapping the scrim or pressing Escape closes the sheet
modalbooleantrueWhether the dialog uses modal behavior (focus trap, scroll lock)

ActionSheetContent

Renders the panel anchored to the bottom of the viewport inside a portal. Includes the backdrop scrim.

PropTypeDefaultDescription
rounded"none" | "sm" | "md" | "lg" | "full""md"Top corner rounding of the panel
showHandlebooleantrueWhether to show the drag handle pill
size"sm" | "md" | "lg"—Overrides the size from context

ActionSheetItem

Individual action button row.

PropTypeDefaultDescription
intent"default" | "destructive""default"Visual intent — destructive renders in error color
size"sm" | "md" | "lg"—Overrides the size from context
iconReact.ReactNode—Optional leading icon
loadingbooleanfalseShows a loading spinner and disables the button
closeOnSelectbooleantrueClose the sheet when the action is triggered
disabledboolean—Disables the item

ActionSheetCancel

Sticky cancel action at the bottom of the sheet, separated by a top border.

PropTypeDefaultDescription
size"sm" | "md" | "lg"—Overrides the size from context
childrenReact.ReactNode"Cancel"Button label

ActionSheetHeader

Optional header section with ActionSheetTitle and ActionSheetDescription. Centered text, separated from the group by a bottom border.

ActionSheetGroup

Scrollable container for ActionSheetItem and ActionSheetSeparator rows. Grows to fill available height.

ActionSheetSeparator

Horizontal rule styled with border-border.

ActionSheetTrigger

Re-export of Dialog.Trigger. Renders a <button> that opens the sheet.

ActionSheetClose

Re-export of Dialog.Close. Renders a <button> that closes the sheet.

Behaviour

  • Slides up from the bottom of the viewport with a spring animation
  • Blocks background interaction via modal focus trap and scroll lock
  • Closes on: scrim tap, Escape key, ActionSheetCancel, any ActionSheetItem with closeOnSelect (default)
  • Sheet height is constrained by the size prop and scrolls internally when content overflows
  • ActionSheetCancel is always sticky at the bottom outside the scroll area

Drawer

An accessible slide-in panel built on Base UI Dialog. Compound component pattern with Header, Body, Footer, Title, and Description. Four sides (right, left, top, bottom). Five sizes. Five corner-rounding options. Auto-stacking footer for sheets. LTR and RTL support.

Top Header Mobile

Mobile-first top app bar with leading/trailing action slots, centered or start-aligned title, five variants, five sizes, six rounded options, three layout modes (small/medium/large), collapsible state, and full RTL support.

On this page

PlaygroundInstallationUsageShowcaseAPI ReferenceActionSheetActionSheetContentActionSheetItemActionSheetCancelActionSheetHeaderActionSheetGroupActionSheetSeparatorActionSheetTriggerActionSheetCloseBehaviour