Trely UI Kit

React UI component library with CSS Modules.

Installation

npm install trely-ui-kit
# or
yarn add trely-ui-kit

Usage

Button Component

import { Button } from 'trely-ui-kit';

function App() {
  return (
    <div>
      {/* Basic button */}
      <Button>Click me</Button>

      {/* Different variants */}
      <Button variant="filled">Filled</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="light">Light</Button>
      <Button variant="subtle">Subtle</Button>

      {/* Different 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>

      {/* Different colors */}
      <Button color="blue">Blue</Button>
      <Button color="red">Red</Button>
      <Button color="green">Green</Button>
      <Button color="yellow">Yellow</Button>
      <Button color="gray">Gray</Button>
      <Button color="dark">Dark</Button>

      {/* Loading state */}
      <Button loading>Loading...</Button>

      {/* Disabled */}
      <Button disabled>Disabled</Button>
    </div>
  );
}

Input Component

import { Input } from 'trely-ui-kit';

function App() {
  return (
    <div>
      {/* Basic input */}
      <Input placeholder="Enter text" />

      {/* With label */}
      <Input label="Email" placeholder="[email protected]" />

      {/* With description */}
      <Input
        label="Username"
        description="Please use only letters and numbers"
        placeholder="john_doe"
      />

      {/* With error */}
      <Input
        label="Email"
        placeholder="[email protected]"
        error="Invalid email address"
      />

      {/* Required field */}
      <Input label="Email" placeholder="[email protected]" required />

      {/* Different sizes */}
      <Input size="xs" placeholder="Extra small" />
      <Input size="sm" placeholder="Small" />
      <Input size="md" placeholder="Medium" />
      <Input size="lg" placeholder="Large" />
      <Input size="xl" placeholder="Extra large" />

      {/* Disabled */}
      <Input label="Email" placeholder="[email protected]" disabled />
    </div>
  );
}

Props

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'filled' \| 'outline' \| 'light' \| 'subtle' | 'filled' | Button style variant | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Button size | | color | 'blue' \| 'red' \| 'green' \| 'yellow' \| 'gray' \| 'dark' | 'blue' | Button color | | loading | boolean | false | Show loading spinner | | disabled | boolean | false | Disable button |

Extends all standard HTML button attributes.

Input Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Input label | | error | string | - | Error message | | description | string | - | Helper text | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Input size |

Extends all standard HTML input attributes (except size).

Development

# Install dependencies
yarn install

# Run Storybook
yarn storybook

# Build library
yarn build

# Build Storybook
yarn build-storybook

# Lint
yarn lint
yarn lint:fix

Publishing

1. Build the library:

yarn build

2. Update version in package.json

3. Publish to npm:

npm publish

License

MIT