Story: Variants
Button
High-signal actions with strong defaults for primary, outline, ghost, and destructive flows.
variant="primary"size="md"isLoading
auto_awesomeEarly access
The Living Cookbook
for Modern React
A high-end developer reference implementation for scalable React architectures. Isolated patterns, real-world examples, and production-ready code.
$npx react-principles init
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
deployed_codeComponent showcase
See the UI kit in motion before you ever leave the landing page.
These previews mirror the same scenarios documented in Storybook, so the landing page highlights real component states instead of static marketing screenshots.
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
Docsarrow_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?
Jump into the docs for API detail or browse the cookbook to see the same primitives inside larger product flows.
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
Systematic Learning
Every pattern follows a 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.