@jolibox/ui

A modern UI component library built with Preact and Shoelace.

Features

• 🚀 Built with Preact for lightweight and fast performance
• 🎨 Based on Shoelace web components for consistent design
• 📦 Tree-shakeable exports
• 🔧 TypeScript support
• 📚 Storybook documentation
• 🎯 Fully customizable components

Installation

# Using npm
npm install @jolibox/ui

# Using yarn
yarn add @jolibox/ui

# Using pnpm
pnpm add @jolibox/ui

Usage

import { Button } from '@jolibox/ui';

function App() {
  return (
    <Button variant="primary" size="large">
      Click me!
    </Button>
  );
}

Available Components

Button

A customizable button component with various styles and states.

<Button
  variant="primary" // default | primary | success | neutral | warning | danger
  size="medium" // small | medium | large
  disabled={false} // true | false
  loading={false} // true | false
  outline={false} // true | false
  pill={false} // true | false
  circle={false} // true | false
  onClick={() => {}} // click handler
>
  Button Text
</Button>

Development

1. Install dependencies:

rush update

2. Start Storybook:

cd packages/ui
rush storybook

3. Build the library:

rush build

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

License

MIT