# @creativecodeco/ui

> System Design CreativeCode.com.co

Latest version **2.4.2** (published 2026-10-01) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.4.2 |
| Published | 2026-10-01 |
| First published | 2023-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 451.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | John Toro |
| Maintainers | joaltoroc |
| Keywords | creativeCode.com.co, creativecodeco/ui, tailwindcss, daisyui, ui, framework design, design system |

## Links

- npm: https://www.npmjs.com/package/@creativecodeco/ui
- Homepage: https://github.com/creativecodeco/ui
- npm.io page: https://npm.io/package/@creativecodeco/ui

## Dependencies (6)

- [react](https://npm.io/package/react.md) 19.3.0
- [postcss](https://npm.io/package/postcss.md) 8.5.28
- [tailwindcss](https://npm.io/package/tailwindcss.md) 4.3.3
- [usehooks-ts](https://npm.io/package/usehooks-ts.md) 3.1.1
- [react-hook-form](https://npm.io/package/react-hook-form.md) 7.89.0
- [@tailwindcss/postcss](https://npm.io/package/@tailwindcss/postcss.md) 4.3.3

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.4.2 (latest) — 2026-10-01
- 2.4.1 — 2026-10-01
- 2.4.0 — 2026-10-01
- 2.3.0 — 2026-09-30
- 2.2.0 — 2026-08-29
- 2.1.1 — 2026-07-23
- 2.1.0 — 2026-07-23
- 2.0.0 — 2026-06-22
- 1.0.4 — 2026-04-01
- 1.0.3 — 2026-04-01
- 1.0.2 — 2026-03-04
- 1.0.1 — 2026-01-10
- 1.0.0 — 2026-01-03
- 0.6.2 — 2024-08-08
- 0.6.1 — 2024-08-08
- … 13 more at https://npm.io/package/@creativecodeco/ui/versions

## README

# @creativecodeco/ui

![CreativeCode.com.co](https://www.creativecode.com.co/wp-content/uploads/2024/01/CreativeCode.png)

> System Design CreativeCode.com.co

![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) ![Daisyui](https://img.shields.io/badge/daisyUI-16D1A5?style=for-the-badge&logo=daisyui&logoColor=white) ![Storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)

## Chromatic

[View Components](https://master--658273f7c6c3c10a909dea3b.chromatic.com/)

---

## Configuration

> [!NOTE]
> This library is designed for **React 19** and uses **Tailwind CSS v4** and **DaisyUI v5**. The configuration is primarily CSS-first.

### Install

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

### Dependencies

Ensure you have the required dependencies for Tailwind v4 and PostCSS:

```bash
npm install --save-dev tailwindcss @tailwindcss/postcss postcss
# or
yarn add -D tailwindcss @tailwindcss/postcss postcss
```

### Setting PostCSS

Create or update your `postcss.config.js`:

```js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {}
  }
};
```

### Setting Tailwind CSS

In your main CSS entry point (e.g., `globals.css` or `main.css`), import Tailwind and DaisyUI:

```css
@import 'tailwindcss';
@plugin "daisyui";

/* Optional: Custom Theme Configuration */
@theme {
  --color-primary: #08448c;
  --color-secondary: #427aa1;
  --color-accent: #679436;
  --color-neutral: #ebf2fa;
}
```

#### Backwards Compatibility (Optional)

If you prefer using a `tailwind.config.js` file, you can import it in your CSS:

```css
@import 'tailwindcss';
@config "../tailwind.config.js";
@plugin "daisyui";
```

### Setting Provider

Wrap your application with the `CreativeCodeUIProvider` to automatically apply the design system's theme and styles.

Add on layout `layout.tsx` (for Next.js) or your root component:

```tsx
import { CreativeCodeUIProvider } from '@creativecodeco/ui';

// Import the design system CSS
import '@creativecodeco/ui/lib/theme/css/main.css';

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      <body>
        <CreativeCodeUIProvider>{children}</CreativeCodeUIProvider>
      </body>
    </html>
  );
}
```

## Features

- **Atomic Components**: Button, Avatar, Badge, Accordion, Modal, Alert, Toast, Card, Tabs, Skeleton, Spinner, Breadcrumb, Pagination, Steps, Tooltip, Drawer, Navbar, Table, Stat, Divider.
- **Form Controls**: TextBox, Checkbox, Radio, RadioList, Dropdown, Toggle, TextArea, FileInput.
- **Theme Support**: Built on DaisyUI with custom CreativeCode branding.
- **Visual Testing**: Integrated with Storybook and Chromatic.

## Development

- `npm run dev`: Start Storybook for component development.
- `npm run build`: Build the library for production.
- `npm test`: Run unit tests with Jest.

## License

MIT © [CreativeCode.com.co](https://github.com/creativecodeco)
Web [CreativeCode.com.co](https://creativecode.com.co)

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