Back to Projects

Transition Drawer

Transition Drawer
React Framer Motion Vitest TypeScript

A smooth, animated drawer UI component built with shadcn/ui <Drawer/> component and enhanced with panel transitions. Designed for intuitive navigation and dynamic content reveal, this component is ideal for modern React apps.

View Repo → View Docs →

Features

  • Multi-level panel transitions with directional animations
  • Modular architecture with reusable components (Drawer, TransitionPanel, AnimateHeight)
  • Accessible drawer structure using Radix UI
  • Registry-compatible setup for CLI installation via shadcn@latest
  • Developer-friendly defaults with customizable variants and layout

Personal Goals

  • Develop a reusable component: Create a production-ready, headless-style component that can be easily dropped into any React project.

  • Get Familiar with Testing Workflows: Implement a robust testing suite for the TransitionPanel component using Vitest to ensure reliability and learn best practices for testing UI interactions.

Technologies Used

  • Framework & Language
    • Next.js
    • React
    • TypeScript
  • Animation
    • Framer Motion
  • Styling & UI
    • Tailwind CSS
    • Lucide React
  • Testing
    • Vitest
  • Deployment
    • Vercel
Separator