Avnu UI

A shared component and design-token library used across Avnu web & mobile apps.

Features

• Refined colour palette (sage, terracotta, peach, greige, slate) with dark-mode overrides. • Accessible, themed components built with React, Chakra UI, and Tailwind CSS utility classes. • Storybook docs and Chromatic visual regression.

Supported components to date:

• Button
• Badge
• Card
• Heading
• Text
• Input
• Select
• Avatar

Installation

npm install @avnu/ui @chakra-ui/react @emotion/react @emotion/styled framer-motion tailwindcss

Peer dependencies are listed explicitly above; make sure they are installed in your consuming app.

Usage

import { Button, Card } from '@avnu/ui';
import '@avnu/ui/dist/style.css'; // if you export global styles

export default function Example() {
  return (
    <Card>
      <Heading as="h2">Hello</Heading>
      <Text>This is Avnu UI</Text>
      <Button variant="primary">Click me</Button>
    </Card>
  );
}

Storybook

Run the component explorer locally:

npm run storybook -w packages/ui

Or view the latest published build on Chromatic: https://6871bc5d92ec875b3745d0d0-wsqhzfwrff.chromatic.com/

Development

# inside monorepo root
npm run dev -w packages/ui

Pending: Dark-mode component theming

NOTE for UI/UX engineer: The design-token infrastructure and global CSS variables are wired up, but many components still reference fixed colours via Tailwind classes or default Chakra schemes.

Outstanding tasks

1. Refactor Button, Badge, Text, and any remaining components to read colours from CSS variables / Chakra semanticTokens.
2. Search codebase for hard-coded hex values and replace with token utilities (e.g. bg-[--avnu-sage-700]).
3. Add Storybook stories that explicitly demo both light and dark modes for quick QA.
4. Write Jest/Playwright snapshot tests to prevent regressions.

Once complete, update this note and remove the TODO.

License

MIT © Avnu Inc.