Vibes logo

Favorite

Installation

Run the following command

npx vibes@latest add favorite

Usage

'use client';import { useState } from 'react';import { Favorite } from '@/vibes/soul/primitives/favorite';function Usage() {  const [favorited, setFavorited] = useState(false);  return (        <Favorite checked={favorited} setChecked={setFavorited} />  );}

API Reference

FavoriteProps

PropTypeDefault
checked
boolean
false
setChecked*
(liked: boolean) => void

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --favorite-focus: var(--primary);  --favorite-border: var(--contrast-100);  --favorite-icon: var(--foreground);  --favorite-on-background: var(--contrast-100);  --favorite-off-border: var(--contrast-200);}