Sidera/Getting Started/Installation

Installation

Sidera isn't an npm package — like shadcn/ui, components live in your own source tree so you can read, adapt and own every line. Bring in the pieces you need.

ApproachCopy, don't install

StackNext.js + Tailwind v4

01 —Dependencies

Sidera components are built on a small, focused set of primitives:

bash

pnpm add @base-ui-components/react class-variance-authority clsx tailwind-merge lucide-react next-themes

02 —Token layer

Copy the token block from Colors into your globals.css — it defines the light (default) and dark theme as CSS custom properties, plus the Tailwind @theme inline map so utilities like bg-primary and text-muted work.

css

:root {
  --background: var(--neutral-50);
  --foreground: var(--neutral-950);
  --primary: var(--brand-500);
  /* …full ramp on the Colors page */
}
:root[data-theme="dark"] {
  --background: var(--neutral-950);
  --foreground: var(--neutral-50);
}

03 —Theme provider

Wrap your root layout so the light/dark toggle can persist a choice:

tsx

import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="data-theme" defaultTheme="dark">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

04 —Add a component

Open any component page — e.g. Button — copy its source into src/components/ui/, and import it directly. Nothing to version, nothing to update; the code is yours.

tsx

import { Button } from "@/components/ui/button";

<Button variant="primary">Save changes</Button>

← Previous

Principles

Colors