Icon Block

Installation

Run the following command

npx vibes@latest add icon-block

Usage

import { IconBlock } from '@/vibes/soul/sections/icon-block';function Usage() {  return (      <IconBlock list={list} />  );}const list= [  {    icon: 'truck',    title: 'Free Shipping',    description: 'On orders over $250',  },  {    icon: 'rotate-ccw',    title: 'Free Returns',    description: 'On full priced items only',  },  {    icon: 'star',    title: '2 Year Warranty',    description: 'As standard',  },  {    icon: 'truck',    title: 'Free Shipping',    description: 'On orders over $250',  },];

API Reference

IconBlockProps

PropTypeDefault
list*
ListItem[]

ListItem

PropTypeDefault
icon*
IconName
title*
string
description*
string

Refer to the Lucide docs for a full list of available icons.

CSS Variables

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

:root {  --icon-block-background: var(--background);  --icon-block-border: var(--contrast-100);  --icon-block-font-family: var(--font-family-body);  --icon-block-title: var(--foreground);  --icon-block-description: var(--contrast-400);  --icon-block-icon: var(--foreground);}