No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Installation

A quick start guide for installing and configuring Gamut in a new application

Installation and setup

  1. Add gamut-kit and peer dependencies dependencies
yarn add @codecademy/gamut-kit @emotion/react @emotion/styled
  1. Add peer dependencies (no-op) for intellisense to package.json.
{
  "peerDependencies": {
    "@codecademy/gamut": "*",
    "@codecademy/gamut-icons": "*",
    "@codecademy/gamut-illustrations": "*",
    "@codecademy/gamut-patterns": "*",
    "@codecademy/gamut-styles": "*",
    "@codecademy/gamut-tests": "*",
    "@codecademy/variance": "*"
  }
}
  1. Wrap your application root with GamutProvider and give it the theme you would like to use for your app.
import React from 'react';
import { render } from 'react-dom';
import { GamutProvider, theme } from '@codecademy/gamut-styles';

import { App } from './App';

const rootElement = document.getElementById('root');

render(
  <GamutProvider>
    <App />
  </GamutProvider>,
  rootElement
);

GamutProvider handles a few critical tasks that need to happen in order for components to work.

  1. Wraps components in the ThemeContext
  2. Creates an emotion cache with our plugins
  3. Adds Global styles and CSS Variables
  4. Sets the current Color Mode context and variables.

Note: For react frameworks like Next and Gatsby this will be slightly different (see the SSR section for further steps for each framework). Your entry points for each framework will be:

  • Next _app.tsx
  • Gatsby gatsby-ssr.js gatsby-browser.js and use wrapRootElement in each.
  1. Add required types for your theme, which will determine what props Gamut components allow.
// theme.d.ts
import '@emotion/react';

// Import the appropriate theme shape `PlatformTheme` or `CoreTheme`
import { CoreTheme } from '@codecademy/gamut-styles';

declare module '@emotion/react' {
  export interface Theme extends CoreTheme {}
}

For more information this declaration please checkout the official emotion documentation!

  1. Start Building!
import { Background } from '@codecademy/gamut-styles';
import { Text } from '@codecademy/gamut';

export const App = () => (
  <Background bg="beige">
    <Text as="h1">Hello World!</Text>
  </Background>
);