@marcinukleja/simple-ds-example

A lightweight, custom component library with design tokens for rapid prototyping with Figma Make. Features a curated set of headless UI components, reusable design tokens, and no external dependencies beyond React.

Installation

npm install @marcinukleja/simple-ds-example

Usage

import {
  PageHeading,
  Card,
  Badge,
  Sidebar,
  ListItem,
  ActionButton,
  Text,
  colors,
  spacing,
} from '@marcinukleja/simple-ds-example'

function App() {
  return (
    <>
      <PageHeading
        title="Dashboard"
        description="Welcome back"
        badgeText="online"
        badgeVariant="active"
      />
      <Card
        overlineText="Status"
        mainText="All systems operational"
        badgeText="active"
        badgeVariant="active"
      />
      <ListItem
        icon="⚙️"
        primaryText="Settings"
        secondaryText="Manage preferences"
      />
      <ActionButton label="Save Changes" variant="primary" />
    </>
  )
}

Components

Layout & Structure

• Sidebar - Sidebar navigation with logo, product name, and menu items

Data Display

• Card - Card with overline text, main content, and optional badge
• PageHeading - Page heading with title, description, and optional status badge
• ListItem - List item with leading/trailing icons, primary and secondary text

UI Elements

• Badge - Status badge with multiple variants (default, active, warning, idle)
• Text - Flexible text component with size, color, and weight options

Actions

• ActionButton - Button with primary, secondary, and tertiary variants
• CardHeader - Optional card header with icon and text

Design Tokens

All components respect the design token system:

Colors

colors: {
  brand: {
    50-900: Blue color scale from light to dark
  }
}

Spacing

spacing: {
  px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20
}

Border Radius

radii: {
  none, sm, md, lg, xl, full
}

Typography

typography: {
  fonts: { heading, body, mono },
  fontSizes: { xs, sm, md, lg, xl, 2xl, 3xl }
}

Figma Make

This package is designed to work seamlessly with Figma Make for prototyping. Components are built as headless UI elements, making them easy to integrate with your Figma designs.

License

MIT