planet-ui-react

Planet UI

A beautiful and modern React component library built with TypeScript and plain CSS.

Installation

npm install planet-ui

Usage

import { Button, Card, Input } from 'planet-ui';
import 'planet-ui/dist/style.css';

function App() {
  return (
    <Card padding="large" elevation="medium">
      <Input
        label="Username"
        placeholder="Enter your username"
        size="medium"
        fullWidth
      />
      <Button variant="primary" size="medium">
        Submit
      </Button>
    </Card>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

<Button
  variant="primary" // 'primary' | 'secondary' | 'outline'
  size="medium" // 'small' | 'medium' | 'large'
  fullWidth={false}
>
  Click me
</Button>

Card

A flexible card component with customizable elevation and padding.

<Card
  elevation="low" // 'none' | 'low' | 'medium' | 'high'
  padding="medium" // 'none' | 'small' | 'medium' | 'large'
>
  Card content
</Card>

Input

A form input component with label and error handling.

<Input
  label="Username"
  placeholder="Enter your username"
  size="medium" // 'small' | 'medium' | 'large'
  fullWidth={false}
  error="Invalid username"
/>

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

License

MIT