JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q33888F

Looking to quickly add Metro UI to your react project? This component library is the right choice for you.

Package Exports

  • @wp-essence-ui/components
  • @wp-essence-ui/components/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wp-essence-ui/components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

CSS Import

The package automatically includes CSS when you import components. However, if you need to import CSS separately:

// Import all styles
import '@wp-essence-ui/components/styles';

// Or import individual component styles
import '@wp-essence-ui/components/button';
import '@wp-essence-ui/components/alert';

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.