My UI Library

A lightweight, accessible React component library built with TypeScript.

Installation

npm install @syprogrammer/uilib

Usage

import { Button, Heading } from '@syprogrammer/uilib';
import '@syprogrammer/uilib/dist/style.css';

function App() {
  return (
    <div>
      <Heading level={1}>Welcome</Heading>
      <Button variant="primary" onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

Components

Button

A flexible button component with multiple variants and sizes.

Props:

• variant: 'primary' | 'secondary' | 'outline' (default: 'primary')
• size: 'sm' | 'md' | 'lg' (default: 'md')
• fullWidth: boolean (default: false)
• All standard button HTML attributes

Example:

<Button variant="primary" size="lg">
  Large Primary Button
</Button>

Heading

Semantic heading component supporting h1-h6.

Props:

• level: 1 | 2 | 3 | 4 | 5 | 6 (default: 1)
• align: 'left' | 'center' | 'right' (default: 'left')
• className: string

Example:

<Heading level={2} align="center">
  Centered H2 Heading
</Heading>

Documentation

View full documentation and live examples at [your-storybook-url]

Development

# Install dependencies
npm install

# Run Storybook
npm run storybook

# Build library
npm run build

# Build Storybook for deployment
npm run build-storybook

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Your Name