React hooks, composers, and more for styling components with Aesthetic.

Usage no npm install needed!

<script type="module">
  import aestheticReact from 'https://cdn.skypack.dev/@aesthetic/react';


Aesthetic - React Integration

Build Status npm version npm deps

Provides styles for React components through hook or HOC based APIs. Built around the powerful Aesthetic core library.

import React from 'react';
import { createComponentStyles, useStyles } from '@aesthetic/react';

export const styleSheet = createComponentStyles((css) => ({
    button: css.mixin('reset-button', {
        padding: css.var('spacing-df'),

    button_block: {
        display: 'block',

export interface ButtonProps {
    children: React.ReactNode;
    block?: boolean;

export default function Button({ children, block = false }: ButtonProps) {
    const cx = useStyles(styleSheet);

    return (
        <button type="button" className={cx('button', block && 'button_block')}>


  • Hook and HOC based APIs for styling components, accessing themes, and handling directionality.
  • Global, document, and element level themes powered through context.
  • Nested themes that avoid polluting the global scope.
  • First-class directionality support (RTL, LTR).


  • React 16.6+ / 17+


yarn add @aesthetic/react react react-dom