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.

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:

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:

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:

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.