A lightweight, flexible & customizable ui library for Vue 3
Documentation | Getting Started | Why Vanilla Components?
- 🧪 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:devTo start fresh, simply run the following commands
pnpm clean
pnpm install
pnpm -r build
pnpm docs:devLunr replaces the default Vitepress Algolia Search To get the project index correctly do the following:
pnpm docs:index:build
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!
See Contributing Guide.
MIT License © 2021-Present Pedro Martins