Installation: Vite + React

Add AsheeUI to a Vite React project.

Create a project#

If you're starting fresh, scaffold a Vite React app:

If you have an existing project, skip to the next step.

Install packages#

Configure Tailwind#

Add the AsheeUI styles import to your global CSS file:

src/index.css

@import "tailwindcss";
@import "asheeui/styles";

Add the provider#

Wrap your app with AsheeUIProvider:

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AsheeUIProvider } from "asheeui";
import App from "./App";
import "./index.css";

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

Framework-specific notes#

• CSS import order: The @import "asheeui/styles" must come after @import "tailwindcss" to ensure Tailwind utilities can override AsheeUI styles when needed.
• Provider placement: Wrap the provider around your entire app, but inside StrictMode to maintain React's development checks.

Verify it works#

Render a Button in App.tsx:

import { Button } from "asheeui";

function App() {
  return <Button>Hello AsheeUI</Button>;
}

export default App;

You should see a styled button with the default theme. Open your browser's dev tools and check that the asheeui styles are loaded.