Package Exports

pure-react-ui
pure-react-ui/lib/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 (pure-react-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Pure React UI

A pure React UI component library built with TypeScript. No external dependencies required (except React and ReactDOM as peer dependencies).

Installation

npm install pure-react-ui

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from 'pure-react-ui';

<Button variant="primary" size="medium" onClick={handleClick}>
  Click Me
</Button>

Props:

variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' (default: 'primary')
size: 'small' | 'medium' | 'large' (default: 'medium')
fullWidth: boolean (default: false)
loading: boolean (default: false)
All standard button HTML attributes

Card

A flexible card component for displaying content.

import { Card } from 'pure-react-ui';

<Card
  title="Card Title"
  subtitle="Card Subtitle"
  image="/path/to/image.jpg"
  hoverable
  shadow="medium"
>
  Card content goes here
</Card>

Props:

title: string (optional)
subtitle: string (optional)
image: string (optional)
imageAlt: string (optional)
footer: React.ReactNode (optional)
hoverable: boolean (default: false)
shadow: 'none' | 'small' | 'medium' | 'large' (default: 'medium')
onClick: () => void (optional)

A modal dialog component with overlay and keyboard support.

import { Modal } from 'pure-react-ui';

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal Title"
  size="medium"
>
  Modal content goes here
</Modal>

Props:

isOpen: boolean (required)
onClose: () => void (required)
title: string (optional)
size: 'small' | 'medium' | 'large' | 'fullscreen' (default: 'medium')
closeOnOverlayClick: boolean (default: true)
closeOnEscape: boolean (default: true)
showCloseButton: boolean (default: true)

Styling

All components include their own CSS files and use CSS classes with the pure- prefix. The CSS files are automatically imported with each component. You can also style them by targeting these classes:

Button: pure-button, pure-button--primary, pure-button--secondary, etc.
Card: pure-card, pure-card--hoverable, pure-card--shadow-medium, etc.
Modal: pure-modal, pure-modal__overlay, pure-modal__header, etc.

Each component has its own CSS file located in:

lib/components/Button/Button.css
lib/components/Card/Card.css
lib/components/Modal/Modal.css

License

MIT