# Modal — Bottom Sheet

> An accessible mobile-app bottom sheet that springs up from the bottom edge with a grab handle, an amount summary, and list-rows instead of a paragraph — a fintech payment-confirmation sheet themed by the Neovault design system (inspired by Revolut), with a full-width pill CTA and full keyboard.

- Category: Modal
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: dialog, animation, overlay
- Page: https://builder.atheros.ai/components/modal-bottom-sheet
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_modal_bottom_sheet/preview-2c9c3440e87e.webp

## Features

- Centered hero with a violet chip eyebrow, display heading, subline, and a pill call-to-action
- One accessible dialog that reveals with the signature Bottom Sheet animation
- The box slides up from below the fold and overshoots with a spring, with a grab handle at the top
- Mobile-app sheet archetype — grab handle, amount summary, payee + fee + arrival list-rows, and full-width pill CTAs
- Sheet content — head, amount, rows, actions — staggers in with small translateY and opacity delays
- The grab handle pulses with a subtle scaleX bounce as the sheet settles
- Neobank violet accent and near-black scrim carry the Revolut identity
- Closes via the × button, Cancel, Send, overlay click, or the Escape key
- Focus moves into the open dialog box and returns to the trigger on close, with a focus trap on Tab
- Large top-corner radius gives the box its bottom-sheet lip; responsive down to small screens
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Dialog semantics** — The dialog box carries `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` pointing at its title
- **Hidden state** — The closed dialog is `aria-hidden="true"` and `inert`; JS flips both when opening
- **Focus management** — The dialog box (`tabindex="-1"`) receives focus on open; focus returns to the trigger on close
- **Focus trap** — Tab and Shift+Tab cycle within the dialog while it is open
- **Trigger semantics** — Native `<button>` trigger with `aria-haspopup="dialog"` and an explicit `aria-label`
- **Button labels** — Every button — close, Send, Cancel — has an explicit `aria-label`; the grab handle is decorative and `aria-hidden`
- **Escape hatch** — Escape key, overlay click, and three buttons all dismiss the dialog
- **Focus indicators** — Global `:focus-visible` outline using the `--ring` token
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all transitions

## Keyboard shortcuts

- `Escape` — Close the open dialog
- `Enter` — Activate the focused trigger or button
- `Space` — Activate the focused trigger or button
- `Tab` — Move focus between the dialog buttons

## Common questions

**Which frameworks is Modal — Bottom Sheet available in?**

Modal — Bottom Sheet ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Modal — Bottom Sheet free?**

Yes. Modal — Bottom Sheet is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Modal — Bottom Sheet support dark mode?**

Yes. Modal — Bottom Sheet ships light and dark themes, both drawn from the Orchard design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Modal — Bottom Sheet live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/modal-bottom-sheet

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt