Skip to content
🧚‍♀️Turn your React function components into responsive components with style props using Style Hooks and Emotion
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Bundlephobia Code coverage Build status License

A suite of utilities for adding responsive style props to your React components using Emotion

Use @style-hooks to seamlessly add themes, CSS-in-JS styles, variants, breakpoint props, a css prop, and an as prop to any React function component.

For a styled-components-like interface, check out @style-hooks/styled.

/** @jsx jsx */
import React from 'react'
import {css, jsx} from '@emotion/core'
import {createStyleHook, createElement, ThemeProvider} from '@style-hooks/core'
// Your very own style hook
const useBox = createStyleHook('box', {
  w: (value, theme, props) => css`
    width: ${value +};
// Accompanying component w/ style props using
// your style hook
const Box = props => {
  props = useBox(props)
  // createElement here provides this component
  // an 'as' prop, you could also use emotion's
  // jsx()
  return createElement('div', props)
// The theme for your app
const theme = {box: {sizeUnit: 'px'}}
// Usage w/ theme
const App = () => (
  <ThemeProvider theme={theme}>
      Shows off the 'as' prop, 
      followed by 'breakpoint props',
      followed by the 'css' prop
      w="200:phone 300:tablet"
      css={theme => css`
        @media ${} {
          height: 200px;
          background-color: hotpink;

        @media ${theme.breakpoints.tablet} {
          height: 300px;
          background-color: skyblue;
      Hello world from this {'<main>'}


npm i @style-hooks/core @emotion/core

yarn add @style-hooks/core @emotion/core


Check out @style-hooks on CodeSandbox

API Documentation

Complete documentation can be found here

You can’t perform that action at this time.