Skip to content

Animate UI 2.4.0

Choose a tag to compare

@imskyleen imskyleen released this 27 Oct 09:33
· 1 commit to main since this release

Carousel, in React and Vue: a drop-in for embla-carousel-react and embla-carousel-vue, so shadcn/ui's and shadcn-vue's carousels animate like the other components (npx @animate-ui/cli@latest animate carousel).

  • Set from opts: slides that shrink away from the center, the far ones waiting behind (scale), and slides sized to show a set number (visible), in both orientations.
  • CarouselDots (a pill stretching from one dot to the next) and CarouselCounter (a sliding number) come with it.

Code Block is now shadcn/ui's and shadcn-vue's own code block, rewritten in place by npx @animate-ui/cli@latest animate code-block: the code types itself out (evenly, or like someone typing with cadence: 'natural'), behind a cursor that pulses when it pauses, the block following the last line, with a copy button whose icon swaps and lines gliding when wrapping changes. useCodeWriting types any code out.

Bottom Navigation minimizes like a tab bar: with scrollBehavior="minimize", every item stays and shrinks to its icon, labels fold away and the accessory shrinks with the bar, the highlight staying on the selected item. Labels show on every item; show="active" keeps them beside the selected item's icon only, as before. A press on a minimized item grows the bar and selects it in one move.

Docs: Carousel · Code Block · Bottom Navigation

Fixes

  • The docs' Previous and Next follow the sidebar, in React and Vue: no entry skipped, no jump to another section (#188).

Full changelog: https://animate-ui.com/docs/changelog