Flex

What if you don't want to type everytime flex items-center gap-3 for simple rows with text and icon? Flex component is here to help you. It's a simple wrapper around div with flex and gap classes.

import { Flex } from '@creation-ui/react'
 
const Example = () => (
  <Flex column>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Flex>
)

Item 1

Item 2

Item 3

Escape hatch

If something is not working as expected, you can always use className prop to add your own classes with Tailwind's important prefix !.

Behind the scenes

This is how Flex component is implemented. If you spot a bug or want to add a new feature, just rise an issue on GitHub.

import { cva } from 'class-variance-authority'
 
export const flexClasses = cva('flex', {
  variants: {
    column: {
      true: 'flex-col',
      false: 'flex-row',
    },
    justify: {
      start: 'justify-start',
      end: 'justify-end',
      center: 'justify-center',
      between: 'justify-between',
      around: 'justify-around',
      evenly: 'justify-evenly',
    },
    items: {
      start: 'items-start',
      end: 'items-end',
      center: 'items-center',
      baseline: 'items-baseline',
      stretch: 'items-stretch',
    },
    self: {
      auto: 'self-auto	',
      start: 'self-start',
      end: 'self-end	',
      center: 'self-center	',
      stretch: 'self-stretch',
      baseline: 'self-baseline',
    },
    wrap: {
      none: 'flex-nowrap',
      wrap: 'flex-wrap',
      reverse: 'flex-wrap-reverse',
    },
    content: {
      start: 'content-start',
      end: 'content-end',
      center: 'content-center',
      between: 'content-between',
      around: 'content-around',
      evenly: 'content-evenly',
    },
    gap: {
      0: 'gap-0',
      1: 'gap-1',
      2: 'gap-2',
      3: 'gap-3',
      4: 'gap-4',
      5: 'gap-5',
      6: 'gap-6',
      7: 'gap-7',
      8: 'gap-8',
      9: 'gap-9',
      10: 'gap-10',
      11: 'gap-11',
      12: 'gap-12',
      14: 'gap-14',
      16: 'gap-16',
      20: 'gap-20',
      24: 'gap-24',
      28: 'gap-28',
      32: 'gap-32',
      36: 'gap-36',
      40: 'gap-40',
      44: 'gap-44',
      48: 'gap-48',
      52: 'gap-52',
      56: 'gap-56',
      60: 'gap-60',
      64: 'gap-64',
      72: 'gap-72',
      80: 'gap-80',
      96: 'gap-96',
    },
    grow: {
      false: 'flex-grow-0',
      true: 'flex-grow',
    },
    shrink: {
      false: 'flex-shrink-0',
      true: 'flex-shrink',
    },
  },
})

Dropdown Chevron For