Sheet

Name: Nayan UI
Author: Nayan UI

A Sheet component is a UI element that presents content in a sliding panel, often overlaying the main application interface. It is typically used for displaying additional information, forms, or actions without navigating away from the current view. Sheets can be swiped or tapped to expand or collapse, providing a clean and efficient way to manage user interactions and maintain focus on the main content.

Demo

Usage

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
isOpen	boolean	Required	Controls whether the sheet is open.
title	string	Optional	Title for the sheet.
size	SheetSize	Optional	Size of the sheet.
className	string	' '	You can customise by passing tailwind classes.
headerClassName	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
contentClassName	string	' '	You can customise by passing tailwind classes.
children	React.ReactNode	Required	Content for the sheet.
onCloseSheet	() => void	Optional	Callback when sheet is closed.
header	React.ReactNode	Optional	Custom header content.
footer	React.ReactNode	Optional	Optional footer content.
aria-label	string	Optional	ARIA label for accessibility.
aria-labelledby	string	Optional	ARIA labelledby for accessibility.
role	string	Optional	ARIA role for accessibility.

Sheet

Demo

Usage

Attributes

Tags