@fiusion/design

Fiusion's design system and Vue 3 component library: F-prefixed components built on Radix Vue primitives, a primitive-to-semantic-to-component design-token system, and light and dark theming.

Installation

npm install @fiusion/design

@fiusion/design declares vue and radix-vue as peer dependencies; the consuming application provides them.

npm install vue radix-vue

Usage

Import components from the package root and the stylesheet once:

import { FButton, FDialog } from '@fiusion/design';
import '@fiusion/design/styles';

<template>
  <FButton variant="primary" @click="open = true">Open</FButton>
  <FDialog v-model:open="open" title="Hello">Dialog body</FDialog>
</template>

The raw design tokens are available for consumers that want them directly:

import '@fiusion/design/tokens';

Theming

Light and dark are switched by a [data-theme] attribute on the document root. The useTheme composable sets the attribute, persists the preference, and falls back to the operating-system preference:

import { useTheme } from '@fiusion/design';

const { theme, toggleTheme, setTheme } = useTheme();

Components

The library ships F-prefixed components grouped by role:

• Foundation: FButton, FInput, FTextarea, FFormField, FCard, FAlert, FSpinner, FSkeleton.
• Interaction: FCheckbox, FRadio, FRadioGroup, FToggle, FSelect (FSelectItem), FDialog, FTabs (FTabsList, FTabsTrigger, FTabsContent), FToastProvider, FDropdownMenu (FDropdownMenuItem, FDropdownSeparator), FTooltip.
• Primitives: FBadge, FAvatar, FIcon, FChip, FDivider, FBreadcrumb, FToolbar, FEmptyState.
• Headless: FPopover, FCollapsible, FAccordion (FAccordionItem), FProgress, FSlider, FContextMenu (FContextMenuItem), FSheet, FCombobox (FComboboxItem).

Composables: useTheme, useToast, useId.

Design tokens

The token system in src/styles/tokens.css has three tiers:

• Primitive: raw values with no semantic meaning (color ramps, spacing, sizing, typography, motion, shadows).
• Semantic: roles that resolve to primitives (surface, text, border, interactive), defined for both light and dark.
• Component: per-component decisions that resolve to semantic tokens.

Override any tier by redefining the CSS custom property in your application stylesheet after importing @fiusion/design/styles.

Building locally

npm install
npm run typecheck
npm run build

The Vite library build emits ESM, UMD, bundled type declarations, and one bundled stylesheet to dist/.

Standards

This repository conforms to AST-0018 (Frontend Library Structure) in the Fiusion Architecture Repository at fiusion-documentation/architecture-repository, the source of truth for structure, naming, and versioning. The decision behind the library is ADR-0004. Versioning follows AST-0009 (SemVer supplied by GitVersion in Mainline mode).