Starter Kit Components - UI Primitives

UI Primitives are the building blocks of Starter Kit. They can be used to compose and build complex UI, like Sections. You can think about them like HTML elements.

Button

The Button component represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.

Props

prop

type

description

variant

primary | secondary | link | outline | ghost | solid | unstyled

Defines Button's styles based on Starter Kit theme. Default is primary.

In addition, any prop from Chakra UI Button can be used.

Usage

import React from 'react'
import Button from 'Components/Button'

const SomeComponent = () => (
  <Button>Buy</Button>
)

export default SomeComponent

Code overview


Container

The Container is the most abstract component on top of which many other components are built. It renders a div element by default.

Behind the scenes it uses Box or Container components from Chakra UI depending on the passed props.

Props

prop

default

description

constrainContent

boolean

If true, renders a Container instead of a Box component. By default is false.

In addition, any prop from Chakra UI Container can be used.

Usage

import React from 'react'
import Container from 'Components/Container'

const SomeComponent = () => (
  <Container>This is my container</Container>
)

export default SomeComponent

Code overview


Divider

The Divider can be used to visually separate content with a horizontal or vertical like.

Props

Any prop from Chakra UI Divider can be used.

Usage

import React from 'react'
import Divider from 'Components/Divider'

const SomeComponent = () => (
  <Divider />
)

export default SomeComponent

Code overview


Flex

The Flex can be used to create flexbox layouts.

Props

Any prop from Chakra UI Flex can be used.

Usage

import React from 'react'
import Flex from 'Components/Flex'

const SomeComponent = () => (
  <Flex direction="row" justify="start" align="start">
    <p>This</p>
    <p>is a</p>
    <p>Flex element</p>
  </Flex>
)

export default SomeComponent

Grid

The Grid Component can be used to create grid layouts.

Props

Any prop from Chakra UI Grid can be used.

Usage

import React from 'react'
import Grid from 'Components/Grid'
import GridItem from 'Components/GridItem'

const SomeComponent = () => (
  <Grid h="5rem" templateRows="repeat(2, 1fr)" templateColumns="repeat(5, 1fr)" gap="4">
    <GridItem rowSpan={2} colSpan={1} bg="tomato">This</GridItem>
    <GridItem colSpan={2} bg="papayawhip">is a</GridItem>
    <GridItem colSpan={2} bg="papayawhip">Grid element</GridItem>
    <GridItem colSpan={4} bg="tomato">:)</GridItem>
  </Grid>
)

export default SomeComponent

Code overview


GridItem

The Grid's child Components.

Props

Any prop from Chakra UI Grid can be used.

Usage

Refer to the Grid's usage above.

Code overview


HStack

The HStack (Horizontal Stack) Component allows you to easily stack elements horizontally.

Props

Any prop from Chakra UI Stack can be used.

Usage

import React from 'react'
import HStack from 'Components/HStack'

const SomeComponent = () => (
  <HStack>
    <div>Item 1</div>
    <div>Item 2</div>
  </HStack>
)

export default SomeComponent

Code overview


Heading

The Heading Component allows you to create section heading elements (from h1 to h6) with ease.

Props

Any prop from Chakra UI Heading can be used.

Usage

import React from 'react'
import Heading from 'Components/Heading'

const SomeComponent = () => (
  <Heading as="h1">Starter Kit</Heading>
  <Heading as="h2">Hello World</Heading>
)

export default SomeComponent

Code overview


Image

The Image component leverages the power of the ResponsiveImage component with the flexibility of Chakra's Image component to allow you to optimize your store's images usage.

Props

prop

type

description

alt

string

Defines an alternative text description of the image. Recommended.

format

jpeg | png | webp| auto

Sets the format of the image. Default is auto.

quality

lightest | lighter | normal | better | best | smart

Sets the quality of the image. Default is smart.

crop

string (example: 100x200)

Crops the image to a given dimension.

In addition, any prop from Chakra UI Image can be used.

Usage

import React from 'react'
import Image from 'Components/Image'

