13

Collection of Accessible React UI Components using TailwindCSS. - Vechai UI

 2 years ago
source link: https://www.vechaiui.com/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Getting Started

Installation

VechaiUI works out of the box with create-react-app (including TypeScript version), Preact cli (with compat), Next.js, Gatsby and any other environment.

To install the VechaiUI run the following within your project directory.

npm i @vechaiui/core @vechaiui/react @tailwindcss/forms​# OR​yarn add @vechaiui/core @vechaiui/react @tailwindcss/forms

Configuration

The default theme of this library depends on the @tailwindcss/forms plugin. To use it, follow the steps on the plugin source page. https://github.com/tailwindlabs/tailwindcss-forms

Vechai UI can be configed in tailwind.config.js:

// tailwind.config.jsmodule.exports = { theme: { mode: "jit", purge: [ // "./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}", // path to vechaiui ], darkMode: "class", // ... }, // add VechaiUI plugin plugins: [ require("@tailwindcss/forms"), require("@vechaiui/core"), // ... ],};

Note: VechaiUI required jit mode and tailwindcss version 2.1.4 or higher (basic mode seems buggy when compiling some components)

Quick start

Here's a quick example to get you started, it's literally all you need:

import * as React from "react";import { VechaiProvider, Button } from "@vechaiui/react";​function App() { return ( <VechaiProvider> <Button>Hello Vechai</Button> </VechaiProvider> );}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK