Ripik UI

A collection of reusable UI components built with React and Storybook, including a Tailwind CSS plugin.

Table of Contents

• Ripik UI
  • Table of Contents
  • Installation
  • Setup
    • CSS File
  • Usage
    • Button
      • Import
      • Basic Usage
      • Variants
      • Sizes
      • Icons
      • Disabled State
  • Storybook
  • Contributing
    • Development
  • License

Installation

To install the component library, you can use npm or yarn:

npm install ripik-ui-test

Setup

This library includes a Tailwind CSS plugin named ripikComponentLibraryConfig. You'll need to add this plugin to your tailwind.config.js file.

Here’s an example of how to do it in TypeScript:

/** @type {import('tailwindcss').Config} */
import tailwindAnimate from "tailwindcss-animate";
import { ripikComponentPlugin } from "ripik-ui-test";

export default {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  prefix: "",
  plugins: [tailwindAnimate, ripikComponentPlugin],
};

Ensure that the path to ripikComponentPlugin is correct and is being imported from the ripik-ui-test package.

CSS File

You’ll also need to include the index.css file from the library. You can copy the index.css file located in the public folder of the project to your own public folder.

Here’s an example of how to include it:

/* In your project's main CSS file */
@import "ripik-ui-test/dist/index.css";

Ensure that the path is correct based on where you place the index.css file in your project.

Usage

Button

The Button component is a versatile component that can be used in various scenarios. Here’s how you can use it:

Import

import { Button } from "ripik-ui-test";

Basic Usage

<Button variant="filled">Click Me</Button>

Variants

The Button component supports the following variants:

• filled
• secondary
• text
• outline
• caution
• caution_outlined

Example:

<Button variant="caution">Cancel</Button>
<Button variant="caution_outlined">Cancel</Button>

Sizes

The Button component comes in three sizes:

• sm
• md
• lg

Example:

<Button size="sm">Small Button</Button>
<Button size="md">Medium Button</Button>
<Button size="lg">Large Button</Button>

Icons

You can include icons within your buttons using the startIcon and endIcon props:

import { EnvelopeSimple } from "@phosphor-icons/react";

<Button variant="filled" startIcon={<EnvelopeSimple size={24} />}>
  Login with Email
</Button>;

Disabled State

To disable the button:

<Button variant="filled" disabled>
  Disabled Button
</Button>

Storybook

To see the components in playground, you can clone this repo and run Storybook:

git clone https://github.com/ripiktech/ripik-component-library
npm i
npm run storybook

This will start Storybook on a local server, where you can explore and interact with the components.

Contributing

We welcome contributions! If you have suggestions or improvements, please open an issue or a pull request.

Development

1. Clone the repository
2. Install dependencies: npm install or yarn install
3. Start the development server: npm run storybook or yarn storybook

License

This project is private for the moment.