Guía · 5 minutos

De cero a tu primer efecto.

Esta librería reúne 287 componentes de código abierto de React Bits, Magic UI, Eldora UI y Fancy Components, con demos en vivo, playground y buenas prácticas. Así se instalan y así se usan bien.

1. 01

   Crea el proyecto

   React + TypeScript con Vite. Todos los componentes funcionan también en Next.js.

   Terminal Copiar

   npm create vite@latest mi-web -- --template react-ts
   cd mi-web && npm install

2. 02

   Añade Tailwind CSS

   Los componentes vienen en la variante TypeScript + Tailwind.

   Terminal Copiar

   npm install tailwindcss @tailwindcss/vite
   
   // vite.config.ts
   import tailwindcss from "@tailwindcss/vite";
   export default defineConfig({ plugins: [react(), tailwindcss()] });
   
   /* src/index.css */
   @import "tailwindcss";

3. 03

   Inicializa shadcn (una vez)

   El CLI de shadcn descarga el componente y sus dependencias por ti.

   Terminal Copiar

   npx shadcn@latest init

4. 04

   Añade un efecto

   Copia el comando desde la ficha de cualquier efecto. Por ejemplo, Aurora:

   Terminal Copiar

   npx shadcn@latest add https://reactbits.dev/r/Aurora-TS-TW

5. 05

   Úsalo

   Importa y colócalo en un contenedor con tamaño. Los fondos ocupan el 100 % de su padre.

   Hero.tsx Copiar

   import Aurora from "./components/Aurora/Aurora";
   
   export default function Hero() {
     return (
       <section style={{ position: "relative", height: "100vh" }}>
         <Aurora colorStops={["#8B7BFF", "#3DE7FF", "#2B1CFF"]} />
         <h1 style={{ position: "absolute", inset: 0 }}>Hola</h1>
       </section>
     );
   }