Installation

Learn how to install and start using @stacks/ui in your applications today.

Stacks UI is a React component library built for use within the Stacks ecosystem. It uses emotion v11 and theme-ui under the hood for building complex, accessible UI components.

Installation

Note: we use yarn, but you can also use npm

First, make sure to install emotion and its babel plugin:


yarn add @emotion/core @emotion/react @emotion/babel-pluginyarn add @emotion/core @emotion/react @emotion/babel-plugin

Then, install @stacks/ui:


yarn add @stacks/ui @stacks/ui-core @stacks/ui-themeyarn add @stacks/ui @stacks/ui-core @stacks/ui-theme

With next.js

If you're using @stacks/ui with next.js, make sure to check out the with emotion example to correctly use emotion in a SSR environment. You can also look at the source code for this docs site, as it's using next.js.

Usage

To use any component from @stacks/ui, we need to import the ThemeProvider into the root component of the app that will be using Stacks UI. The ThemeProvider creates a React Context scope for all of our components to use.


// app.tsx
import React from 'react';
import { ThemeProvider } from '@stacks/ui';

<ThemeProvider>{children}</ThemeProvider>;// app.tsximport React from 'react';import { ThemeProvider } from '@stacks/ui';<ThemeProvider>{children}</ThemeProvider>;

Reset global styles

Typically you will want to apply a css reset to your page. @stacks/ui exports a CSSReset that will reset and improve the browsers default styles. It's heavily inspired by Tailwind's preflight.


const App({ children }) => {
  return (
    <ThemeProvider>
      <CSSReset />
      {children}
    </ThemeProvider>
  );
}const App({ children }) => {  return (    <ThemeProvider>      <CSSReset />      {children}    </ThemeProvider>  );}

Using components

Simply import components by name from the @stacks/ui package, as shown below.


import { Button } from '@stacks/ui';import { Button } from '@stacks/ui';

Contributing

Please see our contribution guidelines to learn how you can contribute to this project.

Search docs

⌘

On this page