All Projects โ†’ knipferrc โ†’ Tails Ui

knipferrc / Tails Ui

Licence: mit
๐Ÿ’ Clean UI based on tailwindcss

Programming Languages

ocaml
1615 projects

Projects that are alternatives of or similar to Tails Ui

react-library-starter
A library starter kit and bundler for your React projects, powered by Rollup. โšก
Stars: โœญ 22 (-86.42%)
Mutual labels:  styled-components, rollup
eleventy-chirpy-blog-template
Blog template for 11ty based on Chirpy UX
Stars: โœญ 37 (-77.16%)
Mutual labels:  rollup, tailwindcss
react-component-lib
Boilerplate repo for creating npm packages with React components written in TypeScript and using styled-components
Stars: โœญ 69 (-57.41%)
Mutual labels:  styled-components, rollup
ontwik-ui
ontwik-ui - A headless UI library
Stars: โœญ 52 (-67.9%)
Mutual labels:  styled-components, rollup
Sapper Template Firebase
Starter Rollup template for Sapper apps with Firebase functions based on https://github.com/nhristov/sapper-template-rollup.
Stars: โœญ 29 (-82.1%)
Mutual labels:  rollup, tailwindcss
react-native-whirlwind
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.
Stars: โœญ 91 (-43.83%)
Mutual labels:  styled-components, tailwindcss
twin.examples
Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.
Stars: โœญ 320 (+97.53%)
Mutual labels:  styled-components, tailwindcss
markushatvan.com
Personal website and blog written from scratch with SvelteKit and TailwindCSS.
Stars: โœญ 82 (-49.38%)
Mutual labels:  rollup, tailwindcss
Twin.macro
๐Ÿฆนโ€โ™‚๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: โœญ 5,137 (+3070.99%)
Mutual labels:  styled-components, tailwindcss
sapper-template-rollup
Starter Rollup template for Sapper apps using postcss, cssnano, tailwindcss, and svelte-preprocess.
Stars: โœญ 32 (-80.25%)
Mutual labels:  rollup, tailwindcss
Eleventy Starter
ARCHIVED: An Eleventy starting point with Tailwind and Svelte preconfigured.
Stars: โœญ 118 (-27.16%)
Mutual labels:  rollup, tailwindcss
Tailwind Styled Component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Stars: โœญ 57 (-64.81%)
Mutual labels:  styled-components, tailwindcss
Xstyled
A utility-first CSS-in-JS framework built for React. ๐Ÿ’…๐Ÿ‘ฉโ€๐ŸŽคโšก๏ธ
Stars: โœญ 1,835 (+1032.72%)
Mutual labels:  styled-components, tailwindcss
Styled Bootstrap
๐Ÿ’…๐Ÿป A styled-component implementation of Bootstrap
Stars: โœญ 154 (-4.94%)
Mutual labels:  styled-components
Devfolio
A modern and production-ready personal portfolio + blog template built with GatsbyJs and TailwindCSS
Stars: โœญ 154 (-4.94%)
Mutual labels:  tailwindcss
Blazorstyled
CSS in Blazor Components
Stars: โœญ 152 (-6.17%)
Mutual labels:  styled-components
Goober
๐Ÿฅœ goober, a less than 1KB ๐ŸŽ‰ css-in-js alternative with a familiar API
Stars: โœญ 2,317 (+1330.25%)
Mutual labels:  styled-components
Tailwind Cards
A growing collection of text/image cards you can use/copy-paste in your tailwind css projects
Stars: โœญ 154 (-4.94%)
Mutual labels:  tailwindcss
Tailwindcss Dir
Adds direction (LTR, RTL) variants to your Tailwind project
Stars: โœญ 156 (-3.7%)
Mutual labels:  tailwindcss
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: โœญ 2,299 (+1319.14%)
Mutual labels:  tailwindcss

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
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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].