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

Note: The Select component requires react-select as a peer dependency. If you're using the Select component, make sure to install it:

npm install react-select

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)

Modal

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 | React.ReactNode (optional) - Modal title or custom header content
• size: 'small' | 'medium' | 'large' | 'fullscreen' (default: 'medium')
• position: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' (default: 'center')
• variant: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'gradient-primary' | 'gradient-success' | 'gradient-danger' | 'gradient-info' (default: 'default')
• closeOnOverlayClick: boolean (default: true)
• closeOnEscape: boolean (default: true)
• showCloseButton: boolean (default: true)
• scrollable: boolean (default: true) - Enable scrolling for modal body
• topMargin: number | string (optional) - Custom top margin for modal
• className: string (optional) - Additional CSS classes
• overlayClassName: string (optional) - Additional CSS classes for overlay
• headerClassName: string (optional) - Additional CSS classes for header
• bodyClassName: string (optional) - Additional CSS classes for body

Icon

A comprehensive icon component library with 100+ SVG icons.

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

<Icon name="Home" size={24} color="#007bff" />
<Icon name="Search" size={32} onClick={handleClick} />

Props:

• name: IconName (required) - Name of the icon to display
• size: number | string (default: 24) - Size of the icon
• color: string (default: 'currentColor') - Color of the icon
• className: string (optional) - Additional CSS classes
• onClick: () => void (optional) - Click handler (makes icon clickable)

Available Icons:

Arrows & Navigation: ArrowLeft, ArrowRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowDownRight, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, DoubleChevronLeft, DoubleChevronRight, Home, Menu, Close, Search, Filter

Actions: Plus, Minus, Check, X, Edit, Trash, Save, Download, Upload, Copy, Share

Media: Play, Pause, Stop, VolumeUp, VolumeDown, VolumeOff, Image, Video, Camera

Communication: Mail, Message, Phone, Bell, Notification

Files: File, Folder, FolderOpen, FileText, FilePdf

User: User, Users, UserPlus, UserMinus, Settings, Logout

Status: CheckCircle, XCircle, AlertCircle, Info, Warning, Star, Heart, Bookmark

Social: Facebook, Twitter, Instagram, Linkedin, Github, Youtube

Technology: Wifi, Bluetooth, Battery, Zap, Lock, Unlock, Shield

Shopping: ShoppingCart, ShoppingBag, CreditCard, Gift

Time: Clock, Calendar, Timer

Location: MapPin, Globe, Navigation

Weather: Sun, Moon, Cloud

Utility: Eye, EyeOff, Refresh, MoreVertical, MoreHorizontal, Grid, List

You can also import individual icons directly:

import { Home, Search, User } from 'pure-react-ui';

<Home size={24} color="#007bff" />

Space

A layout component for adding consistent spacing between elements.

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

<Space size="medium" direction="horizontal">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</Space>

<Space size={20} direction="vertical" align="start">
  <Card>Card 1</Card>
  <Card>Card 2</Card>
</Space>

Props:

• size: 'small' | 'medium' | 'large' | number (default: 'medium') - Spacing size between items
• direction: 'horizontal' | 'vertical' (default: 'horizontal') - Direction of spacing
• align: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'center') - Alignment of items
• wrap: boolean (default: false) - Whether items should wrap to next line
• className: string (optional) - Additional CSS classes

Flex

A flexible container component based on CSS Flexbox.

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

<Flex direction="row" justify="between" align="center" gap="medium">
  <Button>Left</Button>
  <Button>Center</Button>
  <Button>Right</Button>
</Flex>

<Flex direction="column" justify="start" align="stretch" gap={16}>
  <Card>Card 1</Card>
  <Card>Card 2</Card>
</Flex>

Props:

• direction: 'row' | 'column' | 'row-reverse' | 'column-reverse' (default: 'row') - Flex direction
• justify: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' (default: 'start') - Justify content
• align: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'start') - Align items
• wrap: boolean | 'wrap' | 'nowrap' | 'wrap-reverse' (default: false) - Flex wrap behavior
• gap: 'none' | 'small' | 'medium' | 'large' | number (default: 'none') - Gap between items
• className: string (optional) - Additional CSS classes
• style: React.CSSProperties (optional) - Additional inline styles

Text

A typography component for consistent text styling with various options.

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

<Text as="h1" size="2xl" weight="bold" color="primary">
  Heading Text
</Text>

<Text size="lg" color="muted" align="center">
  Centered paragraph text
</Text>

<Text as="span" size="sm" decoration="underline" transform="uppercase">
  Styled Text
</Text>

Props:

• as: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'small' | 'strong' | 'em' | 'code' | 'pre' (default: 'p') - HTML element to render
• size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' (default: 'md') - Font size
• weight: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' (default: 'normal') - Font weight
• color: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'muted' (default: 'default') - Text color
• align: 'left' | 'center' | 'right' | 'justify' (default: 'left') - Text alignment
• transform: 'none' | 'uppercase' | 'lowercase' | 'capitalize' (default: 'none') - Text transform
• decoration: 'none' | 'underline' | 'line-through' | 'overline' (default: 'none') - Text decoration
• truncate: boolean (default: false) - Truncate text with ellipsis
• className: string (optional) - Additional CSS classes

Form Components

A comprehensive form component system with all form elements.

Form

The main form container component.

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

<Form layout="vertical" onSubmit={handleSubmit}>
  {/* Form fields */}
</Form>

Props:

• layout: 'vertical' | 'horizontal' | 'inline' (default: 'vertical')
• size: 'small' | 'medium' | 'large' (default: 'medium')
• onSubmit: (e: React.FormEvent) => void (optional)
• All standard form HTML attributes

Input

Text input field with validation and icons.

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

