Pop
Usage

Using Pop

Getting started using atomic classes with pop is easy. Pop classes can be set inside of an sx prop. Let's take a simple Flex component and customize it with pop props!

import { Flex } from '@cakepop/react';
 
<Flex sx={{ bg:'blue', x:'100px', y:'100px', p:'$2' }}>
    <h1 style={{ color:'white' }}>Hi!</h1>
</Flex>;

Hi!

You are able to use Tokens as properties.

import { Flex } from '@cakepop/react';
 
<Flex sx={{ bg:'$red500', x:'100px', y:'100px', p:'$2' }}>
    <h1 style={{color:'white'}}>Hi!</h1>
</Flex>;

Hi!

Responsive properties are also supported.

import { Flex } from '@cakepop/react';
 
<Flex sx={{ bg: { base: '$red500', hover: '$green500' }, x: '100px', y: '100px', p:'$2' }}>
  <h1 style={{ color: 'white' }}>Hi!</h1>
</Flex>;

Hi!

Unlike the orginal Sprinkles API, Rainbow Sprinkles allows you to use arbitrary values in addition to predefined props. For this example we will set the padding to 17px.

import { Flex } from '@cakepop/react';
 
<Flex sx={{ bg: { base: '$red500', hover: '$green500' }, x: '100px', y: '100px', p:'17px' }}>
  <h1 style={{ color: 'white' }}>Hi!</h1>
</Flex>;

Hi!

Last updated on February 16, 2023
Properties