Getting Started
Overview
Qbit Design is an Ui element library designed for developing React-based user interfaces using Tailwind CSS. It helps developers streamline their workflow by providing prebuilt elements with a clear separation between logic and UI design. By leveraging these components, developers can implement interfaces more efficiently while maintaining flexibility.
Qbit Design enforces a structured approach, ensuring better scalability and maintainability of codebases. The platform supports extensive customization, allowing developers to create custom skins and extend functionalities as needed. The official documentation provides detailed descriptions of the available props for each element, making integration seamless.
Installation
To install the Qbit Design, run the following command:
pnpm install qbit
Requirements
- Node.js 22.11.0 or later
Usage
In order to use Qbit Design elements in your project, you need to import elements into your project and pass the necessary props.
Elements can be styled using Qbit default skins or by creating a custom skin based on your preference.
Importing an Element
import Element from '@Qbit';
Using an Element in a Page
<ParentElement
renderers={{ renderer: parentSkin, childRenderer: childSkin }}
keyExtractor={(value: string, i: number) => `${value}-${i}`}
>
<ChildrenElement property={propertyValue} />
</ParentElement>
Refer to the examples check our sample project for how the elements is going to implement in the page.
- Check out our To-Do App
- View the Todo documentation for the application
- Check out our storybook for the elements implementation
Learn
Prerequisites
Before getting started with Qbit Design, you should have a basic understanding of React. React is a JavaScript library for building user interfaces, and familiarity with its core concepts such as components, props, and state will help you use Qbit more effectively.
Start creating a simple app using Qbit Quickstart.
- For a list of available props for each element, refer to the components section.
- Refer customization section to learn how to customize
Extracting required props, Qbit interfaces, validations, and other functionalities, are explained in Qbit Docs v2
Support
Qbit Design is an Open-source UI library powered by its open-source community . Visit Qbit support page or join our communities at :
