BlueAI Design System

Shared UI component library for Marunage products.@blueai/ui package used across all apps.

Foundation

Colors

Brand, text, border, and status color palettes.

BlueAI

1,512 icons in 6 weights. Search, preview & copy.

Form & Input

Button

Action buttons with variant, size, and icon support.

Text

Supports label, error, multiline, and number formatting.

Select

Dropdown select. Pass <option> as children.

Combobox

Searchable select with filtered suggestions.

Checkbox

Checkbox input component.

RadioGroup

Radio buttons for exclusive choices.

ColorInput

Color picker input with preview.

Range

Slider input component.

FileInput

Hidden file input. Trigger via ref.

DatePicker

Calendar UI, text input, and range selection.

Data Display

Badge

Small labels for status or category display.

DataTable

Column definitions, pagination, and inline editing.

StatCard

Cards for displaying KPIs and statistics.

DetailPage

Layout with Header, Content, and SectionTitle.

DetailRow

Label + value row component.

EmptyState

Placeholder for empty data states.

Spinner

Loading indicator.

Navigation & Overlays

Tabs

Tab switching button component.

BackLink

Link back to list page.

Modal

Composition with Header, Body, and Footer.

SlidePanel

Panel that slides in from the right.

Tooltip

Shows hint text on hover.

CommandPalette

Search + action UI triggered by Cmd+K.

Feedback

Toast

Notification toasts for success, warning, and error.

Snackbar

Temporary notifications at the bottom of the screen.

InlineConfirm

Banner for inline confirmation actions.

Hooks

useForm

Zod schema-based form management. Spreadable via field().