/tailwind-ui-components

🔥 A React UI component library based on Tailwind

Primary LanguageJavaScriptMIT LicenseMIT

Tailwind_UI 🔥     GitHub license

React UI components build on top of TailwindCSS

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

Components 🔌

component name: Alert
props accept:
children, variant = 'default', type = 'default', onClose, className}
component name: Avatar
props accept:
src, altText, rounded = 'full', size = 'large', className, ...rest 
component name: Base
props accept:
classes, component: Component = "div", bordered = false, rounded = "lg", shadow = "lg", ...rest 
component name: Breadcrumbs
props accept:
children, variant = 'default', separator = '/', className, ...rest 
component name: Button
props accept:
type = 'neutral', variant = 'default', LeftIcon, RightIcon, className, hoverAnimation = false, disabled = false, children, ...rest 
component name: Card
props accept:
children, shadow = 'md', rounded = 'md', classes, ...rest 
component name: Dropdown

List

props accept:
children, isOpen = false, align = 'left', onClose, className, ...rest 

Item

props accept:
props accept: children, className, ...rest
component name: HelperText
props accept:
children, type = 'info', className, ...rest
component name: Label
props accept:
children, variant = 'default', className, ...rest
component name: Link
props accept:
children, href, variant = 'default', className, ...rest
component name: List

List

props accept:
children, header, Component = 'ul', headerClassName, className, ...rest 

Item

props accept:
children, Component = 'li', className, ...rest
component name: Modal
props accept:
children, onClose, isOpen = false, className, ...other
component name: Pill
props accept:
children, type, iconBefore, iconAfter, className = '', ...rest
component name: Select

Option

props accept:
props accept:  className, ...rest 

Select

props accept:
props accept: className, valid, invalid, ...rest
component name: Table
props accept:
children, className, separated = false, ...other 

Tbody, Td, Tfoot, Th, Thead

props accept:
children, className, ...other

Tr

props accept:
children, className, type = 'odd', ...other
component name: TextArea
props accept:
children, valid, invalid, disabled, bordered = true, className, ...rest 
component name: TextInput
props accept:
type = 'text', disabled = false, bordered = true, labelVariant, labelChild, helperType, helperChild, valid, invalid, className, ...rest
component name: ToggleSwitch
props accept:
variant = 'primary', checked = false, disabled = false, className, ...rest
component name: Transition
props accept:
children, variant = '', ...rest

🤝 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.