SlideOver

slideover-1779394643429.tsx

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

export default function SlideOver() {
  const [open, setOpen] = useState(false)
  const [form, setForm] = useState({ name:'', email:'', role:'developer' })
  const update = (k, v) => setForm(f => ({ ...f, [k]:v }))
  return (
    <>
      <button onClick={()=>setOpen(true)} style={{ background:'#6d28d9', color:'#fff', border:'none', borderRadius:'10px', padding:'10px 22px', cursor:'pointer', fontWeight:700, fontSize:'14px' }}>
        + Add Team Member
      </button>
      {open && (
        <div style={{ position:'fixed', inset:0, zIndex:1000, display:'flex' }}>
          <div onClick={()=>setOpen(false)} style={{ flex:1, background:'rgba(0,0,0,0.4)' }}/>
          <div style={{
            width:'380px', background:'#fff', height:'100vh', overflowY:'auto',
            boxShadow:'-10px 0 40px rgba(0,0,0,0.15)',
            animation:'slideInRight 0.3s ease',
          }}>
            <style>{'@keyframes slideInRight{from{transform:translateX(100%)}to{transform:none}}'}</style>
            <div style={{ padding:'24px', borderBottom:'1px solid #f1f5f9', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <h2 style={{ margin:0, fontSize:'17px', fontWeight:700, color:'#1e293b' }}>Add Team Member</h2>
              <button onClick={()=>setOpen(false)} style={{ background:'#f8fafc', border:'none', borderRadius:'8px', padding:'8px 12px', cursor:'pointer', color:'#64748b', fontSize:'18px' }}>×</button>
            </div>
            <div style={{ padding:'24px', display:'flex', flexDirection:'column', gap:'18px' }}>
              {[{k:'name',l:'Full Name',t:'text'},{k:'email',l:'Email',t:'email'}].map(({k,l,t})=>(
                <div key={k}>
                  <label style={{ display:'block', fontSize:'13px', fontWeight:600, color:'#374151', marginBottom:'6px' }}>{l}</label>
                  <input type={t} value={form[k]} onChange={e=>update(k,e.target.value)} placeholder={l}
                    style={{ width:'100%', padding:'10px 14px', border:'2px solid #e2e8f0', borderRadius:'10px', fontSize:'14px', outline:'none', boxSizing:'border-box' }}/>
                </div>
              ))}
              <div>
                <label style={{ display:'block', fontSize:'13px', fontWeight:600, color:'#374151', marginBottom:'6px' }}>Role</label>
                <select value={form.role} onChange={e=>update('role',e.target.value)}
                  style={{ width:'100%', padding:'10px 14px', border:'2px solid #e2e8f0', borderRadius:'10px', fontSize:'14px', outline:'none', background:'#fff' }}>
                  {['developer','designer','manager','analyst'].map(r=><option key={r} value={r}>{r.charAt(0).toUpperCase()+r.slice(1)}</option>)}
                </select>
              </div>
              <div style={{ display:'flex', gap:'10px', marginTop:'8px' }}>
                <button onClick={()=>setOpen(false)} style={{ flex:1, padding:'11px', border:'1px solid #e2e8f0', borderRadius:'10px', background:'#fff', cursor:'pointer', fontWeight:600, color:'#374151' }}>Cancel</button>
                <button onClick={()=>setOpen(false)} style={{ flex:2, padding:'11px', border:'none', borderRadius:'10px', background:'#6d28d9', color:'#fff', cursor:'pointer', fontWeight:700 }}>Add Member</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

SlideOver panel with form content for creating or editing records

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