Cursor rule

1---
2description: 
3globs: 
4alwaysApply: true
5---
6 
7# Comprehensive TanStack and Shadcn UI Reference Guide
8 
9This comprehensive reference document provides detailed information about TanStack components and Shadcn UI, serving as a definitive resource for implementing functionality with these libraries. Each section includes a concise description, documentation links, and detailed explanations of sub-concepts and features.
10 
11## TanStack Router
12 
13TanStack Router is a fully-featured client-side JavaScript router for building React and Solid applications, providing a mature routing and navigation system with nested layouts and efficient data loading capabilities, all in a type-safe manner[1][2].
14 
15**Documentation**: https://tanstack.com/router/latest/docs/framework/react/overview
16 
17### Core Concepts
18 
19#### Routing System
20- **File-based and Code-based Routing**: Supports both approaches simultaneously, giving you flexibility to choose what fits your project best[1]
21- **Type-Safe Path Handling**: Ensures route paths are correctly typed and validated at compile time
22- **Nested Layouts**: Supports complex layout nesting with full type safety
23 
24#### Search Parameters
25- **First-class Citizen**: Search parameters are treated as a powerful state manager in your application[1]
26- **Type-Safe Parameters**: Fully typed search parameters that integrate seamlessly with TypeScript
27- **Complex Data Structures**: Supports deeper and more complex data structures while keeping them type-safe[1]
28- **Serialization/Deserialization**: Powerful parser/serializer for managing data in your search params[1]
29 
30#### Data Loading
31- **Efficient Caching**: Light-weight built-in caching layer that works seamlessly with the Router[1]
32- **Declarative Dependencies**: Easy definition of data dependencies with configurations like context, beforeLoad, loaderDeps
33- **Integration with Data Libraries**: Designed to integrate with TanStack Query, SWR, Apollo, Relay, or custom data fetching solutions[1]
34- **Prefetching**: Support for prefetching data to improve user experience
35 
36#### Route Context
37- **Inheritance**: Context defined at a route level is inherited by all child routes[1]
38- **Synchronous and Asynchronous**: Context can be built up both synchronously and asynchronously[1]
39- **Type Safety**: Fully type-safe and inferred at zero cost[1]
40 
41#### Additional Features
42- **Framework Independence**: While not a traditional framework, it can be upgraded to a full-stack framework with other tools[1]
43- **TanStack Start Integration**: Being developed alongside TanStack Start, a full-stack framework built on top of TanStack Router[1][2]
44 
45## TanStack Query
46 
47TanStack Query (formerly React Query) is a robust library for managing server state in React applications, streamlining data fetching, caching, synchronization, and more[3].
48 
49**Documentation**: https://tanstack.com/query/latest/docs/framework/react/overview
50 
51### Core Concepts
52 
53#### Queries
54- **Data Fetching**: Used to fetch and cache data from servers or APIs[3]
55- **Unique Identification**: Uses query keys to uniquely identify and cache data[3]
56- **Status Indicators**: Provides states like isLoading, isError, data for managing UI states[3]
57- **Query Keys**: Array-based identifiers used for caching and refetching logic[3]
58 
59#### Mutations
60- **Data Modification**: Used for creating, updating, or deleting data on the server[3]
61- **Server State Updates**: Provides mechanisms to update the server state and local cache
62- **Optimistic Updates**: Support for optimistic UI updates before server confirmation
63 
64#### Data Synchronization
65- **Background Refetching**: Automatic refetching of stale data
66- **Query Invalidation**: Mechanism to mark queries as stale and trigger refetches[3]
67- **Dependent Queries**: Support for queries that depend on other queries' data
68 
69#### Caching and Performance
70- **Automatic Caching**: Built-in caching mechanism for optimal performance
71- **Garbage Collection**: Automatic cleanup of unused query data
72- **Deduplication**: Prevents duplicate requests for the same data
73 
74#### Advanced Features
75- **Infinite Queries**: Support for paginated data with infinite scrolling
76- **Query Prefetching**: Preload data before it's needed
77- **Query Cancellation**: Cancel in-flight requests when components unmount
78 
79## TanStack Table
80 
81TanStack Table is a headless UI library for building powerful, flexible tables and datagrids in React, Vue, Solid, and Svelte applications.
82 
83**Documentation**: https://tanstack.com/table/latest/docs/introduction
84 
85### Core Concepts
86 
87#### Table Structure
88- **Data Model**: Flexible data handling with support for various data structures
89- **Columns**: Define and customize columns with headers, accessors, and cell renderers
90- **Rows**: Automatic row generation from data with unique identifiers
91- **Headers**: Customizable header groups and column spanning
92 
93#### Features
94- **Sorting**: Multi-column sorting with custom sort functions
95- **Filtering**: Global and column-specific filtering with custom filter functions
96- **Pagination**: Built-in pagination with configurable page sizes
97- **Row Selection**: Single and multi-row selection with customizable selection behavior
98- **Expanding**: Expandable rows for displaying additional details
99 
100#### State Management
101- **Column Visibility**: Control which columns are visible
102- **Column Ordering**: Reorder columns by dragging
103- **Column Resizing**: Adjust column widths
104- **State Persistence**: Save and restore table state across sessions
105 
106#### Performance
107- **Virtualization**: Efficient rendering of large datasets
108- **Memoization**: Optimized re-renders for better performance
109- **On-demand Calculations**: Compute values only when needed
110 
111#### Customization
112- **Plugins**: Extend functionality with plugins
113- **Column Definitions**: Highly customizable column definitions
114- **Styling**: Framework-agnostic styling for complete design freedom
115 
116## TanStack Form
117 
118TanStack Form is a headless, type-safe form library for building high-performance forms in React, Vue, Solid, and Svelte applications.
119 
120**Documentation**: https://tanstack.com/form/latest/docs/overview
121 
122### Core Concepts
123 
124#### Form Configuration
125- **Field Definitions**: Type-safe field declarations
126- **Default Values**: Set initial values for form fields
127- **Validation Schema**: Define validation rules for form data
128- **Form Options**: Configure form behavior and performance settings
129 
130#### Field Management
131- **Field Registration**: Automatic and manual field registration
132- **Field Arrays**: Support for dynamic arrays of fields
133- **Field Groups**: Organize related fields together
134- **Conditional Fields**: Show/hide fields based on conditions
135 
136#### Validation
137- **Schema Validation**: Integration with validation libraries
138- **Custom Validation**: Write custom validation logic
139- **Error Messages**: Customizable error display
140- **Field-level Validation**: Validate individual fields
141- **Form-level Validation**: Validate the entire form
142 
143#### Form State
144- **Dirty Tracking**: Track modified fields
145- **Touched State**: Track which fields have been interacted with
146- **Error State**: Access validation errors
147- **Submission State**: Track form submission status
148 
149#### Performance
150- **Minimal Re-renders**: Optimized to prevent unnecessary re-renders
151- **Tree Shaking**: Small bundle size through effective tree shaking
152- **Memoization**: Smart caching of form calculations
153 
154## Shadcn UI
155 
156Shadcn UI is a collection of reusable, accessible UI components for React applications built on Radix UI and Tailwind CSS.
157 
158**Documentation**: https://ui.shadcn.com/docs
159 
160### Core Concepts
161 
162#### Installation and Setup
163- **CLI Setup**: Easy installation via CLI
164- **Manual Setup**: Step-by-step manual installation process
165- **Configuration**: Tailwind and project configuration
166- **Theming**: Customizable themes with light and dark mode support
167 
168#### Component System
169- **Buttons**: Various button styles and variants
170- **Form Elements**: Input, select, checkbox, radio, etc.
171- **Dialog and Modals**: Interactive dialog components
172- **Navigation**: Tabs, menus, navigation bars
173- **Data Display**: Tables, cards, lists
174- **Feedback**: Alerts, toasts, progress indicators
175- **Layout**: Grid, box, flex containers
176 
177#### Forms
178- **Form Components**: Specialized components for form building
179- **Form Validation**: Integration with form validation libraries
180- **Form Layout**: Consistent form styling and layout
181- **Accessibility**: ARIA-compliant form elements
182 
183#### Design System
184- **Typography**: Text styles and hierarchies
185- **Colors**: Color system with semantic naming
186- **Spacing**: Consistent spacing system
187- **Shadows**: Elevation and depth
188- **Animations**: Transitions and motion
189 
190#### Advanced Usage
191- **Component Customization**: Extending and modifying components
192- **Component Composition**: Building complex UIs from primitive components
193- **Responsive Design**: Mobile-first responsive components
194- **Integration with State Management**: Using with React state libraries
195 
196## Integration Patterns
197 
198### TanStack Router with Query
199- **Route Loaders with TanStack Query**: Fetch data in route loaders using TanStack Query
200- **Search Params with Query Keys**: Use search parameters to drive query keys
201- **Prefetching**: Prefetch data for routes before navigation
202 
203### Shadcn UI with TanStack Table
204- **Styled Tables**: Use Shadcn UI styling with TanStack Table
205- **Pagination Components**: Integrate Shadcn pagination with TanStack Table
206- **Filter Components**: Build filter UIs with Shadcn components
207 
208### TanStack Form with Shadcn UI
209- **Form Fields**: Use Shadcn UI components as form fields
210- **Form Layout**: Structure forms using Shadcn layout components
211- **Validation Display**: Show validation errors with Shadcn alert components
212 
213## Implementation Guides
214 
215### Setting Up a New Project
216- Starter template configurations
217- Recommended folder structure
218- Development environment setup
219 
220### Performance Optimization
221- Code splitting strategies
222- Memoization patterns
223- Server-side rendering considerations
224 
225### Testing Strategies
226- Component testing approaches
227- Integration testing methodologies
228- Mocking TanStack hooks
229 
230This comprehensive reference guide should provide LLMs with the necessary context and knowledge to implement functionality related to TanStack components and Shadcn UI efficiently and effectively.
231 
232Sources
233[1] Overview | TanStack Router React Docs https://tanstack.com/router/latest/docs/framework/react/overview
234[2] Introducing TanStack Router https://frontendmasters.com/blog/introducing-tanstack-router/
235[3] TanStack Query (Formerly React Query): The Basics https://spin.atomicobject.com/basics-tanstack-query/
236[4] GitHub - qiniu/TanStack.table: 🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table https://github.com/qiniu/TanStack.table
237[5] TanStack Form 1.0: State management for forms with React, Angular, Vue & Co. https://www.heise.de/en/news/TanStack-Form-1-0-State-management-for-forms-with-React-Angular-Vue-Co-10303439.html
238[6] Complete Step by Step tutorial on shadcn UI https://dev.to/nnnirajn/complete-step-by-step-tutorials-on-shadcn-4dcb
239[7] Overview | TanStack Query React Docs https://tanstack.com/query/latest/docs/framework/react/overview
240[8] Tanstack Router for React - A Complete Guide https://blog.openreplay.com/tanstack-router-for-react--a-complete-guide/
241[9] TANStack Query: How It Changes the Way You Query APIs https://dev.to/codewithonye/tanstack-query-how-it-changes-the-way-you-query-apis-5fog
242[10] @ryniaubenpm/rerum-vitae-quo https://www.npmjs.com/package/@ryniaubenpm/rerum-vitae-quo
243[11] Introduction | TanStack Table Docs https://tanstack.com/table/latest/docs/introduction
244[12] Overview | TanStack Form Docs https://tanstack.com/form/latest/docs/overview
245[13] Introduction https://ui.shadcn.com/docs
246[14] TanStack Form: All-in-one Form Handling for React https://blog.openreplay.com/tanstack-form--all-in-one-form-handling-for-react/
247[15] Shadcn UI adoption guide: Overview, examples, and alternatives - LogRocket Blog https://blog.logrocket.com/shadcn-ui-adoption-guide/
248[16] A deep dive into mutations in TanStack Query - LogRocket Blog https://blog.logrocket.com/deep-dive-mutations-tanstack-query/
249[17] Introduction | TanStack Table Docs https://tanstack.com/table/v8/docs/introduction
250[18] Building a CRUD app with Shadcn UI and Refine | Refine https://refine.dev/blog/shadcn-ui/
251[19] Introduction to Tanstack Query and organizing code with queryOptions for maintainability https://newbeelearn.com/blog/tanstack-query-queryoptions/
252[20] @ryniaubenpm/quae-voluptatum-alias https://www.npmjs.com/package/@ryniaubenpm/quae-voluptatum-alias
253[21] Building interactive forms with TanStack Form - This Dot Labs https://www.thisdot.co/blog/building-interactive-forms-with-tanstack-form
254[22] Mastering Shadcn UI Components https://www.freecodecamp.org/news/mastering-shadcn-ui-components/
255[23] Queries | TanStack Query React Docs https://tanstack.com/query/v4/docs/framework/react/guides/queries
256[24] An Introduction to TanStack Table https://blog.scottlogic.com/2023/07/27/an-introduction-to-tanstack-table.html
257