/oruga

🐛 Oruga is a lightweight library of UI components without CSS framework dependency

Primary LanguageVueMIT LicenseMIT

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

License

Code released under MIT license.