Installation

Sprõut requires React 19 and Tailwind CSS 4. Sidebar comes from npm; your app builds their styles.

Local preview

The first release is not published yet. To try this checkout, install dependencies at the repository root and run pnpm dev.

Package setup

After the first npm release, add the package to your React application.

Terminal
pnpm add @tulipfarm/sprout

Import Sprõut after Tailwind in your existing stylesheet. Source registration is included: no JavaScript theme config or extra reset is needed.

app.cssCSS
@import "tailwindcss";
@import "@tulipfarm/sprout/styles.css";

App.tsxTSX
import {
  Sidebar,
  SidebarProvider,
  SidebarTrigger,
} from "@tulipfarm/sprout/sidebar";

<SidebarProvider className="min-h-dvh">
  <Sidebar label="Main navigation">
    {/* Compose your navigation here. */}
  </Sidebar>
  <main><SidebarTrigger /></main>
</SidebarProvider>

Install through shadcn

The bootstrap registry item installs the npm dependency and adds the CSS import. It does not copy or overwrite your component files. The hosted command becomes available after publication and deployment.

Inspect the registry item. The install contract is exercised with shadcn 4.22.0 and Tailwind 4.3.3 against a packed local package.

Existing shadcn applications

Keep your existing imports and theme. Sprõut uses its own --sprout-* variables and semantic utilities. No shared --primary or --background variables are replaced.

Tailwind utility prefixes are not supported in this preview. Sprõut and shadcn do not promise identical props. Use aliases if both libraries export a component with the same name.