Components

Components are one of the most important and useful features of Reflex.

Installation

Components are provided by the @reflexjs/components package and is aleady included in the base starter.

Learn how to use Reflex components in any React project.

What is a component?

A component is a small reusable piece of content that you can use to build your site. In Reflex we have made it easy for you to build and theme components.

Creating and styling component is as easy as writing HTML.

If you know HTML you know how to use this.

Let's take a look.

HTML to Components

In HTML, to create a button you use the button tag. In Reflex, you use Button. In HTML, to create a heading, you use h1, in Reflex you use H1. See what we did there?

Every HTML tag has an equivalent Reflex component. We have built components for almost all HTML tags.

Build a button

Start with a simple HTML button.

<button>A button</button>

Let's turn this into a Reflex/React component.

<Button>A button</Button>

This is a button but with power!

Style a button

Styling is a easy as adding attributes to the component, just like HTML.

<Button bg="tomato">A button</Button>

Now turn this into a fancy button.

<Button
  background="tomato"
  color="white"
  px="4"
  py="3"
  fontSize="md"
  border="0"
  borderRadius="md"
  hoverBackground="purple"
>
  Fancy Button
</Button>

That was easy. You are now ready to build a hero.

Note: Grid, Flexbox, Container and Image are special components we added to Reflex. You can learn more about using images here.

Learn more about theming.