This package will give you styled-components supporting CCSS out-of-the-box.


You can use this package as a replacement for any styled-components/cryptic-css imports.

import styled, { Ui, ccssd, ccss } from '@cryptic-css/styled'
// Ui
const Normal = <Ui d="f" />
const WithTagHelper = <Ui.section d="f" />
const WithExtend = styled(Ui)`
display: block;
// ccssd
const Normal = ccssd({ d: 'f' })
const WithTagHelper = ccssd.ul({ d: 'f' })

Exported modules

  • styled (default): original, untouched styled-components for cases when needed (the package re-exports all styled-components modules).
  • Ui: prepared component(s) for direct use; normally you only need to this.
  • ccss: the CCSS instance used by the default Ui and ccssd exports.
  • ccssd: a version of styled-components that has CCSS support.
  • All exports from '@cryptic-css/core' are being re-exported.


The exports are already a pre-configured versions. Skip this step if you don't need custom configuration and/or CCSS instance.

import { createStyledCCSS, createOptions, createCCSS } from '@cryptic-css/styled'
const options = createOptions()
const { ccss, Ui, ccssd } = createStyledCCSS(options)

React Native

Just simply use the same as styled-components, eg: Ui.View. In case you use Expo, you can import @cryptic-css/styled/native.