Vite

Install and configure vite.

To use @wds-ui in your project, you need to follow the following steps:

Create project

Start by creating a new React project using vite:

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 tailwindcss-animate @tailwindcss/typography @tailwindcss/aspect-ratio && npx tailwindcss init -p

Update your tailwind.config.js file to include the following:


/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./node_modules/@wds-ui/**/*.{js,jsx,ts,tsx,html}",
  ],
   darkMode: "class",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      sc

Style System

Easily improve your app’s look with the @wds-ui design system. It gives you full control over themes, making your app look great and professional.

Add the following Tailwind directives and rules to your CSS (src/index.css)



@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
.prose {
@apply text-foreground;
--tw-prose-body: var(--foreground);
--tw-prose-headings: var(--foreground);

    --tw-prose-links: var(--primary);
    --tw-prose-bold: var(--foreground);
    --tw-prose-counters: var(--

Theming

Create a theme provider (components/theme-provider.jsx)



import { createContext, useContext, useEffect, useState } from "react";

const initialState = {
theme: "system",
setTheme: () => null,
};

const ThemeProviderContext = createContext(initialState);

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "vite-ui-theme

Wrap your root layout

Add the ThemeProvider to your root layout (src/main.jsx)


import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

import { ThemeProvider } from "./components/theme-provider";

ReactDOM.createRoot(document.getElementById("root")).render(

<React.StrictMode>
  <ThemeProvider>
    <App />
  </Th

That’s it

You can now use @wds-ui components in your project.

more react components