Calarys
Designed with intention.
Calarys is a small, curated library of premium, interaction-focused React components, paired with a documentation site where every component can be explored, tuned live and copied as code.
Each component is built around one carefully crafted interaction — a button that is pulled toward the cursor, a card lit by a spotlight that follows the pointer, a toggle with a tactile, springy thumb — and exposes its look and feel through a small set of typed props.
Components
| Component | Category | Description |
|---|
MagneticButton | buttons | A button that is magnetically attracted to the cursor within a configurable radius. |
SpotlightCard | cards | A card with a soft radial spotlight that follows the pointer. |
Toggle | controls | An accessible switch (native checkbox) with smooth transitions, three sizes and custom colors. |
See packages/ui/README.md for the full props reference.
Tech stack
- pnpm workspaces monorepo (
[email protected])
- React 19 + TypeScript 5 (strict)
- CSS Modules + CSS custom properties for component styling
- Next.js 16 (App Router) for the docs site, with Tailwind CSS v4 and Lenis smooth scrolling
Repository layout
calarys/
├── apps/
│ └── docs/ # @calarys/docs — Next.js site: landing, component explorer, live playground
├── packages/
│ └── ui/ # @calarys/ui — the component library (source-only TypeScript package)
├── package.json # root scripts
└── pnpm-workspace.yaml
Getting started
Requirements: Node.js 20+ and pnpm 10 (corepack enable picks up the pinned version).
pnpm install
pnpm dev # start the docs site at http://localhost:3000
| Script | What it does |
|---|
pnpm dev | Runs the docs site in development mode. |
pnpm build | Builds the docs site for production. |
pnpm lint | Lints every workspace package with ESLint. |
pnpm typecheck | Type-checks every workspace package. |
pnpm test | Runs the Vitest suites of every workspace package. |
Using @calarys/ui
The package currently lives inside this workspace and is consumed as source (no build step). Add it as a workspace dependency, import the shared tokens once, then use the components:
// app/layout.tsx
import "@calarys/ui/styles.css";
import { MagneticButton, SpotlightCard, Toggle } from "@calarys/ui";
<MagneticButton radius={140} strength={0.35}>Get started</MagneticButton>
<SpotlightCard spotlightColor="#fff3c4" shadow>
<h3>Timeless design</h3>
</SpotlightCard>
<Toggle size="lg" defaultChecked onChange={(checked) => console.log(checked)} />
Documentation
