System Design CreativeCode.com.co
Note
This library is designed for React 19 and 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 CSSimport'@creativecodeco/ui/lib/theme/css/main.css';exportdefaultfunctionRootLayout({ children }){return(<htmllang="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