Pear Deck UIKit is a collection of reusable React components, design resources, and guidelines for creating a consistent experience and feel for Pear Deck products.
This monorepo consists of the following packages:
Component | Description |
---|---|
uikit-core |
Core React components |
uikit-icons |
Pear Deck SVG icon components |
uikit-storybook |
Component and design storybook and documentation |
eslint-config |
A common eslint configuration used across Pear Deck projects |
This project uses the Github Package Registry (not NPM) to deploy packages.
.npmrc
and add the following so that npm knows to find @peardeck
-scoped packages there.@peardeck:registry=https://npm.pkg.github.com
npm
. When prompted for your username, use your Github username; for a password you will need to generate (or use an existing) Github personal access token with the read:packages
scope as your password.npm login --scope=@peardeck --registry=https://npm.pkg.github.com
# Using Yarn (preferred)
yarn add @peardeck/eslint-config @peardeck/uikit-core @peardeck/uikit-icons
# Using NPM
npm install --save @peardeck/eslint-config @peardeck/uikit-core @peardeck/uikit-icons
README.md
of each package for specific instructions. See Usage, below, for quickly getting started with UIKit components.Wrap your root component in a ThemeProvider
using the defaultTheme
:
import { defaultTheme, ThemeProvider } from "@peardeck/uikit-core";
import Root from "./Root"; // or whatever
export const App = () => (
<ThemeProvider theme={defaultTheme}>
<Root />
</ThemeProvider>
);
Ideally, most customization should be done at the theme level. For example:
import { defaultTheme, ThemeProvider } from "@peardeck/uikit-core";
import Root from "./Root"; // or whatever
const appTheme = {
...defaultTheme,
// Alter default media query breakpoints
breakpoints: [200, 300, 400],
// Tighter spacing scale than our default theme
space: [0, 2, 4, 8, 16, 32, 64, 128, 256],
// Dark theme with retro colors
colors: {
...defaultTheme.colors,
primary: "#0ff",
seconday: "#b0f",
accent: "#f0b",
background: "#000",
text: "#eee",
muted: "#aaa",
},
};
export const App = () => (
<ThemeProvider theme={appTheme}>
<Root />
</ThemeProvider>
);
Individual components can be altered for one-off scenarios:
This should generally be avoided as much as possible, and if becomes necessary more often than not, the underlying theme should be modified to suit the use case.
import { defaultTheme, ThemeProvider } from "@peardeck/uikit-core";
import Root from "./Root"; // or whatever
export const App = () => (
<ThemeProvider theme={defaultTheme}>
<Box p="10em">
<Heading1 color="red.9">This will be red text!</>
</Box>
</ThemeProvider>
);