# Sketchcn

> Add a human touch to your components. A shadcn/ui components library with hand-drawn styles for React — copy-paste RoughJS sketched Base UI primitives straight into your app with the shadcn CLI.

## Components

- [Sketch Provider](https://sketchcn.chuwii.com/components/sketch-provider/md): The RoughJS provider and hooks every Sketchcn component draws through.
- [Button](https://sketchcn.chuwii.com/components/button/md): A Base UI button with hand-drawn style in shadcn conventions.
- [Card](https://sketchcn.chuwii.com/components/card/md): A card container with hand-drawn style in shadcn conventions.
- [Avatar](https://sketchcn.chuwii.com/components/avatar/md): A Base UI avatar clipped inside its hand-drawn outline.
- [Alert](https://sketchcn.chuwii.com/components/alert/md): An alert callout with hand-drawn style in shadcn conventions.
- [Dialog](https://sketchcn.chuwii.com/components/dialog/md): A Base UI dialog with hand-drawn style in shadcn conventions.
- [Sheet](https://sketchcn.chuwii.com/components/sheet/md): A Base UI sheet with hand-drawn style in shadcn conventions.
- [Separator](https://sketchcn.chuwii.com/components/separator/md): A Base UI separator with hand-drawn style in shadcn conventions.
- [Sidebar](https://sketchcn.chuwii.com/components/sidebar/md): A hand-drawn navigation panel that floats inside the page layout.
- [Skeleton](https://sketchcn.chuwii.com/components/skeleton/md): A hand-drawn loading placeholder that animates its hachure shading.
- [Toast](https://sketchcn.chuwii.com/components/toast/md): A Base UI toast with hand-drawn style in shadcn conventions.
- [Tooltip](https://sketchcn.chuwii.com/components/tooltip/md): A Base UI tooltip with hand-drawn style in shadcn conventions.
- [Toggle](https://sketchcn.chuwii.com/components/toggle/md): A pressable Base UI toggle with hand-drawn style in shadcn conventions.
- [Switch](https://sketchcn.chuwii.com/components/switch/md): A Base UI switch with hand-drawn style in shadcn conventions.
- [Checkbox](https://sketchcn.chuwii.com/components/checkbox/md): A Base UI checkbox with a hand-drawn box and a seeded, wobbling Matita tick.
- [Tabs](https://sketchcn.chuwii.com/components/tabs/md): Base UI tabs with hand-drawn style in shadcn conventions.
- [Native Select](https://sketchcn.chuwii.com/components/native-select/md): A native select with hand-drawn style in shadcn conventions.
- [Input](https://sketchcn.chuwii.com/components/input/md): A Base UI input with hand-drawn style in shadcn conventions.
- [Textarea](https://sketchcn.chuwii.com/components/textarea/md): A textarea with hand-drawn style in shadcn conventions.