canny-ui
v3.0.0
Published
Pure CSS foundation for the Canny-UI design system — tokens, layout utilities, and a battery of enterprise components, shipped as one flat stylesheet.
Maintainers
premkumar-cmReadme
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-uiUse
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="[email protected]" />
<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
- Docs: https://github.com/CannyMinds/Canny-UI#readme
- Issues: https://github.com/CannyMinds/Canny-UI/issues
- License: MIT