Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

Presets

Reflex includes a few presets you can use as starting point for your themes.

You can see presets in action in the Blocks library.

Base

npm i @reflexjs/preset-base typeface-inter

Extend base

src/@reflexjs/gatsby-theme-base/theme.js
import typeface-inter
import base from "@reflexjs/preset-base"
export default {
preset: base,
// Overrides.
colors: {
primary: `purple`,
},
}

Flex

npm i @reflexjs/preset-flex typeface-open-sans typeface-prata

Extend flex

src/@reflexjs/gatsby-theme-base/theme.js
import typeface-open-sans
import typeface-prata
import flex from "@reflexjs/preset-flex"
export default {
preset: flex,
// Overrides.
colors: {
primary: `#09f`,
},
}

You can also use any Theme UI presets.

StylingComponents

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github