@tiiqu/ui
Version:
A customizable, accessible, and developer-friendly React UI component library powered by Tailwind CSS, TypeScript, and Vite
246 lines (169 loc) • 7.13 kB
Markdown
<p align="center">
<img src="https://v2.pdf2qa.org/images/logo-primary.svg" alt="Logo" width="150" />
</p>
<p align="center">
✨ A customizable, accessible, and developer-friendly React UI component library powered by <strong>Tailwind CSS</strong> , <strong>TypeScript</strong>, and <strong>Vite</strong>.
</p>
## ⚙️ Technologies
[](https://react.dev)
[](https://tailwindcss.com)
[](https://vitejs.dev)
[](https://www.typescriptlang.org/)
[](https://nodejs.org/en/download)
[](https://github.com/lukeed/clsx)
[](https://github.com/dcastil/tailwind-merge)
[](https://cva.style)
## ✨ Features
- 🎨 **Pre-styled Components** using raw CSS hex values (no custom theme required)
- ⚛️ **React 19** with `forwardRef` and `class-variance-authority`
- 🌀 **Tailwind CSS v3+ compatible**
- ✨ **Zero-config styles** with automatic CSS—no setup needed
- 💅 Consistent design using `cva` and `tailwind-merge`
- 📦 Tree-shakable, typed, and optimized via Vite
- 📚 Storybook and TypeScript support
## 📦 Installation
Install the library (and make sure your app has Tailwind):
```bash
pnpm add /ui
# or
npm install /ui
```
## 🚀 Getting Started
```tsx
import { Button } from "@tiiqu/ui";
export default function Example() {
return <Button intent="primary">Click Me</Button>;
}
```
## 🧱 Components
```
✅ Button
```
The `Button` component is a flexible, theme-aware, utility-first button built using Tailwind CSS and [class-variance-authority (CVA)](https://cva.style/).
It supports multiple variants (`intent`), sizes, and boolean states like `disabled` and `fullWidth`.
---
## 🎨 Variants (`intent`)
Supported button styles via the `intent` prop:
- `primary`
- `secondary`
- `light_primary`
- `light_secondary`
- `outline_primary`
- `outline_secondary`
- `borderless_primary`
- `borderless_secondary`
- `grab_outline`
---
## 📏 Sizes (`size`)
- `sm` – Small
- `md` – Medium (default)
- `lg` – Large
---
## ✅ Boolean Props
- `disabled`: Disables the button and applies dimmed styles.
- `fullWidth`: Makes the button stretch to 100% width. Defaults to `true`.
---
## 📦 Usage
```tsx
import { Button } from '@/components/ui/button';
<Button>Default</Button>
<Button intent="primary">Primary</Button>
<Button intent="outline_secondary">Secondary Outline</Button>
<Button intent="grab_outline">Grab Outline</Button>
<Button intent="borderless_primary" size="sm">Small Link</Button>
<Button intent="light_secondary" disabled>Disabled</Button>
<Button intent="outline_primary" fullWidth={false}>Fixed Width</Button>
```
## 🎨 Theming
You can customize the look and feel of the components using the className props. Override colors, spacing, or other utilities.
```css
{
--color-tiiqu-primary: #18e1c9;
--color-tiiqu-secondary: #034459;
--color-tiiqu-primary-light: #18e1c966;
--color-tiiqu-secondary-light: #03445966;
--color-tiiqu-gray: #e6ecee;
--color-tiiqu-white: #ffffff;
}
```
## 🛠️ Customization
You can customize the button further by passing your own Tailwind or custom CSS classes via the className prop.
```tsx
<Button intent="primary" className="shadow-lg hover:scale-105 transition-transform">
Custom Styled Button
</Button>
```
## 🪟 Modal
The `Modal` component provides an accessible, customizable modal dialog powered by native HTML `<dialog>` with smooth animations and Tailwind CSS styling.
---
### 🚀 Usage
```tsx
import { Modal } from "@tiiqu/ui";
import React, { useState } from "react";
export default function Example() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)} className="btn-primary">
Open Modal
</button>
<Modal
open={open}
onClose={() => setOpen(false)}
showCloseIcon={true}
>
<div>
<p>This is the modal content area.</p>
</div>
</Modal>
</>
);
}
```
## 📋 Props
| Name | Type | Default | Description |
| --------------- | ------------ | ----------- | ------------------------------------------- |
| `open` | `boolean` | required | Controls visibility of the modal |
| `onClose` | `() => void` | required | Callback fired when modal requests to close |
| `children` | `ReactNode` | required | Content inside the modal |
| `className` | `string` | `undefined` | Additional CSS classes for modal container |
| `showCloseIcon` | `boolean` | `true` | Show or hide the close (X) button |
| `closeIcon` | `ReactNode` | `undefined` | Custom icon to replace default close icon |
---
## 🧾 Accordion Component
The `Accordion` component is a flexible and generic expandable/collapsible UI element that accepts any data type and renders titles and content based on user-provided render functions.
### 🎯 Features
- Fully generic TypeScript support for any data structure
- Controlled open/close state with smooth animations
- Accessible with proper ARIA attributes and keyboard interaction
- Customizable styling via `className` prop
### 📦 Usage
```tsx
import { Accordion } from "@tiiqu/ui";
const accordionData = [
{
title: "What is your return policy?",
content:
"You can return any item within 30 days of purchase as long as it’s in its original condition.",
},
// more items...
];
export default function Example() {
return (
<Accordion
data={accordionData}
renderTitle={(item) => item.title}
renderContent={(item) => item.content}
className="my-accordion"
/>
);
}
## 🚧 Coming Soon
We're actively working on expanding the TiiQu UI library with the following components:
- 📊 **Table** — Fully customizable data tables with sorting, pagination, and responsive design.
- 📚 **SideNav** — Sidebar navigation for complex layouts and dashboards.
```
⚠️ This package requires Tailwind CSS v3.0.0 or later to be installed in your project.
```
[](https://www.npmjs.com/package/@tiiqu/ui)
[](LICENSE)