Reflexjs

website·Indexed 32 days ago

A styling library for rapid UI development featuring style props, color modes, themes, and variants. It provides a set of pre-built blocks for components like heroes, forms, and pricing tables, and supports integration with Next.js, Gatsby, and Create React App. The library includes a variant API for complex styles and hooks such as useTheme and useColorMode.

Tokens: 23K
Snippets: 101
Records: 106
Agent score: 66%

What's inside Reflexjs

Overview of Reflexjs styling library
Reflexjs is a styling library designed for speed and developer experience. It enables component styling via style props and constraints based on the System UI specifications. For users already employing Theme UI, Reflexjs operates as a developer tool with a zero-runtime build size, meaning it is not included in the final production build.
https://reflexjs.org/docs
Understand the Reflexjs Theme Specification
Reflexjs themes are based on an extension of the Theme UI specification. A theme object consists of four primary data types:
- Scales: Plain objects or arrays of values used for related CSS properties (e.g., colors, fonts, spacing).
- Styles: Global styles injected via the GlobalStyles component.
- Variants: Composable style definitions for components.
- Icons: An SVG icon library used by the Icon component.
https://reflexjs.org/docs/theming/theme

Implement the Hero 001 block in ReflexJS

The Hero 001 block is a flexible hero section component that supports a subheading, heading, lead text, an image with configurable positioning, and custom buttons. To use this block, first create the component file and then invoke it within your page.

// 1. Create src/components/hero-001.jsx
import * as React from "react"

export default function Block({
  subheading,
  heading,
  text,
  image,
  imagePosition = "right",
  buttons,
  children,
  ...props
}) {
  return (
    <section py="6|12|20" {...props}>
      <div variant="container">
        <div
          display="grid"
          gridAutoFlow="dense"
          col="1|1|2"
          gap="8|8|12"
          alignItems="center"
        >
          {image && (
            <img
              colStart={`null|null|${imagePosition === "left" ? 1 : 2}`}
              w="full"
              rounded="lg"
              overflow="hidden"
              {...image}
            />
          )}
          <div
            d="flex"
            flexDirection="column"
            alignItems="center|flex-start"
            textAlign="center|left"
          >
            {subheading && <p variant="subheading">{subheading}</p>}
            {heading && (
              <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
                {heading}
              </h1>
            )}
            {text && (
              <p variant="text.lead" mt="2">
                {text}
              </p>
            )}
            {buttons}
            {children}
          </div>
        </div>
      </div>
    </section>
  )
}

Implement the Cards 001 block in ReflexJS

The Cards 001 block is a responsive grid of cards featuring icons, headings, and descriptions. To use this block, create a component file (e.g., src/components/cards-001.jsx) with the block source code and then import it into your page.

import * as React from "react"
import { Icon } from "reflexjs"

export default function Block({
  subheading,
  heading,
  text,
  buttons,
  cards,
  columns = 3,
  ...props
}) {
  return (
    <section py="4|6|12|20" {...props}>
      <div variant="container">
        <div textAlign="center">
          {subheading && <p variant="subheading">{subheading}</p>}
          {heading && (
            <h2 variant="heading.h1" lineHeight="1">
              {heading}
            </h2>
          )}
          {text && (
            <p variant="text.lead" mt="2">
              {text}
            </p>
          )}
        </div>
        {cards && (
          <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
            {cards.map((card, index) => (
              <Card key={index} {...card} />
            ))}
          </div>
        )}
        {buttons}
      </div>
    </section>
  )
}

export function Card({
  heading,
  text,
  icon = { name: "check" },
  link,
  ...props
}) {
  return (
    <div
      display="flex"
      flexDirection="column"
      textAlign="center"
      borderWidth="1"
      rounded="lg"
      p="8"
      {...props}
    >
      {icon && (
        <div
          display="flex"
          alignItems="center"
          justifyContent="center"
          size="18"
          rounded="full"
          mb="4"
          mx="auto"
          bg={icon.bg || "secondary"}
        >
          <Icon size="10" color="white" {...icon} />
        </div>
      )}
      <div flex="1">
        <h4 variant="heading.h4">{heading}</h4>
        {text && (
          <p variant="text.paragraph text.sm" mt="1">
            {text}
          </p>
        )}
        {link}
      </div>
    </div>
  )
}

Use the Features 003 block in a page

To use the Features 003 block, import the Block component and pass the content via props. The features prop accepts an array of objects, each containing a heading, text, and an icon object (with a name and optional bg color).

