Price Label
Installation
Run the following command
npx vibes@latest add price-labelUsage
import { PriceLabel } from '@/vibes/soul/primitives/price-label';function Usage() { return ( <PriceLabel price="100" /> );}API Reference
PriceLabelProps
| Prop | Type | Default |
|---|---|---|
className | string | |
colorScheme | 'light' | 'dark' | 'light' |
price* | string | PriceRange | PriceSale |
PriceRange
| Prop | Type | Default |
|---|---|---|
type* | 'range' | |
minValue* | string | |
maxValue* | string |
PriceSale
| Prop | Type | Default |
|---|---|---|
type* | 'sale' | |
previousValue* | string | |
currentValue* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --price-light-text: var(--foreground); --price-light-sale-text: var(--foreground); --price-dark-text: var(--background); --price-dark-sale-text: var(--background);}