@quickat/ui NPM

@quickat/ui

A customizable UI component library built with TypeScript and Tailwind CSS, featuring Input Field, Checkbox, Button, Modal Box, and Badge components.

🔹 Fully Customizable: Easily style and configure each component with Tailwind CSS.
🚀 Lightweight & Fast: Optimized for performance with minimal dependencies.
🎨 Theme-Friendly: Works seamlessly with your existing Tailwind theme.
🔄 Reusable Components: Designed for flexibility and reusability across projects.
⚡ TypeScript Support: Strongly typed components for better developer experience.
📦 Modular & Scalable: Use only the components you need.
🌐 Responsive & Accessible: Built with accessibility and responsiveness in mind.

npm install @quickat/ui

In the tailwind.config.js file, adjust the content array to include the @quickat/ui/dist/global.css file.

module.exports = {
    content: [
        // ...content
        "./node_modules/@quickat/ui/dist/**/*.js"
    ]
}

React: v18.0.0 or later
Tailwind CSS: v3.0.0 or later
Other Dependencies:
- lodash: >=4.17.21
- lucide-react: >=0.475.0

Component	Description
InputField	Customizable input field with inbuilt toggles for edit and password.
ClickButtton	Customizable button with 34 different varients.
MonoTixBox	Single checkbox component.
TixBox	Multi checkbox group component where you can customize multi select or single select.
ModalBox	Modal component with title, content, and actions.
Badge	Badge component for labels and notifications.

Prop Name	Type	Description	Default
`type`	text \| password \| email \| date \| month \| tel \| number \| hidden	Specifies the input type.	`"text"`
`label`	string	Label for the input field.	`""`
`description`	string	Additional description below the label.	`""`
`verified`	boolean \| none	Shows a verification indicator.	`"none"`
`editable`	boolean	Determines if the input is editable.	`true`
`errorMessage`	string	Displays an error message.	`""`
`mainContainerStyles_fi`	string	Custom styles for the main container.	`""`
`infoContainerStyles_fi`	string	Custom styles for the info container.	`""`
`labelStyles_fi`	string	Custom styles for the label.	`""`
`descriptionStyles_fi`	string	Custom styles for the description.	`""`
`inputStyles_fi`	string	Custom styles for the input field.	`""`
`errorStyles_fi`	string	Custom styles for the error message.	`""`

Prop Name	Type	Description	Default
`label`	string	Badge text content.	`"Click"`
`variant`	default \| alternative \| dark \| light \| green \| red \| yellow \| purple \| gradient-blue \| gradient-green \| gradient-cyan \| gradient-teal \| gradient-lime \| gradient-red \| gradient-pink \| gradient-purple \| shadow-blue \| shadow-green \| shadow-cyan \| shadow-teal \| shadow-lime \| shadow-red \| shadow-pink \| shadow-purple \| outline-blue \| outline-dark \| outline-green \| outline-red \| outline-yellow \| outline-purple \| purple-blue \| cyan-blue \| green-blue \| purple-pink \| pink-orange	Defines the Button style.	`"default"`
`size`	'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl'	Defines the size of the button	`"base"`
`loading`	boolean	Defines is button in loading state	`"false"`
`buttonStyle`	string	Addational tailwind classes	`""`

Prop Name	Type	Description	Default
`label`	string	Label for the tick box.	`""`
`required`	boolean	Marks the tick box as required.	`false`
`description`	string	Additional description below the label.	`""`
`disabled`	boolean	Disables the tick box.	`false`
`option`	BoxOptionType	Tick box option details.	`{ label: "TickBox", required: true, checked: false }`
`variant`	BoxVariant	Defines the tick box variant style.	`"default"`
`onTick`	`(updatedOptions: BoxOptionType) => void`	Callback function triggered on tick change.	`() => {}`
`errorMessage`	string	Displays an error message.	`""`
`mainContainerStyles_mtb`	string	Custom styles for the main container.	`""`
`infoContainerStyles_mtb`	string	Custom styles for the info container.	`""`
`labelStyles_mtb`	string	Custom styles for the label.	`""`
`descriptionStyles_mtb`	string	Custom styles for the description.	`""`
`mtbContainerStyles_mtb`	string	Custom styles for the MonoTixBox container.	`""`
`optionStyle_mtb`	string	Custom styles for the option.	`""`
`boxStyle_mtb`	string	Custom styles for the tick box.	`""`
`errorStyles_mtb`	string	Custom styles for the error message.	`""`

Prop Name	Type	Description	Default
`label`	string	Label for the tick box group.	`""`
`required`	boolean	Marks the tick box group as required.	`false`
`description`	string	Additional description below the label.	`""`
`disabled`	boolean	Disables all tick boxes in the group.	`false`
`options` `*`	`BoxOptionType[]`	List of tick box options.	`[]`
`multiSelect`	boolean	Allows multiple selections.	`false`
`variant`	default \| f-defaul \| green \| f-green \| red \| f-red \| yellow \| f-yellow \| purple \| f-purple'	Defines the tick box variant style.	`"default"`
`onTick`	`(updatedOptions: BoxOptionType[], changedOption: BoxOptionType) => void`	Callback function triggered on tick change.	`() => {}`
`errorMessage`	string	Displays an error message.	`""`
`mainContainerStyles_tb`	string	Custom styles for the main container.	`""`
`infoContainerStyles_tb`	string	Custom styles for the label/description container.	`""`
`labelStyles_tb`	string	Custom styles for the label.	`""`
`descriptionStyles_tb`	string	Custom styles for the description.	`""`
`tbContainerStyles_tb`	string	Custom styles for the tick box container.	`""`
`optionStyle_tb`	string	Custom style for options	`""`
`errorStyles_tb`	string	custom style for error message	`""`

Prop Name	Type	Description	Default
`label` `*`	string	Badge text content.	`undefined`
`variant`	primary \| secondary	Defines the badge varient.	`"primary"`
`size`	xs \| sm \| md	Defines the size of the badge.	`"sm"`
`color`	blue \| gray \| green \| red \| yellow \| purple \| white \| black \| none	Defines the badge style.	`"default"`
`badgeStyle`	string	Addational tailwind classes.	`""`