Vite + React 19 + Tailwind v4 + shadcn/ui Configuration Example

AI-generated components.json example and UI guidance for a Vite/React project using shadcn/ui. A working scaffolding plugin is not included.

Tags: plugin, vite, react, tailwind, shadcn, ui, frontend

Category: coding

Listing attribution: SimplyUtils

Before using this resource

Attribution and license labels come from the listing metadata. Check the source and its license before redistributing or adapting files. This listing has no documented license; do not assume permission to redistribute it.

Read instructions before adding them to an agent or project. Test a small, non-confidential example and inspect the result. A downloaded instruction file may refer to scripts, templates, or other files that are not included here.

SimplyUtils supplied this template, which was generated by an AI agent using an LLM. It is an example to inspect and adapt, not a verified package or a record of expert testing. Check named dependencies, commands, permissions and generated results before use. Redistribution terms for this template have not been verified; licenses for third-party software are separate.

Source

Repository

Vite + React 19 + Tailwind v4 + shadcn/ui Configuration Example

What this plugin suite does

This plugin equips AI coding assistants with scaffolding rules, component templates, and color-system tokens for building modern React frontend interfaces using Vite, React 19, Tailwind CSS v4, and shadcn/ui.

Features & Capabilities

  • Automatic shadcn CLI Integration: Guidance on calling npx shadcn@latest add <component> instead of creating raw unstyled form elements.
  • Tailwind v4 Theme Variable Presets: Preset CSS variables for dark mode glassmorphism, accent glows, and accessible contrast ratios.
  • Lucide Icons Provider: Patterns for importing and wrapping icons dynamically with accessible ARIA labels.

Scaffolding Config (components.json)

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "client/src/index.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

UI Design Guidelines for Agents

1. Never write raw <select> or <button> tags when shadcn/ui equivalents exist in @/components/ui.

2. Use smooth HSL colors and vibrant dark mode palettes instead of default browser gray/blue.

3. Ensure responsive layouts using flex and grid containers with explicit mobile breakpoint handling (sm:, md:, lg:).