Vanilla Components

A lightweight, flexible & customizable ui library for Vue 3

Documentation | Getting Started | Why Vanilla Components?

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

Installation

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'

Local & Documentation

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 ( Algolia Alternative )

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

pnpm docs:index:build

Credits

Thanks to:

• VariantJS - Base Inspiration & Code - Thanks to Alfonsobries
• VueUse - How we could we not credit this?
• RobertBoes - For all the time helping with Troubleshooting
• Enzo Innocenzi - For the inspiration & help!
• All my friends, that could stay online while i was whispering all day long!

Contribution

See Contributing Guide.

License

MIT License © 2021-Present Pedro Martins