Getting Started

Install Reactberry and wire it into a Next.js app with the correct provider, Next config, and first component imports.

Getting Started

This guide shows the smallest useful setup for using Reactberry in a Next.js project.

Requirements

Next.js 16+
React 19+
styled-components 6+

1. Install the package

Install the current beta release of Reactberry and the styling dependency it expects.

bash

npm install @reactberry/system@beta styled-components

If you prefer to pin the exact prerelease, install @reactberry/system@2.0.0-beta.2 instead.

2. Transpile the package in Next.js

@reactberry/system ships source files, so your Next app should transpile it.

In next.config.ts:

typescript

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@reactberry/system"],
};

export default nextConfig;

3. Wrap your app with the provider

Use DesignSystemProvider in your root layout so Reactberry can register styled-components, provide the theme, and apply its global styles.

In app/layout.tsx:

typescript

import { DesignSystemProvider } from "@reactberry/system/providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <DesignSystemProvider>{children}</DesignSystemProvider>
      </body>
    </html>
  );
}

4. Start with the element primitives

Import the core UI primitives from @reactberry/system/elements.

Example for app/page.tsx:

typescript

import { Box, Button, Text } from "@reactberry/system/elements";

export default function HomePage() {
  return (
    <Box p="l" display="flex" flexDirection="column" gap="m">
      <Text as="h1" fontSize="xxxl" fontWeight="700">
        Hello Reactberry
      </Text>
      <Text as="p" color="secondary">
        Your design system is now wired into Next.js.
      </Text>
      <Button variant="default">Get Started</Button>
    </Box>
  );
}

5. Use the published subpath imports

Prefer the package subpaths when building your app:

@reactberry/system/providers
@reactberry/system/elements
@reactberry/system/blocks
@reactberry/system/themes

That keeps imports explicit and matches how the package is exported.

Notes

DesignSystemProvider includes the styled-components registry and theme setup.
The default theme is light.
You can pass themeName to the provider if you want to switch themes later.

Next step

Once the provider and primitives are working, continue with Theming, then read Elements and Blocks to understand how Reactberry is organized.