Installation
Run the following command
npx vibes@latest add discount
Usage
'use client';import { Discount } from '@/vibes/soul/sections/discount';function Usage() { return ( <Discount backgroundImage="https://storage.googleapis.com/s.mkswft.com/RmlsZTpiMjMxMjAyZS05MDFjLTRjY2YtYWNiYS02ZmY1ZWQxZTVlZGQ=/electric-discount.jpeg" discounts={[ { label: '20% off', code: 'TAKE20', }, { label: '5% off', code: 'TAKE5', }, ]} id="example-discount" /> );}
API Reference
DiscountProps
| Prop | Type | Default |
|---|
id*
| string
| |
backgroundImage*
| string
| |
discounts*
| | |
onDismiss
| () => void
| |
DiscountType
| Prop | Type | Default |
|---|
label
| string
| |
code
| string
| |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --discount-focus: var(--primary); --discount-font-family: var(--font-family-body); --discount-background: var(--primary-shadow); --discount-image-background: var(--contrast-100); --discount-text: var(--background); --discount-spinner-background: var(--background); --discount-spinner-text: var(--foreground); --discount-close-background: transparent; --discount-close-icon: var(--foreground); --discount-close-background-hover: color-mix(in oklab, var(--background) 40%, transparent);}
