v2.8.0

Card

Render the content within a card component comprising a header, body, and footer section.
GitHub
Demo
Nuxt UI

Usage

Use the header, default and footer slots to add content to the Card.

<template>
  <B24Card>
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </B24Card>
</template>

Title

Use the title prop to set the title of the Card's header.

Card with title
<template>
  <B24Card title="Card with title" class="w-full">
    <Placeholder class="h-32" />
  </B24Card>
</template>

Description

Use the description prop to set the description of the Card's header.

Card with description
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<template>
  <B24Card
    title="Card with description"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    class="w-full"
  >
    <Placeholder class="h-32" />
  </B24Card>
</template>

Variant

Use the variant prop to change the variant of the Card.

<template>
  <B24Card variant="outline">
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </B24Card>
</template>

Examples

Sales dynamics widget

Real-world example: a CRM dashboard widget assembled from Card (with the filled-copilot variant for the purple accent), Button, Tooltip and a small CSS grid for the metrics rows. The highlighted "Conversion" row is just a translucent overlay with bg-white/15 over the same card.

Repeat sales dynamics
Total deals created: 10
Today: 10 deals
CountAmount
Active deals10$46,500
Won deals1$10,000
Conversion 10%17.7%
<script setup lang="ts">
import RepeatIcon from '@bitrix24/b24icons-vue/outline/RepeatIcon'
import SettingsIcon from '@bitrix24/b24icons-vue/outline/SettingsIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import Info1Icon from '@bitrix24/b24icons-vue/main/Info1Icon'

const rows = [
  { label: 'Active deals', count: 10, amount: '$46,500' },
  { label: 'Won deals', count: 1, amount: '$10,000' }
]

const highlight = {
  label: 'Conversion',
  count: '10%',
  amount: '17.7%',
  info: 'Today vs. last 30 days'
}
</script>

<template>
  <B24Card
    variant="filled-copilot"
    class="max-w-md"
    :b24ui="{
      root: 'edge-dark rounded-2xl bg-[radial-gradient(110.42%_110.42%_at_-10.42%_31.25%,var(--ui-color-copilot-bg-content-3)_0%,var(--ui-color-copilot-bg-content-2)_58.65%,var(--ui-color-copilot-bg-content-1)_100%)]'
    }"
  >
    <template #header>
      <div class="flex items-start justify-between gap-4">
        <div class="min-w-0">
          <div class="text-(length:--ui-font-size-2xl)/[normal] font-(--ui-font-weight-semi-bold)">
            Repeat sales dynamics
          </div>
          <div class="text-(length:--ui-font-size-md) opacity-90">
            Total deals created: 10
          </div>
          <div class="text-(length:--ui-font-size-md) opacity-90">
            Today: 10 deals
          </div>
        </div>

        <B24Button
          rounded
          color="air-secondary-accent"
          label="Last 30 days"
          :trailing-icon="RepeatIcon"
        />
      </div>
    </template>

    <div class="flex flex-col gap-2">
      <div class="grid grid-cols-[1fr_auto_auto] gap-x-6 px-3 py-1 text-(length:--ui-font-size-sm) opacity-80">
        <span />
        <span class="text-right min-w-20">Count</span>
        <span class="text-right min-w-24">Amount</span>
      </div>

      <div
        v-for="row in rows"
        :key="row.label"
        class="grid grid-cols-[1fr_auto_auto] gap-x-6 items-center px-3 py-3 rounded-xl bg-white/5"
      >
        <span class="font-(--ui-font-weight-medium)">{{ row.label }}</span>
        <span class="text-right min-w-20">{{ row.count }}</span>
        <span class="text-right min-w-24">{{ row.amount }}</span>
      </div>

      <div class="style-filled-boost grid grid-cols-[1fr_auto_auto] gap-x-6 items-center px-3 py-3 rounded-xl text-(--ui-color-design-filled-boost-content)">
        <span class="font-(--ui-font-weight-medium) inline-flex items-center gap-1">
          {{ highlight.label }}
          <B24Tooltip :text="highlight.info">
            <Info1Icon class="size-4 opacity-80" />
          </B24Tooltip>
        </span>
        <span class="text-right min-w-20">{{ highlight.count }}</span>
        <span class="text-right min-w-24 font-(--ui-font-weight-semi-bold)">{{ highlight.amount }}</span>
      </div>
    </div>

    <template #footer>
      <div class="flex items-center justify-between gap-4">
        <B24Button color="air-secondary-accent" :icon="SettingsIcon" label="Configure" />
        <B24Button color="air-secondary-accent" :icon="FeedbackIcon" label="Feedback" />
      </div>
    </template>
  </B24Card>
