Fireberry Design System

The Fireberry Design System (@fireberry/ds) is a React component library that helps your app look native to the Fireberry platform.

Resources:

Installation

npm install @fireberry/ds

Setup

Wrap your app with the theme provider:

import { DSThemeContextProvider } from '@fireberry/ds';

function App() {
  return (
    <DSThemeContextProvider isRtl={false}>
      {/* Your app */}
    </DSThemeContextProvider>
  );
}

Prop	Type	Default	Description
`isRtl`	`boolean`	`false`	Enable right-to-left layout

Quick Example

import {
  DSThemeContextProvider,
  Typography,
  Button,
  Checkbox
} from '@fireberry/ds';

function MyApp() {
  return (
    <DSThemeContextProvider isRtl={false}>
      <Typography type="h1">Welcome</Typography>
      <Typography type="text">Get started with Fireberry.</Typography>

      <Checkbox label="I agree to the terms" />

      <Button label="Continue" color="success" variant="primary" />
    </DSThemeContextProvider>
  );
}

Available Components

The Design System includes components for common UI patterns:

Category	Components
Buttons	Button, IconButton, MultiButton
Form Inputs	Checkbox, Toggle, RadioButton
Typography	Typography (h1, h2, h3, text, caption, etc.)
Icons	Icon (260+ icons available)
Display	Avatar, Breadcrumb, List, ListItem
Layout	Collapse, Stepper

💡
Tip
Explore all components interactively in Storybook.

Core Concepts

Colors

The design system uses semantic colors:

Color	Usage
`success`	Positive actions, confirmations (green)
`destructive`	Dangerous actions, errors (red)
`warning`	Caution, alerts (orange)
`neutral`	Default, secondary actions (gray)
`information`	Informational content (blue)

<Button label="Save" color="success" />
<Button label="Delete" color="destructive" />
<Button label="Cancel" color="neutral" />

Button Variants

Variant	Description
`primary`	Solid filled background
`secondary`	Outlined with accent on hover
`text`	Text only, no background
`outlined`	White background with border

<Button label="Primary" variant="primary" />
<Button label="Secondary" variant="secondary" />
<Button label="Text" variant="text" />

Typography Types

Type	Use Case
`h1`, `h2`, `h3`	Page and section headings
`title`, `subTitle`	Card titles, labels
`text`, `largeText`	Body content
`caption`	Small labels, hints

<Typography type="h1">Page Title</Typography>
<Typography type="text">Regular paragraph text.</Typography>
<Typography type="caption" color="neutral">Last updated: Today</Typography>

Icons

The library includes 260+ icons. Import the IconName enum to use them:

import { Icon, IconName } from '@fireberry/ds';

<Icon icon={IconName.Settings} size="20px" />
<Icon icon={IconName.Check} size="16px" color="#27ae60" />

Common icons: Check, Close, Edit, Delete, Search, Settings, User, Bell, Calendar, Document

📘
Browse Icons
See all available icons in Storybook under the Icon component.

Theming

Access theme values in your components:

import { useDSThemeContext } from '@fireberry/ds';

function CustomComponent() {
  const { theme, isRtl, palette } = useDSThemeContext();

  return (
    <div style={{ color: palette.green5 }}>
      Custom styled content
    </div>
  );
}

Example: Settings Form

import { useState } from 'react';
import {
  DSThemeContextProvider,
  Typography,
  Toggle,
  Button
} from '@fireberry/ds';

function SettingsForm() {
  const [notifications, setNotifications] = useState(true);
  const [autoSave, setAutoSave] = useState(false);

  return (
    <DSThemeContextProvider isRtl={false}>
      <Typography type="title">Settings</Typography>

      <div style={{ marginTop: 16 }}>
        <Toggle
          isSelected={notifications}
          selectedLabel="Notifications On"
          unselectedLabel="Notifications Off"
          onChange={setNotifications}
        />
      </div>

      <div style={{ marginTop: 16 }}>
        <Toggle
          isSelected={autoSave}
          selectedLabel="Auto-save On"
          unselectedLabel="Auto-save Off"
          onChange={setAutoSave}
        />
      </div>

      <div style={{ marginTop: 24 }}>
        <Button label="Save" color="success" variant="primary" />
      </div>
    </DSThemeContextProvider>
  );
}

When to Use the Design System

Use it when:

Building React apps
You want your app to look native to Fireberry
You need consistent, accessible UI components

You might not need it when:

Building with vanilla HTML/JS
Using a different framework (Vue, Angular)
You have custom branding requirements

📘
Note
The Design System is optional. You can build Fireberry apps with any UI approach — the SDK works independently.

Next Steps

Storybook — Interactive component explorer
SDK — Access data in your components
Component Types — Where your app appears in Fireberry