Sheet

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

Rendered live, with the same build of the library you install.

Usage

Source

Sheet.tsx

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

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

  return (
    <div>
      <NSheet isOpen={isOpen} onClose={() => setIsOpen(false)} size={SheetSize.SM} title="Settings">
        <p className="text-foreground p-3">Sheet content goes here.</p>
      </NSheet>
      <NButton onClick={() => setIsOpen(true)}>Open Sheet</NButton>
    </div>
  );
};

export default Sheet;

Attributes

15 props

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.
onClose	() => void	Optional	Callback when the sheet is closed.

Sheet

Demo

Usage

Attributes

Tags