Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.0-alpha.8
Build something amazing.

Starter kits and blocks to kickstart your Gatsby and Nextjs sites.

Built using a styling library that has everything you care about.

Speed and excellent developer experience.

Blocks Library

A library of ready-to-use blocks that you can copy and paste.

Style props

Use any CSS property as prop to rapidly style your components.

Responsive styles

Add mobile-first responsive styles with a few keystrokes.

Themes support

Use a theme for typography, colors, and spacing.

Variants

Extract styles to your theme. Re-use them. Compose them.

Color Modes

Add dark mode. Add light mode. Add any color mode.

Get Started Demo

No learning curve.

You already know how to use this. Use any CSS property as style prop to rapidly style your components. No need to learn new syntax or class names.

Code
<button>
Button
</button>
Preview

Reflexjs also includes some optional helper props such as bg for backgroundColor, p for padding, mt for marginTop, rounded for borderRadius..etc.

Go responsive with less typing.

Add mobile-first responsive styles with a few keystrokes.

Code
<div
display="grid"
col="1"
gap="4"
>
<Cube />
<Cube />
<Cube />
<Cube />
</div>
Preview
One
Two
Three
Four

Make any style prop responsive by separating your values with a pipe |. It is the easiest way to add responsive styles.

Build a design system.

Use a theme for typography, colors, and spacing for constraint-based style props.

Theme
const theme = {
colors: {
primary: "#06f"
},
fontSizes: {
sm: "0.8rem",
lg: "2.4rem"
}
radii: {
sm: "1rem",
xl: "4rem"
}
}
Code
<button>
Button
</button>
Preview

First-class variant support.

Extract styles to your theme. Re-use them. Nest them. Compose them.

Theme
const theme = {
colors: {
primary: "#06f",
secondary: "#fb3640",
}
button: {
rounded: "md",
cursor: "pointer",
px: 4,
px: 3,
primary: {
bg: "primary"
}
secondary: {
bg: "secondary"
}
lg: {
px: 5
py: 4
}
}
}
Code
<button>Primary</button>
Preview

Color modes.

Add dark mode. Add light mode. Add any color mode.

Theme
const theme = {
colors: {
background: "#fff",
color: "#111"
}
}
Code
<div bg="background" color="text">
<h4>Heading</h4>
<p>Consectetur maxime similique quae.</p>
</div>
Preview

Heading

Consectetur maxime similique quae.

And a whole lot more...

Typescript, Intellisense, Emmet. Everything you need as a developer.

© 2020 Reflexjs

DocumentationBlocks LibraryGitHubTwitter