const SomeComponent = () => (
  <Image
    src="https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/"
    alt="A black t-shirt with a black Shogun logo on it. The t-shirt is on a red surface."
  />
)

export default SomeComponent

Code overview


Input

The Input component renders a text field. Make sure to associate a label when using it.

Props

Any prop from Chakra UI Input can be used.

Usage

import React from 'react'
import Input from 'Components/Input'

const SomeComponent = () => (
  <label>
    Name
    <Input
      type="text"
      placeholder="Name"
      isRequired
    />
  </label>
)

export default SomeComponent

Code overview


Link

The Link Component should be used whenever a page navigation action is required. It uses Frontend Link under the hood and it renders a HTML anchor element.

Props

Any prop from Chakra UI Link can be used.

Usage

import React from 'react'
import Link from 'Components/Link'

const SomeComponent = () => (
  <Link href="https://getshogun.com" target="_blank">
    Shogun
  </Link>
)

export default SomeComponent

Code overview


List

The List Component should be used to create ordered or unordered lists.

Props

Any prop from Chakra UI List can be used.

Usage

import React from 'react'
import List from 'Components/List'
import ListItem from 'Components/ListItem'

const SomeComponent = () => (
  <List>
    <ListItem>Free shipping + returns</ListItem>
    <ListItem>Extended warranty</ListItem>
    <ListItem>We’re here for you 24/7</ListItem>
  </List>
)

export default SomeComponent

Code overview


ListItem

The List's child Component. It renders a li HTML element.

Props

Any prop from Chakra UI List Item can be used.

Usage

Refer to the List's usage above.

Code overview


Select

The Select Component allow users to select a predefined option.

Props

prop

type

description

onChange

(event) => {}

Function to handle Select's change.

options

array

Array of Select's options.

In addition, any prop from Chakra UI Select can be used.

Usage

import React from 'react'
import Select from 'Components/Select'

const SomeComponent = () => {
  const handleSelectChange = (event) => {
    console.log(event.currentTarget.value)
  }

  return (
    <List
      onChange={handleSelectChange}
      options={[{value: 0, text: 'Size 0'}, {value: 1, text: 'Size 1'}]}
    />
  )
}

export default SomeComponent

Code overview


Spacer

The Spacer Component can be used to create space between flex elements.

Usage

import React from 'react'
import Flex from 'Components/Flex'
import Spacer from 'Components/Spacer'

const SomeComponent = () => (
  <Flex>
    <div>Item 1</div>
    <Spacer />
    <div>Item 2</div>
  </Flex>
)

export default SomeComponent

Code overview


Spinner

The Spinner Component can be used to represent progress between a transition of state from one action to another, for instance; a form submission in progress.

Usage

import React from 'react'
import Spinner from 'Components/Spinner'

const SomeComponent = () => (
  <Spinner />
)

export default SomeComponent

Props

Any prop from Chakra UI Divider can be used.

Code overview


Stack

Props

The Stack Component can be used to stack elements horizontally or vertically.

Any prop from Chakra UI Stack can be used.

Usage

import React from 'react'
import Stack from 'Components/Stack'

const SomeComponent = () => (
  <Stack>
    <div>Item 1</div>
    <div>Item 2</div>
  </Stack>
)

export default SomeComponent

Code overview


Text

The Text element should be used to render text. By default it renders a p HTML element, but it can be changed by using the as props.

Props

prop

default

description

noOfLines

number

Truncate the text if after the specified number of lines.

In addition, any prop from Chakra UI Text can be used.

Usage

import React from 'react'
import Text from 'Components/Text'

const SomeComponent = () => (
  <Text>
    <Text as="strong">Copyright (c) 2021</Text>
    Copyright Holder All Rights Reserved.
  </Text>
)

export default SomeComponent

Code overview


VStack

The VStack (Vertical Stack) Component allows you to easily stack elements vertically.

Props

Any prop from Chakra UI VStack can be used.

Usage

Code overview


Did this page help you?