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

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:

Name		Name	Last commit message	Last commit date
Latest commit History 639 Commits
.github		.github
build		build
documentation		documentation
packages		packages
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmrc		.npmrc
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
postcss.config.cjs		postcss.config.cjs
tailwind.config.cjs		tailwind.config.cjs
tsconfig.json		tsconfig.json