<Input
  label="Email"
  type="email"
  placeholder="Enter email"
  error={errors.email}
  helpText="We'll never share your email"
  leftIcon={<Icon name="Mail" />}
  fullWidth
/>

Props:

• label: string (optional)
• error: string (optional) - Error message
• helpText: string (optional) - Help text
• leftIcon: React.ReactNode (optional)
• rightIcon: React.ReactNode (optional)
• fullWidth: boolean (default: false)
• size: 'small' | 'medium' | 'large' (default: 'medium')
• All standard input HTML attributes

Textarea

Multi-line text input.

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

<Textarea
  label="Message"
  placeholder="Enter your message"
  rows={4}
  resize="vertical"
  fullWidth
/>

Props:

• label: string (optional)
• error: string (optional)
• helpText: string (optional)
• fullWidth: boolean (default: false)
• size: 'small' | 'medium' | 'large' (default: 'medium')
• rows: number (default: 4)
• resize: 'none' | 'both' | 'horizontal' | 'vertical' (default: 'vertical')
• All standard textarea HTML attributes

Select

Advanced dropdown select component powered by react-select with search, multi-select, and more features.

Note: This component requires react-select to be installed as a peer dependency:

npm install react-select

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

// Basic Select
<Select
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' }
  ]}
  placeholder="Choose a country"
  fullWidth
/>

// Searchable Select
<Select
  label="Search Country"
  options={countries}
  placeholder="Search and select"
  isSearchable
  isClearable
  fullWidth
/>

// Multi Select
<Select
  label="Select Frameworks"
  options={frameworks}
  placeholder="Select multiple"
  isMulti
  isSearchable
  fullWidth
/>

// Select with Icons
<Select
  label="Framework"
  options={[
    { value: 'react', label: 'React', icon: <Icon name="Zap" /> },
    { value: 'vue', label: 'Vue.js', icon: <Icon name="Zap" /> }
  ]}
  placeholder="Choose framework"
  fullWidth
/>

Props:

• label: string (optional)
• error: string (optional)
• helpText: string (optional)
• options: SelectOption[] (required) - Array of options with value, label, optional disabled, and optional icon
• placeholder: string (optional, default: 'Select...')
• value: string | number | (string | number)[] (optional) - Controlled value
• defaultValue: string | number | (string | number)[] (optional) - Uncontrolled default value
• multiple or isMulti: boolean (default: false) - Enable multi-select
• searchable or isSearchable: boolean (default: false) - Enable search functionality
• allowClear or isClearable: boolean (default: false) - Show clear button
• disabled: boolean (default: false)
• fullWidth: boolean (default: false)
• size: 'small' | 'medium' | 'large' (default: 'medium')
• onChange: (value: string | number | (string | number)[]) => void (optional)
• onSearch: (searchText: string) => void (optional) - Callback when search text changes
• name: string (optional) - Form field name
• id: string (optional) - Custom ID for the select
• className: string (optional)

Checkbox

Checkbox input with custom styling.

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

<Checkbox
  label="I agree to terms"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

Props:

• label: string (optional)
• error: string (optional)
• helpText: string (optional)
• fullWidth: boolean (default: false)
• size: 'small' | 'medium' | 'large' (default: 'medium')
• All standard checkbox HTML attributes

Radio

Radio button input.

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

<Radio
  label="Option 1"
  name="option"
  value="1"
  checked={selected === '1'}
  onChange={(e) => setSelected(e.target.value)}
/>

Props:

• label: string (optional)
• error: string (optional)
• helpText: string (optional)
• fullWidth: boolean (default: false)
• size: 'small' | 'medium' | 'large' (default: 'medium')
• All standard radio HTML attributes

Switch

Toggle switch component.

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

<Switch
  label="Enable notifications"
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>

Props:

• label: string (optional)
• error: string (optional)
• helpText: string (optional)
• fullWidth: boolean (default: false)
• size: 'small' | 'medium' | 'large' (default: 'medium')
• All standard checkbox HTML attributes (used as switch)

FormGroup

Container for grouping form fields.

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

<FormGroup label="Personal Information" required>
  <Input label="Name" />
  <Input label="Email" />
</FormGroup>

Props:

• label: string (optional)
• error: string (optional)
• helpText: string (optional)
• required: boolean (default: false)
• className: string (optional)

FormRow

Horizontal row for form fields.

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

<FormRow gap="medium">
  <Input label="First Name" fullWidth />
  <Input label="Last Name" fullWidth />
</FormRow>

Props:

• gap: 'small' | 'medium' | 'large' | number (default: 'medium')
• className: string (optional)

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.
• Icon: pure-icon, pure-icon--clickable, pure-icon--small, etc.
• Space: pure-space, pure-space--horizontal, pure-space--vertical, etc.
• Flex: pure-flex, pure-flex--row, pure-flex--column, etc.
• Text: pure-text, pure-text--lg, pure-text--bold, etc.
• Form: pure-form, pure-form--vertical, pure-form--horizontal, etc.
• Input: pure-input, pure-input--error, pure-input--small, etc.
• Textarea: pure-textarea, pure-textarea--error, etc.
• Select: pure-select, pure-select--error, etc.
• Checkbox: pure-checkbox, pure-checkbox--error, etc.
• Radio: pure-radio, pure-radio--error, etc.
• Switch: pure-switch, pure-switch--error, 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
• lib/components/Icon/Icon.css
• lib/components/Space/Space.css
• lib/components/Flex/Flex.css
• lib/components/Text/Text.css
• lib/components/Form/Form.css

Examples

A complete example application is available in the example directory. To run it:

# From the root directory, build the package first
npm run build

# Then navigate to example directory
cd example
npm install
npm run dev

Or check out EXAMPLES.md for code examples and usage patterns.

License

MIT