import { useState } from 'react';
import { NSheet, NButton, Size } from '@nayan-ui/react';

const SheetExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <NButton onClick={() => setIsOpen(true)}>Show Sheet</NButton>
      <NSheet isOpen={isOpen} size={Size.SM} title="Edit Profile" onCloseSheet={() => setIsOpen(false)}>
        <div className="w-full h-full p-3">
          Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
        </div>
      </NSheet>
    </div>
  );
};

export default Sheet;

Attributes

Name	Type	Default	Details
children	React.ReactNode	Required	Content for the sheet.
trigger	React.ReactNode	Optional	Trigger element to open the sheet.
title	string	Optional	Title shown at the top of the sheet.
description	string	Optional	Description text below the title.
isOpen	boolean	Optional	Controlled open state.
isDefaultOpen	boolean	Optional	Default open state for uncontrolled usage.
onOpenChange	(isOpen: boolean) => void	Optional	Callback when open state changes.
className	string	' '	You can customise content by passing tailwind classes.
titleClassName	string	' '	You can customise title by passing tailwind classes.
descriptionClassName	string	' '	You can customise description by passing tailwind classes.

Sheet

Demo

Demo Coming Soon

Usage

Attributes

Tags