@sigmoid-hq/design-system-v1

Sigmoid Design System V1 - A comprehensive React component library built with TypeScript and vanilla-extract.

Installation

npm install @sigmoid-hq/design-system-v1
# or
yarn add @sigmoid-hq/design-system-v1
# or
pnpm add @sigmoid-hq/design-system-v1

Peer Dependencies

This package requires React 19+:

npm install react@^19.0.0 react-dom@^19.0.0

Usage

Basic Example

import { Button, Card, Input } from '@sigmoid-hq/design-system-v1';

function App() {
  return (
    <Card headline="Welcome" description="Get started with Sigmoid DS">
      <Input label="Email" placeholder="Enter your email" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Import Styles

The design system uses vanilla-extract for styling. Import the global styles in your app entry point:

import '@sigmoid-hq/design-system-v1/styles';

Using Design Tokens

import { vars } from '@sigmoid-hq/design-system-v1';

const customStyle = {
  color: vars.colors.primary,
  fontSize: vars.fontSizes.base,
  padding: vars.spacing["4"],
};

Components

Foundation

• Button - Primary action buttons with variants
• Accordion - Collapsible content sections
• Stepper - Step-by-step progress indicator
• DateTimePicker - Date and time selection
• FadeInSection - Animated fade-in sections

Layout

• Card - Content container with header and actions
• Container - Responsive container wrapper
• Divider - Visual separator
• Grid - Flexible grid layout system
• Stack - Vertical/horizontal stacking

Form

• Input - Text input with label and validation
• SearchInput - Search input with clear button
• Textarea - Multi-line text input
• Checkbox - Checkbox input
• Radio - Radio button group
• Switch - Toggle switch
• Dropdown - Select dropdown
• ComboBox - Autocomplete combobox
• ColorPicker - Color selection with presets and palette
• Checklist - Multi-select checklist

DataDisplay

• Avatar - User avatar display
• Tag - Label/tag component
• Table - Data table with columns
• List - List component
• EmptyState - Empty state placeholder
• Skeleton - Loading skeleton
• ProgressBar - Progress indicator
• BarChart - Bar chart visualization
• LineChart - Line chart visualization
• CodeBox - Code display with syntax highlighting

Feedback

• Alert - Alert messages
• Badge - Status badges
• Loading - Loading indicators
• Modal - Modal dialogs
• Popover - Popover tooltips
• Toast - Toast notifications
• Tooltip - Tooltip component

Navigation

• Breadcrumb - Breadcrumb navigation
• Menu - Navigation menu
• Pagination - Page pagination
• Tabs - Tab navigation
• PageIndicator - Page indicator dots

Storybook

View all components and their documentation in Storybook:

yarn dev

Then open http://localhost:6006

Or visit the hosted Storybook: https://design.sigmoid.us

Development

Setup

# Install dependencies
yarn install

# Start Storybook development server
yarn dev

# Build library
yarn build:lib

# Build Storybook
yarn build:storybook

Project Structure

src/
├── components/        # All React components
│   ├── Foundation/   # Core foundation components
│   ├── Layout/       # Layout components
│   ├── Form/         # Form input components
│   ├── DataDisplay/  # Data visualization components
│   ├── Feedback/     # User feedback components
│   └── Navigation/   # Navigation components
├── styles/            # Design tokens and global styles
│   ├── theme.css.ts  # Design system tokens
│   └── global.css.ts # Global styles and keyframes
└── index.ts          # Main export file

Design Tokens

The design system provides comprehensive design tokens:

• Colors: Primary, accent colors, text colors, borders, backgrounds
• Typography: Font families (Geist, Inter, JetBrains Mono), sizes, weights, line heights
• Spacing: Consistent spacing scale
• Border Radius: Rounded corner values
• Shadows: Elevation shadows
• Transitions: Animation timing

Access tokens via vars:

import { vars } from '@sigmoid-hq/design-system-v1';

// Colors
vars.colors.primary
vars.colors.accent.orange
vars.colors.text.primary

// Typography
vars.fonts.geist
vars.fontSizes.base
vars.fontWeights.medium

// Spacing
vars.spacing["4"]
vars.spacing["8"]

// Border Radius
vars.radii.md
vars.radii["2xl"]

// Shadows
vars.shadows.subtle
vars.shadows.card

// Transitions
vars.transitions.fast
vars.transitions.normal

TypeScript

This package is written in TypeScript and includes type definitions. All components are fully typed.

License

MIT

Repository

https://github.com/sigmoid-hq/design-system-v1

Author

Juan Lee

• Email: [email protected]

Built with ❤️ by Sigmoid