Story: Variants
Button
High-signal actions with strong defaults for primary, outline, ghost, and destructive flows.
variant="primary"size="md"isLoading
NewYour AI is now React Principles–awarearrow_forward
React Principles
Production patterns, wired into your AI.
The cookbook, UI Kit, and starters — now connected to your AI tools. Learn the patterns yourself, or let your assistant look them up and pull components on demand.
$npx react-principles init
Sets up AGENTS.md + MCP + skills — one command.javascripthooks/queries/useUsers.ts
import { useQuery } from '@tanstack/react-query';
import { queryKeys } from '@/lib/query-keys';
export function useUsers(params = {}) {
return useQuery({
queryKey: queryKeys.users.list(params),
queryFn: () => getUsers(params),
staleTime: 1000 * 60 * 5,
placeholderData: (prev) => prev,
});
}
Beyond simple code snippets.
Most pattern libraries stop at a Gist. We provide the full context.
React Principles is a collection of isolated patterns combined with real-world implementations. We show you how a pattern behaves in a Next.js 16 Server Component environment versus a Vite-based Client-side application.
layers
Architecture First
Decoupled logic that works across different React frameworks.
monitoring
Production Ready
Battle-tested solutions for state management, data fetching, and forms.
widgets
UI Components
35 accessible, zero-dependency components built with pure Tailwind CSS.
terminal
CLI Ready
Add any component to your project instantly with a single command.
auto_awesome
What's Inside
- check_circleFramework switcher — Next.js ↔ Vite per recipe
- check_circleLive interactive demo per pattern
- check_circleSave & bookmark recipes
- check_circleFully typed — TypeScript strict mode
- check_circleFully searchable — ⌘K
menu_bookCookbook
Production patterns,
not just snippets.
Each recipe covers the why, the constraints, the pattern, and a real implementation — side by side for Next.js and Vite.
account_tree
Foundations
State Taxonomy
Three categories of state — local, shared, and server — and exactly which tool handles each one.
Read recipearrow_forward
widgets
Foundations
Component Composition
How components combine and communicate — children props, slot patterns, and why composition beats deep prop drilling.
Read recipearrow_forward
cloud_sync
Patterns
Server State with React Query
Fetch, cache, and synchronize server data with TanStack Query v5. Pagination, search, and background refetching.
Read recipearrow_forward
fact_check
Patterns
Form Validation with Zod
Schema-first validation with React Hook Form and Zod. Type-safe, declarative error messages, zero boilerplate.
Read recipearrow_forward
How Every Recipe Is Built
Each Cookbook recipe follows the same rigid, helpful structure.
Live Previews
Source Access
01lightbulb
01. Principle
The Why
The architectural reason this pattern exists — which problem it solves and what goes wrong without it.
02rule
02. Rules
Constraints
A set of immutable rules for implementation to ensure consistency and avoid anti-patterns.
03code_blocks
03. Pattern
The Core
The pure, abstract implementation — decoupled from any specific feature or framework.
04integration_instructions
04. Implementation
Real World
The same pattern applied to Next.js App Router and Vite side by side. Switch frameworks with one click.
05rocket_launch
05. Starter Template
Real Project
Jump directly to the file in the react-principles-nextjs starter — see how the pattern lives in a working codebase.
06play_circle
06. Live Demo
Try It
Interact with a working implementation of the pattern — available on Applied recipes.
deployed_codeComponent showcase
The components behind every Cookbook recipe.
Copy-paste components that power the Cookbook patterns — fully accessible, built with Tailwind v4, and yours to customize completely.
stack_star
Storybook signal
Variants, states, and prop combinations are lifted from the component stories so the marketing layer stays honest to the implementation.
4 live previewsKey props surfacedLight and dark ready
Viewarrow_outward
Story: Default
Select
Form choices keep labels, descriptions, and validation feedback aligned in one primitive.
expand_more
Storybook-backed preview configuration.
label="Framework"placeholder="Choose stack"size="md"
Story: States
Checkbox
Selection controls cover checked, indeterminate, and descriptive states without extra wrappers.
size="md"indeterminatedescription
Story: Pills
Tabs
Navigation between overview, API, and examples mirrors the same content model shown in docs stories.
Typed props line up with the component source and docs tables.
variant="pills"defaultValue="api"onChange
Ready to go deeper?
Browse the full component reference or open the Cookbook to see these primitives inside real production flows.
tuneProject configurator
Build your stack,
your way.
Configure your style, pick your components, choose your stack — then get a ready-to-use preset you can bootstrap instantly with the CLI or copy-paste directly into your project.
- palette3 style presets — Arc, Edge, Soleil
- devicesNext.js or Vite — pick your framework
- widgets45+ UI components to mix and match
- terminalExport as CLI preset or copy-paste
Style preset
ArcEdgeSoleil
Framework
Next.jsVite
Components
checkButtoncheckCardcheckDialogcheckInputTablecheckToastSelectcheckBadge
Stack
storeZustand
syncReact Query
edit_noteReact Hook Form
folder_copyMonorepo
Generate Preset →
setup
$ npx react-principles init
✓ AGENTS.md — principles context
✓ .mcp.json — reactprinciples server
✓ Skills ready
Your AI can now
get_recipeget_componentsearch_recipes/reactprinciples-review/reactprinciples-form+8 more
autorenewAlways currentlive from reactprinciples.dev
auto_awesomeAI Ecosystem
One command.
Your AI already knows the rules.
Run npx react-principles init and your project is wired into the ecosystem: your AI follows the patterns, looks up recipes, and pulls real component source on its own — always in sync with the cookbook.
- boltOne command wires your project in — AGENTS.md, MCP server, and skills
- hubYour AI pulls recipes and real component source live over MCP
- autorenewUpdates reach your tools automatically — no copy-paste, no re-sync
- all_inclusiveWorks across Claude Code, Cursor, Copilot, and any MCP tool
The Modern Tech Stack
Curated from the best tools in the React ecosystem.
deployed_code
Next.js 16
App Router
bolt
Vite
Build System
cloud_download
TanStack Query
Data Fetching
table_chart
TanStack Table
Headless Tables
database
Zustand
State Mgmt
edit_square
Hook Form
Form Logic
verified_user
Zod
Validation
palette
Tailwind CSS
Styling
widgets
react-principles
UI Library
And more...
Project Structure First
One Next.js codebase with clear boundaries for app routes, feature modules, shared logic, and UI primitives.
account_treeProject Structure
folder_openreact-principles/
folder_opensrc/
webapp/// Next.js 16 App Router
categoryfeatures/// landing, docs, cookbook, examples
hubshared/// shared hooks, stores, types, utils
dnslib/// query + API client layer
extensionui/// copy-paste UI primitives
descriptiondocs/
folderpublic/
descriptionpackage.json