Consistint - Badge Generator


A lightweight React component library for creating beautiful, auto-colored badges with consistent color generation based on text content.

🎯 Live Demo & Playground →

✨ Features

- 🎨 Pastel Color Palette - Beautiful, consistent pastel colors from text
- 🎭 Two Variants - Filled (with background) and Outline styles
- 🌓 Dark Mode Support - Built-in light/dark mode with optimized colors
- 🔤 Customizable Font - Use any font family, defaults to system fonts
- 🎮 Interactive Playground - Fine-tune colors with our live editor
- 🔧 TypeScript Support - Full type safety and IntelliSense support
- ⚡ Lightweight - Minimal dependencies, optimized bundle size
- 🎯 Consistent - Same text always generates the same color

📦 Installation

``bash
npm install consistint


or

yarn add consistint

or

pnpm add consistint
`

🚀 Quick Start

`tsx
import { Badge } from 'consistint';

function App() {
return (



);
}
`

$3

You can customize how colors are generated using the colorParams prop. This allows you to adjust the saturation and lightness values used in the HSL color generation:

`tsx
import { Badge, ColorParameters } from 'consistint';

function App() {
// Custom pastel parameters
const customColorParams: ColorParameters = {
light: {
backgroundSaturation: 0.3, // Softer background (default: 0.4)
backgroundLightness: 0.96, // Lighter background (default: 0.94)
borderSaturation: 0.4, // Softer border (default: 0.5)
borderLightness: 0.88, // Lighter border (default: 0.85)
textSaturation: 0.8, // Less saturated text (default: 0.9)
textLightness: 0.3 // Lighter text (default: 0.35)
},
dark: {
backgroundSaturation: 0.25, // Adjust dark mode too
backgroundLightness: 0.12,
borderSaturation: 0.35,
borderLightness: 0.22,
textSaturation: 0.45,
textLightness: 0.8
}
};

return (



);
}
`

You can also use the Color Playground at https://propulsion-ai.github.io/badges/ to experiment with different values and find your perfect color scheme.

📖 Documentation

$3

The main component for rendering badges with pastel colors.

#### Default Styles
- Padding: 2px 5px
- Border Radius: 5px
- Border Width: 0.5px (0 for ghost variant)
- Typography: Inherits from parent (font, size, weight, line-height)

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| text | string | required | The text to display in the badge |
| variant | 'filled' \| 'outline' \| 'ghost' | 'filled' | Visual style variant (ghost = no border) |
| mode | 'light' \| 'dark' | 'light' | Color mode for the badge |
| font | string | Inherit | Font family (inherits from parent by default) |
| borderWidth | number | 0.5 | Border width in pixels (0 for no border) |
| className | string | undefined | Additional CSS classes |
| onClick | function | undefined | Click handler for interactive badges |
| onRemove | function | undefined | Callback when close button is clicked |
| closeIcon | React.ReactNode | '×' | Custom close icon (use currentColor for SVGs to inherit badge color) |
| closeIconSize | number | 14 | Size of the close icon in pixels |

#### Examples

`tsx
// Basic usage


// With variant


// Dark mode


// Ghost (no border)


// Custom font


// Removable badge with default X icon
console.log('removed')} />

// Removable badge with custom emoji
text="Tag"
onRemove={() => console.log('removed')}
closeIcon="🗑️"
closeIconSize={12}
/>

// Removable badge with custom SVG icon (use currentColor to inherit badge color)
text="Tag"
onRemove={() => console.log('removed')}
closeIcon={



}
/>

// With icon library (e.g., Phosphor Icons - automatically inherits color)
import { X } from '@phosphor-icons/react';

text="Tag"
onRemove={() => console.log('removed')}
closeIcon={}
closeIconSize={16}
/>
`

$3

#### generateBadgeColorPairs(text: string)

Generate color pairs for custom badge implementations.

`ts
import { generateBadgeColorPairs } from 'consistint';

const colors = generateBadgeColorPairs('example');
// Returns: { backgroundColor: '#...', textColor: '#...' }
`

#### generateBadgeColors(text, mode)

Generate complete color scheme with pastel colors.

`ts
import { generateBadgeColors } from 'consistint';

const colors = generateBadgeColors('example', 'light');
// Returns: { backgroundColor: '#...', borderColor: '#...', textColor: '#...' }
`

🎨 Variants

$3

Full background color with border and contrasting text.

`tsx

`

$3

Transparent background with colored border and text.

`tsx

`

$3

Transparent background with no border.

`tsx

`

🛠️ Development

$3

- Node.js 18+
- npm or yarn

$3

`bash


Clone the repository

git clone https://github.com/propulsion-ai/badges.git
cd badges

Install dependencies

npm install

Run development server

npm run dev

Run tests

npm test

Build the library

npm run build

Build demo site

npm run build:demo
`

$3

`
badges/
├── src/
│ ├── components/ # React components
│ ├── utils/ # Utility functions
│ └── types/ # TypeScript definitions
├── tests/ # Test files
├── examples/ # Usage examples
├── demo/ # Demo application
└── docs/ # Documentation
`

🧪 Testing

`bash


Run all tests

npm test

Run tests in watch mode

npm run test:watch

Generate coverage report

npm run test:coverage
`

🚢 Deployment

The demo site is automatically deployed to GitHub Pages when changes are pushed to the main branch.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Credits

Developed with ❤️ by Propulsion AI

Co-authored by Claude - AI assistant that helped architect, implement, and refine the library's pastel color generation system and overall structure.

🎨 Color Playground

Visit our interactive Color Playground to customize the pastel color parameters to your liking. The playground allows you to:

- Adjust saturation and lightness for backgrounds, borders, and text
- Preview changes in real-time with multiple sample badges
- Toggle between light and dark modes
- Export your custom color settings for use in your own projects

$3

Light Mode:
- Background: 100% saturation, 95% lightness
- Border: 50% saturation, 85% lightness
- Text: 90% saturation, 33% lightness

Dark Mode:
- Background: 100% saturation, 17% lightness
- Border: 80% saturation, 29% lightness
- Text: 70% saturation, 84% lightness

🔗 Links

- Demo & Color Playground
- npm Package
- GitHub Repository
- Issue Tracker

📈 Stats

!npm downloads
!bundle size
!GitHub stars

---

Made with ⚡ by Propulsion AI