npm.io
6.0.0 • Published 2d ago

canny-ui

Licence
MIT
Version
6.0.0
Deps
0
Size
321 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

canny-ui

Pure-CSS foundation for the Canny-UI design system — tokens, layout utilities, and a battery of enterprise components, all shipped as one flat stylesheet.

Install

pnpm add canny-ui
# or
npm install canny-ui

Use

Import the compiled stylesheet once at the root of your app:

import 'canny-ui/dist/canny-ui.min.css';

Every component then works from a single class API — no framework required:

<button class="btn solid primary">Save changes</button>
<input class="input" placeholder="name@company.com" />
<div class="card">Elevated surface</div>

Scope typography and themes by wrapping your tree in .cny-app:

<body class="cny-app">
  <!-- your app -->
</body>

What's inside

  • Tokens — Zinc / Indigo palette, 4pt spacing scale, radii, shadows, motion tokens, all as CSS custom properties
  • Base — reset + typography scoped to .cny-app
  • Components — Button, Input, Card, Alert, Form controls, Table (resizable), Avatar, Progress, Skeleton, Tooltip, Navbar, Sidebar, Scrollbar, Text, Field, Select, MultiSelect-chip styling
  • Utilities — spacing (p-*, m-*, gap-*), flex / grid / align / justify, Container / Divider / Spacer
  • Dark mode — opt-in via .cny-dark

For React users

There's also canny-ui-react — thin typed React wrappers over the same class API, with Radix + motion + cmdk under the hood for accessibility and interactions.

Links