Flexium UI

Column/Row based UI component library for Flexium.

Installation

npm install flexium-ui flexium

Components

Layout Components

import { Column, Row, Center, Spacer } from 'flexium-ui'

function Layout() {
  return (
    <Column gap={16}>
      <Row gap={8}>
        <Box>Left</Box>
        <Spacer />
        <Box>Right</Box>
      </Row>
      <Center>
        <Box>Centered Content</Box>
      </Center>
    </Column>
  )
}

Column

Vertical flex container.

<Column gap={8} align="center" justify="start">
  <Child />
  <Child />
</Column>

Row

Horizontal flex container.

<Row gap={8} align="center" justify="between">
  <Child />
  <Child />
</Row>

Center

Centers content both horizontally and vertically.

<Center width={200} height={200}>
  <Content />
</Center>

Spacer

Flexible spacer that fills available space.

<Row>
  <Logo />
  <Spacer />
  <NavLinks />
</Row>

Portal

Renders children into a different DOM node.

import { Portal } from 'flexium-ui'

<Portal target={document.body}>
  <Modal />
</Portal>

Storybook

View component examples in Storybook:

npm run storybook

Requirements

• Flexium >= 0.15.0

License

MIT