Blueward Design System (BDS)

Enterprise React UI Component Library & Design System tailored for Dashboard, Observability, and SAP Fiori Workflows.

한국어 문서 (Korean Documentation)

1. Overview

Blueward Design System (BDS) is an enterprise-grade React component library built on:

• Blue (Blue Chip Trust): High-reliability, 100% TypeScript typing, and WAI-ARIA accessibility compliance.
• -ward (Forward DX Momentum): Modern UI components for High-Density Dashboards, AIOps Observability, and SAP Fiori ERP integrations.

2. Key Features

• 19+ Enterprise Components: KPI StatCards, Smart DataGrid, SAP ObjectHeader, F4 Master Search Help, FilterBar, DateRangePicker, ProcessTimeline, and Core UI primitives.
• 100% TypeScript Support: Strict .d.ts declaration types providing full IntelliSense autocompletion in VS Code.
• Zero-Collision Style Overrides: Built-in cn() utility (clsx + tailwind-merge) allowing custom Tailwind overrides without collisions.
• WAI-ARIA Accessibility (A11y): Keyboard navigation, ESC key dismiss, and focus trapping.
• Dynamic ThemeProvider: CSS Variable-based runtime palette adjustments (--bds-primary, --bds-radius).
• High-Legibility Typography: Pre-tuned Pretendard & JetBrains Mono fonts.

3. Installation

npm install blueward-design-system clsx tailwind-merge

Or using Yarn / pnpm:

yarn add blueward-design-system clsx tailwind-merge
pnpm add blueward-design-system clsx tailwind-merge

4. Quick Start

import React from 'react';
import {
  BdsStatCard,
  BdsDateRangePicker,
  BdsObjectHeader,
  BdsDataTable,
  BdsThemeProvider
} from 'blueward-design-system';
import { Database } from 'lucide-react';

export function App() {
  return (
    <BdsThemeProvider defaultPrimaryColor="#2563EB">
      {/* KPI Stat Card */}
      <BdsStatCard
        title="Total Telemetry Ingest"
        value="1,428,900"
        change="+24.8%"
        changeType="increase"
        icon={Database}
        sparklineData={[30, 45, 50, 70, 65, 85, 90, 110]}
      />
    </BdsThemeProvider>
  );
}

5. Component Index

| Category | Components | | :--- | :--- | | Dashboard Suite | BdsStatCard, BdsProgressBar, BdsActivityFeed, BdsTabs, BdsAvatar, BdsAvatarGroup, BdsEmptyState | | SAP & ERP | BdsObjectHeader, BdsDataTable, BdsValueHelp, BdsFilterBar, BdsProcessTimeline, BdsMessageStrip | | Core UI | BdsButton, BdsBadge, BdsCard, BdsInput, BdsSelect, BdsSwitch, BdsSlider, BdsModal | | Enterprise & Theme | BdsDateRangePicker, BdsThemeProvider, useBdsTheme, cn |

6. License

Distributed under the MIT License. Copyright (c) 2026 Blueward. All rights reserved.