gatsby-ui
v0.0.6
Published
Design system and component library for Gatsby themes
Downloads
59
Readme
Gatsby UI
Gatsby UI provides the basic building blocks for creating powerful and expressive websites built with React and Gatsby. It uses styled-system and styled-components to handle theming and styling.
It's inspired by atomic CSS approaches like Tachyons and Basscss, but instead uses CSS-in-JS to improve the authoring experience. Styles like spacing, typography, and colors are based on scales, but allow for an opt-out for one off styles.
The following would define the backgroundColor
as theme.colors.primary
:
<Button bg="primary" />
If you'd like, you can specify any value, like tomato
. If no theme value exists for a property, it falls back to the provided value:
<Button bg="tomato" />
Installation
yarn add gatsby-ui
Usage
import {
Box,
Flex,
Heading,
Text,
Provider
} from 'gatsby-ui'