Introduction

Welcome to Vivakits, a versatile and powerful UI component library meticulously crafted with Tailwind CSS integration. Designed to accelerate your development workflow and enhance the user experience, Vivakits brings a collection of reusable and customizable components that seamlessly integrate into your React and Nextjs projects.

Quick Setup

This guide will help you get started with Vivakits, including how to run, customize, update, and integrate your project!

Please note that you must setup Tailwind CSS in your project in order to work with this library.

Install the package via npm

npm install @vivakits/react-components

Tailwind CSS configuration

In your tailwind.config.js file import vivakitPreset and add this two highlighted line.

// tailwind.config.js
import { vivakitPreset } from "@vivakits/react-components";
 
/** @type {import('tailwindcss').Config} */
  export default {
    content: [
      ...,
      "./node_modules/@vivakits/react-components/dist/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {},
    presets: [vivakitPreset], 
    plugins: [],
  };

Update your main CSS file

Paste this base style to your css file. You can easily update the colors globally from here.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: #fff;
    --foreground: #090909;
    --primary: #3366ff;
    --primary-foreground: #fafaf9;
    --primary-light: #ebf0ff;
    --secondary: #9b59b6;
    --secondary-foreground: #fafaf9;
    --secondary-light: #f5eef8;
    --accent: #f97316;
    --accent-foreground: #fafaf9;
    --accent-light: #fef1e8;
    --success: #45d483;
    --success-foreground: #fafaf9;
    --success-light: #ecfbf3;
    --warning: #fab005;
    --warning-foreground: #fafaf9;
    --warning-light: #fff7e6;
    --danger: #fa5252;
    --danger-foreground: #fafaf9;
    --danger-light: #ffeeee;
    --neutral: #e4e4e7;
    --muted: #f4f4f5;
    --placeholder: #00000066;
    --black: #262626;
    --ring: #3366ff;
    --divider: #00000066;
    --disabled: #f2f2f2;
    --radius: 0.5rem;
  }
}

Congrats! Now your are good to go 🥳

Usage

import { VKButton } from "@vivakits/react-components";
 
function App() {
  return;
  <VKButton variant="solid" color="primary" size="lg" rounded="md">
    Click me!
  </VKButton>
}

Customization