概述
原文摘要
Get free private DeepWikis in Devin
Menu
Project Dependencies
Relevant source files
- CHANGELOG.md
- cz.yaml
- index.html
- package.json
- pnpm-lock.yaml
- public/images/favicon_light.png
- public/images/favicon_light.svg
This document provides a detailed overview of the dependencies, build tools, and development scripts used in the Shadcn Admin Dashboard. It covers the core libraries, UI components, and utilities that power the application. For information about project configuration files and settings, see Project Configuration.
Overview
The Shadcn Admin Dashboard is built using a modern React stack with TypeScript. It uses Vite as the build tool, TanStack Router for routing, and a component library built on top of Radix UI primitives styled with Tailwind CSS.
Form & Datareact-hook-formZod ValidationAxiosRechartsUI ComponentsRadix UI PrimitivesShadcn UI ComponentsTailwind CSS v4Lucide React & Tabler IconsCore FrameworkReact v19TanStack RouterTanStack QueryReact DOMZustandBuild SystemViteSWCTypeScriptESLintPrettier
Diagram: High-level dependency relationships
Sources: package.json 15-58
Core Dependencies
The application is built on React 19, leveraging its latest features and improvements.
Framework Dependencies
| Dependency | Version | Purpose |
|---|---|---|
| react | ^19.1.0 | Core UI library |
| react-dom | ^19.1.0 | DOM-specific methods for React |
| @tanstack/react-router | ^1.116.0 | File-based routing solution |
| @tanstack/react-query | ^5.74.3 | Data fetching and caching |
| zustand | ^5.0.3 | State management |
| axios | ^1.8.4 | HTTP client |
Sources: package.json 15-58
TanStack Router and Query
TanStack Router provides a fully type-safe routing solution with file-based routing, while TanStack Query handles data fetching, caching, and state management for server data.
Application FlowRouting & Data Fetching@tanstack/react-router@tanstack/router-devtools@tanstack/router-plugin@tanstack/react-query@tanstack/react-query-devtools@tanstack/eslint-plugin-queryData FetchingRoutingCachingState Synchronization
Diagram: TanStack libraries and their relationships
Sources: package.json 36-37 package.json 64-66
UI Component Libraries
The UI is built using a combination of Radix UI primitives, styled with Tailwind CSS, and composed into reusable components following the Shadcn UI methodology.
Radix UI Components
The project utilizes numerous Radix UI primitives for accessible, unstyled components:
| Component Category | Packages |
|---|---|
| Layout Components | react-dialog, react-popover, react-tooltip, react-dropdown-menu |
| Form Elements | react-checkbox, react-label, react-select, react-switch, react-radio-group |
| Navigation | react-tabs, react-scroll-area |
| Visual Elements | react-avatar, react-separator, react-slot, react-collapsible |
Sources: package.json 17-33
Icons and Styling
UI ComponentsIcon LibrariesStyling Systemtailwindcss v4.1.4tailwind-merge@tailwindcss/vitetw-animate-cssclass-variance-authorityclsxlucide-react@tabler/icons-react@radix-ui/react-iconsShadcn ComponentsCustom Components
Diagram: Styling and icon dependencies
Sources: package.json 34-56
Form Handling and Validation
The application uses a robust form handling system with react-hook-form and Zod validation:
| Dependency | Version | Purpose |
|---|---|---|
| react-hook-form | ^7.55.0 | Form state management and validation |
| @hookform/resolvers | ^5.0.1 | Connects react-hook-form with validation libraries |
| zod | ^3.24.2 | Schema declaration and validation |
| input-otp | ^1.4.2 | OTP input component |
Sources: package.json 16 package.json 44 package.json 50 package.json 57
Application FeaturesUI EnhancementData Visualizationrechartsdate-fnsreact-day-pickercmdksonnerCharts & GraphsDate SelectionCommand PaletteToast NotificationsPage Transition Loading
Diagram: UI enhancement libraries
Sources: package.json 42-54
Development Dependencies
The project utilizes a comprehensive set of development tools for code quality, testing, and developer experience:
Build and Bundling
| Dependency | Version | Purpose |
|---|---|---|
| vite | ^6.2.6 | Fast development server and bundler |
| @vitejs/plugin-react-swc | ^3.9.0 | SWC-powered React plugin for Vite |
| typescript | ~5.8.3 | TypeScript compiler |
Sources: package.json 72-82
Code Quality Tools
| Dependency | Version | Purpose |
|---|---|---|
| eslint | ^9.24.0 | Static code analyzer |
| @eslint/js | ^9.24.0 | JavaScript-specific ESLint rules |
| typescript-eslint | ^8.30.1 | TypeScript-specific ESLint rules |
| prettier | ^3.5.3 | Code formatter |
| prettier-plugin-tailwindcss | ^0.6.11 | Tailwind CSS class sorting |
| @trivago/prettier-plugin-sort-imports | ^5.2.2 | Import sorting |
| knip | ^5.50.4 | Unused exports finder |
Sources: package.json 61-81
Development Utilities
| Dependency | Version | Purpose |
|---|---|---|
| @faker-js/faker | ^9.7.0 | Generate realistic test data |
| @tanstack/react-query-devtools | ^5.74.3 | Debug React Query state |
| @tanstack/router-devtools | ^1.116.0 | Debug router state |
| @types/* | various | TypeScript type definitions |
Sources: package.json 62-71
Development Scripts
The project provides several npm/pnpm scripts for development, building, and maintenance:
WorkflowDevelopment Scriptsdev: vitebuild: tsc -b && vite buildpreview: vite previewlint: eslint .format:check: prettier --check .format: prettier --write .knip: knipLocal DevelopmentProduction BuildCode Quality ChecksDead Code Analysis
Diagram: Development scripts and workflow
Sources: package.json 6-14
The project has seen several significant dependency updates as noted in the changelog:
- Upgraded to Tailwind CSS v4 (from v1.2.0 to v1.3.0)
- Replaced custom OTP with input-otp component
- Upgraded react-day-picker
- Added automatic code-splitting
Sources: CHANGELOG.md 1-14
Browser and Environment Compatibility
The project’s dependencies suggest strong support for modern browsers, with many packages requiring Node.js 18+. The usage of Vite, React 19, and Tailwind CSS v4 indicates a focus on leveraging the latest web technologies.
Sources: package.json 15-58 pnpm-lock.yaml 302-448