Vibes logo

Address List

Installation

Run the following command

npx vibes@latest add address-list-section

Usage

import { AddressListSection } from '@/vibes/soul/sections/address-list-section';function Usage() {  return (      <AddressListSection          addressAction={addressAction}          addresses={addresses}          defaultAddress={{ id: '1' }}          fields={fields}      />  );}

API Reference

See sections/address-list-section/index.tsx for details.

CSS Variables

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

:root {  --address-list-section-border: var(--contrast-200);  --address-list-section-title-font-family: var(--font-family-heading);  --address-list-section-content-font-family: var(--font-family-body);  --address-list-section-title: var(--foreground);  --address-list-section-name: var(--foreground);  --address-list-section-info: var(--contrast-500);}