1 GitHub star = 1 new component.

Star the repo
Overlaysdrawerpaneloverlay

Slide-over (Right)

Right-hand slide-over drawer panel with smooth backdrop fade.

Filters

ร—
Category
Price Range
Rating

Usage

Copy and paste this code into your React component:

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>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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; }

Quick Info

Category
Overlays
Filename
SideDrawerRight.tsx
Dependencies
None โ€” pure React + CSS
Tags
drawerpaneloverlay