AsheeUI
Installation: TanStack Start

Installation: TanStack Start

Add AsheeUI to a TanStack Start project.

Create a project

If you're starting fresh, scaffold a TanStack Start app:

pnpm dlx create-tanstack-app my-app --template start

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

Install packages

pnpm add asheeui@latest

Configure Tailwind

Add the AsheeUI styles import to your global CSS file:

src/styles.css or app/styles.css

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

Add the provider

Wrap your root route with AsheeUIProvider:

src/routes/__root.tsx

jsx
import { AsheeUIProvider } from "asheeui";
import { HeadContent } from "@tanstack/react-start";


export default function Root() {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body>
        <AsheeUIProvider>{children}</AsheeUIProvider>
      </body>
    </html>
  );
}

Note: If your root file is src/router.tsx instead of __root.tsx, the same wrapping applies. Locate where children is rendered and wrap it with <AsheeUIProvider>.

Framework-specific notes

  • suppressHydrationWarning: Required on the <html> element to prevent hydration mismatches from theme switching.
  • CSS import order: The @import "asheeui/styles" must come after @import "tailwindcss" to ensure Tailwind utilities can override AsheeUI styles when needed.

Verify it works

Render a Button in one of your routes:

jsx
import { Button } from "asheeui";


export default function Home() {
  return <Button>Hello AsheeUI</Button>;
}

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

Previous

← Next.js

Next

Vite →