Reactberry

Blocks

Build larger UI patterns with Reactberry blocks after your provider and primitive elements are already in place.

After you have the provider wired up and are comfortable with Box, Text, Button, and Field, the next layer is @reactberry/system/blocks.

Blocks are composed reusable structures built on top of elements.

Importing blocks#

typescript
import { Container, Main, Heading, Divider } from "@reactberry/system/blocks";

When to use blocks#

Use blocks when you want more structure and behavior out of the box.

Good examples include:

  • page shells and content containers
  • headings and layout helpers
  • overlays, drawers, popovers, and menus
  • tables, galleries, sliders, and other richer UI patterns

Blocks vs elements#

Use @reactberry/system/elements for foundational items:

  • Box
  • Text
  • Button
  • Field

Use @reactberry/system/blocks when you want a composed reusable structure with more opinionated behavior or layout built in.

Example page structure#

typescript
import { Box, Text, Button } from "@reactberry/system/elements";
import { Container, Main, Heading, Divider } from "@reactberry/system/blocks";

export default function DashboardPage() {
  return (
    <Container>
      <Main>
        <Box p="l" display="flex" flexDirection="column" gap="m">
          <Heading>
            <Text as="h1" fontSize="xxxl" fontWeight="700">
              Dashboard
            </Text>
          </Heading>
          <Text as="p" color="secondary">
            Start with primitives, then use blocks to scale the layout.
          </Text>
          <Divider />
          <Button variant="default">Create report</Button>
        </Box>
      </Main>
    </Container>
  );
}

Block reference#

Layout and structure#

UI#

Interactive and overlays#

Data, navigation, and forms#

Display and media#

Effects and animation#

Cards#

Utilities#

  1. build the first screen with elements
  2. notice repeated layout or behavior patterns
  3. replace that repetition with blocks where they fit naturally
  4. keep custom composition for anything highly app-specific

Next step#

Once you are comfortable with blocks, continue into the Guides section for longer walkthroughs and implementation patterns.