Guía para usar shadcn/ui en proyectos Vite + React + TypeScript + TailwindCSS 4

1. Instalación del proyecto base con React y typescript

CREAR UN PROYECTO DESDE 0 CON VITE

  npm create vite@latest my-app
  -React + typescript + swc
  cd my-app
  npm install

2. Instala TailwindCSS 4

npm install  tailwindcss @tailwindcss/vite

 importamos tailwind en nuestro archivo vite.config.ts
import tailwindcss from "@tailwindcss/vite"
y lo usamos en los plugins
 plugins: [react(), tailwindcss()],


En `src/index.css` agrega:

```css
@import "tailwindcss";

4. Configura tsconfig.json

Asegúrate de tener estas opciones recomendadas:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

en el tsconfig.app.json de vite tambien añadimos en el complierOptions esto

` // ... "baseUrl": ".", "paths": { "@/": [ "./src/" ] } // ...``

instalamos los types de node

npm i -D @types/node

en el vite.config.ts

-importamos el path
``import path from "path"``

Y LUEGO HACEMOS EL RESOLVE DEL ALIAS

import path from "path" import tailwindcss from "@tailwindcss/vite" import react from "@vitejs/plugin-react" import { defineConfig } from "vite"

// https://vite.dev/config/ export default defineConfig({ plugins: [react(), tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, })

INICIALIZAMOS LOS COMPONENTES DE SHADCN

npx shadcn@latest init

• seleccionamos neutral o el color que queramos

instalamos los componentes en nuestro proyecto

npx shadcn@latest add

• seleccionamos todos los componentes o solo el que queramos añadir con espacio -luego con enter confirmamos -nos crea la carpeta components con los componentes que elegimos
  • y ya estarian listos para importarlos donde queramos

5. Importa y usa componentes de shadcn/ui por ejemplo añadiendo un boton

Ejemplo: instalar y usar el botón

npx shadcn-ui@latest add button

En tu componente React:

import { Button } from "@/components/ui/button";

export function App() {
  return (
    <div className="p-4">
      <Button>Hola Shadcn</Button>
    </div>
  );
}

6. Personalización

Puedes editar los componentes en components/ui/ y usar las utilidades de Tailwind para a tu gusto.

7. Recursos

• Documentación oficial shadcn/ui
• TailwindCSS 4 Docs

DESCARGAR EL CODIGO O CLONAR EL REPOSITORIO

• ENTRA EN EL REPOSITORIO
• BUSCA LA PESTAÑA O BOTON CODE
• DENTRO DE CODE BUSCAR DOWNLOAD ZIP Y DESCOMPRIMELO EN TU PC Y YA TENDRAS EL CODIGO
• EN EL TERMINAL NAVEGA AL DIRECTORIO DONDE LO DESCOMPRIMISTE -POR EJEMPLO cd shadcn_guide npm install para instalar las dependencias npm run dev para ejecutar el proyecto

SI TE SIRVE DE ALGO GENIAL! DEJAME ESTRELLAS :)

SIGUEME EN LINKEDIN Y RECOMIENDA ESTA PEQUEÑA GUIA PARA QUE PUEDA LLEGAR A MAS PERSONAS QUE LA NECESITEN

• [https://www.linkedin.com/in/jose-sanchez-8a11b0314/]