# @ikonintegration/ui

> Welcome to `@ikonintegration/ui` – a stylish and customizable UI package for React that simplifies your frontend development. This package provides ready-to-use styles and components to kickstart your React projects. Follow the steps below to get started

Latest version **1.0.131** (published 2026-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ikonintegration/ui
pnpm add @ikonintegration/ui
yarn add @ikonintegration/ui
bun add @ikonintegration/ui
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.131 |
| Published | 2026-01-21 |
| First published | 2024-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 50 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gwdebes, rescio, mateus.ikon, vitor-ikon |

## Links

- npm: https://www.npmjs.com/package/@ikonintegration/ui
- npm.io page: https://npm.io/package/@ikonintegration/ui

## Dependencies (50)

- [npm](https://npm.io/package/npm.md) ^10.8.1
- [zod](https://npm.io/package/zod.md) >=3.22.4
- [clsx](https://npm.io/package/clsx.md) ^2.1.0
- [cmdk](https://npm.io/package/cmdk.md) ^0.2.1
- [vaul](https://npm.io/package/vaul.md) ^0.9.0
- [marked](https://npm.io/package/marked.md) ^17.0.1
- [sonner](https://npm.io/package/sonner.md) ^1.4.3
- [install](https://npm.io/package/install.md) ^0.13.0
- [date-fns](https://npm.io/package/date-fns.md) ^3.6.0
- [turndown](https://npm.io/package/turndown.md) ^7.2.2
- [dompurify](https://npm.io/package/dompurify.md) ^3.3.1
- [next-themes](https://npm.io/package/next-themes.md) ^0.2.1
- [lucide-react](https://npm.io/package/lucide-react.md) ^0.341.0
- [match-sorter](https://npm.io/package/match-sorter.md) ^6.3.4
- [@tiptap/react](https://npm.io/package/@tiptap/react.md) ^3.15.3
- [@ariakit/react](https://npm.io/package/@ariakit/react.md) ^0.4.7
- [react-dropzone](https://npm.io/package/react-dropzone.md) ^14.2.3
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.2.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.51.1
- [@heroicons/react](https://npm.io/package/@heroicons/react.md) ^2.1.4
- [react-day-picker](https://npm.io/package/react-day-picker.md) ^8.10.0
- [react-input-mask](https://npm.io/package/react-input-mask.md) ^3.0.0-alpha.2
- [@hookform/resolvers](https://npm.io/package/@hookform/resolvers.md) ^3.3.4
- [@tiptap/starter-kit](https://npm.io/package/@tiptap/starter-kit.md) ^3.15.3
- [react-currency-mask](https://npm.io/package/react-currency-mask.md) ^1.3.2
- [react-number-format](https://npm.io/package/react-number-format.md) ^5.3.4
- [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.0.2
- [@radix-ui/react-tabs](https://npm.io/package/@radix-ui/react-tabs.md) ^1.0.4
- [@radix-ui/react-label](https://npm.io/package/@radix-ui/react-label.md) ^2.0.2
- [@tanstack/react-table](https://npm.io/package/@tanstack/react-table.md) ^8.13.2
- [@radix-ui/react-avatar](https://npm.io/package/@radix-ui/react-avatar.md) ^1.0.4
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5
- [@radix-ui/react-select](https://npm.io/package/@radix-ui/react-select.md) ^2.0.0
- [@radix-ui/react-switch](https://npm.io/package/@radix-ui/react-switch.md) ^1.0.3
- [@tiptap/extension-link](https://npm.io/package/@tiptap/extension-link.md) ^3.15.3
- [react-resizable-panels](https://npm.io/package/react-resizable-panels.md) ^2.0.12
- [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.0.7
- [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.0.7
- [@radix-ui/react-checkbox](https://npm.io/package/@radix-ui/react-checkbox.md) ^1.0.4
- [class-variance-authority](https://npm.io/package/class-variance-authority.md) ^0.7.0
- [@radix-ui/react-separator](https://npm.io/package/@radix-ui/react-separator.md) ^1.0.3
- [@radix-ui/react-hover-card](https://npm.io/package/@radix-ui/react-hover-card.md) ^1.0.7
- [react-currency-input-field](https://npm.io/package/react-currency-input-field.md) ^3.8.0
- [@radix-ui/react-collapsible](https://npm.io/package/@radix-ui/react-collapsible.md) ^1.0.3
- [@radix-ui/react-radio-group](https://npm.io/package/@radix-ui/react-radio-group.md) ^1.1.3
- [@tiptap/extension-list-item](https://npm.io/package/@tiptap/extension-list-item.md) ^3.15.3
- [@tiptap/extension-underline](https://npm.io/package/@tiptap/extension-underline.md) ^3.15.3
- [@radix-ui/react-dropdown-menu](https://npm.io/package/@radix-ui/react-dropdown-menu.md) ^2.0.6
- [@tiptap/extension-bullet-list](https://npm.io/package/@tiptap/extension-bullet-list.md) ^3.15.3
- [@tiptap/extension-ordered-list](https://npm.io/package/@tiptap/extension-ordered-list.md) ^3.15.3

## Recent versions

- 1.0.131 (latest) — 2026-01-21
- 1.0.131-alpha — 2026-01-19
- 1.0.130 — 2026-01-12
- 1.0.130-alpha2 — 2026-01-10
- 1.0.130-alpha1 — 2026-01-10
- 1.0.129 — 2026-01-09
- 1.0.127 — 2025-11-21
- 1.0.127-beta — 2025-11-21
- 1.0.126 — 2025-11-20
- 1.0.125 — 2025-11-14
- 1.0.124 — 2025-03-25
- 1.0.124-alpha2 — 2025-03-24
- 1.0.124-alpha1 — 2025-03-24
- 1.0.123 — 2025-03-12
- 1.0.122 — 2025-03-12
- … 212 more at https://npm.io/package/@ikonintegration/ui/versions

## README

# @ikonintegration/ui

Welcome to `@ikonintegration/ui` – a stylish and customizable UI package for React that simplifies your frontend development. This package provides ready-to-use styles and components to kickstart your React projects. Follow the steps below to get started quickly.

## Installation

To use `@ikonintegration/ui` in your React app, you need to install the package and import the main styles.

### Install the package

```bash
npm install @ikonintegration/ui
# or
yarn add @ikonintegration/ui
```

## Import styles

In your app entrypoint (usually src/main.tsx), import the `@ikonintegration/ui` styles:

```tsx
import '@ikonintegration/ui/styles.css';
```

## Integrate with Tailwind CSS
If your app is using Tailwind CSS, you can integrate IKUI with your Tailwind configuration so your app will be able to use IKUI colors and other configurations:
```ts
import { ikuiTwPlugin } from '@ikonintegration/ui';
import type { Config } from 'tailwindcss';

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  corePlugins: {
    // As IKUI already provides preflight styles,
    // you should turn off your app's preflight to avoid conflicts
    preflight: false,
  },
  plugins: [ikuiTwPlugin],
} satisfies Config;

```

Now you should be able to use IKUI classes directly in your app:

```tsx
<div className="border">
  <span className="text-foreground">Hey!</span>
</div>
```

## Usage

With `@ikonintegration/ui` integrated into your project, you can start using the predefined React components right away.

```tsx
import { Button } from '@ikonintegration/ui';

export function MyComponent() {
  return (
    <div>
      <Button onClick={() => console.log('Button clicked')}>
        Click me
      </Button>
    </div>
  );
}
```

## Customization

`@ikonintegration/ui` is designed to be flexible and customizable to fit the unique styles of your React project. Feel free to override the styles, modify the components, or use the provided utility classes to achieve your desired look and feel.

---
_Source: https://npm.io/package/@ikonintegration/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._