Vanilla Components

A lightweight, flexible & customizable ui library for Vue 3

Main Features ✨

🧪 DX Focused - Write less code & build faster
🛠 Totally Configurable - All components & props are fully customizable via a simple configuration file
🚦 Variants Concept - Create multiple variants of the same components. Ex: Error, Success, etc.
🍃 Tailwind First - Comes with a sane styling using Tailwind CSS Defaults
🦾 Vue + TypeScript - Vue 3 setup + Typescript
🟢 Vue 3 Ready - Vue 3
🌳 Tree Shakable - Import only the components that you need without worry about the size
✋ ZERO css included - Everything is configurable, means there is no CSS's to include at all
🌜 Dark/White - Pixel Perfect design with Dark & White mode included
🔌 SSR Ready - Built with SSR in mind

Get started by installing the peer dependencies than, move on installing the package

pnpm add @headlessui/vue@^1.5.0 @popperjs/core@^2.11.2 flatpickr@^4.6.9 libphonenumber-js@^1.9.49 
pnpm add @flavorly/vanilla-components

Import the components as needed with the following:

import { Button } from '@flavorly/vanilla-components'

For preview & Local testing please run the following on the root of the project. After the commands you should have a local vite server up & running.

pnpm install
pnpm -r build
pnpm docs:dev

To start fresh, simply run the following commands

pnpm clean
pnpm install
pnpm -r build
pnpm docs:dev

Lunr replaces the default Vitepress Algolia Search To get the project index correctly do the following:

pnpm docs:index:build

Thanks to: