Nutty Professor Movie

    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published



    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>


    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


    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

    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>



    prop type required description
    element E 🚫 Element that will be rendered
    className string 🚫 element className
    extends <E> props of E 🚫 This component inherits all props of E


    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive
    align ResponsiveValue<AlignContent> 🚫 Shorthand for CSS alignItems property
    basis ResponsiveValue<FlexBasis> 🚫 Shorthand for CSS flexbasis property
    direction ResponsiveValue<FlexDirection> 🚫 Shorthand for CSS flexDirection property
    grow ResponsiveValue<FlexGrow> 🚫 Shorthand for CSS flexGrow property
    shrink ResponsiveValue<FlexShrink> 🚫 Shorthand for CSS flexShrink property
    justify ResponsiveValue<JustifyContent> 🚫 Shorthand for CSS justifyContent property
    wrap ResponsiveValue<FlexWrap> 🚫 Shorthand for CSS flexWrap property
    order ResponsiveValue<Order> 🚫 Shorthand for CSS order property


    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive


    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive
    gap ResponsiveValue<GridGap> 🚫 Shorthand for CSS gridGap property
    rowGap ResponsiveValue<GridRowGap> 🚫 Shorthand for CSS gridRowGap property
    columnGap ResponsiveValue<GridColumnGap> 🚫 Shorthand for CSS gridColumnGap property
    templateAreas string[] 🚫 Shorthand for CSS gridTemplateAreas property
    templateRows ResponsiveValue<GridTemplateRows> 🚫 Shorthand for CSS gridTemplateRows property
    templateColumns ResponsiveValue<GridTemplateColumns> 🚫 Shorthand for CSS gridTemplateColumns property


    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive
    area ResponsiveValue<GridArea> 🚫 Shorthand for CSS gridArea property




    npm i @vtex/admin-primitives

    DownloadsWeekly Downloads






    Unpacked Size

    2.04 MB

    Total Files


    Last publish


    • thiagof7
    • gleicy-vtex
    • rafael.sangalli.vtex
    • vtexlab-user
    • lenderson_morais
    • wender
    • natamelo
    • mairatma
    • vlagedo_vtex
    • samuelfgs
    • mayzabel
    • rafabac
    • augusto.lazaro
    • tergol
    • rafarubim
    • analuizamtg
    • gustavorosolem
    • arthurepc
    • jeymisson
    • marcosvcp
    • victorhmp
    • lurian
    • ericreis
    • lbebber
    • tlgimenes
    • arturpimentel
    • anitavincent
    • brunojdo
    • brunohq
    • lucasecdb
    • matheusps
    • emersonlaurentino
    • viniagostini
    • hugo.cabral
    • lucasaarcoverde
    • lariciamota
    • wdsrocha
    • icazevedo
    • edunmc
    • fabits
    • mateuspontes
    • gmantiqueira
    • vitorlgomes
    • rodolfoams
    • policarpo
    • marcelovicentegc
    • maianabt
    • jeffersontuc
    • hiagolcm
    • william.silva