1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capasdrawerpaneloverlay

Slide-over (Right)

Panel deslizante desde el lateral derecho para filtros, carritos y opciones avanzadas.

Filters

×
Category
Price Range
Rating

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { SideDrawerRight } from 'react-component-kit-ui/overlays';

<SideDrawerRight>
  <div className="p-6">
    <h4 className="mb-4">Quick Settings</h4>
    <div className="stack-v gap-2">
      <label>Notifications</label>
      <label>Privacy</label>
      <label>Security</label>
    </div>
  </div>
</SideDrawerRight>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/SideDrawerRight.tsx + SideDrawerRight.css:

SideDrawerRight.tsx
'use client';

import type { ReactNode } from 'react';
import './SideDrawerRight.css';

/** SideDrawerRight — ported from astro-component-kit. */
export interface SideDrawerRightProps {
  children?: ReactNode;
}

export function SideDrawerRight({ children }: SideDrawerRightProps) {
  return (
    <>
      <div className="drawer-wrap" data-rk-e9a0cd="">
        <div className="drawer-overlay" data-rk-e9a0cd=""></div>
        <div className="drawer-panel right" data-rk-e9a0cd="">
          <div className="drawer-header" data-rk-e9a0cd=""><h3 data-rk-e9a0cd="">Filters</h3><span data-rk-e9a0cd="">×</span></div>
          <div className="drawer-body" data-rk-e9a0cd="">{children}</div>
        </div>
      </div>
    </>
  );
}

export default SideDrawerRight;
SideDrawerRight.css
/* SideDrawerRight — ported from astro-component-kit (overlays/SideDrawerRight.astro) */

.drawer-wrap:where([data-rk-e9a0cd]) { position: fixed; inset: 0; z-index: 2000; }
.drawer-overlay:where([data-rk-e9a0cd]) { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.drawer-panel:where([data-rk-e9a0cd]) { position: absolute; top: 0; bottom: 0; width: 350px; background: #080b14; border-left: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.drawer-panel.right:where([data-rk-e9a0cd]) { right: 0; transform: translateX(0); }
.drawer-header:where([data-rk-e9a0cd]) { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; color: #fff; }

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
SideDrawerRight.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
drawerpaneloverlay