Consistent tints for your badges - A lightweight React component library for creating beautiful, auto-colored badges with consistent pastel colors
npm install consistint




A lightweight React component library for creating beautiful, auto-colored badges with consistent color generation based on text content.
๐ฏ Live Demo & Playground โ
- ๐จ 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
``bash`
npm install consistintor
yarn add consistintor
pnpm add consistint
`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 (
{/ Use custom color parameters for all badges /}
);
}
`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 badgesInstall dependencies
npm installRun development server
npm run devRun tests
npm testBuild the library
npm run buildBuild 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 testRun tests in watch mode
npm run test:watchGenerate 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`)This project is licensed under the MIT License - see the LICENSE file for details.
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.
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
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
- Demo & Color Playground
- npm Package
- GitHub Repository
- Issue Tracker
!npm downloads
!bundle size
!GitHub stars
---
Made with โก by Propulsion AI