Installation

Solar UI is built on shadcn/ui, Tailwind CSS v4, and Next.js 14+. Components are distributed via a locally hosted shadcn registry.

terminal


npx create-next-app@latest my-project --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --yes
cd my-project

npm does not allow uppercase letters in package names. Use lowercase (e.g. my-project, not MyProject).

terminal


npx shadcn@latest init --defaults

This generates components.json and installs the base files (button.tsx, utils.ts, etc.).

terminal


npx shadcn@latest add https://solar-ui.com/r/solar-theme.json

This creates src/app/solar-theme.css and sets the base-nova style in components.json.

Open src/app/globals.css and add these two lines at the very top, before @import "tailwindcss":

src/app/globals.css


@import "./solar-theme.css";
@import "tailwindcss";

So that shadcn knows where to resolve Solar UI components, add this entry to components.json:

components.json


{
  "registries": {
    "solar": {
      "url": "https://solar-ui.com/r"
    }
  }
}

Without this configuration, shadcn looks for Solar UI dependencies on the official registry and returns a solar-theme.json was not found error.

terminal


npx shadcn@latest add https://solar-ui.com/r/button.json

Replace button.json with the component of your choice. Components are installed in src/components/ui/.

src/app/page.tsx


import { Button } from '@/components/ui/button'
 
export default function Page() {
  return <Button>Click me</Button>
}