STATUS: On hold

The support for this project is currently ON HOLD.

The Better User Interface by KDafov

Hi there! After creating hundreds of components repeatedly, I developed templates for each to boost efficiency and reusability. This package includes a collection of responsive, styled, and production-ready components with basic functionality. You're welcome to contribute by adding new components and/or improving the design of existing ones - just grab the repo from GitHub and let me know so I can incorporate your ideas into the package!

Get started

In order to get started install the NPM package using npm install kdafov-tbui; This will add the components into your project.

To use a component, import the package to your project at the top of the file and add it to your code:

import { ComponentName } from  "kdafov-tbui";

export default function App() {
	return (
		<>
			/* ...other code */
			<ComponentName props={props} />
			/* ...other code */
		</>
	);
}

Warning: This package is using TypeScript.

@forms

The components under @forms are components that are typically used within HTML Forms. This includes but is not limited to <input>, <form>, <button>, <select>.

<BasicInput />

Component to handle input for text, password, and email.

import { BasicInput } from  "kdafov-tbui";

<BasicInput
	label="Enter your email"
	type="text"
	placeholder="[email protected]"
/>

List of all possible attributes that can be used as props to the BasicInput component.

| Attribute | Description | Value (s) | | ---------------- | ------------------------------------------------ | ------------------------------------------------------------ | | label | The label that describes the input | string (required) | | type | The type of input | string (text, password, or email) | | placeholder | The placeholder text of the input | string (optional) | | autocomplete | Whether the input should allow autofill of input | boolean (optional) [Default: false] | | style | The design of the widget | string (optional) [Values: noBorder, bottomBorder] |