Vite

Create a new Vite project

Start by creating a new Vite project.

npm create vite@latest

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer
 
npx tailwindcss init -p

Edit tsconfig.json file

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

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

Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to resolve paths

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

Update vite.config.ts

Install the @types/node package to avoid path resolution errors:

npm i -D @types/node

import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Finally run the cli

npx @venusai/loom-ui init

That's it!!

You can now use the Loom UI components in your project.

 npx @venusai/loom-ui add button

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "@/components/loomui/button"; 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button> {}
    </div>
  );
}