Framework Agnostic Core API

Get the best of Stitches without being bound to a framework

Stitches provides a framework agnostic API via the @stitches/core package.

The core API contains all the same benefits as the styled API. The main difference is that it returns classnames, instead of React Components.

This page is an overview on how the core API works.

Install Stitches Core from your terminal via npm or yarn.

# With npm
npm install @stitches/core

# With yarn
yarn add @stitches/core

Import css from @stitches/core.

import { css } from '@stitches/core';

Use the css function to create a Stitches component and add styles to it.

import { css } from '@stitches/core';

const button = css({
  backgroundColor: 'gainsboro',
  borderRadius: '9999px',
  fontSize: '13px',
  padding: '10px 15px',
  '&:hover': {
    backgroundColor: 'lightgray',
  },
});

Finally, render the component.

import { css } from '@stitches/core';

const button = css({...});

() => <button className={button()}>Button</button>;

Aside from css, these are the other functions available:

import {
  css,
  globalCss,
  keyframes,
  theme,
  createTheme,
  getCssText,
} from '@stitches/core';

Refer to the API page to learn more about each of them.

Basic styling examples with Stitches Core. The style object works the same as seen here.

In order to keep the bundle size to a minimum, Stitches uses JavaScript object notation rather than string syntax. Below, are examples of all of the common use cases.

For handling things like global resets, you can write global CSS styles. The global function will return another function, which you must call in your app.

const globalStyles = globalCss({
  '*': { margin: 0, padding: 0 },
});

() => {
  globalStyles();

  return <div ... />
};

const icon = css({
  display: 'inline-block',
  marginLeft: '5px',
  width: '16px',
});

const button = css({
  // base styles

  [`& .${icon}`]: {
    marginLeft: '5px',
  },
});

() => (
  <button className={button()}>
    Button
    <svg className={icon()}>...</svg>
  </button>
);

You can add variants by using the variants key. There is no limit to how many variants you can add.

const button = css({
  // base styles

  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        color: 'white',
        '&:hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        backgroundColor: 'gainsboro',
        '&:hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
});

() => <button className={button({ color: 'violet' })}>Button</button>;

Stitches provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values.

This works the same way as documented here.

All Stitches Components include a css prop. Use it to pass in overrides.

const button = css('button', {});

() => (
  <button
    className={button({
      css: {
        borderRadius: '0',
        '&:hover': {
          backgroundColor: 'black',
          color: 'white',
        },
      },
    })}
  >
    Button
  </button>
);