仪表盘设计提示词

Build a responsive analytics dashboard with a fixed sidebar navigation, top header with search and user avatar, and a main content area. Include: 4 KPI metric cards at the top (revenue, users, conversion rate, active sessions), a large area chart for trends, a bar chart for comparisons, and a recent activity data table. Use a clean, professional color palette with a white background and subtle gray borders. Ensure proper spacing between all elements.

Create an admin dashboard page with shadcn/ui components. Include a collapsible sidebar with icons and labels, breadcrumb navigation, 4 stat cards with sparkline charts, a main data table with sorting/filtering/pagination, and a notification dropdown. Use Tailwind CSS with neutral gray palette. The layout should be responsive with the sidebar collapsing to icons on mobile.

I need a Next.js dashboard page using Tailwind CSS and Recharts. Structure: fixed left sidebar (240px) with logo, nav links with icons, and user profile at bottom. Main area has a top bar with page title and date range picker. Content grid: row 1 has 4 metric cards, row 2 has a line chart (60% width) and a donut chart (40% width), row 3 has a data table. Use Inter font, 16px base grid, and a warm neutral color scheme.

Generate a complete dashboard layout as a React component with TypeScript. Requirements: responsive grid layout using CSS Grid, dark/light theme support via CSS custom properties, sidebar navigation with nested menu items, metric cards with trend indicators (up/down arrows + percentage), chart placeholders using recharts, and a sortable data table. Follow accessibility best practices with proper ARIA roles. Use Tailwind CSS for styling.