Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly
(🐛) => 🦋
Oruga is a lightweight library of UI components for Vue.js without CSS framework dependency
Next
Features
- CSS framework agnostic: No dependency on a specific CSS framework/library but you can easily integrate the components with one of them because they are fully customizable in different ways
- Components with steroids: most of the components aren't a simple wrapper of native elements but they add new and custom features
- Lightweight: no other internal dependency and import only components that you need
Documentation
The documentation is in the docs directory, it serves as the demo as well.
Browse online documentation here.
Quick start
You need Vue.js version 2.6+ or version 3.x.
1 Install via npm
Vue 2
npm install @oruga-ui/oruga
Vue 3
npm install @oruga-ui/oruga-next
2 Import and use Oruga
Vue 2
Bundle
import Vue from 'vue';
import Oruga from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga.css';
Vue.use(Oruga);
or Individual Components (tree shaking)
import Vue from 'vue';
import { Field, Input } from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga.css';
Vue.use(Field);
Vue.use(Input);
Vue 3
Bundle
import { createApp } from 'vue'
import Oruga from '@oruga-ui/oruga-next';
import '@oruga-ui/oruga-next/dist/oruga.css';
createApp(...).use(Oruga);
or Individual Components (tree shaking)
import Vue from 'vue'
import { Field, Input } from '@oruga-ui/oruga'
import '@oruga-ui/oruga/dist/oruga.css'
createApp(...)
.use(Field)
.use(Input)
3 Customization
Browse customization section on the documentation.
Browser support
Recent versions of Firefox, Chrome, Edge, Opera, Safari and IE11.
Contributing
Please see the contributing guidelines
Versioning
While it's still in beta, version will follow v0.Y.Z, where:
- Y: Major (breaking changes)
- Z: Minor or patch
Roadmap
Core Team
Walter Tommasi |
Andrea Stagi |
Credits
Oruga logo designed by Matteo Guadagnini
Code released under MIT license.