PaySky UI React Library

A modern React component library built with TypeScript and Tailwind CSS.

Installation

npm install paysky-react-ui

Usage

import React from 'react';
import { Button, Card, Input, Badge } from 'paysky-react-ui';

function App() {
  return (
    <div>
      <Card>
        <h2>Welcome to PaySky UI</h2>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Submit</Button>
        <Badge variant="success">New</Badge>
      </Card>
    </div>
  );
}

export default App;

Setup for Tailwind CSS Projects

Important: If your project uses Tailwind CSS, you need to add our preset to prevent class purging and ensure proper styling.

1. Import the CSS tokens

Try one of these import methods (use whichever works in your setup):

// Method 1: Named export (recommended)
import 'paysky-react-ui/styles';

// Method 2: Direct CSS file
import 'paysky-react-ui/style.css';

// Method 3: Full path
import 'paysky-react-ui/index.css';

2. Add the preset to your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Add this line to include PaySky UI components
    './node_modules/paysky-react-ui/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [
    // Add the PaySky UI preset
    require('paysky-react-ui/tailwind-preset'),
  ],
  theme: {
    extend: {
      // Your custom theme extensions
    },
  },
  plugins: [],
};

3. That's it!

Your PaySky UI components will now have proper styling with your design tokens.

Setup for Non-Tailwind Projects

If your project doesn't use Tailwind CSS, just import the styles:

import 'paysky-react-ui/styles';

The components will work with the built-in CSS.

Design Tokens

The library includes these design tokens:

• Colors: --color-primary (#1d4ed8), --color-secondary (#64748b)
• Spacing: --spacing-sm (0.5rem), --spacing-md (1rem), --spacing-lg (2rem)
• Border Radius: --radius-base (8px)
• Font: --font-base ('Inter', sans-serif)

These are available as Tailwind classes when using the preset:

• bg-primary, text-primary, border-primary
• bg-secondary, text-secondary, border-secondary
• p-sm, px-md, py-lg, etc.
• rounded-base

Components

Button

• Variants: primary, secondary
• Uses: bg-primary, bg-secondary with hover effects

Input

• States: default, invalid
• Uses: border-secondary, focus:border-primary
• Support for labels and error messages

Card

• Configurable padding: sm, md, lg
• Uses: p-sm, p-md, p-lg, rounded-base
• Optional shadow

Badge

• Variants: default, success, warning, error
• Sizes: sm, md
• Uses: bg-secondary, px-sm, px-md

Development

This library is built with:

• React 19
• TypeScript
• Tailwind CSS
• Vite
• Storybook

Peer Dependencies

• React >= 18.0.0
• React DOM >= 18.0.0

License

MIT