![\"Logo\"](\"https://v2.pdf2qa.org/images/logo-primary.svg\"){kind=logo}
\n\n \n
\n β¨ A customizable, accessible, and developer-friendly React UI component library powered by Tailwind CSS , TypeScript, and Vite.\n
\n\n## βοΈ Technologies\n\n[](https://react.dev)\n[](https://tailwindcss.com)\n[](https://vitejs.dev)\n[](https://www.typescriptlang.org/)\n[](https://nodejs.org/en/download)\n[](https://github.com/lukeed/clsx)\n[](https://github.com/dcastil/tailwind-merge)\n[](https://cva.style)\n\n## β¨ Features\n\n- π¨ **Pre-styled Components** using raw CSS hex values (no custom theme required)\n- βοΈ **React 19** with `forwardRef` and `class-variance-authority`\n- π **Tailwind CSS v3+ compatible**\n- β¨ **Zero-config styles** with automatic CSSβno setup needed\n- π Consistent design using `cva` and `tailwind-merge`\n- π¦ Tree-shakable, typed, and optimized via Vite\n- π Storybook and TypeScript support\n\n## π¦ Installation\n\nInstall the library (and make sure your app has Tailwind):\n\n```bash\npnpm add @abel3t/ui\n# or\nnpm install @abel3t/ui\n```\n\n## π Getting Started\n\n\n# β Button\n\nA fully customizable, accessible React button component with built-in **loading state**, **icon support**, and **ripple effect**. Designed for flexibility using **Class Variance Authority** for variants.\n\n## Features\n\n- Supports **variants** like `intent`, `size`, and `radius`.\n- Built-in **loading state** with customizable loader.\n- Optional **start and end icons**.\n- Full-width support with `fullWidth` prop.\n- Ripple effect on click.\n- Compatible with standard HTML button attributes.\n- Works seamlessly in **client-side React** (`\"use client\"`).\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------ | --------------------------------------- | ------- | ----------------------------------------------------------------- |\n| `intent` | `string` (variant) | β | Sets the button style variant (primary, secondary, etc.). |\n| `size` | `string` (variant) | β | Controls the button size. |\n| `radius` | `string` (variant) | β | Controls the border radius. |\n| `loading` | `boolean` | `false` | Shows loading state and disables the button. |\n| `loader` | `ReactNode` | `{item.content}
\n{item.answer}
}\n panelClassName=\"border-b border-gray-200\"\n panelHeadingClassName=\"p-4 cursor-pointer\"\n panelContentClassName=\"p-4 text-gray-600\"\n />\n );\n}\n```\n\n## π¨ Theming\n\nYou can customize the look and feel of the components using the className props. Override colors, spacing, or other utilities.\n\n\n```css\n@theme {\n --color-tiiqu-primary: #18e1c9;\n --color-tiiqu-secondary: #034459;\n\n --color-tiiqu-primary-light: #18e1c966;\n --color-tiiqu-secondary-light: #03445966;\n\n --color-tiiqu-gray: #e6ecee;\n\n --color-tiiqu-white: #ffffff;\n}\n\n```\n\n\n\n## π§ Coming Soon\n\nWe're actively working on expanding the TiiQu UI library with the following components:\n\n- π **Table** β Fully customizable data tables with sorting, pagination, and responsive design.\n- π **SideNav** β Sidebar navigation for complex layouts and dashboards.\n\n```\nβ οΈ This package requires Tailwind CSS v3.0.0 or later to be installed in your project.\n\n```\n\n[](https://www.npmjs.com/package/@abel3t/ui)\n[](LICENSE)\n","readmeFilename":"README.md"}