Drawer

drawer-1779394643394.tsx

'use client'
import { useState } from 'react'

const NAV_ITEMS = ['Dashboard','Analytics','Projects','Settings','Help','Logout']

export default function Drawer({ side = 'left' }) {
  const [open, setOpen] = useState(false)
  const slideIn = { left:'translateX(-100%)', right:'translateX(100%)', top:'translateY(-100%)', bottom:'translateY(100%)' }
  const pos = { left:'left:0;top:0;bottom:0;width:280px', right:'right:0;top:0;bottom:0;width:280px', top:'top:0;left:0;right:0;height:280px', bottom:'bottom:0;left:0;right:0;height:280px' }
  const isHoriz = side==='left'||side==='right'
  return (
    <>
      <button onClick={()=>setOpen(true)} style={{ background:'#1e1e2e', color:'#fff', border:'none', borderRadius:'10px', padding:'10px 20px', cursor:'pointer', fontWeight:600, fontSize:'14px' }}>
        Open {side} Drawer
      </button>
      {open && (
        <div style={{ position:'fixed', inset:0, zIndex:1000 }}>
          <div onClick={()=>setOpen(false)} style={{ position:'absolute', inset:0, background:'rgba(0,0,0,0.4)', backdropFilter:'blur(2px)' }}/>
          <div style={{
            position:'absolute', background:'#fff',
            ...(side==='left'?{left:0,top:0,bottom:0,width:'280px'}:side==='right'?{right:0,top:0,bottom:0,width:'280px'}:side==='top'?{top:0,left:0,right:0,height:'280px'}:{bottom:0,left:0,right:0,height:'280px'}),
            boxShadow:'0 0 40px rgba(0,0,0,0.2)',
            animation:'slideIn 0.3s ease',
          }}>
            <style>{'@keyframes slideIn{from{transform:' + slideIn[side] + '}to{transform:none}}'}</style>
            <div style={{ padding:'20px', display:'flex', justifyContent:'space-between', alignItems:'center', borderBottom:'1px solid #f1f5f9' }}>
              <span style={{ fontWeight:700, fontSize:'16px', color:'#1e293b' }}>Menu</span>
              <button onClick={()=>setOpen(false)} style={{ background:'#f8fafc', border:'none', borderRadius:'8px', padding:'6px 10px', cursor:'pointer', fontSize:'18px', color:'#64748b' }}>×</button>
            </div>
            <nav style={{ padding:'12px' }}>
              {NAV_ITEMS.map(item=>(
                <div key={item} style={{ padding:'12px 14px', borderRadius:'10px', fontSize:'15px', fontWeight:500, color:'#374151', cursor:'pointer', transition:'background 0.15s' }}
                  onMouseEnter={e=>e.currentTarget.style.background='#f8fafc'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}
                >{item}</div>
              ))}
            </nav>
          </div>
        </div>
      )}
    </>
  )
}

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

Slide-in drawer panel from any edge with backdrop and animation

More from Overlays

'use client';

import React, { useState } from 'react';

interface AlertDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  i

AlertDialog

Overlays

'use client';

import { useState, useEffect } from 'react';

interface Command {
  id: number;
  title: string;
  description: string;
}

const commands: Command[] = [
  { id: 1, title: 'New File', description: 'Create a new file' },
  { id: 2, title

CommandPalette

Overlays

'use client'
import { useState, useEffect } from 'react'

const notifications = [
  { id: 1, type: '🎉', title: 'New component published', time: '2m ago', read: false },
  { id: 2, type: '💰', title: 'Pro subscription active', time: '1h ago', read: f

DrawerPanel

Overlays

'use client';

import { useState } from 'react';

interface BottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const BottomSheet = ({ isOpen, onClose }: BottomSheetProps) => {
  const [isDragging, setIsDragging] = useState(false);
  cons

BottomSheet

Overlays