@creativecodeco/ui

@creativecodeco/ui

System Design CreativeCode.com.co

Chromatic

View Components

---

Configuration

This library is designed for React 19 and uses Tailwind CSS v4 and DaisyUI v5. The configuration is primarily CSS-first.

Install

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

Dependencies

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

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:

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:

@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:

@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:

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 Web CreativeCode.com.co