Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/akhil-gautam/tailwind-ui-components

🔥 A React UI component library based on Tailwind
https://github.com/akhil-gautam/tailwind-ui-components

component-library hacktoberfest tailwind tailwind-ui

Last synced: 2 days ago
JSON representation

🔥 A React UI component library based on Tailwind

Host: GitHub
URL: https://github.com/akhil-gautam/tailwind-ui-components
Owner: akhil-gautam
License: mit
Created: 2020-12-02T08:18:47.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2021-10-30T18:57:13.000Z (about 3 years ago)
Last Synced: 2023-03-08T05:18:23.577Z (over 1 year ago)
Topics: component-library, hacktoberfest, tailwind, tailwind-ui
Language: JavaScript
Homepage: https://5imqx.sse.codesandbox.io/
Size: 359 KB
Stars: 6
Watchers: 1
Forks: 1
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Tailwind_UI :fire: ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)

React UI components build on top of TailwindCSS

Preview URL(incomplete): https://5imqx.sse.codesandbox.io/

# Components :electric_plug:

###### component name: Alert
##### props accept:
```javascript
children, variant = 'default', type = 'default', onClose, className}
```

###### component name: Avatar
##### props accept:
```javascript
src, altText, rounded = 'full', size = 'large', className, ...rest
```

###### component name: Base
##### props accept:
```javascript
classes, component: Component = "div", bordered = false, rounded = "lg", shadow = "lg", ...rest
```

###### component name: Breadcrumbs
##### props accept:
```javascript
children, variant = 'default', separator = '/', className, ...rest
```

###### component name: Button
##### props accept:
```javascript
type = 'neutral', variant = 'default', LeftIcon, RightIcon, className, hoverAnimation = false, disabled = false, children, ...rest
```

###### component name: Card
##### props accept:
```javascript
children, shadow = 'md', rounded = 'md', classes, ...rest
```

###### component name: Dropdown
> List
##### props accept:
```javascript
children, isOpen = false, align = 'left', onClose, className, ...rest
```
> Item
##### props accept:
```javascript
props accept: children, className, ...rest
```

###### component name: HelperText
##### props accept:
```javascript
children, type = 'info', className, ...rest
```

###### component name: Label
##### props accept:
```javascript
children, variant = 'default', className, ...rest
```

###### component name: Link
##### props accept:
```javascript
children, href, variant = 'default', className, ...rest
```

###### component name: List
> List
##### props accept:
```javascript
children, header, Component = 'ul', headerClassName, className, ...rest
```
> Item
##### props accept:
```javascript
children, Component = 'li', className, ...rest
```

###### component name: Modal
##### props accept:
```javascript
children, onClose, isOpen = false, className, ...other
```

###### component name: Pill
##### props accept:
```javascript
children, type, iconBefore, iconAfter, className = '', ...rest
```

###### component name: Select
> Option
##### props accept:
```javascript
props accept: className, ...rest
```
> Select
##### props accept:
```javascript
props accept: className, valid, invalid, ...rest
```

###### component name: Table
##### props accept:
```javascript
children, className, separated = false, ...other
```

> Tbody, Td, Tfoot, Th, Thead
##### props accept:
```javascript
children, className, ...other
```

> Tr
##### props accept:
```javascript
children, className, type = 'odd', ...other
```

###### component name: TextArea
##### props accept:
```javascript
children, valid, invalid, disabled, bordered = true, className, ...rest
```

###### component name: TextInput
##### props accept:
```javascript
type = 'text', disabled = false, bordered = true, labelVariant, labelChild, helperType, helperChild, valid, invalid, className, ...rest
```

###### component name: ToggleSwitch
##### props accept:
```javascript
variant = 'primary', checked = false, disabled = false, className, ...rest
```

###### component name: Transition
##### props accept:
```javascript
children, variant = '', ...rest
```

## :handshake: Contributing

We welcome all contributions, whether you're reporting an issue, helping us fix bugs, improve the docs, or spread the word. We also welcome your suggestions and feedback.