react-basic-elements

A lightweight and customizable React component library offering basic UI elements with a focus on flexibility, performance, and reusability.

Features

• Lightweight - Minimal dependencies and small bundle size
• Customizable - Consistent styling API across all components
• Type-safe - Written in TypeScript with full type definitions
• Modular - Use only what you need
• Performance-focused - Optimized for minimal re-renders

Installation

# Using npm
npm install react-basic-elements

# Using yarn
yarn add react-basic-elements

# Using pnpm
pnpm add react-basic-elements

Basic Usage

import { Box, Flex, Text, Divider } from 'react-basic-elements';

function App() {
    return (
        <Box p='lg' radius='md'>
            <Text fz='xl' fw={700}>
                Welcome to React Basic Elements
            </Text>
            <Divider my='md' />
            <Flex direction='row' gap='md'>
                <Box p='md' radius='sm' bg='#f0f0f0'>
                    Box 1
                </Box>
                <Box p='md' radius='sm' bg='#f0f0f0'>
                    Box 2
                </Box>
            </Flex>
        </Box>
    );
}

Styling System

react-basic-elements provides a consistent styling API across all components. The styling system includes:

Size Presets

Components use a set of predefined size values for spacing, font sizes, and border radius:

| Size | Spacing Value | Font Size | Border Radius | | ---- | ------------- | --------- | ------------- | | xs | 0.25rem | 0.75rem | 0.125rem | | sm | 0.5rem | 0.875rem | 0.25rem | | md | 1rem | 1rem | 0.375rem | | lg | 1.5rem | 1.25rem | 0.5rem | | xl | 2rem | 1.5rem | 1rem |

Common Style Props

All components accept these common style props:

Spacing Props

| Prop | Description | | ---- | --------------------------------- | | m | Margin on all sides | | mt | Margin top | | mb | Margin bottom | | ml | Margin left | | mr | Margin right | | mx | Horizontal margin (left & right) | | my | Vertical margin (top & bottom) | | p | Padding on all sides | | pt | Padding top | | pb | Padding bottom | | pl | Padding left | | pr | Padding right | | px | Horizontal padding (left & right) | | py | Vertical padding (top & bottom) |

Size Props

| Prop | Description | | -------- | -------------- | | w | Width | | h | Height | | minW | Minimum width | | maxW | Maximum width | | minH | Minimum height | | maxH | Maximum height | | fz | Font size | | radius | Border radius |

Misc Props

| Prop | Description | | ---- | ---------------- | | bg | Background color |

Values can be either predefined sizes (xs, sm, md, lg, xl) or direct CSS values (numbers, pixel values, percentages, etc.). The bg prop accepts any valid CSS color value.

Components

Box

A versatile container component that serves as the foundation for layouts.

import { Box } from 'react-basic-elements';

function Example() {
    return (
        <Box p='md' m='lg' radius='sm' bg='#f9f9f9' style={{ border: '1px solid #eaeaea' }}>
            Content goes here
        </Box>
    );
}

Flex

A flexible container for creating layouts with flexbox.

import { Flex, Box } from 'react-basic-elements';

function Example() {
    return (
        <Flex direction='row' wrap='wrap' justify='space-between' align='center' gap='md'>
            <Box p='md' bg='#f0f0f0'>
                Item 1
            </Box>
            <Box p='md' bg='#f0f0f0'>
                Item 2
            </Box>
            <Box p='md' bg='#f0f0f0'>
                Item 3
            </Box>
        </Flex>
    );
}

Flex Props

| Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------- | -------------- | ------------------------- | | direction | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'row' | Flex direction | | wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | Flex wrap behavior | | justify | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'flex-start' | Justify content alignment | | align | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | 'stretch' | Align items | | gap | SizeValue | undefined | Gap between items |

Text

A customizable text component.

import { Text } from 'react-basic-elements';

function Example() {
    return (
        <>
            <Text fz='xl' fw={700} style={{ color: '#333' }}>
                Heading Text
            </Text>
            <Text fz='md'>Normal paragraph text with medium size</Text>
            <Text fz='sm' style={{ color: '#666' }}>
                Smaller secondary text
            </Text>
        </>
    );
}

Text Props

| Prop | Type | Default | Description | | ------- | -------------------------------------------------- | ----------- | ------------------------------------ | | fw | CSSProperties['fontWeight']\|number | string | normal | Font weight | | fz | SizeValue \| number \| string | undefined | Font size (accepts predefined sizes) | | as | React.ElementType | 'span' | HTML element to render | | align | 'left' | 'center' | 'right' | 'justify' | undefined | Text alignment |

Divider

A horizontal or vertical divider.

import { Divider, Box, Text } from 'react-basic-elements';

function Example() {
    return (
        <Box>
            <Text>Section 1</Text>
            <Divider my='md' />
            <Text>Section 2</Text>

            {/* Vertical divider */}
            <Flex align='center' h='200px'>
                <Text>Left</Text>
                <Divider orientation='vertical' mx='md' />
                <Text>Right</Text>
            </Flex>
        </Box>
    );
}

Divider Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------- | -------------- | ---------------------------------------- | | variant | 'solid' | 'dashed' | 'dotted' | 'solid' | Line style | | orientation | 'horizontal' | 'vertical' | 'horizontal' | Divider orientation | | color | string | undefined | Line color | | length | string | number | undefined | Width or height depending on orientation |

SimpleGrid

A grid system with responsive column layouts.

import { SimpleGrid, Box } from 'react-basic-elements';

function Example() {
    return (
        <SimpleGrid cols={3} gap='md'>
            <Box p='md' bg='#f0f0f0'>
                Item 1
            </Box>
            <Box p='md' bg='#f0f0f0'>
                Item 2
            </Box>
            <Box p='md' bg='#f0f0f0'>
                Item 3
            </Box>
            <Box p='md' bg='#f0f0f0'>
                Item 4
            </Box>
        </SimpleGrid>
    );
}

SimpleGrid Props

| Prop | Type | Default | Description | | ------ | ------------------ | ----------- | ---------------------- | | cols | number | 1 | Number of columns | | gap | string \| number | undefined | Gap between grid items |

Center

A component for centering content.

import { Center, Box } from 'react-basic-elements';

function Example() {
    return (
        <Center h={200} bg='#f9f9f9'>
            <Box p='md' bg='#f0f0f0'>
                Centered content
            </Box>
        </Center>
    );
}

Creating custom components

You can easily build your own components using the base components:

import { Box, Text, Flex } from 'react-basic-elements';

interface CardProps {
    title: string;
    description: string;
    onClick?: () => void;
}

function Card({ title, description, onClick }: CardProps) {
    return (
        <Box
            p='lg'
            radius='md'
            bg='white'
            style={{
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
            }}
            onClick={onClick}
        >
            <Flex direction='column' gap='sm'>
                <Text fz='lg' fw={600}>
                    {title}
                </Text>
                <Text fz='sm' color='#555'>
                    {description}
                </Text>
            </Flex>
        </Box>
    );
}

License

This package is licensed under the MIT License.