Gust UI

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

Features

• 🚀 Zero configuration - Works out of the box
• 📦 Single import - Everything you need in one package
• 🎨 Tailwind CSS - Built with utility-first styling
• 📱 Responsive - Mobile-first design approach
• 🔧 TypeScript - Full type safety and IntelliSense
• 🎯 Accessible - Built with accessibility in mind
• 🌙 Themeable - Dark mode and custom themes support

Installation

npm install gust-ui

Quick Start

import { Button, Input, Card } from 'gust-ui';

function App() {
  return (
    <div className="p-8 space-y-4">
      <Card variant="elevated" padding="lg">
        <h2 className="text-xl font-semibold mb-4">Welcome to Gust UI</h2>
        <Input placeholder="Enter your name" className="mb-4" />
        <Button>Get Started</Button>
      </Card>
    </div>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from 'gust-ui';

// Basic usage
<Button>Click me</Button>

// With variants and sizes
<Button variant="outline" size="lg">Large Outline</Button>
<Button variant="solid" size="sm">Small Solid</Button>

Props:

• variant: "solid" | "outline" (default: "solid")
• size: "sm" | "md" | "lg" (default: "md")
• All standard HTML button attributes

Input

A styled input component with focus states.

import { Input } from 'gust-ui';

<Input placeholder="Enter text" />
<Input type="email" placeholder="Email address" />

Props:

• All standard HTML input attributes

Card

A flexible container component for grouping content.

import { Card } from 'gust-ui';

<Card variant="elevated" padding="lg">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>

Props:

• variant: "default" | "outlined" | "elevated" (default: "default")
• padding: "none" | "sm" | "md" | "lg" (default: "md")
• All standard HTML div attributes

Styling

Gust UI uses Tailwind CSS for styling. The package includes:

• Design tokens - CSS custom properties for consistent theming
• Component styles - Pre-styled components that work out of the box
• Tailwind plugin - Optional utilities and components

Design Tokens

The package includes CSS custom properties for consistent theming:

:root {
  --color-brand-500: oklch(0.72 0.12 250);
  --radius-md: 0.5rem;
  --btn-bg: var(--color-brand-500);
}

Dark Mode

Dark mode is supported through CSS custom properties:

:root.dark {
  --btn-bg: oklch(0.60 0.10 250);
}

Custom Themes

You can create custom themes using data attributes:

[data-theme="alt"] {
  --color-brand-500: oklch(0.72 0.14 210);
  --btn-bg: var(--color-brand-500);
}

Advanced Usage

Tailwind Plugin (Optional)

For advanced customization, you can use the included Tailwind plugin:

// tailwind.config.js
import { twPlugin } from 'gust-ui';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  plugins: [twPlugin],
}

CSS Import (Optional)

If you need to import the CSS tokens separately:

@import 'gust-ui/dist/tokens.css';

TypeScript

Gust UI is built with TypeScript and provides full type definitions:

import { Button, ButtonProps } from 'gust-ui';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see LICENSE file for details.

Author

Created by HotSlug

Made with ❤️ for the React community