Components
Component Features 3D Perspective Effects:
Real-time perspective transformation based on mouse position Subtle rotation and scaling on hover for a tactile feel Advanced Visual Design:
Animated background gradients with glass morphism Multiple layers creating depth and dimension Beautiful color schemes for both light and dark modes Interactive Data Visualization:
Animated bar chart with spring physics Tooltip values on hover Growth indicators with directional icons State Management:
Loading state with elegant animated spinner Error state with retry functionality Smooth transitions between states Responsive and Accessible:
Fully responsive design that works on all screen sizes Proper contrast ratios for accessibility Interactive elements with appropriate focus states To use this component, you'll need to install:
React Tailwind CSS Framer Motion (npm install framer-motion) This component demonstrates modern UI design principles with attention to micro-interactions, performance, and visual depth that creates a premium user experience.
npx @21st-dev/cli add dhileepkumargm/interactive-3d-analytics-dashboard-cardLoading preview...
import AnalyticsDashboardCard from "@/components/ui/interactive-3d-analytics-dashboard-card";
export default function DemoOne() {
return (
<div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center p-6">
<AnalyticsDashboardCard />
</div>
);
}