|Kit
Changelog

0.8.0

Nine components debut, from Accordion and HoverCard to Chart and CodeBlock

Spotlight

Accordion#120

Accordion

A stack of expandable sections, in a default bordered list or separated cards. Panels animate through the kit's own CSS-only Collapse.

View Accordion

Ships in 2 days.

Accepted within 30 days.

Ships in 2 days.

Accepted within 30 days.
Chart#133

Chart

Describe a chart once with defineChart (its marks, scales and tooltip), then render it with Chart, colored from the kit's palette.

View Chart

Changes

v0.7.0…v0.8.0 on GitHub

1 breaking change

  • Avatar:

    AvatarGroup is no longer exported on its own: use Avatar.Group

See in the list

12added

1changed

2fixed

AccordionNewViewChartNewViewClipboardNewViewCodeNewViewCodeBlockNewViewHoverCardNewView+3more new components
  • breaking1
  • Avatar

    AvatarGroup is no longer exported on its own: use Avatar.Group

    #129
  • added12
  • Accordion

    New Accordion component

    #120
  • HoverCard

    New HoverCard component, where cards in a HoverCard.Group share one sliding card

    #116
  • Indicator

    New Indicator component

    #118
  • Clipboard

    New Clipboard component, with a ready-made Copy that also takes a headless render prop

    #119
  • Rating

    New Rating component on Ark UI's RatingGroup, with per-star colors and hover animations

    #117
  • Kit

    New useDisclosure hook for open, close and toggle state

    #115
  • Chart

    New Chart component wrapping TanStack Charts, with a renderer prop for a fully custom renderer

    #133
  • MarkCode

    New inline Mark and Code components

    #121
  • CodeBlock

    New CodeBlock component, highlighted by Shiki, with CodeBlock.Button for its toolbar

    #121
  • CodeBlock

    CodeBlock.Static, an async Server Component variant

    #130
  • CodeBlock

    Mark lines with // [!code …] comments, shown in stacked gutter columns

    #130
  • CodeBlock

    toDiffNotation(oldCode, newCode), from @42/ui-react/code-block/diff, writes that notation for a diff

    #131
  • changed1
  • Avatar

    Avatar.Group cuts a transparent notch between stacked avatars instead of drawing a border

    #129
  • fixed2
  • Kit

    Reduced-motion overrides match Tailwind's compiled class names and respect the open/closed state

    #128
  • Collapse

    Collapse's own data-state wins over one merged in through asChild

    #120

0.9.0

One z-index scale for overlays, so pickers inside a Modal or Drawer paint above it

0.7.0

Pill and Schedule require their callbacks at compile time, and Schedule's chips animate

On this page

SpotlightChangesBreaking · 1Avatar · AvatarGroup is no longer exported on its own: use Avatar.GroupAdded · 12Accordion · New Accordion componentHoverCard · New HoverCard component, where cards in a HoverCard.Group share one sliding cardIndicator · New Indicator componentClipboard · New Clipboard component, with a ready-made Copy that also takes a headless render propRating · New Rating component on Ark UI's RatingGroup, with per-star colors and hover animationsNew useDisclosure hook for open, close and toggle stateChart · New Chart component wrapping TanStack Charts, with a renderer prop for a fully custom rendererMark, Code · New inline Mark and Code componentsCodeBlock · New CodeBlock component, highlighted by Shiki, with CodeBlock.Button for its toolbarCodeBlock · CodeBlock.Static, an async Server Component variantCodeBlock · Mark lines with // [!code …] comments, shown in stacked gutter columnsCodeBlock · toDiffNotation(oldCode, newCode), from @42/ui-react/code-block/diff, writes that notation for a diffChanged · 1Avatar · Avatar.Group cuts a transparent notch between stacked avatars instead of drawing a borderFixed · 2Reduced-motion overrides match Tailwind's compiled class names and respect the open/closed stateCollapse · Collapse's own data-state wins over one merged in through asChild