Frontend
React, Next.js, TypeScript, CSS frameworks, and UI component libraries.
28 topics
What this section covers
The frontend layer is where your users actually meet the AI you wired up in the backend — which means it has to load fast, feel modern, and be accessible enough that nobody bounces. This section is the reference set for building production UIs in the vibe-coding stack. You'll find deep pages on React, Next.js, and TypeScript as the core trio; Tailwind and shadcn/ui for styling and components; plus Radix and Lucide for accessible primitives and icons. There's also v0 for AI-generated UI scaffolding, responsive-design fundamentals, dark mode, and typography via Google Fonts. If you're the kind of developer who'd rather copy a battle-tested pattern than reinvent a modal from scratch, this section is for you. It pairs naturally with Product & Design when you need to think about what you're building, and Backend & Data when you need to wire the UI to real state.
All-in-One E-commerce Platforms: Shopify, BigCommerce, WooCommerce, Wix Stores, Squarespace Commerce, Square Online, Webflow Ecommerce, Ecwid
If you're launching a direct-to-consumer brand, a small online store, or just need an e-commerce checkout on top of your existing site in 2026, this is the c...
CSS
CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML.
Documentation Site Builders: Mintlify, Fern, Scalar, Docusaurus, Nextra, GitBook, Starlight
If you're building a SaaS in 2026 and your product needs documentation — API reference, getting-started guides, conceptual explainers, integration tutorials ...
Form Builders and Survey Tools: Tally, Typeform, Formspree, Google Forms, Jotform, Fillout
If you're building a SaaS in 2026 and need to collect form / survey input from customers — waitlist signups, contact forms, feature requests, NPS surveys, cu...
Google Fonts
Google Fonts is a free library of over 1,500 font families that you can use in web applications. Next.js provides built-in support for Google Fonts through t...
Headless CMS Providers: Sanity, Contentful, Payload, Strapi, Hygraph, Storyblok, Notion, Markdown-in-Repo
If you're building a SaaS marketing site or content-heavy product in 2026 and trying to pick where the content lives, this is the consolidated comparison. Th...
Headless Commerce Platforms: Shopify Hydrogen, Medusa, Saleor, BigCommerce, commercetools, Crystallize, Swell, Vendure
If you're building an e-commerce experience in 2026 that needs custom UI, multi-channel sales, or developer-led flexibility, headless commerce is the path. T...
HTML
HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.
JSON in VibeReference
JSON (JavaScript Object Notation) is a lightweight data-interchange format that's easy for humans to read and write and easy for machines to parse and genera...
Lucide Icons
Lucide is already integrated with your VibeReference project. The icons are available through the `lucide-react` package.
Marketing Site Builders & Hosting: Webflow, Framer, Next.js + Vercel, Astro, Carrd, Squarespace, WordPress, HubSpot CMS
If you're building a SaaS in 2026 and need a marketing site (homepage, pricing, blog, customer pages, docs), this is the consolidated comparison. Marketing-s...
Mobile App Development Frameworks: React Native, Flutter, Expo, Capacitor, Ionic, Kotlin Multiplatform
If you're building a mobile app in 2026 and trying to pick a cross-platform framework, this is the consolidated comparison. The category settled around four ...
Next.js
Next.js is a React framework that enables server-side rendering, static site generation, and other advanced features for production-ready React applications.
PostCSS
PostCSS is a tool for transforming CSS with JavaScript plugins. It powers popular tools like Tailwind CSS, Autoprefixer, and CSS Modules. In a Next.js projec...
Radix UI
Radix UI provides a collection of unstyled, accessible UI primitives for building high-quality React applications. Unlike component libraries that come with ...
React
React is a JavaScript library for building user interfaces, created by Meta. It is the foundation of Next.js and the most widely used frontend framework. Rea...
Responsive Design
Responsive design is an approach to web development that creates dynamic changes to the appearance of a website, depending on the screen size and orientation...
shadcn/ui
shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS, designed to be copied into your projects rather than installed as a ...
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without leaving your HTML.
Tailwind v4 + Next.js (App Router) + React Light/Dark Mode Architecture
This document explains how to implement a robust, zero-flicker light/dark theme with Tailwind CSS v4, CSS custom properties (OKLCH), and `next-themes`. It al...
tweakcn
tweakcn is an open-source visual theme editor for shadcn/ui components. It provides a real-time interface for customizing colors, typography, border radius, ...
TypeScript
TypeScript is a strongly typed programming language that builds on JavaScript by adding static type definitions. It catches errors at compile time instead of...
TypeScript Patterns
This document outlines TypeScript patterns and best practices for your Next.js and Supabase application.
UI Components
This document outlines the UI component architecture, implementation patterns, and best practices for your Next.js and Supabase application.
USe Theme variables
Theme variables are special CSS variables defined using the @theme directive that influence which utility classes exist in your project.
v0.app
v0.app is an AI-powered UI generation tool by Vercel that creates React components using Tailwind CSS and shadcn/ui. It is now focused on SaaS creators.
Web Frameworks for SaaS
Picking a web framework for a new SaaS in 2026 is a real architecture decision, not a default. **Next.js** is the dominant default for React + Vercel; **Astr...
Zod
Zod provides a way to define schemas that validate and parse data at runtime while automatically generating TypeScript types. Key benefits include: