@uiblocks/ui

A modern, theme-aware React component library built with TypeScript. Designed for speed, customization, and developer experience.

Features

• 🎨 Theme-aware - Built-in light/dark mode support with customizable design tokens
• 🧩 Composable - Mix and match components or extend them easily
• 🔧 Developer Friendly - Full TypeScript support with excellent IntelliSense
• ⚡ Performance - Optimized for React and Next.js applications
• 🎯 Accessible - Built with accessibility best practices

Installation

npm install @uiblocks/ui
# or
yarn add @uiblocks/ui
# or
pnpm add @uiblocks/ui

Setup

1. Import Styles

Import the component styles in your main CSS file or app entry point:

@import '@uiblocks/ui/styles';

2. Theme Provider

Wrap your app with the ThemeProvider for theme support:

import { ThemeProvider, Colors } from '@uiblocks/ui'

function App() {
  return <ThemeProvider colors={Colors}>{/* Your app content */}</ThemeProvider>
}

Usage

Basic Example

import { Button, Card, Flex } from '@uiblocks/ui'

function MyComponent() {
  return (
    <Card>
      <Flex direction='col' gap={4} align='center'>
        <h2>Welcome to UI Blocks</h2>
        <Button type='primary'>Get Started</Button>
      </Flex>
    </Card>
  )
}

Components

Button

import { Button } from '@uiblocks/ui'

// Basic usage
<Button>Default Button</Button>
<Button type="primary">Primary Button</Button>
<Button type="primary" loading>Loading...</Button>
<Button danger>Danger Button</Button>

Flex

import { Flex } from '@uiblocks/ui'

// Layout with flex
;<Flex direction='row' justify='between' align='center' gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Card

import { Card, CardHeader, CardTitle, CardContent } from '@uiblocks/ui'
;<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>Card content goes here</CardContent>
</Card>

Tabs

import { Tabs } from '@uiblocks/ui'

const items = [
  {
    key: '1',
    label: 'Tab 1',
    children: <div>Content of Tab 1</div>
  },
  {
    key: '2',
    label: 'Tab 2',
    children: <div>Content of Tab 2</div>
  }
]

<Tabs items={items} defaultActiveKey="1" />

Theming

Custom Colors

You can customize the theme by passing colors to the ThemeProvider:

import { ThemeProvider, Colors } from '@uiblocks/ui'

const customColors = {
  colorPrimary: '#1890ff',
  colorSuccess: '#52c41a',
  colorWarning: '#faad14',
  colorError: '#ff4d4f',
}

<ThemeProvider colors={{...Colors, ...customColors}}>
  <App />
</ThemeProvider>

CSS Custom Properties

The library uses CSS custom properties that you can override:

:root {
  --colorPrimary: #1890ff;
  --colorSuccess: #52c41a;
  --colorWarning: #faad14;
  --colorError: #ff4d4f;
}

TypeScript Support

All components come with full TypeScript definitions. Import types as needed:

import { ButtonProps, FlexProps } from '@uiblocks/ui'

interface MyComponentProps {
  buttonProps: ButtonProps
  flexProps: FlexProps
}

Peer Dependencies

• React >= 18
• React DOM >= 18
• Tailwind CSS ^4.1.12

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © [Gulshan]

Support

• 📖 Documentation