Skip to main content
Kaleidoscope

RainbowBar

A decorative gradient bar used as a static visual accent

Default

A simple gradient bar that displays a rainbow of colors. It can be used as a static visual accent or as the static counterpart to an animated loading bar.

Editable example
<RainbowBar />

Best practices

  1. Use RainbowBar for decorative purposes such as visually separating sections or adding a branded accent to cards, panels, or page headers.
  2. If you need an animated loading indicator, use RainbowLoadingBar instead. Note that RainbowLoadingBar is not yet available in Kaleidoscope — it currently lives outside the library.

Size

The RainbowBar comes in two sizes: medium (default, 6px) and small (4px).

Editable example
<Stack gap="m">
  <Text>Medium (default)</Text>
  <RainbowBar size="medium" />
  <Text>Small</Text>
  <RainbowBar size="small" />
</Stack>

Rounded top

By default, the top corners are rounded. Set isTopRounded to false for square corners. This is useful when the bar sits flush against the top of a container.

Editable example
<Stack gap="m">
  <Text>Rounded (default)</Text>
  <RainbowBar isTopRounded />
  <Text>Not rounded</Text>
  <RainbowBar isTopRounded={false} />
</Stack>