ontap-design-system

A React design system built with TypeScript and Tailwind CSS, extracted from Figma designs.

Installation

npm install ontap-design-system
# or
yarn add ontap-design-system
# or
pnpm add ontap-design-system

Setup

Next.js (App Router)

1. Import the CSS in your app/layout.tsx:

import 'ontap-design-system/styles';

2. Use components in your pages:

'use client';

import { Button, Input } from 'ontap-design-system';

export default function Page() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

Next.js (Pages Router)

1. Import the CSS in your pages/_app.tsx:

import 'ontap-design-system/styles';

2. Use components in your pages:

import { Button, Input } from 'ontap-design-system';

export default function Page() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

React (Create React App / Vite)

1. Import the CSS in your main entry file:

import 'ontap-design-system/styles';

2. Use components:

import { Button, Input } from 'ontap-design-system';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from '@ontap/design-system';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="neutral">Neutral</Button>

// Sizes
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

// States
<Button loading>Loading...</Button>
<Button disabled>Disabled</Button>

// With icons
<Button leftIcon={<Icon />}>With Left Icon</Button>
<Button rightIcon={<Icon />}>With Right Icon</Button>
<Button iconOnly leftIcon={<Icon />} aria-label="Icon button" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outlined' \| 'ghost' \| 'link' \| 'neutral' | 'primary' | Button variant style | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Button size | | loading | boolean | false | Whether the button is in loading state | | leftIcon | ReactNode | - | Icon to display before the button text | | rightIcon | ReactNode | - | Icon to display after the button text | | iconOnly | boolean | false | Whether the button should only show icon (no text) | | disabled | boolean | false | Whether the button is disabled |

Input

A form input component with label, helper text, and error states.

import { Input } from '@ontap/design-system';

// Basic usage
<Input label="Email" placeholder="Enter your email" />

// With helper text
<Input 
  label="Password" 
  type="password"
  helperText="Must be at least 8 characters"
/>

// Error state
<Input 
  label="Email" 
  error="Please enter a valid email address"
/>

// Success state
<Input 
  label="Email" 
  success="Email is valid"
/>

// With icons
<Input 
  label="Search"
  leftIcon={<SearchIcon />}
  rightIcon={<ClearIcon />}
/>

// Sizes
<Input size="sm" label="Small" />
<Input size="md" label="Medium" />
<Input size="lg" label="Large" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | 'sm' \| 'md' \| 'lg' | 'md' | Input size | | state | 'default' \| 'focused' \| 'filled' \| 'error' \| 'success' \| 'disabled' | 'default' | Input state | | label | string | - | Label text | | helperText | string | - | Helper text displayed below the input | | error | string | - | Error message (overrides helperText when provided) | | success | string | - | Success message | | leftIcon | ReactNode | - | Icon to display on the left side | | rightIcon | ReactNode | - | Icon to display on the right side | | required | boolean | false | Whether the input is required |

Checkbox

A checkbox component with label and supporting text.

import { Checkbox } from '@ontap/design-system';

// Basic usage
<Checkbox label="I agree to the terms" />

// With supporting text
<Checkbox 
  label="Subscribe to newsletter"
  supportingText="Receive updates about new features"
/>

// Indeterminate state
<Checkbox 
  label="Select all"
  indeterminate
/>

// Sizes
<Checkbox size="sm" label="Small" />
<Checkbox size="md" label="Medium" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | 'sm' \| 'md' | 'md' | Checkbox size | | label | string | - | Label text | | supportingText | string | - | Supporting text displayed below the label | | indeterminate | boolean | false | Whether the checkbox is in indeterminate state | | checked | boolean | - | Whether the checkbox is checked | | disabled | boolean | false | Whether the checkbox is disabled |

IconButton

A button component that displays only an icon.

import { IconButton } from '@ontap/design-system';

<IconButton 
  icon={<SearchIcon />}
  aria-label="Search"
/>

// Variants
<IconButton variant="primary" icon={<Icon />} aria-label="Primary" />
<IconButton variant="secondary" icon={<Icon />} aria-label="Secondary" />
<IconButton variant="outlined" icon={<Icon />} aria-label="Outlined" />
<IconButton variant="ghost" icon={<Icon />} aria-label="Ghost" />

// Sizes
<IconButton size="sm" icon={<Icon />} aria-label="Small" />
<IconButton size="md" icon={<Icon />} aria-label="Medium" />
<IconButton size="lg" icon={<Icon />} aria-label="Large" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | 'sm' \| 'md' \| 'lg' | 'md' | Icon button size | | variant | 'primary' \| 'secondary' \| 'outlined' \| 'ghost' \| 'link' \| 'neutral' | 'primary' | Button variant style | | icon | ReactNode | - | Icon to display | | loading | boolean | false | Whether the button is in loading state | | aria-label | string | required | Accessible label for the icon button |

Design Tokens

You can import design tokens directly:

import { colors, spacing, typography, shadows, radius } from 'ontap-design-system/tokens';

// Colors
const primaryColor = colors.primary.DEFAULT;
const successColor = colors.status.success.DEFAULT;

// Spacing
const padding = spacing[16]; // '16px'

// Typography
const headingStyle = typography['headline-medium'];

// Shadows
const cardShadow = shadows.low;

// Border radius
const rounded = radius.md;

TypeScript Support

This package includes TypeScript definitions. All components and tokens are fully typed.

Peer Dependencies

• react >= 18.0.0
• react-dom >= 18.0.0

License

MIT