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/formsduplicate

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 = {  mode: "jit",  purge: [    // ...    "./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}", // path to vechaiui  ],  darkMode: "class", // or 'media' or 'class'  theme: {    extend: {},  },  variants: {    extend: {},  },  plugins: [    require("@tailwindcss/forms"),    require("@vechaiui/core"),  ],};duplicate

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>  );}duplicate