A simple way to include CSS with React Components

Usage no npm install needed!

<script type="module">
  import helpscoutFancy from 'https://cdn.skypack.dev/@helpscout/fancy';


❄️ Fancy

npm version Build Status Coverage Status npm version node npm

A simple way to include CSS with React Components.

  • Emotion, under the hood.
  • Write plain ol' CSS. Period.
  • Pre-processing when you need it. Powered by Stylis.
  • Integrate with ease into your existing setup. No fiddling with Webpack required.
  • iFrame support, out-of-the-box!
  • Theming support!
  • Scoping, to integrate into older (more hostile) CSS systems.

🔧 Installation

npm install --save @helpscout/fancy

🕹 Usage

Here's a quick example of how you can compose regular CSS with your React components.

import React from 'react'
import styled from '@helpscout/fancy'

const Button = props => {
  const { children, styles, ...rest } = props

  <button className={styles.Button} {...rest}>

export default styled(Button)`
  background: white;
  border: 1px solid #eee;

📘 Documentation

View the docs to get started with Fancy!

💼 Migration

❤️ Credit

Many thanks to the folks who built Emotion and Styled Components.