</template>

Render a CRM dashboard widget with a few metrics and a highlighted KPI row.

Channel detail panel

Composed entity sidebar built entirely from standard components: Card (with divide-y body for automatic section dividers), a square Avatar, an AvatarGroup with overflow counter, Switch toggle rows, Badge counters and Empty section placeholders. Use it as a starting point for chat channel info panels or CRM record details.

Sales Department

Sales Department

Channel

John DoeJane SmithBob JohnsonAlice Brown+1

Disabled

Group chat
Favorites0
Links from messages18

Media & Files

No media or files

Tasks

No tasks

Meetings

No meetings

<script setup lang="ts">
import BellIcon from '@bitrix24/b24icons-vue/main/BellIcon'
import ClockIcon from '@bitrix24/b24icons-vue/outline/ClockIcon'
import UserGroupIcon from '@bitrix24/b24icons-vue/common-b24/UserGroupIcon'
import AiStarsIcon from '@bitrix24/b24icons-vue/outline/AiStarsIcon'
import LinkIcon from '@bitrix24/b24icons-vue/outline/LinkIcon'
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import TaskListIcon from '@bitrix24/b24icons-vue/outline/TaskListIcon'
import CalendarIcon from '@bitrix24/b24icons-vue/outline/CalendarIcon'
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'
import PersonPlus2Icon from '@bitrix24/b24icons-vue/crm/PersonPlus2Icon'

const soundEnabled = ref(true)
const autoDeleteEnabled = ref(false)
</script>

<template>
  <B24Card
    class="w-full max-w-xs overflow-hidden"
    :b24ui="{ body: 'p-0 flex flex-col gap-0 divide-y divide-default' }"
  >
    <!-- Channel header -->
    <div class="flex flex-col items-center gap-3 px-4 py-6 text-center">
      <B24Avatar
        src="/b24ui/avatar/employee.png"
        alt="Sales Department"
        size="3xl"
        :b24ui="{ root: 'rounded-xl' }"
      />
      <div>
        <p class="font-semibold text-label">
          Sales Department
        </p>
        <p class="text-description text-sm">
          Channel
        </p>
      </div>

      <!-- :max="4" with 5 children intentionally shows the +1 overflow counter -->
      <div class="flex items-center gap-2">
        <B24AvatarGroup :max="4" size="xs">
          <B24Avatar src="/b24ui/avatar/employee.png" alt="John Doe" />
          <B24Avatar src="/b24ui/avatar/assistant.png" alt="Jane Smith" />
          <B24Avatar src="/b24ui/avatar/employee.png" alt="Bob Johnson" />
          <B24Avatar src="/b24ui/avatar/assistant.png" alt="Alice Brown" />
          <B24Avatar alt="Charlie Davis" />
        </B24AvatarGroup>
        <B24Button
          :icon="PersonPlus2Icon"
          label="Add"
          color="air-secondary-accent-2"
          size="xs"
        />
      </div>
    </div>

    <!-- Toggle rows: icon outside, B24Switch label prop links toggle to text for a11y -->
    <div class="py-1">
      <div class="flex items-center gap-3 px-4 py-2.5">
        <BellIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <B24Switch
          v-model="soundEnabled"
          label="Sound"
          :b24ui="{
            root: 'flex-1 flex-row-reverse justify-between items-center',
            wrapper: 'ms-0'
          }"
        />
      </div>
      <div class="px-4 py-2.5">
        <div class="flex items-center gap-3">
          <ClockIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
          <B24Switch
            v-model="autoDeleteEnabled"
            label="Auto-delete messages"
            :b24ui="{
              root: 'flex-1 flex-row-reverse justify-between items-center',
              wrapper: 'ms-0'
            }"
          />
        </div>
        <!-- spacer (size-5 + gap-3) aligns description under the label -->
        <div class="flex gap-3">
          <span class="size-5 shrink-0" />
          <p class="text-xs text-dimmed mt-1">
            {{ autoDeleteEnabled ? 'Messages deleted after 7 days' : 'Disabled' }}
          </p>
        </div>
      </div>
    </div>

    <!-- Info rows -->
    <div class="py-1">
      <div class="flex items-center gap-3 px-4 py-2.5">
        <UserGroupIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <span class="flex-1 text-sm text-label">Group chat</span>
      </div>
      <div class="flex items-center gap-3 px-4 py-2.5">
        <AiStarsIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <span class="flex-1 text-sm text-label">Favorites</span>
        <B24Badge :label="0" color="air-secondary-accent" size="xs" square />
      </div>
      <div class="flex items-center gap-3 px-4 py-2.5">
        <LinkIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <span class="flex-1 text-sm text-label">Links from messages</span>
        <B24Badge :label="18" color="air-secondary-accent" size="xs" square />
      </div>
    </div>

    <!-- Media & Files section -->
    <div class="py-2">
      <h3 class="px-4 py-1 text-xs text-description font-semibold">
        Media & Files
      </h3>
      <B24Empty
        :icon="ImageIcon"
        title="No media or files"
        size="xs"
        color="air-tertiary"
        :b24ui="{ root: 'ring-0 rounded-none py-3' }"
      />
    </div>

    <!-- Tasks section -->
    <div class="py-2">
      <div class="flex items-center justify-between px-4 py-1">
        <h3 class="text-xs text-description font-semibold">
          Tasks
        </h3>
        <B24Button :icon="PlusLIcon" label="Add" color="air-secondary-accent-2" size="xs" />
      </div>
      <B24Empty
        :icon="TaskListIcon"
        title="No tasks"
        size="xs"
        color="air-tertiary"
        :b24ui="{ root: 'ring-0 rounded-none py-3' }"
      />
    </div>

    <!-- Meetings section -->
    <div class="py-2">
      <div class="flex items-center justify-between px-4 py-1">
        <h3 class="text-xs text-description font-semibold">
          Meetings
        </h3>
        <B24Button :icon="PlusLIcon" label="Add" color="air-secondary-accent-2" size="xs" />
      </div>
      <B24Empty
        :icon="CalendarIcon"
        title="No meetings"
        size="xs"
        color="air-tertiary"
        :b24ui="{ root: 'ring-0 rounded-none py-3' }"
      />
    </div>
  </B24Card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BellIcon from '@bitrix24/b24icons-vue/main/BellIcon'
