@wp-essence-ui/components

A modern React component library inspired by Metro UI design principles, providing beautiful and accessible components for your React applications.

Installation

npm install @wp-essence-ui/components
# or
yarn add @wp-essence-ui/components
# or
pnpm add @wp-essence-ui/components

Usage

Import individual components

import { Button } from '@wp-essence-ui/components/button';
import { Alert } from '@wp-essence-ui/components/alert';
import { Input } from '@wp-essence-ui/components/input';

Import multiple components

import { Button, Alert, Input, CheckBox } from '@wp-essence-ui/components';

Example

import React from 'react';
import { Button, Input, Alert } from '@wp-essence-ui/components';

function App() {
    return (
        <div>
            <Alert type="info">Welcome to your app!</Alert>
            <Input placeholder="Enter your name" />
            <Button variant="primary">Click me</Button>
        </div>
    );
}

Available Components

UI Components

• Alert - @wp-essence-ui/components/alert
• Button - @wp-essence-ui/components/button
• CheckBox - @wp-essence-ui/components/check-box
• DatePicker - @wp-essence-ui/components/date-picker
• Form - @wp-essence-ui/components/form
• Grid - @wp-essence-ui/components/grid
• Input - @wp-essence-ui/components/input
• Label - @wp-essence-ui/components/label
• ListPicker - @wp-essence-ui/components/list-picker
• Loader - @wp-essence-ui/components/loader
• Page - @wp-essence-ui/components/page
• Panorama - @wp-essence-ui/components/panorama
• Pivot - @wp-essence-ui/components/pivot
• ProgressBar - @wp-essence-ui/components/progress-bar
• Radio - @wp-essence-ui/components/radio
• Range - @wp-essence-ui/components/range
• StackPanel - @wp-essence-ui/components/stack-panel
• Switch - @wp-essence-ui/components/switch
• TextArea - @wp-essence-ui/components/text-area
• Tile - @wp-essence-ui/components/tile
• TimePicker - @wp-essence-ui/components/time-picker

Core Components

• Clickable - @wp-essence-ui/components/core/clickable
• PickerList - @wp-essence-ui/components/core/picker-list
• PickerOption - @wp-essence-ui/components/core/picker-option
• PickerOverlay - @wp-essence-ui/components/core/picker-overlay

Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher

Documentation

For detailed documentation and examples, visit https://metro.royalecheese.com/getting-started

License

This project is licensed under the MIT License.