Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flavorly/vanilla-components
A lightweight, flexible & customizable UI library for Vue 3, styled with Tailwind CSS.
https://github.com/flavorly/vanilla-components
components components-library tailwind tailwindcss typescript vue vue3
Last synced: 12 days ago
JSON representation
A lightweight, flexible & customizable UI library for Vue 3, styled with Tailwind CSS.
- Host: GitHub
- URL: https://github.com/flavorly/vanilla-components
- Owner: flavorly
- License: mit
- Created: 2021-10-27T10:29:06.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-12T10:55:15.000Z (about 1 month ago)
- Last Synced: 2024-10-13T00:21:58.919Z (30 days ago)
- Topics: components, components-library, tailwind, tailwindcss, typescript, vue, vue3
- Language: Vue
- Homepage: https://vanilla-components.com
- Size: 10.5 MB
- Stars: 255
- Watchers: 5
- Forks: 17
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://vanilla-components.com/guide/quick-start.html) for more information.
Import the components as needed with the following:
```vue
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.
```bash
pnpm install
pnpm -r build
pnpm docs:dev
```
To start fresh, simply run the following commands
```bash
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](https://github.com/variantjs/vue) - Base Inspiration & Code - Thanks to Alfonsobries
- [VueUse](https://github.com/vueuse/vueuse) - How we could we not credit this?
- [RobertBoes](https://github.com/RobertBoes) - For all the time helping with Troubleshooting
- [Enzo Innocenzi](https://github.com/innocenzi) - For the inspiration & help!
- All my friends, that could stay online while i was whispering all day long!
## Contribution
See [Contributing Guide](./CONTRIBUTING.md).
## License
[MIT](./LICENSE) License © 2021-Present [Pedro Martins](https://github.com/flavorly)