Frontend
React, Next.js, TypeScript, CSS frameworks, and UI component libraries.
20 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.
CSS
CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML.
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...
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.
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.
Zod
Zod provides a way to define schemas that validate and parse data at runtime while automatically generating TypeScript types. Key benefits include: