A themeable UI library for Next.js
Elements, blocks, charts and hooks in one package. Styled with styled-components and theme tokens, in light and dark.
$ npm install @reactberry/system@beta styled-componentsLive components
Try them right here
Every card below renders the real component. Switch the theme in the header to see both modes.
The library
Everything in one package
Start with the elements, compose them into blocks, and add charts and hooks where you need them.
Foundations
1 pageUse Reactberry's built-in themes and switch between light and dark mode with the provider.
Elements
4 pagesElements are Reactberry's foundational items. Use them as the base layer for layout, typography, actions, and form inputs.
Blocks
73 pagesBuild larger UI patterns with Reactberry blocks after your provider and primitive elements are already in place.
Charts
Bar and pie charts built on Nivo, with a shared chart theme.
Hooks
10 pagesReact hooks for viewport, input, hover, storage, clipboard, and floating-panel behaviour, exported from the package root.
Guides
1 guideGuides are longer-form walkthroughs that explain workflows, decisions, and implementation patterns around Reactberry.
Setup
Running in three steps
Add the package, let Next.js transpile it, and wrap your root layout with the provider.
Install
Add the package and styled-components.
npm install @reactberry/system@beta \
styled-componentsTranspile
The package ships source files, so Next.js transpiles it.
const nextConfig = {
transpilePackages: ["@reactberry/system"],
};Wrap your app
The provider registers the theme and global styles.
<DesignSystemProvider>
{children}
</DesignSystemProvider>