canny-ui-react

Typed React component wrappers for the Canny-UI design system.

Built on Radix UI, motion, cmdk, and lucide-react. Zero inline styles — every prop maps to a utility class in canny-ui.

Install

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

Peer deps: react / react-dom >= 18.

Use

import 'canny-ui/dist/canny-ui.min.css';
import {
  Button, ButtonGroup, FAB, IconButton,
  ToggleButton, ToggleButtonGroup, ToggleButtonGroupItem,
  Input, Textarea, Field,
  Select, SelectItem,
  MultiSelect,
  Checkbox, Radio, RadioGroup, Switch,
  Box, Stack, Row, Grid, Container, Divider, Spacer, Text,
  Card, Alert, Avatar, Progress, Skeleton,
  Navbar, Sidebar, Scroll,
} from 'canny-ui-react';

export function SignInCard() {
  return (
    <Container size="sm">
      <Card>
        <Stack gap={4}>
          <Text variant="h2">Welcome back</Text>
          <Field label="Email" required>
            <Input type="email" placeholder="[email protected]" />
          </Field>
          <Field label="Password" required>
            <Input type="password" showPasswordToggle />
          </Field>
          <Row gap={2} justify="end">
            <Button variant="ghost">Forgot?</Button>
            <Button>Sign in</Button>
          </Row>
        </Stack>
      </Card>
    </Container>
  );
}

Highlights

• Buttons — 7 variants × 5 colors × 3 sizes × 3 shapes, click-position ripple powered by motion, attached/spaced groups, FAB with spring entrance, Radix-powered toggles and segmented controls
• Inputs — prefix/suffix slots, clear button, password toggle, validation states wired through <Field>
• Select / MultiSelect — Radix Select + cmdk combobox with chip tokens, groups, descriptions, maxItems cap
• Layout primitives — <Box>, <Stack>, <Row>, <Grid>, <Container> map props to utility classes, polymorphic as
• Typography — <Text variant="h1|h2|...|caption|code|kbd"> picks element + scale together

Links

• Docs: https://github.com/CannyMinds/Canny-UI#readme
• Issues: https://github.com/CannyMinds/Canny-UI/issues
• License: MIT