Installation

Prerequisites

• Node.js 20+
• A React (or HTML/CSS) app that can import CSS variables
• Optional: Tailwind CSS alongside Scorton UI tokens

Add the package

Package name: @scorton/ui

npm install ../scortonui
# or path / workspace alias to this folder

Or copy src/components and css into your app (recommended shadcn ownership model).

Import styles

import "@scorton/ui/css";

Tokens only:

import "@scorton/ui/css/tokens";
import "@scorton/ui/css/components";

Set the theme root

<html data-theme="dark">
  <!-- Scorton UI default -->
</html>

Use a component

import { Button, Card, ThemeProvider } from "@scorton/ui";

export function HeroCta() {
  return (
    <ThemeProvider theme="dark">
      <Card interactive>
        <Button size="lg">Start Your CyberScor Assessment</Button>
      </Card>
    </ThemeProvider>
  );
}

components.json

{
  "style": "scorton",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

See the root components.json for the canonical Scorton UI alias map.