Vanilla Components

A lightweight, flexible & customizable UI library for Vue 3, styled with Tailwind CSS.

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

Visit the Documentation for more information.

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: