Vite + React

Learn how to use SmoothUI animated React components in a Vite + React project with Tailwind CSS 4 and Motion.

Last updated: March 7, 2026

Overview

Vite is a fast build tool that provides an excellent developer experience for React projects. SmoothUI components work out of the box with Vite — no special configuration or SSR workarounds needed. This is the simplest way to get started with SmoothUI.

How It Works

Vite + React is a purely client-side setup by default. SmoothUI components render directly in the browser with full access to DOM APIs, so every animation feature — spring physics, gestures, layout animations, and AnimatePresence — works without any additional setup.

Prerequisites

Before getting started, make sure you have the following:

RequirementMinimum VersionPurpose
Node.js18+Runtime
Vite6.0+Build tool
React19.0+UI library
Tailwind CSS4.0+Styling
Motion12.0+Animations (Framer Motion)

Project Setup

Create a New Vite + React Project

If you're starting from scratch, create a new Vite project with the React TypeScript template:

pnpm create vite@latest my-smoothui-app --template react-ts

Then install dependencies:

cd my-smoothui-app && pnpm install

Set Up Tailwind CSS 4

Install Tailwind CSS and the Vite plugin:

pnpm add tailwindcss @tailwindcss/vite

Add the Tailwind CSS Vite plugin to your Vite config:

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Replace the contents of your main CSS file with the Tailwind import:

src/index.css
@import "tailwindcss";

Install Motion

SmoothUI animations are powered by Motion (Framer Motion). Install it as a dependency:

pnpm add motion

Configure Path Aliases

SmoothUI components use the @/ path alias. Configure it in both vite.config.ts and tsconfig.json:

vite.config.ts
import path from "node:path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

TypeScript Path Resolution

Vite uses the resolve.alias config for runtime path resolution, while TypeScript uses paths in tsconfig.app.json for type checking. You need both for everything to work correctly.

Installing SmoothUI Components

Using the SmoothUI CLI

pnpm dlx smoothui-cli@latest add siri-orb

Using the shadcn CLI

pnpm dlx shadcn@latest add @smoothui/siri-orb

shadcn Configuration

If this is your first time using the shadcn CLI in a Vite project, it will prompt you to create a components.json file. Accept the defaults — the CLI auto-detects Vite + React projects and configures paths accordingly.

Using Components

Here is a complete example of using SmoothUI components in your Vite + React app:

src/App.tsx
import { SiriOrb } from "@/components/smoothui/ui/SiriOrb";
import { MagneticButton } from "@/components/smoothui/ui/MagneticButton";

const App = () => {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
      <h1 className="text-4xl font-bold">SmoothUI + Vite</h1>
      <SiriOrb size="200px" />
      <MagneticButton>Get Started</MagneticButton>
    </main>
  );
};

export default App;

Custom Animated Components

If you create custom animated components alongside SmoothUI, follow the same pattern:

src/components/FadeIn.tsx
"use client";

import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";

export type FadeInProps = {
  children: ReactNode;
};

const FadeIn = ({ children }: FadeInProps) => {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={
        shouldReduceMotion
          ? { duration: 0 }
          : { type: "spring", duration: 0.25, bounce: 0.1 }
      }
    >
      {children}
    </motion.div>
  );
};

export default FadeIn;

The 'use client' Directive

The "use client" directive at the top of component files is a Next.js convention. Vite ignores it, so it does no harm — and it keeps your components compatible if you ever migrate to a framework with SSR support.

Troubleshooting

Next Steps

Installation Methods

Learn about all available installation methods including the SmoothUI CLI and shadcn registry.

Browse Components

Explore the complete collection of 50+ animated React components.

Animation Best Practices

Master animation performance, accessibility, and timing guidelines.

Astro Integration

Learn how to use SmoothUI components in Astro with islands architecture.

TanStack Start

Learn how to use SmoothUI animated React components in TanStack Start projects with type-safe routing, streaming SSR, Tailwind CSS 4, and Motion.

React Hooks

SmoothUI React hooks for responsive design and device detection. useIsMobile hook for mobile breakpoint detection with SSR support and real-time updates.

On this page

Installation
Overview
Prerequisites
Project Setup
Create a New Vite + React Project
Set Up Tailwind CSS 4
Install Motion
Configure Path Aliases
Installing SmoothUI Components
Using the SmoothUI CLI
Using the shadcn CLI
Using Components
Custom Animated Components
Troubleshooting
Next Steps