Frontend
React, Next.js, TypeScript, CSS frameworks, and UI component libraries.
20 topics
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: