Chaebol UI

A modern React component library built with TypeScript, Tailwind CSS, and Headless UI. Designed for building beautiful, accessible, and customizable user interfaces.

🚀 Features

• Modern React Components: Built with React 19 and TypeScript for type safety
• Accessibility First: Uses Headless UI for accessible, unstyled components
• Tailwind CSS: Utility-first CSS framework with custom bca: prefix
• Swiper Integration: Powerful carousel/slider components
• Storybook: Interactive component documentation and testing
• Fully Customizable: Extensive props for styling and behavior customization

📦 Installation

npm install @doubler.studio/chaebol-ui-package
# or
pnpm add @doubler.studio/chaebol-ui-package

💄 CSS Import

Important: You must import the CSS file to get the proper styling for all components.

// Import the CSS in your main App component or index file
import '@doubler.studio/chaebol-ui-package/css';
// or
import '@doubler.studio/chaebol-ui-package/style.css';

Alternative Import Methods

// Method 1: Import via /css
import '@doubler.studio/chaebol-ui-package/css';

// Method 2: Import via /style.css
import '@doubler.studio/chaebol-ui-package/style.css';

// Method 3: Import via full path
import '@doubler.studio/chaebol-ui-package/dist/style.css';

🚀 Quick Start

Here's a complete example of how to use the components:

// App.tsx or your main component file
import React from 'react';
import '@doubler.studio/chaebol-ui-package/css';
import { Button, Tabs, Accordion } from '@doubler.studio/chaebol-ui-package';

function App() {
  const tabs = [
    { label: 'Tab 1', content: 'Content for tab 1' },
    { label: 'Tab 2', content: 'Content for tab 2' },
  ];

  const accordionItems = [
    { title: 'Question 1', content: 'Answer to question 1' },
    { title: 'Question 2', content: 'Answer to question 2' },
  ];

  return (
    <div className="p-8">
      <h1>My App with Chaebol UI</h1>

      <Button
        color="primary"
        size="large"
      >
        Click Me
      </Button>

      <Tabs
        tabs={tabs}
        defaultIndex={0}
      />

      <Accordion
        items={accordionItems}
        multiple={true}
      />
    </div>
  );
}

export default App;

🎯 Components

Accordion

Collapsible content panels built with Headless UI Disclosure.

import { Accordion } from '@doubler.studio/chaebol-ui-package';

const items = [
  { title: 'What is React?', content: 'React is a JavaScript library...' },
  { title: 'What is TypeScript?', content: 'TypeScript is a superset...' },
];

<Accordion
  items={items}
  multiple={true}
/>;

Button

Customizable button component with multiple variants and sizes.

import { Button } from '@doubler.studio/chaebol-ui-package';

<Button
  color="primary"
  size="large"
>
  Click me
</Button>;

Carousel

Flexible carousel component with compound components pattern, powered by Swiper.

import { Carousel } from '@doubler.studio/chaebol-ui-package';

// Basic usage with compound components
<Carousel className="bg-gray-100 rounded-lg p-4">
  <Carousel.Content>
    <div className="bg-red-200 h-full flex items-center justify-center text-2xl font-bold">
      Slide 1
    </div>
    <div className="bg-green-200 h-full flex items-center justify-center text-2xl font-bold">
      Slide 2
    </div>
    <div className="bg-blue-200 h-full flex items-center justify-center text-2xl font-bold">
      Slide 3
    </div>
  </Carousel.Content>
  <Carousel.Pagination />
  <Carousel.Controls />
  <Carousel.Counter />
</Carousel>

// Image gallery example
<Carousel className="bg-white rounded-xl shadow-lg p-6" autoplay={{ delay: 4000 }}>
  <Carousel.Content>
    <img src="image1.jpg" alt="Image 1" className="w-full h-full object-cover rounded-lg" />
    <img src="image2.jpg" alt="Image 2" className="w-full h-full object-cover rounded-lg" />
    <img src="image3.jpg" alt="Image 3" className="w-full h-full object-cover rounded-lg" />
  </Carousel.Content>
  <Carousel.Pagination className="mt-6" />
  <Carousel.Counter className="mt-2 text-gray-500" />
</Carousel>

Available Components:

• Carousel.Content - Wraps slide content
• Carousel.Slide - Individual slide wrapper
• Carousel.Pagination - Dot indicators
• Carousel.Controls - Previous/Next buttons
• Carousel.Counter - Shows current slide number

Tabs

Tab navigation component with multiple styling options.

import { Tabs } from '@doubler.studio/chaebol-ui-package';

const tabs = [
  { label: 'Tab 1', content: 'Content 1' },
  { label: 'Tab 2', content: 'Content 2' },
];

<Tabs
  tabs={tabs}
  defaultIndex={0}
/>;

🎨 Styling

All components use Tailwind CSS with a custom bca: prefix to avoid conflicts with your existing styles. You can customize the appearance using:

• className props: Add custom classes to any component
• Style variants: Use built-in color and size variants
• CSS custom properties: Override default styles with CSS variables

🔧 Development

# Install dependencies
pnpm install

# Start Storybook for development
pnpm dev

# Run tests
pnpm test

# Build the library
pnpm build:lib

# Format code
pnpm format

📚 Documentation

Visit our Storybook to see all components in action with interactive examples and documentation.

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for more information.

📄 License

ISC License - see the LICENSE file for details.

🏢 About Doubler Studio

Chaebol UI is created and maintained by Doubler Studio. We specialize in creating modern, accessible, and beautiful user interfaces.

Made with ❤️ by Doubler Studio