https://github.com/konstructio/konstruct-ui
This repository contains a set of reusable and customizable React components built for Konstruct's infrastructure.
https://github.com/konstructio/konstruct-ui
Last synced: about 2 months ago
JSON representation
This repository contains a set of reusable and customizable React components built for Konstruct's infrastructure.
- Host: GitHub
- URL: https://github.com/konstructio/konstruct-ui
- Owner: konstructio
- License: mit
- Created: 2024-09-26T18:25:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-22T16:04:46.000Z (2 months ago)
- Last Synced: 2026-04-22T16:17:35.460Z (2 months ago)
- Language: TypeScript
- Homepage: https://konstructio.github.io/konstruct-ui/
- Size: 38.7 MB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
> 🚧🚨 **Work in Progress** 🚨🚧
>
> ⚠️ This library is currently under construction. Features may change and documentation is incomplete. ⚠️
# Konstruct React Component Library
This repository contains a set of reusable and customizable React components built for **Konstruct**'s infrastructure and Kubernetes products. These components aim to streamline the development process, ensuring consistency and high-quality UI for **Kubefirst**, **Colony**, and other future projects.
## Features:
- **Reusable**: Designed to be used across different projects, reducing development time and effort.
- **Customizable**: Easily adjustable to fit specific needs or branding requirements.
- **Responsive**: Optimized for all screen sizes, ensuring a seamless experience on both desktop and mobile.
- **Accessible**: Built with accessibility in mind, following best practices to ensure compatibility with all users.
- **Tailwind CSS Integration**: Seamlessly integrated with Tailwind CSS for rapid UI development and easy theming.
## **Installation Guide**
Follow these steps to integrate `@konstructio/ui` into your project:
### Step 1: Install the Library
Run the following command to install the package:
```bash
npm install @konstructio/ui
```
---
### Step 2: Install Tailwind CSS
If you don't already have Tailwind CSS installed, follow the official installation guide from the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation). Ensure that Tailwind is properly configured in your project.
---
### Step 3: Import and Configure the Plugin
To use the components provided by `@konstructio/ui`, you need to import the plugin and add it to your Tailwind CSS configuration file.
Modify your Tailwind configuration file (usually `tailwind.config.js` or `tailwind.config.ts`) as follows:
```ts
import { konstructPlugin } from '@konstructio/ui';
const config: Config = {
plugins: [konstructPlugin],
};
```
---
### Step 4: Include `@konstructio/ui` in Tailwind Content
To ensure Tailwind parses the components from `@konstructio/ui`, add its path to the `content` array in your Tailwind configuration file:
```ts
const config: Config = {
content: [
// Other content paths
'./node_modules/@konstructio/ui/dist/**/*.{js,ts,jsx,tsx}',
],
};
```
## Final Steps
After completing the above steps, you can now use `@konstructio/ui` components in your project. Restart your development server to apply the changes.