Composition

Composition makes Ariakit components more versatile, allowing you to easily replace the default HTML element or enhance its features with custom components.

Dear readers,

This month we’ve introduced a new Composition guide to the Ariakit documentation. This guide offers detailed explanations on using the polymorphic as prop and introduces the new render prop, which aims to simplify the abstraction and extension of Ariakit components with an explicit API:

<TooltipAnchor
  title="Open menu"
  render={(props) => <MenuButton {...props} />}
>
  Menu
</TooltipAnchor>

By leveraging the render prop, you can create higher-level APIs that provide the same level of flexibility as any Ariakit component, all without having to handle the intricacies of TypeScript and the as prop.

For a practical demonstration of the render prop in action, I encourage you to explore the Tooltip with Framer Motion example. This example demonstrates how the render prop enables rendering the tooltip anchor as a link.

Thank you for your continued support, and happy exploring!

More Ariakit

• New example: Nested modal dialogs

• New example: Modal dialog with Next.js App Router

• New example: Tabs with Next.js App Router

• New example: Animated tooltip with Framer Motion

• New example: Checkbox with custom styles

• Updated example: Animated dropdown menu with Framer Motion

• Updated example: Tabs with React Router

• Simple Dialog/Menu higher-level API

• Using React Context with component stores

More Dev

• Vitest (alternative to Jest) supports importing CSS files

• Automated screen reader testing