Sheet

Overlays

Side panel overlay.

Installation

npm install @radix-ui/react-dialog

Import

import { PixelSheet, PixelSheetTrigger, PixelSheetContent, PixelSheetHeader, PixelSheetTitle } from "@/components/ui/pixel-sheet"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-sheet.tsx

"use client";

import * as SheetPrimitive from "@radix-ui/react-dialog";
import { cva, type VariantProps } from "class-variance-authority";
import { X } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";

function PixelSheet({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root {...props} />;
}

function PixelSheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger {...props} />;
}

function PixelSheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close {...props} />;
}

function PixelSheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal {...props} />;
}

function PixelSheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      className={cn("fixed inset-0 z-50 bg-black/80 duration-0", className)}
      {...props}
    />
  );
}

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-[#fffacd] dark:bg-[#2a2a2a] p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] duration-0 font-[family-name:var(--font-press-start)]",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b-4 border-black",

// ... (more code below)

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.