Installation

Install @gaudi/design-system and render your first component.

Install the package

Install the package from its GitHub repository, then import it as @gaudi/design-system.

pnpm add github:ahmadassaf/design-system

React, React DOM, Next.js, next-themes and Tailwind CSS are shared framework peers; Gaudi installs its own implementation libraries. Install the optional peers only for the features that need them:

pnpm add recharts        # Charts (@gaudi/design-system/charts)pnpm add @xyflow/react   # Flow (@gaudi/design-system/core/Flow + flow.css)

Use a component

import { Avatar, Button, Dialog } from '@gaudi/design-system';import '@gaudi/design-system/global.css';

For route-level code that imports one or two components, prefer leaf entries so bundlers do not traverse the full barrel:

import Button from '@gaudi/design-system/core/Button';import Dialog from '@gaudi/design-system/core/Dialog';

Only the explicit entries in the package exports are public: owner paths such as /core/Button, /chat/ChatInput and /hooks/state/use-controllable-state.

Next steps