Sheet

PreviousNext
Docs
react-ariaui

Preview

Loading preview…
components/ui/Sheet.tsx
'use client';
import {Modal, ModalOverlay, ModalOverlayProps, composeRenderProps} from 'react-aria-components';
import {Dialog} from '@/registry/react-aria/ui/Dialog';
import './Sheet.css';

export function Sheet(props: ModalOverlayProps) {
  return (
    <ModalOverlay className="sheet-overlay">
      {composeRenderProps(props.children, children => (
        <Modal className="sheet">
          <Dialog>
            {children}
          </Dialog>
        </Modal>
      ))}
    </ModalOverlay>
  );
}

Installation

npx shadcn@latest add @react-aria/css-sheet

Usage

import { CssSheet } from "@/components/ui/css-sheet"
<CssSheet />