Skip to main content
Urbicon UI
source

CompositionBar

A single horizontal stacked bar with a legend that shows how parts make up a total, such as a budget breakdown, a token allocation, or a storage split.

Playground

Composition: 100 (3 shares) — Anteil A 60.0 %, Anteil B 30.0 %, Anteil C 10.0 %
ShareValuePercent
Anteil A6060.0 %
Anteil B3030.0 %
Anteil C1010.0 %
Orientation Style variant
Size Style variant 
<script lang="ts">
  import { CompositionBar } from '@urbicon-ui/blocks';

  const items = [
    { label: 'Anteil A', value: 60, intent: 'primary' },
    { label: 'Anteil B', value: 30, intent: 'success' },
    { label: 'Anteil C', value: 10, intent: 'warning' }
  ];
</script>

<CompositionBar
  {items}
/>

01 Examples

Heating Cost Pot

Stacked bar as a cost-pot composition: gas + heat pump electricity + maintenance + chimney sweep add up to the heating cost pot of a service charge statement.
Heating cost pot 2024 3.822,42 €
Composition: 3.822,42 € (4 shares) — Gas bill 57.7 %, Heat pump electricity 29.5 %, Heating system maintenance 9.4 %, Chimney sweep levy 3.3 %
ShareValuePercent
Gas bill2.206,09 €57.7 %
Heat pump electricity1.127,31 €29.5 %
Heating system maintenance361,02 €9.4 %
Chimney sweep levy128,00 €3.3 %
<div class="w-full max-w-xl">
  <CompositionBar
    items={heatingItems}
    formatValue={formatEur}
    size="lg"
    legendPlacement="bottom"
    showTotal
    totalLabel="Heating cost pot 2024"
  />
</div>

Tiny Segments

Very small segments are raised to a minimum width so hover and tooltip still work on them.
Composition: 966 (4 shares) — Main share 98.3 %, Mini A 0.8 %, Mini B 0.3 %, Mini C 0.5 %
ShareValuePercent
Main share95098.3 %
Mini A80.8 %
Mini B30.3 %
Mini C50.5 %
<div class="w-full max-w-xl">
  <CompositionBar items={tinyItems} formatValue={(v) => `${v}`} size="lg" />
</div>

Total Override (Remainder)

If the explicit total exceeds the sum of the item values, the unaccounted share is rendered as a dashed remainder area.
Expected 5.000,00 € 5.000,00 €
Composition: 5.000,00 € (4 shares) — Gas bill 44.1 %, Heat pump electricity 22.5 %, Heating system maintenance 7.2 %, Chimney sweep levy 2.6 %
ShareValuePercent
Gas bill2.206,09 €44.1 %
Heat pump electricity1.127,31 €22.5 %
Heating system maintenance361,02 €7.2 %
Chimney sweep levy128,00 €2.6 %
Expected 5.000,00 € (remaining)1.177,58 €23.6 %
<div class="w-full max-w-xl">
  <CompositionBar
    items={heatingItems}
    total={500000}
    formatValue={formatEur}
    size="lg"
    showTotal
    totalLabel="Expected 5.000,00 €"
  />
</div>

Raw Color Overrides

Give each item a color (any CSS colour) instead of a semantic intent, for a brand-specific palette like this token allocation.
Composition: 100 % (4 shares) — Treasury 40 %, Liquidity 30 %, Team 15 %, Community 15 %
ShareValuePercent
Treasury40 %40 %
Liquidity30 %30 %
Team15 %15 %
Community15 %15 %
<div class="w-full max-w-xl">
  <CompositionBar
    items={tokenItems}
    formatValue={(v) => `${v} %`}
    formatPercent={(p) => `${Math.round(p)} %`}
    size="lg"
    legendPlacement="bottom"
  />
</div>

02 Customization

Custom Tooltip Snippet

Custom tooltip content with additional metadata via the tooltip snippet.
Composition: 3.822,42 € (4 shares) — Gas bill 57.7 %, Heat pump electricity 29.5 %, Heating system maintenance 9.4 %, Chimney sweep levy 3.3 %
ShareValuePercent
Gas bill2.206,09 €57.7 %
Heat pump electricity1.127,31 €29.5 %
Heating system maintenance361,02 €9.4 %
Chimney sweep levy128,00 €3.3 %
<div class="w-full max-w-xl">
  <CompositionBar items={heatingItems} formatValue={formatEur} size="lg">
    {#snippet tooltip(item, percent)}
      <span class="block font-medium">{item.label}</span>
      <span class="text-text-tertiary text-2xs block tabular-nums">
        {formatEur(item.value)} · {Math.round(percent)} %
      </span>
      {#if item.intent === 'warning'}
        <span class="text-warning text-3xs mt-1 block tracking-wide uppercase">
          statutory levy
        </span>
      {/if}
    {/snippet}
  </CompositionBar>
</div>

Compact Card Embedding

Embedded in a card with a header at the sm size.

Treasury Allocation

Q1 2026
Composition: 100 % (4 shares) — Treasury 40 %, Liquidity 30 %, Team 15 %, Community 15 %
ShareValuePercent
Treasury40 %40 %
Liquidity30 %30 %
Team15 %15 %
Community15 %15 %
<div class="border-border-subtle bg-surface-elevated w-full max-w-md rounded-2xl border p-5">
  <header class="mb-3 flex items-baseline justify-between">
    <h3 class="text-text-primary text-sm font-semibold">Treasury Allocation</h3>
    <span class="text-text-tertiary text-xs">Q1 2026</span>
  </header>
  <CompositionBar
    items={tokenItems}
    formatValue={(v) => `${v} %`}
    formatPercent={(p) => `${Math.round(p)} %`}
    size="sm"
    legendPlacement="bottom"
  />
</div>

03 Accessibility

ARIA Image Role + Summary

The bar container has role="img" with a combined aria-label summary (total plus each share with value and percent), so screen readers can grasp the bar as a whole.

Table Fallback

An sr-only table duplicates the data in tabular form (share / value / percent) for screen readers that prefer tables over images.

Keyboard Navigation

Tab focuses the next segment, Arrow keys move between segments, Home /End jump to the first/last, Enter/Space triggers onItemSelect.

Bidirectional Highlight

Hovering or focusing a bar segment dims the other segments and highlights the matching legend entry, and the reverse holds too. The link runs through the shared item.id (or the index as a fallback).

04 API Reference

25 props
25 props 1 required
Prop
Type
Default
Description

05 Types

Local type definitions used by this component.

7 types
Name
Kind
Category
Used by
Description

06 Installation

Import

import { CompositionBar } from '@urbicon-ui/blocks';
llm.txt