Storybook Documentation

Explore and interact with all UI components in an isolated environment using Storybook.

How to Consume?

Install the Package

Add @raminy/ui to your project using your preferred package manager:

npm install @raminy/ui
# or
yarn add @raminy/ui
# or
pnpm add @raminy/ui

Import the Styles

To ensure the components are styled correctly, import the main stylesheet in your application's entry point:

import "@raminy/ui/index.css";

Configure Tailwind CSS Integration

The components use Tailwind CSS utility classes and rely on the shared configuration from @raminy/css-config.
To ensure proper styling, update your main CSS entry point (where Tailwind CSS is imported) with the following:

@import "tailwindcss";
@import "@raminy/css-config/tailwind.config.css";
@import "../node_modules/@raminy/ui/index.css"; /* Adjust the path as necessary */

This setup ensures that your project uses the same Tailwind configuration as the UI components, providing consistent design and theming.

Use the Components

You can now import and use any component from @raminy/ui:

import { Button, Typography, Tag } from "@raminy/ui";

Refer to the Storybook documentation for usage examples and props details for each component.