import ClockIcon from '@bitrix24/b24icons-vue/outline/ClockIcon'
import UserGroupIcon from '@bitrix24/b24icons-vue/common-b24/UserGroupIcon'
import AiStarsIcon from '@bitrix24/b24icons-vue/outline/AiStarsIcon'
import LinkIcon from '@bitrix24/b24icons-vue/outline/LinkIcon'
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import TaskListIcon from '@bitrix24/b24icons-vue/outline/TaskListIcon'
import CalendarIcon from '@bitrix24/b24icons-vue/outline/CalendarIcon'
import PlusLIcon from '@bitrix24/b24icons-vue/outline/PlusLIcon'
import PersonPlus2Icon from '@bitrix24/b24icons-vue/crm/PersonPlus2Icon'

const soundEnabled = ref(true)
const autoDeleteEnabled = ref(false)
</script>

<template>
  <B24Card
    class="w-full max-w-xs overflow-hidden"
    :b24ui="{ body: 'p-0 flex flex-col gap-0 divide-y divide-default' }"
  >
    <!-- Channel header -->
    <div class="flex flex-col items-center gap-3 px-4 py-6 text-center">
      <B24Avatar
        src="/b24ui/avatar/employee.png"
        alt="Sales Department"
        size="3xl"
        :b24ui="{ root: 'rounded-xl' }"
      />
      <div>
        <p class="font-semibold text-label">
          Sales Department
        </p>
        <p class="text-description text-sm">
          Channel
        </p>
      </div>

      <!-- :max="4" with 5 children intentionally shows the +1 overflow counter -->
      <div class="flex items-center gap-2">
        <B24AvatarGroup :max="4" size="xs">
          <B24Avatar src="/b24ui/avatar/employee.png" alt="John Doe" />
          <B24Avatar src="/b24ui/avatar/assistant.png" alt="Jane Smith" />
          <B24Avatar src="/b24ui/avatar/employee.png" alt="Bob Johnson" />
          <B24Avatar src="/b24ui/avatar/assistant.png" alt="Alice Brown" />
          <B24Avatar alt="Charlie Davis" />
        </B24AvatarGroup>
        <B24Button
          :icon="PersonPlus2Icon"
          label="Add"
          color="air-secondary-accent-2"
          size="xs"
        />
      </div>
    </div>

    <!-- Toggle rows: icon outside, B24Switch label prop links toggle to text for a11y -->
    <div class="py-1">
      <div class="flex items-center gap-3 px-4 py-2.5">
        <BellIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <B24Switch
          v-model="soundEnabled"
          label="Sound"
          :b24ui="{
            root: 'flex-1 flex-row-reverse justify-between items-center',
            wrapper: 'ms-0'
          }"
        />
      </div>
      <div class="px-4 py-2.5">
        <div class="flex items-center gap-3">
          <ClockIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
          <B24Switch
            v-model="autoDeleteEnabled"
            label="Auto-delete messages"
            :b24ui="{
              root: 'flex-1 flex-row-reverse justify-between items-center',
              wrapper: 'ms-0'
            }"
          />
        </div>
        <!-- spacer (size-5 + gap-3) aligns description under the label -->
        <div class="flex gap-3">
          <span class="size-5 shrink-0" />
          <p class="text-xs text-dimmed mt-1">
            {{ autoDeleteEnabled ? 'Messages deleted after 7 days' : 'Disabled' }}
          </p>
        </div>
      </div>
    </div>

    <!-- Info rows -->
    <div class="py-1">
      <div class="flex items-center gap-3 px-4 py-2.5">
        <UserGroupIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <span class="flex-1 text-sm text-label">Group chat</span>
      </div>
      <div class="flex items-center gap-3 px-4 py-2.5">
        <AiStarsIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <span class="flex-1 text-sm text-label">Favorites</span>
        <B24Badge :label="0" color="air-secondary-accent" size="xs" square />
      </div>
      <div class="flex items-center gap-3 px-4 py-2.5">
        <LinkIcon class="size-5 shrink-0 text-description" aria-hidden="true" />
        <span class="flex-1 text-sm text-label">Links from messages</span>
        <B24Badge :label="18" color="air-secondary-accent" size="xs" square />
      </div>
    </div>

    <!-- Media & Files section -->
    <div class="py-2">
      <h3 class="px-4 py-1 text-xs text-description font-semibold">
        Media & Files
      </h3>
      <B24Empty
        :icon="ImageIcon"
        title="No media or files"
        size="xs"
        color="air-tertiary"
        :b24ui="{ root: 'ring-0 rounded-none py-3' }"
      />
    </div>

    <!-- Tasks section -->
    <div class="py-2">
      <div class="flex items-center justify-between px-4 py-1">
        <h3 class="text-xs text-description font-semibold">
          Tasks
        </h3>
        <B24Button :icon="PlusLIcon" label="Add" color="air-secondary-accent-2" size="xs" />
      </div>
      <B24Empty
        :icon="TaskListIcon"
        title="No tasks"
        size="xs"
        color="air-tertiary"
        :b24ui="{ root: 'ring-0 rounded-none py-3' }"
      />
    </div>

    <!-- Meetings section -->
    <div class="py-2">
      <div class="flex items-center justify-between px-4 py-1">
        <h3 class="text-xs text-description font-semibold">
          Meetings
        </h3>
        <B24Button :icon="PlusLIcon" label="Add" color="air-secondary-accent-2" size="xs" />
      </div>
      <B24Empty
        :icon="CalendarIcon"
        title="No meetings"
        size="xs"
        color="air-tertiary"
        :b24ui="{ root: 'ring-0 rounded-none py-3' }"
      />
    </div>
  </B24Card>
