System Design CreativeCode.com.co
Note
This library uses Tailwind CSS v4 and DaisyUI v5. The configuration is primarily CSS-first.
npm install @creativecodeco/ui
# or
yarn add @creativecodeco/uiEnsure 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 postcssCreate 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
import '@creativecodeco/ui/lib/theme/css/main.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<CreativeCodeUIProvider>{children}</CreativeCodeUIProvider>
</body>
</html>
);
}- Atomic Components: Button, Avatar, Badge, Accordion.
- Form Controls: TextBox, Checkbox, Radio, Dropdown.
- Theme Support: Built on DaisyUI with custom CreativeCode branding.
- Visual Testing: Integrated with Storybook and Chromatic.
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