0.0.9 β’ Published 8 months ago
react-shiftkit v0.0.9
π React ShiftKit
React ShiftKit is a dynamic UI component library for React and Next.js, offering a sleek collection of adaptive and customizable components. Itβs lightweight, responsive, and designed for seamless integration, empowering you to build polished, modern UIs effortlessly.
β¨ Features
- Adaptive & Customizable: Easily tailor components to match your design.
- Lightweight & Fast: Optimized for performance with minimal overhead.
- Responsive Design: Built to look great on all devices and screen sizes.
- Modern UI Elements: Includes buttons, drawers, dialogs, inputs, tabs, cards, and more.
- Seamless Integration: Compatible with React and Next.js projects.
π¦ Installation
To get started, install ShiftKit via npm or yarn:
npm install react-shiftkit
# or
yarn add react-shiftkit
import { Button, Drawer } from "react-shiftkit"
import "react-shiftkit/lib/styles/global.css";
π» Usage
π² Button
Import the Button component into your project and use it as follows:
import Button from "./Button";
<Button
variant="primary"
size="md"
roundness="lg"
onClick={() => alert("Button Clicked!")}
>
Click Me
</Button>
Prop Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Required | The content to be displayed inside the button (text, icon, etc.). |
name | string | undefined | Optional name for the button, can be a string or React element. |
block | boolean | false | If true, the button will take full width of its container. |
disabled | boolean | false | If true, the button will be disabled and unclickable. |
className | string | "" | Additional custom class names for styling. |
onClick | () => void | undefined | Callback function to handle click events. |
icon | React.ReactNode | undefined | Icon element to be displayed inside the button. |
size | "sm" \| "md" \| "lg" \| "xl" | "md" | Size of the button. |
roundness | "none" \| "sm" \| "md" \| "lg" \| "xl" \| "full" | "none" | Controls the border-radius of the button for different roundness levels. |
type | "button" \| "submit" \| "reset" | "button" | Specifies the button type (default is "button"). |
variant | "primary" \| "secondary" \| "primary-outline" \| "secondary-outline" \| "danger" \| "success" \| "warning" | "primary" | Defines the visual style of the button. Customize these variants in your own CSS. |
isLoading | boolean | false | If true, the button will display a loading state. |
ariaLabel | string | undefined | ARIA label for accessibility. |
The Button component uses the following CSS classes for styling. Define these classes in your own CSS file:
.btn-varient-primary {}
.btn-varient-primary-outline {}
.btn-varient-secondary {}
.btn-varient-secondary-outline {}
.btn-varient-success {}
.btn-varient-warning {}
.btn-varient-danger {}