Information Drawer

Component 129

About

Team profile grid that opens a full-height detail drawer per member. GSAP-tweened slide + staged bio fade-in, native scroll lock, reduced-motion fallback.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Information Drawer to your project and fits it to your theme.

Code

How Information Drawer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import InformationDrawer from "@/components/ui/information-drawer";

export default function InformationDrawerDemo() {
  return (
    <div className="h-screen w-full overflow-y-auto bg-background">
      <InformationDrawer
        title="The People Behind It"
        description="Five people, one studio. Tap a card to read who they are and what they actually work on."
        backgroundColor="#111111"
        textColor="#f5f5f5"
        sidebarWidth="55%"
        overlayOpacity={0.35}
      />
    </div>
  );
}