Installation

Crystal is distributed as workspace packages in the ArtasceOne monorepo. It consists of three packages:

Install Dependencies

From the ArtasceOne monorepo root:

# Add to your app's package.json
pnpm --filter YOUR_APP add @artasce/crystal-tokens@workspace:* @artasce/crystal-ui@workspace:*

Or edit your package.json directly:

{
  "dependencies": {
    "@artasce/crystal-tokens": "workspace:*",
    "@artasce/crystal-ui": "workspace:*"
  }
}

Then run pnpm install from the repo root.

Required Peer Dependencies

Crystal UI requires React 18+ and Next.js 14+ (for server components):

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0",
    "next": "^14.0.0 || ^15.0.0 || ^16.0.0"
  }
}

Optional Dependencies

For animations and icons:

pnpm --filter YOUR_APP add gsap @gsap/react lucide-react

Build the Tokens

If you're modifying tokens, build them first:

pnpm --filter @artasce/crystal-tokens build

This runs Style Dictionary v4 and outputs CSS custom properties to dist/css/.

Next Steps

Once installed, follow the Quick Start guide to set up CrystalProvider and start using components.