Flex

A flexbox container as a component: gap, alignment, direction and wrapping as props, with the gap sizes coming from the theme.

Preview in Figma LLMs

Overview

Design

Set these under components.Flex in your token file, or pass them to ThemeScope to change one region of the page.

Flex has no component tokens of its own. It reads the global tokens below. Set one under components.Flex to change it for Flex only, or at the top level to change every component.

Global Tokens

The global tokens Flex reads. Set one under components.Flex to change it for Flex only, or at the top level to change every component.

Empty FloatButton