Tauri + React + ShadcnUI

This is a simple guide to help you setup Tauri with React js and Shadcn UI.

First of all, I will be using npm as my package manager but feel free to use whatever you prefer. Find more info here.

Let's get started...

Run this command to initialize your tauri app, select React (vite) as your frontend and choose TypeScript as your flavor.

npm create tauri-app@latest

You should see a vite.config.ts file similar to this one, This is a a little bit different from the one generated when using vite alone with the react preset but it is ok... we are just trying to get things working here.

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

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  // ...
  // 3. Custom alias defined in ts.config.json
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

I've setup an import alias in tsconfig.json that matches vite.config.ts

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

Now let's setup tailwindcss, we will be using tailwind / posts setup guide

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

You can also follow the official shadcn-ui vite setup guide

Now lets initialize shadcn-ui...

npx shadcn-ui@latest init

Be careful to select Typescript, alias as @ and not use server components. This will generate component.json file

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/styles.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Now you can add components from shadcn-ui and also use tailwinds classes in our components!

You can see an example here: @danimydev/markdown-editor