Installation

Install the package and its React peer dependencies in the consuming app.

pnpm add @giddaa-housing/ui react react-dom

If the app uses npm, yarn, or bun, install the same package names with that package manager.

Import styles

Import the package stylesheet once at the application root. This is the only required CSS import.

import "@giddaa-housing/ui/styles.css";

For apps that centralize styles in CSS, import the same file from the global stylesheet.

@import "@giddaa-housing/ui/styles.css";

Add the Giddaa theme only when the app wants the Giddaa brand colors, chart palette, gradients, shadows, elevations, and dark-mode values.

@import "@giddaa-housing/ui/styles.css";
@import "@giddaa-housing/ui/css/giddaa.css";

Configure the font

Giddaa UI reads the application font from the app. For non-Next apps, install Red Hat Display through Fontsource.

pnpm add @fontsource-variable/red-hat-display

Then import the Fontsource CSS and apply the family in your global stylesheet.

@import "@giddaa-housing/ui/styles.css";
@import "@fontsource-variable/red-hat-display/wght.css";

body {
  font-family: "Red Hat Display Variable", sans-serif;
}

If your app uses Tailwind theme tokens, also map --font-sans.

@theme {
  --font-sans: "Red Hat Display Variable", ui-sans-serif, system-ui, sans-serif;
}

Next.js font setup

Use next/font to load Red Hat Display without a render-blocking external stylesheet.

import type { Metadata } from "next";
import { Red_Hat_Display } from "next/font/google";
import "./globals.css";

const redHatDisplay = Red_Hat_Display({
  subsets: ["latin"],
  variable: "--font-red-hat-display",
  display: "swap",
});

export const metadata: Metadata = {
  title: "App",
};

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

Then map the Next.js font variable to the design-system token in globals.css.

@theme {
  --font-sans: var(--font-red-hat-display), ui-sans-serif, system-ui, sans-serif;
}

Import components

Use public subpath imports. There is no root component export, so do not import components from @giddaa-housing/ui.

import { Button } from "@giddaa-housing/ui/button";
import { Dialog } from "@giddaa-housing/ui/dialog";
import { BarChart } from "@giddaa-housing/ui/bar-chart";

Avoid root imports and unpublished source paths. Components are only available from documented subpath exports.

Status before adoption

Check the component page before adopting a component. Pages marked hardening, experimental, or deprecated are intentionally visible, but they should not be treated as default stable choices.

Import styles

Configure the font

Next.js font setup

Import components

Status before adoption

On this page