packages v3.8.1catalog v0.1.1

Design System

The visual language powering every interface we build. Consistent, accessible, and beautifully crafted components for every team.

How To Use This Page

Start here when you need to understand the full shape of the design system before drilling into individual components.

The overview page groups the catalog by scale, from low-level primitives through full-page application and marketing patterns.

How The Content Is Grouped

The top-level page groups the catalog by subcategory, making it easier to choose a family of patterns before drilling into an implementation.
Use the highlighted links below to start with the highest-signal areas of the section.

Start With

Atoms

Foundations

Molecules

Blocks

Marketing

Ecommerce

Application UI

Packages

Install and use Hilum packages

5 packages

@hilum/ui

v3.8.1

Core design system primitives: buttons, inputs, dialogs, comboboxes, data display, tokens, fonts, and Hilum icons.

Install

pnpm add @hilum/ui

Setup

Import the token and font stylesheets once in your app's global CSS.

@import "tailwindcss";
@import "@hilum/ui/tokens.css";
@import "@hilum/ui/fonts.css";

Use

import { Button, Dialog, Input } from "@hilum/ui";
import { Plus } from "@hilum/ui/icons";

<Button>
  <Plus size={14} />
  New project
</Button>

Product UI primitivesBrand tokensLight/dark themingShared icon exports

Peer dependencies: react and react-dom.

@hilum/app-shell

v3.8.1

Composed product-app layouts built from Hilum primitives: sidebars, top bars, page headers, detail screens, and settings screens.

Install

pnpm add @hilum/app-shell @hilum/ui

Setup

Pass your router's Link component into AppShell. Active navigation state stays caller-controlled.

Use

import { AppShell, AppSidebar, AppHeader } from "@hilum/app-shell";

<AppShell linkComponent={Link}>
  <AppSidebar sections={sections} user={currentUser} />
  <AppHeader breadcrumbs={breadcrumbs} />
  <main>{children}</main>
</AppShell>

Internal app shellsSidebar navigationProduct chromeSettings and detail layouts

Peers: @hilum/ui, react, react-dom. Optional peer: lucide-react.

@hilum/designer

v3.8.1

Engine-agnostic editor chrome for authoring surfaces: shell, toolbar, side panels, collapsible panes, history, and keybindings.

Install

pnpm add @hilum/designer @hilum/ui

Setup

Use it for the editor frame and control surface. Pair it with a canvas, form builder, layout editor, or custom authoring engine.

Use

import { DesignerShell, DesignerToolbar, DesignerPanel } from "@hilum/designer";

<DesignerShell>
  <DesignerToolbar />
  <DesignerPanel />
  {editorSurface}
</DesignerShell>

Editor chromeToolbar compositionProperty panelsUndo and keyboard shortcuts

Peers: @hilum/ui, react, react-dom. Runtime dependency: lucide-react.

@hilum/designer-canvas

v3.8.1

Generic free-positioned canvas engine with typed layers, pan/zoom, drag and resize, marquee selection, snap guides, actions, and pluggable renderers.

Install

pnpm add @hilum/designer-canvas @hilum/designer @hilum/ui

Setup

Use

import { CanvasProvider, DesignerCanvas, DesignerFrame } from "@hilum/designer-canvas";

<CanvasProvider frameSize={frameSize} renderers={renderers} services={services}>
  <DesignerCanvas>
    <DesignerFrame />
  </DesignerCanvas>
</CanvasProvider>

Layered canvasesPan and zoom viewportsDrag/resize toolsRenderer registries

Peers: @hilum/designer, @hilum/ui, react, react-dom. Optional peer: lucide-react.

@hilum/blocks

v3.8.1

CLI for installing Hilum marketing blocks into an application from the catalog registry.

Install

pnpm add -D @hilum/blocks

Setup

Run the CLI from an app workspace. Added blocks are written into src/components/blocks by default.

Use

pnpm hilum list
pnpm hilum add hero-simple-centered

Marketing block installsRegistry-driven copyDependency-aware scaffolding

Runtime dependency: commander. The CLI installs block dependencies declared by the registry.

Atoms

Molecules

Blocks

Atoms

The smallest functional units — buttons, badges, inputs, and more.

BadgeSPOutline

ButtonButton GroupBadgeAvatarInputStepsCardSelectComboboxDialogTableCalendarCarouselSidebarChartData TableRich Text EditorSearchable TableFile Dropzone

Browse components

5 items

Foundations

Color palette, typography scale, spacing, and visual language.

ColorsTypographySpacingRadiusShadows

Browse components

31 items

Molecules

Composed patterns — forms, navigation, data displays.

FieldInput GroupStat CardEmpty StateSection HeadingPage HeadingActivity FeedStacked ListRadio CardsCard HeadingGrid ListCommand PaletteAccount MenuMedia Asset Card

Browse components

8 items

Blocks

Full page sections ready to drop into any layout.

Sign InNavbarForm LayoutApp Shell · SidebarApp Shell · StackedDetail ScreenSettings Screen

Browse components

15 items

Marketing

Website sections for landing pages — heroes, pricing, testimonials, and more.

HeroesFeature SectionsCTA SectionsPricingTestimonialsFAQ SectionsStatsLogo CloudsNewsletterContent SectionsBlogContactTeamFootersHeaders

Browse components

14 items

Ecommerce

Shop UI patterns — product listings, checkout flows, navigation, and cart components.

Product ListsProduct OverviewsProduct FeaturesShopping CartsCheckout FormsCategory FiltersCategory PreviewsStore NavigationPromo SectionsIncentivesReviewsOrder History

Browse components

12 items

Application UI

App interface patterns — shells, forms, navigation, lists, overlays, and page layouts.

Application ShellsFormsNavigationListsOverlaysData DisplayHeadingsLayoutElementsFeedbackPage Examples

Browse components

Getting started

Install the package

Add @hilum/ui to your project, import the tokens CSS, and start using components.

pnpm add @hilum/ui

/* globals.css */
@import "@hilum/ui/tokens.css";
@import "@hilum/ui/fonts.css";

Brand tokens and themes

Hilum ships a fixed brand palette, typography, fonts, component tokens, and automatic light/dark mode support.

<!-- force a mode when needed -->
<html data-theme="light">
<html data-theme="dark">

View theming docs