0.0.9 β€’ Published 8 months ago

react-shiftkit v0.0.9

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

πŸš€ 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 NameTypeDefaultDescription
childrenReact.ReactNodeRequiredThe content to be displayed inside the button (text, icon, etc.).
namestringundefinedOptional name for the button, can be a string or React element.
blockbooleanfalseIf true, the button will take full width of its container.
disabledbooleanfalseIf true, the button will be disabled and unclickable.
classNamestring""Additional custom class names for styling.
onClick() => voidundefinedCallback function to handle click events.
iconReact.ReactNodeundefinedIcon 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.
isLoadingbooleanfalseIf true, the button will display a loading state.
ariaLabelstringundefinedARIA 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 {}

✏️ Author

Salik Imtiaz

πŸ‘₯ Collaborators

Armughan Shahid

πŸ”— Links

Portfolio

Linkedin

Github

β˜• Buy me a Coffee

Buy me a Coffee

0.0.9

8 months ago

0.0.8

8 months ago

0.0.7

8 months ago

0.0.1

8 months ago

0.0.6

8 months ago

0.0.5

8 months ago

0.0.4

8 months ago

0.0.3

8 months ago

0.0.2

8 months ago

1.0.4

8 months ago

1.0.2

8 months ago

1.0.1

8 months ago

1.0.0

8 months ago