Stardew UI

Stardew UI uses shadcn/ui underhood

Installation

Install the library

pnpm add stardewui

Install the peer dependencies

pnpm add autoprefixer class-variance-authority clsx lucide-react postcss react react-dom tailwind-merge tailwindcss tailwindcss-animate

Track the library components in order to compile their styles, modify tailwind.config.js as follows

const { stardew } = require("stardewui/plugin");

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class"],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/stardewui/dist/**/*.{js,ts,jsx,tsx}", // Add this path
  ],
  plugins: [stardew, require("tailwindcss-animate")], // Use the stardew Tailwind plugin and tailwindcss-animate
};

The stardew Tailwind plugin configure the tokens used by shadcn/ui, this plugin requires the theme as CSS variables so import the styles at the root of the application

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "stardewui/theme.css"; // Import the theme
import { App } from "./app.tsx";
import "./style.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);