Package Exports

uiplex
uiplex/index.css
uiplex/styles.css

Readme

uiplex

A modern React component library built with TypeScript, featuring beautiful, accessible, and customizable UI components.

🌐 Documentation & Live Examples: https://uiplex.ankitkaushal.in/

Installation

npm install uiplex
# or
yarn add uiplex
# or
pnpm add uiplex

Peer Dependencies

This library requires React 18+:

npm install react react-dom

Quick Start

CSS is automatically included when you import components! Just import and use:

import { Button, ThemeProvider } from 'uiplex';

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary" size="md">
        Click me
      </Button>
    </ThemeProvider>
  );
}

If CSS is not automatically loaded, import it manually:

import 'uiplex/styles.css'; // Only needed if bundler doesn't auto-include

Components

Button

Versatile button component with multiple variants, sizes, and color schemes.

import { Button } from 'uiplex';

<Button variant="primary" size="md" colorScheme="blue">
  Primary Button
</Button>

Key Props: variant, size, colorScheme, disabled, loading, leftIcon, rightIcon

Loader

Flexible loading indicator with multiple variants.

import { Loader } from 'uiplex';

<Loader variant="spinner" size="md" />

Key Props: variant ("spinner" | "dots" | "pulse"), size, isCentered

Radio & RadioGroup

Radio button components with support for groups.

import { Radio, RadioGroup } from 'uiplex';

<RadioGroup
  name="option"
  value={selected}
  onChange={(value) => setSelected(value)}
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
  ]}
/>

Input

Form input component with validation support.

import { Input, FormControl, FormLabel, FormErrorMessage } from 'uiplex';

<FormControl isInvalid={hasError}>
  <FormLabel>Email</FormLabel>
  <Input type="email" placeholder="Enter your email" />
  <FormErrorMessage>Email is required</FormErrorMessage>
</FormControl>

Key Props: size, variant, isInvalid, isDisabled

Textarea

Multi-line text input component.

import { Textarea } from 'uiplex';

<Textarea placeholder="Enter your message" rows={4} />

Select

Custom dropdown with single/multi-select, search, and validation.

import { Select } from 'uiplex';

// Single select
<Select
  placeholder="Select an option"
  options={options}
  value={value}
  onChange={(value) => setValue(value)}
/>

// Multi-select
<Select
  mode="multiple"
  placeholder="Select multiple"
  options={options}
/>

// Searchable
<Select searchable placeholder="Search..." options={options} />

Key Props: mode ("single" | "multiple"), searchable, options, value, onChange, width

Tabs

Tab component for organizing content into multiple panels.

import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'uiplex';

<Tabs defaultIndex={0}>
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel index={0}>Content 1</TabPanel>
    <TabPanel index={1}>Content 2</TabPanel>
  </TabPanels>
</Tabs>

Key Props: defaultIndex, variant ("line" | "enclosed" | "soft-rounded"), size, colorScheme, orientation

Accordion

Collapsible accordion component for organizing content.

import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from 'uiplex';

<Accordion defaultIndex={0} allowMultiple>
  <AccordionItem index={0}>
    <AccordionButton index={0}>Item 1</AccordionButton>
    <AccordionPanel index={0}>Content 1</AccordionPanel>
  </AccordionItem>
  <AccordionItem index={1}>
    <AccordionButton index={1}>Item 2</AccordionButton>
    <AccordionPanel index={1}>Content 2</AccordionPanel>
  </AccordionItem>
</Accordion>

Key Props: defaultIndex, allowMultiple, allowToggle, variant ("default" | "bordered" | "filled"), size, colorScheme

Modal dialog component for overlays and popups.

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from 'uiplex';

function MyComponent() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Title</ModalHeader>
          <ModalBody>Content</ModalBody>
          <ModalFooter>Footer</ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}

Contextual information displayed on hover.

import { Tooltip } from 'uiplex';

<Tooltip label="Helpful tooltip" placement="top" width={200}>
  <Button>Hover me</Button>
</Tooltip>

Floating content container with positioning.

import { Popover, PopoverContent, PopoverHeader, PopoverBody } from 'uiplex';

<Popover
  content={
    <PopoverContent>
      <PopoverHeader>Title</PopoverHeader>
      <PopoverBody>Content</PopoverBody>
    </PopoverContent>
  }
  placement="bottom"
>
  <Button>Open Popover</Button>
</Popover>

Toast

Toast notifications for displaying temporary messages.

import { Toast, ToastContainerGlobal } from 'uiplex';

// Add to root layout
<ToastContainerGlobal />

// Use static methods
Toast.success("Operation completed!");
Toast.error("Something went wrong");
Toast.warning("Please check");
Toast.info("New update available");

CircularProgress

Circular progress indicator.

import { CircularProgress, CircularProgressLabel } from 'uiplex';

<CircularProgress value={75} size={64}>
  <CircularProgressLabel>75%</CircularProgressLabel>
</CircularProgress>

IconButton

Button component for icons.

import { IconButton } from 'uiplex';
import { Mail } from 'feather-icons-react';

<IconButton
  icon={<Mail size={18} />}
  variant="primary"
  size="md"
  aria-label="Send email"
/>

Link

Link component with multiple variants.

import { Link } from 'uiplex';

<Link href="/about" variant="primary" size="md">
  Learn More
</Link>

Layout Components

Box - Versatile container component

<Box padding="md" margin="lg" borderRadius="md">Content</Box>

Flex - Flexbox layout component

<Flex direction="row" align="center" justify="space-between" gap="md">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Flex>

Grid - CSS Grid layout component

<Grid columns={3} gap="md">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Grid>

Text - Typography component

<Text size="lg" weight="bold" color="primary">Heading</Text>

Hooks

useDisclosure

Hook for managing open/close state.

import { useDisclosure } from 'uiplex';

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

useOutsideClick

Hook for detecting clicks outside an element.

import { useOutsideClick } from 'uiplex';

const ref = useRef(null);
useOutsideClick({
  refs: [ref],
  handler: () => console.log('Clicked outside')
});

Theme System

ThemeProvider

Wrap your app with ThemeProvider:

import { ThemeProvider, useTheme, ThemeToggle } from 'uiplex';

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <YourApp />
    </ThemeProvider>
  );
}

useTheme Hook

const { theme, setTheme, resolvedTheme } = useTheme();

ThemeToggle Component

<ThemeToggle />

Styling

CSS is automatically included when you import components. The library uses CSS variables for theming and supports light/dark modes.

All components automatically adapt to the current theme based on CSS variables.

Manual CSS import (if needed):

import 'uiplex/styles.css';

TypeScript Support

This library is built with TypeScript and includes full type definitions. All components and their props are fully typed.

Documentation

For complete documentation, examples, and API references, visit: https://uiplex.ankitkaushal.in/

License

MIT