Frontier Stack 2026
If you were building a serious, distinctive frontend today, what stack would you reach for first? Source: frontend-frontier-pack/codex-skill/frontend-frontier/references/frontier-stack-2026.md
Design Position
| Field | Value |
|---|---|
| Design family | Component and implementation sources |
| Use when | Use when selecting or applying Frontier Stack 2026 as a design implementation source. |
| System map | Design System Map |
| Proof path | Source/docs inspection, retokenized implementation, dependency review, and screenshot coverage for states. |
Core Stance
CSS is foundational but no longer the default answer for motion-heavy or brand-defining work. Use CSS for layout, theming, container queries, fallbacks, tiny hover/focus states. Do not treat raw CSS keyframes as the main animation architecture unless the task is genuinely small.
Default Stack
| Layer | Tool | Why |
|---|---|---|
| Tokens & styling | Tailwind CSS v4 @theme, runtime CSS variables, OKLCH tokens |
CSS-first, theme values become runtime vars usable in CSS/JS/Motion/shaders/canvas |
| Component motion | Motion (Framer Motion) | Component entrances, layout movement, hover/press, gestures, shared layout transitions |
| Component source layer | shadcn/ui + Component Library Sources | Start from Radix UI/Base UI primitives and owned shadcn components, then inspect Blocks.so, Chanh Dai Components, Evil Charts, Skiper UI, Cult UI, Magic UI, React Bits, Fancy Components, Origin UI, Shaders.com, and real design-system references before hand-rolling components |
| Scroll storytelling | GSAP + ScrollTrigger, Lenis when needed | Pinned sections, scrubbed scenes, multi-step narratives, mixed DOM/canvas |
| 3D scenes | React Three Fiber + drei | Hero objects, immersive scenes, camera-driven storytelling, particle fields |
| Shader-first | OGL, custom GLSL/WGSL | When the material/distortion itself is the idea, less abstraction than R3F |
| App transitions | React startTransition, useTransition, useEffectEvent, experimental <ViewTransition> |
Non-blocking UI updates, route/state transitions |
| Generative UI | json-render (@json-render/core + @json-render/shadcn + @json-render/directives) |
AI generates JSON specs constrained to your component catalog. Directives for i18n, currency, math at render time. Cross-platform (React, Vue, Svelte, RN, PDF, email). vercel-labs/json-render |
| Rich-text / doc editor | Plate (PlateJS) (Plate) | Slate-based React editor framework; headless plugins + copy-paste shadcn/ui editor UI you own, plus first-party AI (slash, ghost text) and MCP. Tiptap if you need framework-agnostic/mature collab; Lexical if perf-critical. udecode/plate |
| Route-first app stack | Tools/Tanstack | TanStack Router/Start + Tailwind + Vite/Rolldown |
Decision Matrix
Marketing site with narrative: Tailwind v4 + Motion (UI) + GSAP + ScrollTrigger (story) + Lenis if sync matters.
Premium SaaS landing: Tailwind v4 + Motion (UI, stagger, hover) + GSAP only if real narrative sequencing.
Component-heavy product surface: local design-system primitives + shadcn/ui, then Component Library Sources for Radix/Base behavior, Blocks.so, Chanh Dai, Evil Charts, Skiper UI, Cult UI, Magic UI, React Bits, Fancy Components, Origin UI, and Shaders.com patterns that fit the art direction.
Docs site: Tailwind v4 + Fumadocs or similar + Motion sparingly. No Lenis, no giant scroll theatrics.
3D hero / spatial product: Tailwind v4 + Motion (shell) + R3F + drei (scene) + GSAP only for shell-scene orchestration.
Meta-framework: React Router v7 (the stable continuation of Remix) or Next.js. The Shopify Editions Winter '26 site is a frontier-stack showcase — R3F + Theatre.js + Vite on Remix; see Remix. For commerce storefronts, route the Shopify-specific branch through Shopify Hydrogen, especially while the Vercel + Shopify preview work is active.
Route-first modern app: TanStack Router/Start + Tailwind v4 + Vite/Rolldown. Use when the frontend is a serious product app with typed route/search/loaders and needs SSR streaming or portable server output; route infrastructure decisions through Modern Web VPS Stack.
Shader-heavy microsite: Tailwind v4 or minimal CSS var system + OGL or custom shaders + GSAP/Motion around edges.
Product app transitions: Motion for layout + React startTransition / useTransition + experimental <ViewTransition> when comfortable.
AI-generated dashboards/UIs: json-render catalog + @json-render/shadcn + @json-render/directives ($format, $t, $math). AI SDK handles generation, json-render handles schema + rendering.
Rich-text / document editing (Notion-style, AI writing): Plate (PlateJS) (Plate) for React + shadcn/ui stacks — own the editor UI via the shadcn CLI, add Plate AI for slash commands and ghost-text. Reach for Tiptap when you need framework-agnostic support or the most mature Yjs collaboration; Lexical for performance-critical, editor-is-the-product surfaces.
Anti-Defaults
Do not default to: raw CSS keyframe systems for large interactive products, plain CSS for sophisticated shared layout animation, scroll-jacking without narrative reason, R3F for things that are flat DOM cards in cosplay, Lenis on dense docs or dashboards.
What "Frontier" Means
Not adding more libraries for sport. It means using the current best primitives for the class of problem, letting runtime CSS variables / motion values / GPU surfaces talk to each other, treating motion + rendering + scheduling as one system, and building something with a real point of view.
Timeline
- 2026-07-06 | Added the route-first TanStack/Tailwind/Vite app stack and linked Modern Web VPS Stack for the Hetzner/Cloudflare deployment posture. Source: User request, 2026-07-06
- 2026-07-01 | Design category refresh added this page to the Component and implementation sources family, linked it to Design System Map, and kept it standalone because Frontier Stack 2026 owns a distinct design decision surface in this family. Source: User request, 2026-07-01
- 2026-06-25 | Added the component source layer so frontier-stack decisions include reusable component libraries and modern shadcn registries, not only animation/rendering primitives. Source: User request, 2026-06-25