Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

❄️ 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, } = props

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

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.