@wearenotch/ui-chakra
v0.3.0
Published
Chakra UI v3 components wrapped with @wearenotch/tokens theme
Readme
@wearenotch/ui-chakra
Chakra UI v3 components wrapped with the @wearenotch/tokens theme. Use this package when you want Chakra's component depth backed by the Notch design tokens.
Install
pnpm add @wearenotch/ui-chakra @wearenotch/tokens @chakra-ui/react @emotion/react
# or
npm install @wearenotch/ui-chakra @wearenotch/tokens @chakra-ui/react @emotion/reactreact and react-dom (>=18) are peer dependencies.
Usage
Import the tokens stylesheet once, then wrap your app in NotchChakraProvider:
// app entry (e.g. src/main.tsx)
import '@wearenotch/tokens/css';
import { NotchChakraProvider } from '@wearenotch/ui-chakra';
export function Root() {
return (
<NotchChakraProvider>
<App />
</NotchChakraProvider>
);
}import { Button, FormField, Input } from '@wearenotch/ui-chakra';
export function SignIn() {
return (
<form>
<FormField label="Email">
<Input type="email" />
</FormField>
<Button variant="primary" type="submit">Sign in</Button>
</form>
);
}Dark mode
NotchChakraProvider syncs data-theme="dark" on <html> with the user's OS preference. Override it imperatively:
document.documentElement.setAttribute('data-theme', 'dark');The Chakra theme reads from the same token CSS variables as @wearenotch/ui-react, so dark mode is consistent across both libraries.
Components
22 components — thin wrappers and slot-recipe compositions over Chakra v3:
Primitives Button, DangerButton, IconButton, Badge, Tag, Avatar (+ AvatarGroup), Spinner, Skeleton, Tooltip Forms Input, Textarea, Select, MultiSelect, Checkbox, Switch, FormField Feedback Alert, Notification, Progress, Slider Navigation Tabs, Accordion, Breadcrumbs, Pagination Layout Card, Modal Data display Table
Coverage gap: Carousel, DatePicker, FileUpload, RichTextEditor, Chart, Stepper, EmptyState, List are intentionally not included — Chakra v3 doesn't ship primitives for these. Use
@wearenotch/ui-reactif you need them.
Conventions
- All components extend the underlying Chakra props — anything Chakra accepts, the wrapper accepts.
- Default
colorPaletteis locked tobrand, mapped from@wearenotch/tokens. - Sub-components (
Modal.Body,Card.Header, etc.) follow Chakra v3's compound pattern.
Scripts
pnpm --filter @wearenotch/ui-chakra build # build dist/
pnpm --filter @wearenotch/ui-chakra test # run vitest
pnpm --filter @wearenotch/ui-chakra type-check # tsc --noEmitLicense
MIT