import Block from "../src/components/features-003"

export default function Example() {
  return (
    <Block
      subheading="Subheading"
      heading="Getting started"
      text="Discover the tool that drives engagement and productivity."
      features={[
        {
          heading: "Marketing Strategies",
          text: "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: { name: "activity" },
        },
        {
          heading: "Business Planning",
          text: "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: { name: "credit-card" },
        },
        {
          heading: "Premium Support",
          text: "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: { name: "gift" },
        },
      ]}
      image={{
        src: "/images/placeholder.jpg",
        alt: "Hero image",
      }}
    />
  )
}

Update React component props for TypeScript in Reflexjs 2.0
In Reflexjs 2.0, React components that use styles props must now extend React.HTMLAttributes<T> (or the specific element attribute interface like React.AnchorHTMLAttributes<HTMLAnchorElement>) to ensure proper type safety for style props.
```
interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  children?: React.ReactNode
}

export function ButtonLink({ children, ...props }) {
  return (
    <a variant="button.link" {...props}>
      {children}
    </a>
  )
}
```
https://reflexjs.org/docs/upgrade
Manage color modes for light and dark themes
Reflexjs supports multiple color modes. By defining semantic color keys (like background or text) in the theme, you can apply styles that automatically adapt to the active color mode.
```
// Theme definition
const theme = {
  colors: {
    background: "#fff",
    color: "#111"
  }
};

// Usage in component
<div bg="background" color="text">
  <h4>Heading</h4>
  <p>Content here</p>
</div>
```
https://reflexjs.org/

Set up the Reflexjs ThemeProvider in index.js

Wrap the application root component with the ThemeProvider from reflexjs and pass the generated theme object as a prop to enable styling across the app.

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import theme from "./theme"
import { ThemeProvider } from "reflexjs"

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
)

Configure and use the Form 001 block

To use the Form 001 block, import the component and pass the following props to customize the content area adjacent to the form:

subheading: Small uppercase text above the heading.
heading: The main title of the section.
text: Lead paragraph text.
buttons: A React element (e.g., an anchor tag) to display as a call-to-action.

import * as React from "react"
import Block from "../src/components/form-001"

export default function Example() {
  return (
    <Block
      subheading="Subheading"
      heading="Turn followers into customers"
      text="Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus temporibus."
      buttons={
        <a variant="button.muted" href="#" mt="6">
          Learn more
        </a>
      }
    />
  )
}

Implement mobile-first responsive styles using pipe syntax
To make any style prop responsive in Reflexjs, separate the values with a pipe (|). This allows for a mobile-first approach where different values are applied based on screen size breakpoints.
```
<div
  display="grid"
  col="1 | 2 | 3"
  gap="4"
>
  <Cube />
  <Cube />
  <Cube />
  <Cube />
</div>
```
https://reflexjs.org/
Deploy a Reflexjs site to Vercel
To deploy to Vercel, install the Vercel CLI and run the production deployment command from the project root.
```
# Install CLI
yarn global add vercel # or npm i -g vercel

# Deploy
vercel --prod
```
https://reflexjs.org/guides/build-landing-page-with-nextjs

Implement the Form 002 subscription block

The Form 002 block is a centered subscription form component featuring a subheading, heading, lead text, and an email input field with a submit button. To use this block, create a component file and then invoke it within your page with the desired content props.

// src/components/form-002.jsx
import * as React from "react"
import { VisuallyHidden } from "reflexjs"

export default function Block({ subheading, heading, text, ...props }) {
  return (
    <section py="6|8|12|20" {...props}>
      <div variant="container">
        <div
          display="flex"
          flexDirection="column"
          justifyContent="center"
          alignItems="center"
          textAlign="center"
        >
          {subheading && (
            <p color="primary" textTransform="uppercase" m="0">
              {subheading}
            </p>
          )}
          {heading && (
            <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
              {heading}
            </h1>
          )}
          {text && (
            <p variant="text.lead" mt="2">
              {text}
            </p>
          )}
          <form display="grid" col="1|auto auto" mt="6" gap="4" w="full|auto">
            <VisuallyHidden>
              <label htmlFor="email">Email</label>
            </VisuallyHidden>
            <input
              variant="input"
              type="email"
              id="form-04-email"
              name="email"
              placeholder="Type your email"
            />
            <button type="submit" variant="button.primary">
              Subscribe
            </button>
          </form>
        </div>
      </div>
    </section>
  )
}