shadcn Dashboard + Landing Template Expert

To build a shadcn dashboard, adapt the template’s BaseLayout, sidebar navigation, and theming conventions. It guides React + TypeScript + Vite + Tailwind OKLCH theming, shadcn/ui components, TanStack tables, Recharts, and RHF+Zod forms to ensure production-ready, responsive frontend architecture.

Setting up TanStack tables and Recharts involves implementing the template’s established component patterns for data visualization. It guides the integration of TanStack table setups and Recharts chart configurations within the shadcn/ui architecture to maintain consistent rendering and container-query behaviors.

Yes, you can use React Hook Form and Zod for form validation. The skill guides the implementation of RHF+Zod validation patterns that align with the template’s architecture, ensuring forms behave consistently with the shadcn/ui component conventions and responsive layout rules.

Yes, the shadcn landing template supports container-query-driven responsive UI. It preserves container-query component resizing, sidebar collapse rules, and mobile table or landing navigation patterns to maintain consistent responsive behaviors across dashboard and landing pages.

The best way to adapt a shadcn BaseLayout is to align your specific dashboard routes and data model with the template’s BaseLayout, sidebar, and header structure. This ensures template-faithful UI architecture and consistent theming using Tailwind OKLCH conventions.

Dashboard components may not resize correctly if container-query behaviors are overridden. The skill ensures you preserve the template’s container-query-driven component resizing and responsive design rules, preventing layout shifts when adapting KPI cards, tables, and charts to new routes.