Shadcn.io is not affiliated with official shadcn/ui
Dashboard Color System
Animated React design system color audit dashboard block for Next.js with color token list, contrast ratio scores, WCAG compliance indicators, usage counts, swatch previews, and expandable token details using shadcn/ui, Tailwind CSS, and framer-motion
Audit your design system color tokens with this animated dashboard block for React and Next.js. Each token displays a color swatch, contrast ratio against light and dark backgrounds, WCAG AA and AAA compliance status, and usage count across your codebase. Expandable rows reveal hex, HSL, and RGB values alongside component usage breakdowns. Built with TypeScript, shadcn/ui components, framer-motion staggered animations, and Tailwind CSS.
Related Components
Code Quality
Code quality metrics dashboard
Compliance Status
Regulatory compliance tracking
Feature Comparison
Feature comparison matrix
Test Coverage
Code test coverage tracking
Data Quality
Data validation metrics
SOC2 Checklist
Security compliance checklist
FAQ
Was this page helpful?
Sign in to leave feedback.
Code Review Queue
Animated React code review queue dashboard block for Next.js with pull request list showing assignee avatars, review age indicators, priority labels, diff size badges, approval status, and expandable PR details using shadcn/ui, Tailwind CSS, and framer-motion
Compliance Status
Animated React compliance status dashboard block for Next.js with six regulatory standards showing compliance states, last audit dates, next review schedules, control counts, and color-coded status indicators using shadcn/ui, Tailwind CSS, and framer-motion