Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,
Build something amazing.

A library for rapid UI development with style props, color modes, themes and variants.

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.

Typescript

Typescript out of the box with Intellisense and Emmet support.

Get Started , GitHub
hero-002 screenshot
features-001 screenshot
form-002 screenshot
footer-001 screenshot
header-002 screenshot
hero-003 screenshot
pricing-001 screenshot
call-to-action-001 screenshot
footer-002 screenshot
header-001 screenshot
hero-001 screenshot
call-to-action-003 screenshot
features-002 screenshot
form-001 screenshot
footer-001 screenshot

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.

Get Started

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub