@conviva/ui

Conviva-branded UI component library based on shadcn/ui with custom Conviva theming and analytics components.

Features

• 🎨 Conviva Branding: All components styled with Conviva's brand colors (#73A600 green)
• ♿ Accessible: WCAG AA compliant with colorblind-friendly semantic colors
• 🎯 Type-safe: Full TypeScript support
• 📦 Tree-shakeable: Import only what you need
• 🔧 Customizable: Built with Tailwind CSS and Radix UI primitives
• 🚀 bolt.new Compatible: Registry support for easy integration

Installation

npm install @conviva/ui

Peer Dependencies

npm install react react-dom tailwindcss

Setup

1. Configure Tailwind CSS

Add the package to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@conviva/ui/dist/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Import Global Styles

Import the Conviva design tokens in your main CSS file or app entry point:

import "@conviva/ui/dist/styles/globals.css";

Or copy the CSS variables from src/styles/globals.css to your own global CSS file.

Components

Button

Conviva-branded button with multiple variants:

import { Button } from "@conviva/ui";

<Button>Primary (Conviva Green)</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Card

Layout component for content containers:

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@conviva/ui";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
  <CardFooter>
    Footer content
  </CardFooter>
</Card>

Input

Form input with Conviva styling:

import { Input } from "@conviva/ui";

<Input type="email" placeholder="Email" />

Design Tokens

Primary Colors

• Primary (Conviva Green): #73A600 - Brand-compliant green
• Secondary: Modern sophisticated blue
• Success: #059669 - Cool green (distinct from primary)
• Warning: #D97706 - Orange (better contrast than yellow)
• Destructive: #DC2626 - Red with good contrast

Utility Classes

// Conviva branding
<div className="conviva-primary">Conviva primary background</div>
<div className="conviva-brand">Conviva brand background</div>
<div className="conviva-modern-blue">Modern blue background</div>

// Accessibility-friendly status indicators
<div className="status-success">Success status</div>
<div className="status-warning">Warning status</div>
<div className="status-error">Error status</div>

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode
npm run dev

# Type checking
npm run typecheck

bolt.new Integration

This package supports bolt.new registry integration. Components can be added to your bolt.new project using the registry files in the registry/ directory.

License

MIT

Contributing

Contributions are welcome! Please ensure all components maintain:

• Conviva brand consistency
• WCAG AA accessibility standards
• TypeScript type safety
• Consistent API with shadcn/ui