Design system

@manta-eu/react ships the components that the Manta app uses. Use them in your own screens, so that your app and the Manta chat look like one product. Every component also has a live page in the public Storybook, with its stories and its props.

Install

The components come with the SDK, along with its peer dependencies. Tailwind CSS v4 compiles their classes in your build.

pnpm add @manta-eu/react react react-dom next-themes @xyflow/react html-to-image @ulb-darmstadt/shacl-form
pnpm add -D tailwindcss @tailwindcss/vite

Add the Manta styles to your global stylesheet. globals.css brings the tokens, the three themes and the typography classes.

@import "tailwindcss";
@import "@manta-eu/react/globals.css";

Import each component from its own subpath. A subpath import keeps the rest of the package out of your bundle.

import { Button } from "@manta-eu/react/button";
import { Card, CardContent, CardHeader, CardTitle } from "@manta-eu/react/card";

Providers

Most components need no provider. Three need one mount near the root of your app:

• TooltipProvider from @manta-eu/react/tooltip, around every Tooltip.
• Toaster from @manta-eu/react/toast, once, so that toast() has a place to show.
• A ThemeProvider from next-themes, if you want Toaster to follow your light and dark theme.

When you also mount the Manta chat, EmbeddedChatProviders supplies the tooltip context for you. See providers.

Themes

Set data-theme on <html> to choose a theme. Without it, the components use standard.

<html data-theme="manta"></html>

Tokens

The themes set CSS variables, and Tailwind exposes them as utilities. Use the tokens, not raw colors, so your screens follow the theme.

• Surfaces: bg-background, bg-card, bg-muted, bg-accent.
• Text: text-default-foreground, text-body-foreground, text-muted-foreground.
• Borders: border-default-border, border-muted-border.
• States: bg-success, bg-warning, bg-error, bg-info.

Typography

The typography classes set the size, the line height and the weight together. Use them in place of text-* and font-* pairs.

<h1 className="typography-huge-header">Your todos</h1>
<p className="typography-body text-body-foreground">Three left for today.</p>
<span className="typography-caption-medium text-muted-foreground">Due tomorrow</span>

The Manta app sets its text in Roobert with the font-roobertpro class, which reads the --font-roobertpro variable. To match it, define that variable with your font stack and add the class to your root element.

:root {
  --font-roobertpro: "Inter", system-ui, sans-serif;
}

Components

• Actions: button, editable text.
• Forms: inputs, checkbox, radio, switch, select, combobox, multi-select, slider, calendar.
• Feedback: toast, banner, loader, skeleton, progress, stepped progress.
• Overlays: modal, sheet, popover, tooltip, command, hover media.
• Layout and data: card, separator, tabs, table, pagination, tree, collapsible, breadcrumbs.
• Identity: avatar, badge, pill, status.