</template>

Generate this layout with your AI assistant. The prompt asks the assistant to confirm the entity type and which sections you need before writing any code:

Build a Bitrix24-style entity detail sidebar from standard components.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

title string
description string
variant'outline' "outline" | "filled" | "filled-success" | "filled-alert" | "filled-warning" | "filled-copilot" | "filled-no-accent" | "filled-black" | "tinted" | "tinted-alt" | "tinted-accent-1" | "tinted-success" | "tinted-alert" | "tinted-warning" | "tinted-no-accent" | "outline-alt" | "outline-accent" | "outline-accent-2" | "outline-success" | "outline-alert" | "outline-warning" | "outline-copilot" | "outline-no-accent" | "plain" | "plain-accent" | "plain-no-accent" | "selection"
b24ui { root?: ClassNameValue; header?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; }

Slots

Slot Type
header{}
title{}
description{}
default{}
footer{}

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/card.ts
export default {
  slots: {
    root: 'overflow-hidden rounded-(--ui-border-radius-md)',
    header: 'p-[24px] sm:px-[22px] sm:py-[15px]',
    title: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-semi-bold) mb-0 text-pretty text-(length:--ui-font-size-2xl)/[normal]',
    description: 'mt-1  text-pretty text-(length:--ui-font-size-lg)/[normal] text-pretty',
    body: 'p-[24px] sm:px-[22px] sm:py-[15px]',
    footer: 'p-[24px] sm:px-[22px] sm:py-[15px]'
  },
  variants: {
    variant: {
      filled: {
        root: 'bg-(--ui-color-design-filled-bg) border border-(--ui-color-design-filled-stroke) border-(length:--ui-design-filled-stroke-weight) text-(--ui-color-design-filled-content)',
        header: 'border-b border-(--ui-color-design-filled-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-content-divider) border-t-1',
        title: 'text-(--ui-color-design-filled-content)',
        description: 'text-(--ui-color-design-filled-content-secondary)'
      },
      'filled-success': {
        root: 'bg-(--ui-color-design-filled-success-bg) border border-(--ui-color-design-filled-success-stroke) border-(length:--ui-design-filled-success-stroke-weight) text-(--ui-color-design-filled-success-content)',
        header: 'border-b border-(--ui-color-design-filled-success-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-success-content-divider) border-t-1',
        title: 'text-(--ui-color-design-filled-success-content)',
        description: 'text-(--ui-color-design-filled-success-content)'
      },
      'filled-alert': {
        root: 'bg-(--ui-color-design-filled-alert-bg) border border-(--ui-color-design-filled-alert-stroke) border-(length:--ui-design-filled-alert-stroke-weight) text-(--ui-color-design-filled-alert-content)',
        header: 'border-b border-(--ui-color-design-filled-alert-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-alert-content-divider) border-t-1',
        title: 'text-(--ui-color-design-filled-alert-content)',
        description: 'text-(--ui-color-design-filled-alert-content-secondary)'
      },
      'filled-warning': {
        root: 'bg-(--ui-color-design-filled-warning-bg) border border-(--ui-color-design-filled-warning-stroke) border-(length:--ui-design-filled-warning-stroke-weight) text-(--ui-color-design-filled-warning-content)',
        header: 'border-b border-(--ui-color-design-filled-warning-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-warning-content-divider) border-t-1',
        title: 'text-(--ui-color-design-filled-warning-content)',
        description: 'text-(--ui-color-design-filled-warning-content)'
      },
      'filled-copilot': {
        root: 'bg-(--ui-color-design-filled-copilot-bg) border border-(--ui-color-design-filled-copilot-stroke) border-(length:--ui-design-filled-copilot-stroke-weight) text-(--ui-color-design-filled-copilot-content)',
        header: 'border-b border-(--ui-color-design-filled-copilot-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-copilot-content-divider) border-t-1',
        title: 'text-(--ui-color-design-filled-copilot-content)',
        description: 'text-(--ui-color-design-filled-copilot-content)'
      },
      'filled-no-accent': {
        root: 'bg-(--ui-color-design-filled-na-bg) border border-(--ui-color-design-filled-na-stroke) border-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)',
        header: 'border-b border-(--ui-color-design-filled-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-na-content-divider) border-t-1',
        title: 'text-(--ui-color-design-filled-na-content)',
        description: 'text-(--ui-color-design-filled-na-content)'
      },
      'filled-black': {
        root: 'bg-(--ui-color-design-filled-black-bg) border border-(--ui-color-design-filled-black-stroke) border-(length:--ui-design-filled-black-stroke-weight) text-(--ui-color-design-filled-black-content)',
        header: 'border-b border-(--ui-color-design-filled-black-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-filled-black-content-divider) border-t-1',
        title: 'text-(--ui-color-design-filled-black-content)',
        description: 'text-(--ui-color-design-filled-black-content)'
      },
      tinted: {
        root: 'bg-(--ui-color-design-tinted-bg) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
        header: 'border-b border-(--ui-color-design-tinted-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-content-divider) border-t-1',
        title: 'text-(--ui-color-design-tinted-content)',
        description: 'text-(--ui-color-design-tinted-content)'
      },
      'tinted-alt': {
        root: 'bg-(--ui-color-design-tinted-bg-alt) border border-(--ui-color-design-tinted-stroke) border-(length:--ui-design-tinted-stroke-weight) text-(--ui-color-design-tinted-content)',
        header: 'border-b border-(--ui-color-design-tinted-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-content-divider) border-t-1',
        title: 'text-(--ui-color-design-tinted-content)',
        description: 'text-(--ui-color-design-tinted-content)'
      },
      'tinted-accent-1': {
        root: 'bg-(--ui-color-design-tinted-a1-bg) border border-(--ui-color-design-tinted-a1-stroke) border-(length:--ui-design-tinted-a1-stroke-weight) text-(--ui-color-design-tinted-a1-content)',
        header: 'border-b border-(--ui-color-design-tinted-a1-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-a1-content-divider) border-t-1',
        title: 'text-(--ui-color-design-tinted-a1-content)',
        description: 'text-(--ui-color-design-tinted-a1-content)'
      },
      'tinted-success': {
        root: 'bg-(--ui-color-design-tinted-success-bg) border border-(--ui-color-design-tinted-success-stroke) border-(length:--ui-design-tinted-success-stroke-weight) text-(--ui-color-design-tinted-success-content)',
        header: 'border-b border-(--ui-color-design-tinted-success-content-divider) light:border-(--ui-color-accent-soft-green-1) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-success-content-divider) light:border-(--ui-color-accent-soft-green-1) border-t-1',
        title: 'text-(--ui-color-design-tinted-success-content)',
        description: 'text-(--ui-color-design-tinted-success-content)'
      },
      'tinted-alert': {
        root: 'bg-(--ui-color-design-tinted-alert-bg) border border-(--ui-color-design-tinted-alert-stroke) border-(length:--ui-design-tinted-alert-stroke-weight) text-(--ui-color-design-tinted-alert-content)',
        header: 'border-b border-(--ui-color-design-tinted-alert-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-alert-content-divider) border-t-1',
        title: 'text-(--ui-color-design-tinted-alert-content)',
        description: 'text-(--ui-color-design-tinted-alert-content)'
      },
      'tinted-warning': {
        root: 'bg-(--ui-color-design-tinted-warning-bg) border border-(--ui-color-design-tinted-warning-stroke) border-(length:--ui-design-tinted-warning-stroke-weight) text-(--ui-color-design-tinted-warning-content)',
        header: 'border-b border-(--ui-color-design-tinted-warning-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-warning-content-divider) border-t-1',
        title: 'text-(--ui-color-design-tinted-warning-content)',
        description: 'text-(--ui-color-design-tinted-warning-content)'
      },
      'tinted-no-accent': {
        root: 'bg-(--ui-color-design-tinted-na-bg) border border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)',
        header: 'border-b border-(--ui-color-design-tinted-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-tinted-na-content-divider) border-t-1',
        title: 'text-(--ui-color-design-tinted-na-content)',
        description: 'text-(--ui-color-design-tinted-na-content)'
      },
      outline: {
        root: 'bg-(--ui-color-design-outline-bg) border border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight) text-(--ui-color-design-outline-content)',
        header: 'border-b border-(--ui-color-design-outline-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-content)',
        description: 'text-(--ui-color-design-outline-content-secondary)'
      },
      'outline-alt': {
        root: 'bg-(--ui-color-design-outline-bg-alt) border border-(--ui-color-design-outline-content-divider) border-(length:--ui-design-outline-stroke-weight-alt) text-(--ui-color-design-outline-content)',
        header: 'border-b border-(--ui-color-design-outline-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-content)',
        description: 'text-(--ui-color-design-outline-content-secondary)'
      },
      'outline-accent': {
        root: 'bg-(--ui-color-design-outline-a1-bg) border border-(--ui-color-design-outline-a1-stroke) border-(length:--ui-design-outline-a1-stroke-weight) text-(--ui-color-design-outline-a1-content)',
        header: 'border-b border-(--ui-color-design-outline-a1-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-a1-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-a1-content)',
        description: 'text-(--ui-color-design-outline-a1-content)'
      },
      'outline-accent-2': {
        root: 'bg-(--ui-color-design-outline-a2-bg) border border-(--ui-color-design-outline-a2-stroke) border-(length:--ui-design-outline-a2-stroke-weight) text-(--ui-color-design-outline-a2-content)',
        header: 'border-b border-(--ui-color-design-outline-a2-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-a2-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-a2-content)',
        description: 'text-(--ui-color-design-outline-a2-content)'
      },
      'outline-success': {
        root: 'bg-(--ui-color-design-outline-success-bg) border border-(--ui-color-design-outline-success-stroke) border-(length:--ui-design-outline-success-stroke-weight) text-(--ui-color-design-outline-success-content)',
        header: 'border-b border-(--ui-color-design-outline-success-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-success-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-success-content)',
        description: 'text-(--ui-color-design-outline-success-content)'
      },
      'outline-alert': {
        root: 'bg-(--ui-color-design-outline-alert-bg) border border-(--ui-color-design-outline-alert-stroke) border-(length:--ui-design-outline-alert-stroke-weight) text-(--ui-color-design-outline-alert-content)',
        header: 'border-b border-(--ui-color-design-outline-alert-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-alert-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-alert-content)',
        description: 'text-(--ui-color-design-outline-alert-content)'
      },
      'outline-warning': {
        root: 'bg-(--ui-color-design-outline-warning-bg) border border-(--ui-color-design-outline-warning-stroke) border-(length:--ui-design-outline-warning-stroke-weight) text-(--ui-color-design-outline-warning-content)',
        header: 'border-b border-(--ui-color-design-outline-warning-content-divider) light:border-(--ui-color-accent-soft-orange-1) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-warning-content-divider) light:border-(--ui-color-accent-soft-orange-1) border-t-1',
        title: 'text-(--ui-color-design-outline-warning-content)',
        description: 'text-(--ui-color-design-outline-warning-content)'
      },
      'outline-copilot': {
        root: 'bg-(--ui-color-design-outline-copilot-bg) border border-(--ui-color-design-outline-copilot-stroke) border-(length:--ui-design-outline-copilot-stroke-weight) text-(--ui-color-design-outline-copilot-content)',
        header: 'border-b border-(--ui-color-design-outline-copilot-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-copilot-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-copilot-content)',
        description: 'text-(--ui-color-design-outline-copilot-content)'
      },
      'outline-no-accent': {
        root: 'bg-(--ui-color-design-outline-na-bg) border border-(--ui-color-design-outline-na-stroke) border-(length:--ui-design-outline-na-stroke-weight) text-(--ui-color-design-outline-na-content)',
        header: 'border-b border-(--ui-color-design-outline-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-outline-na-content-divider) border-t-1',
        title: 'text-(--ui-color-design-outline-na-content)',
        description: 'text-(--ui-color-design-outline-na-content)'
      },
      plain: {
        root: 'bg-(--ui-color-design-plain-bg) border border-(--ui-color-design-plain-stroke) border-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)',
        header: 'border-b border-(--ui-color-design-plain-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-plain-content-divider) border-t-1',
        title: 'text-(--ui-color-design-plain-content)',
        description: 'text-(--ui-color-design-plain-content)'
      },
      'plain-accent': {
        root: 'bg-(--ui-color-design-plain-a-bg) border border-(--ui-color-design-plain-a-stroke) border-(length:--ui-design-plain-a-stroke-weight) text-(--ui-color-design-plain-a-content)',
        header: 'border-b border-(--ui-color-design-plain-a-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-plain-a-content-divider) border-t-1',
        title: 'text-(--ui-color-design-plain-a-content)',
        description: 'text-(--ui-color-design-plain-a-content)'
      },
      'plain-no-accent': {
        root: 'bg-(--ui-color-design-plain-na-bg) border border-(--ui-color-design-plain-na-stroke) border-(length:--ui-design-plain-na-stroke-weight) text-(--ui-color-design-plain-na-content)',
        header: 'border-b border-(--ui-color-design-plain-na-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-plain-na-content-divider) border-t-1',
        title: 'text-(--ui-color-design-plain-na-content)',
        description: 'text-(--ui-color-design-plain-na-content-secondary)'
      },
      selection: {
        root: 'bg-(--ui-color-design-selection-bg) border border-(--ui-color-design-selection-stroke) border-(length:--ui-design-selection-stroke-weight) text-(--ui-color-design-selection-content)',
        header: 'border-b border-(--ui-color-design-selection-content-divider) border-b-1',
        footer: 'border-t border-(--ui-color-design-selection-content-divider) border-t-1',
        title: 'text-(--ui-color-design-selection-content)',
        description: 'text-(--ui-color-design-selection-content)'
      }
    }
  },
  defaultVariants: {
    variant: 'outline'
  }
}

Calendar

Chip