Skip to content
Go to file

Latest commit


Git stats


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


A full-featured functional CSS-in-JS solution, adapted from CXS to make it suitable for production websites. You provide a function accepting component props and your application's theme, and returning a map of styles (({...props, theme}) => ({key1: style, key2: style})), and useStyles will return a map of classnames (like {key1: className, key2: className}).

  • Everything CXS has plus:
  • React hook API
  • An efficient functional design for complex components
  • Server-side rendering and client-side hydration
  • Comprehensive and performant vendor prefixing
  • Animation keyframes
  • Ordered media-queries to ensure correct cascade precedence

How to use

Install via npm i freyja.

Create your styled component.

import useStyles from 'freyja'

// this could be in a separate file if you like
const titleStyles = ({
  theme: {
}) => ({
  wrapper: {
    textAlign: 'center',
    padding: scale.large
  title: {
    fontFamily: font.display

const Title = props => {
  const styles = useStyles(titleStyles, props)
  const {text, children} = props
  return (
    <div className={styles.wrapper}>
      <h1 className={styles.title}>{text || children}</h1>

export const Title

// use like: <Title color={'red'} text={'My first title'} />

Wrap your app in a ThemeProvider (must have only 1 child). Multiple ThemeProviders can be nested, with merged themes only accessible to children within the nested provider:

import {ThemeProvider, animation} from 'freyja'
import * as traits from 'freyja/traits' // optional helper methods

const theme = {
  font: {
    display: 'Merriweather',
    copy: 'Helvetica'
  scale: {
    small: 12,
    medium: 16,
    large: 24
  animations: {
    spin: animation({ // create named animations with full keyframe support
      from: {
        transform: 'rotate(0deg)'
      to: {
        transform: 'rotate(360deg)'

const App = ({children}) => (
  <ThemeProvider theme={theme}>

export default App

Server-side rendering

Simply call the styleTags dehydration function to receive a string of style tags to insert in your document. Styles will automatically be hydrated on the client.

If rendering your views with React on the server, StyleComponents can be used in the <head>, like: <head><StyleComponents /></head>

import React from 'react'
import {renderToString} from 'react-dom/server'
import {styleTags} from 'freyja'
import App from './App'

const renderMiddleware = (req, res) => {
  const appHTML = renderToString(<App />)
  const appStyleTags = styleTags()

    <!doctype html>


Pass styles as props to components.



No packages published
You can’t perform that action at this time.