1. Components
  2. /
  3. Notification Center Drawer

Notification Center Drawer

An animated React notification center drawer component built with high-performance Motion physics, responsive layouts, and modern design tokens.

Installation

npx viora-ui@latest add notification-center-drawer

File Structure

notification-center-drawer.tsx
utils.ts

Usage

import { NotificationCenterDrawer } from "@/components/viora-ui/notification-center-drawer";

export default function Example() {
  return (
    <NotificationCenterDrawer />
  );
}

API Reference

NotificationCenterDrawer

PropTypeDefaultDescription
className?string-Additional CSS classes for custom styling.
children?React.ReactNode-Content or child components rendered inside.
disabled?booleanfalseDisables user interaction and animations.

Notes

  • Engineered with spring physics via Motion for high-fidelity 60fps micro-interactions.
  • Zero runtime layout shift with hardware-accelerated CSS transforms and composited layers.
  • Supports modern accessibility patterns including focus-visible rings and reduced-motion preferences.
  • Compatible with both dark and light modes using standard Tailwind CSS theme variables.

Credits

Crafted with Tailwind CSS and Motion for Viora UI.

Keep in mind

Most components in Viora UI are inspired by or recreated from innovative modern interfaces across the web. We build to experiment and push design craft forward.