@vtex/admin-primitives v0.5.0

Primitives

Primitives are polymorphic components

Getting started

This package is already a part of admin-ui - so if you are using it, there is no need for installation.

For standalone usage, you can install it as an npm package (with its peer dependencies):

yarn add @vtex/admin-primitives @vtex/admin-core reakit @emotion/css @emotion/react

After that, you must add the admin-core's ThemeProvider on your app root - so that you can consume styles.

import { Flex } from '@vtex/admin-primitives'

function ApplicationRoot() {
  return <Flex>A flex container</Flex>
}

Engineering

csx prop

This prop is present in all components and is responsible for receiving a style-object. More info Styles

<Primitive csx={{ bg: 'blue', color: 'light.primary' }}>Blue box</Primitive>s

Polymorphism

All primitives are polymorphic, this means that you can assign different elements to them through the element property.

The default element is the div, this is true to every component:

<Primitive>renders a div</Primitive>

You can choose the element to render:

<Primitive element="a" href="#">
  renders an anchor
</Primitive>

You can also pass a valid React component (it must receive className so that styles are passed correctly):

import { Link } from 'gatsby'

function Example() {
  return <Primitive element={Link}>Gatsby link</Primitive>
}

Types

PrimitiveProps

FlexProps

FlexSpacerProps

GridProps

GridItemProps