Clean UI based on tailwindcss

  • By Tyler Knipfer
  • Last update: Nov 23, 2022
  • Comments: 2

Tails-UI

React UI components using tailwindcss

Components:

  • Alert
  • Article
  • Box
  • Breadcrumbs
  • Button
  • Card
  • CodeBlock
  • DangerousHTML
  • Dropdown
  • Flex
  • ImageCarousel
  • Loader
  • MegaFooter
  • Modal
  • Navbar
  • Panel
  • Portal
  • ProgressBar
  • RenderIf
  • Select
  • Space
  • Tab
  • Table
  • Tabs
  • Text
  • TextArea
  • TextField
  • TruncateText

Installation:

npm i tails-ui

Usage:

  • Make sure to import the tails-ui css file import 'tails-ui/dist/index.css'
  • Documentation site is coming soon with all the component api's
Submit ) export default Button "> 
import React from 'react'
import { Button } from 'tails-ui'

const Button = () => (
  <Button
    color="blue"
    type="submit"
    fullWidth
    outline
  >
    Submit
  </Button>
)

export default Button

Running Locally:

  • You can run npm link inside tails-ui and then npm link tails-ui inside a project you have created to test the components locally.
  • You can run npm start to start tails-ui in watch mode and it will compile any new components you add.
  • npm test will run jest

Github

https://github.com/knipferrc/tails-ui

Comments(2)

  • 1

    AppBar Closing Transition

    I did a little bit on my end for attempting to get the AppBar to transition when closing to the right in mobile view. Using display: none is what will prevent you from being able to make it transition back. Probably need to use visibility: hidden or adjust the opacity.

  • 2

    Flex component

    Create a Flex component to act as a sort of container component allowing to pass in justify positions, and padding and margins to allow for fluid and regular "container" positioning.

Popular Tag

Related