https://github.com/ahmadnsam/tailwindui-kit

PCF components UI Kit, sourced from Tailwind UI components, built with Reactjs and Tailwindcss
https://github.com/ahmadnsam/tailwindui-kit

pcf powerapps reactjs tailwindcss tailwindui

Last synced: 7 months ago
JSON representation

PCF components UI Kit, sourced from Tailwind UI components, built with Reactjs and Tailwindcss

• Host: GitHub
• URL: https://github.com/ahmadnsam/tailwindui-kit
• Owner: ahmadnsam
• License: mit
• Created: 2022-10-15T08:44:38.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-01T08:06:00.000Z (almost 3 years ago)
• Last Synced: 2025-03-02T16:40:52.790Z (7 months ago)
• Topics: pcf, powerapps, reactjs, tailwindcss, tailwindui
• Homepage: https://viteapps.dev/series/tailwindui-kit
• Size: 6.84 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# tailwindui-kit

PCF components UI Kit, sourced from Tailwind UI components, built with Reactjs and Tailwindcss

![image](https://user-images.githubusercontent.com/83499142/196043776-6fee64ed-8e31-4f1c-b6df-c3e31ccade0b.png)

## Installation

To be able to install the controls, follow the below steps

1- Enable Code components on Canvas apps, follow link [here](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/component-framework-for-canvas-apps)

2- Install the tailwindui-kit from the [releases page](https://github.com/ahmadnsam/tailwindui-kit/releases) into your environment

2- Create a new app or open an existing one

3- Click to import components

![image](https://user-images.githubusercontent.com/83499142/196043416-84fa83f3-54b5-4d78-bccf-a57012283043.png)

4- Switch to Code tab and select one of the Kit components

![image](https://user-images.githubusercontent.com/83499142/196043543-09209059-a472-4277-80c5-e5f8059ed944.png)

5- You will see a new group "Code Components"

![image](https://user-images.githubusercontent.com/83499142/196043557-7e0d9d74-4452-4906-99f5-4341757fad8e.png)

## Components Documentation

Follow this [link](https://viteapps.dev/series/tailwindui-kit) to check the components documentation

## Components

### ComboBox

An auto complete dropdown list with a beautiful layout

![image](https://user-images.githubusercontent.com/83499142/196044182-c9e35fc6-df98-4553-9949-d4e2443d1729.png)

📃: [Combo Box Documentation](https://viteapps.dev/combo-box-control)

### Radio Group

Radio Group representation component

![image](https://user-images.githubusercontent.com/83499142/196044739-9cf26bed-c546-4be1-8448-6a3b9f6398ad.png)

📃: [Radio Group Documentation](https://viteapps.dev/radio-group)

### Text Input 

![image](https://user-images.githubusercontent.com/83499142/196044813-b25c1ff1-4630-49a5-aec9-1b45f2393cd4.png)

### Advanced Text Area

![image](https://user-images.githubusercontent.com/83499142/196044852-35217549-bfc6-44ba-92aa-65419f07c0c1.png)

📃: [Advanced Text Area Documentation](https://viteapps.dev/advanced-text-area)

### Alert

![Screenshot 2022-11-01 085632](https://user-images.githubusercontent.com/83499142/199187158-5e61a75c-7fc6-4f63-8116-710283b9d934.png)

📃: [Alert Documentation](https://viteapps.dev/alert-control)