Beta
Animate UI

Toggle Group

Provides a shared state to a series of toggle buttons.

Made by imskyleen

Installation

Usage

<ToggleGroup>
  <ToggleGroupItem>A</ToggleGroupItem>
  <ToggleGroupItem>B</ToggleGroupItem>
  <ToggleGroupItem>C</ToggleGroupItem>
</ToggleGroup>

Props

Animate UI Props

ToggleGroup

PropTypeDefault
size?
0
default
variant?
0
default
activeClassName?
string
-
transition?
Transition
{ type: 'spring', bounce: 0, stiffness: 200, damping: 25 }

ToggleGroupItem

PropTypeDefault
size?
0
default
variant?
0
default
spanProps?
React.HTMLAttributes<HTMLSpanElement>
-
buttonProps?
HTMLMotionProps<"button">
-
children
React.ReactNode
-

Credits

  • We use Base UI for the accordion component.
  • We take our inspiration from Shadcn UI for the accordion style.

Built by Skyleen. The source code is available on GitHub.

On this page