@ashu-gg/passify-ui-components

Passify UI Components - Shared UI components library for Passify applications.

Installation

npm install @ashu-gg/passify-ui-components

Prerequisites

This package requires:

• React 19.0.0 or higher
• React DOM 19.0.0 or higher
• Tailwind CSS v4 (for styling)

Usage

Import Styles

First, import the design system styles in your application's root CSS file or layout:

@import '@ashu-gg/passify-ui-components/styles';

Or in JavaScript/JSX:

import '@ashu-gg/passify-ui-components/styles';

Import Components

import { Button } from '@ashu-gg/passify-ui-components';

Example: Button Component

import { Button } from '@ashu-gg/passify-ui-components';

function MyComponent() {
  return (
    <div>
      <Button variant="primary" size="regular" onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
      
      <Button variant="secondary" size="large" leftIcon={<PlusIcon />}>
        Add Item
      </Button>
      
      <Button variant="alert" state="success" size="regular">
        Confirm
      </Button>
    </div>
  );
}

Button Component API

Variants

• primary - Main action buttons with solid green background
• secondary - Secondary actions with white background and border
• link - Link-style buttons without background
• alert - Alert buttons (requires state prop: success, error, or neutral)

Sizes

• large - 36px height, 16px font size
• regular - 30px height, 14px font size (default)
• small - 22px height, 12px font size
• xsmall - 18px height, 11px font size

Button Types

• text - Text only (default)
• left-icon - Icon before text
• right-icon - Icon after text
• icon-only - Icon without text

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'link' \| 'alert' | 'primary' | Button variant | | size | 'large' \| 'regular' \| 'small' \| 'xsmall' | 'regular' | Button size | | buttonType | 'text' \| 'left-icon' \| 'right-icon' \| 'icon-only' | 'text' | Button type | | disabled | boolean | false | Disabled state | | leftIcon | ReactNode | - | Icon to display on the left | | rightIcon | ReactNode | - | Icon to display on the right | | icon | ReactNode | - | Icon for icon-only buttons | | onClick | Function | - | Click handler | | type | 'button' \| 'submit' \| 'reset' | 'button' | HTML button type | | className | string | - | Additional CSS classes | | state | 'success' \| 'error' \| 'neutral' | - | Required for alert variant | | ariaLabel | string | - | Required for icon-only buttons |

Design Tokens

The design system includes comprehensive design tokens for:

• Colors (Primary, Secondary, Neutral, Alert colors)
• Typography (Font families, sizes, weights, letter spacing)
• Spacing
• Border radius
• Shadows

All tokens are available through Tailwind CSS classes and CSS custom properties.

Development

This package is built with:

• React 19
• Tailwind CSS v4
• Vite
• Storybook

License

MIT - See LICENSE file for details.