Getting started

Installation

StacklyUI works two ways: install the package for quick updates, or copy the source into your project with the registry CLI and own every line.

Option A — Registry CLI (copy-paste)

The CLI copies a component's source straight into your project, alongside any hooks and utilities it needs. You own the code and can edit it freely. This is the recommended path if you want full control.

First, register the @stacklyui namespace once in your components.json so you can add any component by name:

components.json

{
  "registries": {
    "@stacklyui": "https://dev.stacklyui.in/r/{name}.json"
  }
}

Then add components with the namespaced shorthand:

$pnpm dlx shadcn@latest add @stacklyui/spotlight-card

Option B — npm package

Prefer a managed dependency? Install the package and import components directly. You'll also need the peer dependencies: react, react-dom, and motion.

$pnpm add @stacklyui/ui motion

Then import the components and the stylesheet once:

app/page.tsx

import { AuroraBackground, MagneticButton } from "@stacklyui/ui";
import "@stacklyui/ui/styles.css";

export default function Page() {
  return (
    <AuroraBackground className="min-h-dvh">
      <MagneticButton>Get started</MagneticButton>
    </AuroraBackground>
  );
}

Enable theming

Wrap your app in ThemeProvider and add ThemeScript to your document head to switch between light and dark with no flash on load.

app/layout.tsx

import { ThemeProvider, ThemeScript } from "@stacklyui/ui";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        {/* Sets the theme class before paint — no flash */}
        <ThemeScript />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}