React 19 UI component library & Design System built with TypeScript, Tailwind CSS v4, and DaisyUI v5 by CreativeCode.

• Storybook / Chromatic: View Interactive Components
• NPM Package: @creativecodeco/ui
• Website: CreativeCode.com.co

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

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

Create or update your postcss.config.js:

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

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;
}

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

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

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 (supports subpath export or legacy lib path)
import '@creativecodeco/ui/theme/main.css';

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

• Display Components: Accordion, Aura, Avatar, AvatarGroup, Badge, Button, Card, Carousel, ChatBubble, Hover3D, HoverGallery, Indicator, Kbd, List, Mask, Rating, Stat, Status, Swap, Table, TextRotate, Timeline.
• Feedback Components: Alert, Countdown, Diff, Modal, Progress, RadialProgress, Skeleton, Spinner, Toast, Tooltip.
• Layout Components: Collapse, Divider, Footer, Hero, Join, Mockup, Stack.
• Navigation Components: ActionDropdown, Breadcrumb, Dock, Drawer, Fab, Link, MegaMenu, Menu, Navbar, Pagination, Steps, Tabs.
• Form Controls: Calendar, Checkbox, Dropdown, Fieldset, FileInput, Filter, Label, Otp, Radio, RadioList, Range, Select, TextArea, TextBox, Toggle, Validator (with full forwardRef and React Hook Form Controller support).
• Accessibility & Security: WAI-ARIA compliant semantics (aria-invalid, role="alert", role="tabpanel", keyboard navigation) and OWASP frontend URL sanitization (sanitizeUrl).
• Theme Support: Built on DaisyUI with custom CreativeCode semantic branding tokens.
• Visual Testing: Integrated with Storybook 10 and Chromatic 18.

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

MIT © CreativeCode.com.co Web CreativeCode.com.co