@creativecodeco/ui NPM

@creativecodeco/ui

CreativeCode.com.co

System Design CreativeCode.com.co

Chromatic

Configuration

Install

npm install @creativecodeco/ui

or

yarn add @creativecodeco/ui

Dependencies

npm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnano

or

yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts cssnano

Setting Tailwind

Create file tailwind.config.js and add

/** @type {import('tailwindcss').Config} */
import { creativeCodeTheme } from '@creativecodeco/ui';

const themeConfig = {
  ...creativeCodeTheme,
  content: [
    ...creativeCodeTheme.content,
    './src/**/*.{js,jsx,ts,tsx}',
    './app/**/*.{js,jsx,ts,tsx}',
  ],
};

export default themeConfig;

Custom theme

/** @type {import('tailwindcss').Config} */
import { creativeCodeTheme } from '@creativecodeco/ui';

const themeConfig = {
  ...creativeCodeTheme,
  content: [
    ...creativeCodeTheme.content,
    './src/**/*.{js,jsx,ts,tsx}',
    './app/**/*.{js,jsx,ts,tsx}',
  ],
  daisyui: {
    ...creativeCodeTheme.daisyui,
    themes: [
      {
        customTheme: {
          ...require('daisyui/src/theming/themes')['light'],
          primary: '#08448c',
          secondary: '#427AA1',
          neutral: '#EBF2FA',
          accent: '#679436',
          other: '#A5BE00',
        },
      },
    ],
  },
};

export default themeConfig;

Setting Postcss

Create file postcss.config.js and add

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
};

Setting Provider

Add on layout layout.tsx

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

import '@creativecodeco/ui/lib/theme/css/main.css';

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