Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/konj-org/ui

Collection of elegant components
https://github.com/konj-org/ui

preact react tailwindcss

Last synced: 3 months ago
JSON representation

Collection of elegant components

Awesome Lists containing this project

README

        

![gh-banner](./assets/gh-banner.jpg)

# Konj UI

Collection of elegant components

## Acknowledgments

This project is inspired by the [shadcn/ui](https://github.com/shadcn/ui) and makes heavy use of the following libraries:

- [Tailwind by @tailwindlabs](https://github.com/tailwindlabs/tailwindcss)
- [CVA by @joe-bell](https://github.com/joe-bell/cva)
- [Tailwind Merge by @dcastil](https://github.com/dcastil/tailwind-merge)

## Supported Frameworks / Libraries

### Frameworks

- [NextJS \*](./examples/next)
> **Notice**, Keep in mind at this point there is no built-in support for server components. You can copy and paste the components code inside your project, as a temporary solution.
- [Astro](./apps/docs)

### Libraries

- [ReactJS + Vite](./examples/vite-react)
- [PreactJS + Vite](./examples/vite-preact)

## Component List

### Primitive

| Component | React | Preact | Category |
| ------------------ | ------------------ | ------------------ | ------------- |
| Default Components | - | :heavy_check_mark: | Miscellaneous |
| Dialog | :heavy_check_mark: | :heavy_check_mark: | Dialog |

### Styled

| Component | React | Preact | Category |
| ----------------- | ------------------ | ------------------ | ------------- |
| Loading | :heavy_check_mark: | :heavy_check_mark: | Miscellaneous |
| Button | :heavy_check_mark: | :heavy_check_mark: | Button |
| Alert Dialog | :heavy_check_mark: | :heavy_check_mark: | Modal |
| Anchored Dialog | :heavy_check_mark: | :heavy_check_mark: | Modal |
| Action Sheet | :heavy_check_mark: | :heavy_check_mark: | Modal |
| Floating Sheet | :heavy_check_mark: | :heavy_check_mark: | Modal |
| Stacking Cards | :heavy_check_mark: | :heavy_check_mark: | Display |
| Segmented Control | :heavy_check_mark: | :heavy_check_mark: | Display |
| Tab | :heavy_check_mark: | :heavy_check_mark: | Display |
| Dropdown Menu | :heavy_check_mark: | :heavy_check_mark: | Input |
| Select | :heavy_check_mark: | :heavy_check_mark: | Input |
| File Input | :heavy_check_mark: | :heavy_check_mark: | Input |

### Hooks

| Component | React | Preact |
| --------------------- | ------------------ | ------------------ |
| use-touch-dialog-drag | :heavy_check_mark: | :heavy_check_mark: |
| use-popover | :heavy_check_mark: | :heavy_check_mark: |

## License

This project is licensed under [MIT](./LICENSE) license.