bbodek-ui

📦 Installation

# With npm
npm install bbodek-ui

# With yarn
yarn add bbodek-ui

⚙️ Setup

Edit your tailwind.config.ts file:

// @ts-ignore
import BbodekConfig from 'bbodek-ui/tailwind.config.js';
import type { Config } from 'tailwindcss';

const config: Config = {
  ...BbodekConfig,
  content: [
    ...BbodekConfig.content,
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
};
export default config;

Edit your _app.tsx file:

import 'bbodek-ui/bbodek-theme.css'; // add bbodek-theme.css
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

🔗 Peer Dependencies

bbodek-ui is designed to work alongside specific versions of certain peer dependencies. Ensure that your project has the following peer dependencies installed:

"peerDependencies": {
  "@types/react": "18.2.0",
  "@types/react-dom": "18.2.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "tailwindcss": "3.3.5"
}

✅ Resolving Peer Dependencies

Add the following to your package.json to align your project with the required versions:

"resolutions": {
  "@types/react": "18.2.0",
}

✨ Usage

import { Button } from "bbodek-ui";
import { useState } from "react";

export default function Home() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <div id="portal"/>
      <ModalPopUp
        className="w-[30rem] h-[30rem]"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        Open ModalPopUp
      </ModalPopUp>
      <Button
        className="w-[20rem]"
        color="white"
        backgroundColor="primary-03"
        content="버튼 테스트"
        size="h-48"
        onClick={() => setIsOpen(true)}
      />
    <>
  )
}

License

bbodek-ui is made available under the MIT License.