Headless Design System platform built for modern product teams to craft apps people love to use.

Available commands:packages: Show available packagesinstall: Show install scriptsecho: Print textclear: Clear the terminal

$packages

@usefui/analytics @usefui/components @usefui/core @usefui/hooks @usefui/icons @usefui/styles @usefui/tokens

$install

npm install @usefui/analytics @usefui/components @usefui/core @usefui/hooks @usefui/icons @usefui/styles @usefui/tokens pnpm add @usefui/analytics @usefui/components @usefui/core @usefui/hooks @usefui/icons @usefui/styles @usefui/tokens yarn add @usefui/analytics @usefui/components @usefui/core @usefui/hooks @usefui/icons @usefui/styles @usefui/tokens bun add @usefui/analytics @usefui/components @usefui/core @usefui/hooks @usefui/icons @usefui/styles @usefui/tokens

Available commands:create-fui-app: Show create-fui-app scriptssvgjsx: Show svgjsx scriptsecho: Print textclear: Clear the terminal

Built with Typescript, Foundation UI can be integrated with your favorite React-based frameworks.

import { useColorMode } from "@usefui/tokens";
import { Button, Tooltip } from "@usefui/components";
import { Icon } from "@usefui/icons";

function ColorMode() {
  const { setColorMode } = useColorMode();
  return (
    <Tooltip content="System">
      <Button
        id="system-mode-trigger"
        variant="secondary"
        sizing="medium"
        shape="smooth"
        animation="reflective"
        onClick={() => setColorMode('system')}
      >
        <Icon>
          <Icon.Colors />
        </Icon>
      </Button>
    </Tooltip>
  );
}

export default ColorModes;

Production-ready libraries

Token Engine

Dynamically generate design tokens using application properties.

import {
  HEXToHSL,
  HEXToRGB,
  MeasurementRatios,
  PXToPT,
  PXToREM,
  RGBAToHEX,
  RGBToHSL,
  applyColorLuminance,
  calculateContrastScore,
  calculateStackOrder,
  generateAlpha,
  generateCSSVariables,
  generateColorClasses,
  generateColorTokens,
  generateDimensionClasses,
  generateFontSizesClasses,
  generateLayoutClasses,
  generateMeasurementTokens,
  generateModularScales,
  generateOpacityClasses,
  generateSequenceTokens,
  generateSequenceVariation,
  generateSequences,
  generateSizeClasses,
  generateTokensFromTemplate,
  generateTokensLibrary,
  generateVariation,
  getContrastRatio,
  getRelativeLuminance,
  getSequenceUsages,
  luminanceAmountFormatter,
  setLuminanceTone,
} from "@usefui/core";

React Components

Use fast and accessible components to enhance your UI development.

function CustomDropdown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu>
        <DropdownMenu.Trigger
          variant="secondary"
          sizing="small"
          animation="reflective"
        >
          <Icon>
            <Icon.Tools />
          </Icon>
        </DropdownMenu.Trigger>

        <DropdownMenu.Content>
          <DropdownMenu.Item>
            Community
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </DropdownMenu.Root>
  );
}

User Behavior Analytics

Capture real-time user interactions and system insights.

{
    "session": {
        "entry_time": "2025-07-06T00:45:02.968Z",
        "entry_epoch": 1751762702968,
        "last_interaction_time": "2025-07-06T00:45:02.967Z",
        "last_interaction_epoch": 1751762702967,
        "time_before_interact": 0.316,
        "html_snapshot": "..."
    },
    "interactions": [
        {
            "origin": "drag-handle",
            "frequency": 1,
            "events": [
                {
                    "type": "mouseover",
                    "occured_at": "2025-07-06T00:45:02.148Z",
                    "occured_at_epoch": 1751762702148,
                    "dimension": {
                        "width": 11.9375,
                        "height": 876.578125
                    },
                    "position": {
                        "x": 541.765625,
                        "y": 56.453125,
                        "top": 56.453125,
                        "right": 553.703125,
                        "bottom": 933.03125,
                        "left": 541.765625
                    }
                }
            ],
            "types": [
                "mouseover"
            ]
        }
    ],
    "system": {
        "path": "...",
        "user_agent": "...",
        "device_os": "...",
        "viewport": {
            "width": 1039,
            "height": 937
        },
        "performances": {
            "memory_usage": "39.18MB",
            "network_latency": "6.30ms"
        },
        "screen": {
            "width": 3440,
            "height": 1358,
            "pixel_depth": 24,
            "orientation": {
                "angle": 0,
                "type": "landscape-primary"
            }
        }
    }
}

import {
  generateAlpha,
  generateColorClasses,
  generateCSSVariables,
  generateDimensionClasses,
  generateFontSizesClasses,
  generateLayoutClasses,
  generateOpacityClasses,
  generateSizeClasses,
} from "@usefui/core";
import { custom_design_tokens } from "@/styles";

const { design_tokens } = custom_design_tokens;
const {  measurement, fontsize, opacity, color } = design_tokens;

const cssLayoutClasses = generateLayoutClasses();
const cssWidthHeightClasses = generateDimensionClasses();
const cssSizeClasses = generateSizeClasses(measurement);
const cssFSClasses = generateFontSizesClasses(fontsize);
const cssOpacityClasses = generateOpacityClasses(opacity);
const cssColorClasses = generateColorClasses(color);

const cssVariables = generateCSSVariables({
  name: 'custom-library,
  design_tokens,
});

Generate design tokens, CSS variables, and classes at runtime for effortless white-labeling

Try Foundation Ui