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
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-componentsImport 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 build
pnpm docs:devTo start fresh, simply run the following commands
pnpm clean
pnpm install
pnpm build
pnpm docs:devLunr replaces the default Vitepress Algolia Search To get the project index correctly do the following:
pnpm lunr:start
pnpm build ( optional if already built )
pnpm lunr:index
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
- All my friends, that could stay online while i was whispering all day long!
See Contributing Guide.
MIT License © 2021-Present Pedro Martins