Bloom

A React component library that creates fluid morphing animations between a trigger element and an expanded menu. The button becomes the menu through fluid shape-shifting animation.

Features

• Fluid Animations — Smooth spring-based morphing with customizable presets
• Directional Expansion — Menu expands in any direction with anchor alignment
• Composable API — Build exactly what you need with compound components
• Tiny Bundle — Only requires framer-motion as a peer dependency
• TypeScript First — Full type safety and IntelliSense support

Installation

npm install bloom-menu framer-motion

Quick Start

import { Menu } from 'bloom-menu'
import { MoreHorizontal, Pencil, Trash } from 'lucide-react'

function Example() {
  return (
    <Menu.Root>
      <Menu.Container buttonSize={48} menuWidth={200} menuRadius={12}>
        <Menu.Trigger>
          <MoreHorizontal />
        </Menu.Trigger>
        <Menu.Content>
          <Menu.Item onSelect={() => console.log('edit')}>
            <Pencil /> Edit
          </Menu.Item>
          <Menu.Item onSelect={() => console.log('delete')}>
            <Trash /> Delete
          </Menu.Item>
        </Menu.Content>
      </Menu.Container>
    </Menu.Root>
  )
}

Direction and Anchor

Control where the menu expands from and how it aligns to the trigger:

<Menu.Root direction="top" anchor="start">    {/* Expands up, aligned to start */}
<Menu.Root direction="bottom" anchor="center"> {/* Expands down, centered */}
<Menu.Root direction="left" anchor="end">      {/* Expands left, aligned to end */}

Animation Presets

<Menu.Root animation="snappy">    {/* Quick ease-out curve */}
<Menu.Root animation="gentle">    {/* Default, smooth spring */}
<Menu.Root animation="relaxed">   {/* Slower, laid-back spring */}

{/* Or use custom spring config */}
<Menu.Root animation={{ stiffness: 400, damping: 25 }}>

Components

<Menu.Root>

The root component that provides context for all other components.

Prop	Type	Default	Description
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Callback when open state changes
defaultOpen	boolean	false	Default open state (uncontrolled)
direction	"top" | "bottom" | "left" | "right"	"top"	Menu expansion direction
anchor	"start" | "center" | "end"	"start"	Anchor alignment
animation	"snappy" | "gentle" | "relaxed" | SpringConfig	"gentle"	Animation preset
closeOnClickOutside	boolean	true	Close when clicking outside
closeOnEscape	boolean	true	Close when pressing Escape

<Menu.Container>

The morphing element that animates between button and menu states.

Prop	Type	Default	Description
buttonSize	number | { width, height }	40	Closed button size (number for square, object for rectangular)
menuWidth	number	200	Open menu width
menuRadius	number	24	Open menu border-radius

<Menu.Trigger>

Content shown when closed. Fades out when the menu opens.

Prop	Type	Default	Description
className	string	—	Additional class names
style	CSSProperties	—	Additional styles

<Menu.Content>

Menu content shown when open. Fades in with a slight delay.

Prop	Type	Default	Description
className	string	—	Additional class names
style	CSSProperties	—	Additional styles

<Menu.Item>

Individual menu items with hover highlighting.

Prop	Type	Default	Description
onSelect	() => void	—	Called when selected
disabled	boolean	false	Disable the item
closeOnSelect	boolean	true	Close menu after selection

<Menu.Portal>

Renders content in a portal.

Prop	Type	Default	Description
container	HTMLElement	document.body	Portal target

<Menu.Overlay>

Optional backdrop overlay.

Prop	Type	Default	Description
className	string	—	Additional class names
onClick	() => void	closes menu	Click handler

Accessibility

Bloom includes the following accessibility features:

• Proper role="menu" and role="menuitem" attributes
• aria-expanded and aria-haspopup on trigger
• aria-disabled on disabled items
• Respects prefers-reduced-motion media query
• Click outside and Escape key to close

License

MIT