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)

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 (optional)
• size: 'small' | 'medium' | 'large' | 'fullscreen' (default: 'medium')
• closeOnOverlayClick: boolean (default: true)
• closeOnEscape: boolean (default: true)
• showCloseButton: boolean (default: true)

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

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.

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

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