Lightweight Library of UI Components Without CSS Framework | Oruga

Oruga is a lightweight library of UI components for Vue.js without a CSS framework dependency. Oruga UI is like a caterpillar, simple yet functional. It’s in your hands and you turn it into a butterfly (🐛) => 🦋.

minimal ui components, minimalist ui design principles, minimal ui design, functional ui framework, functional framework, minimal ui kit, minimalist web ui design


  • CSS framework agnostic: Not dependent on a specific CSS framework/library but you can easily combine components with one of them as they are fully customizable in different ways.
  • Components with steroids: Most of the ingredients are not just a simple shell of the original but add new and customized features.
  • Lightweight: No other internal dependencies and only import the components you need.

Oruga does not depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS, etc…) nor does it provide any grid system or CSS utility, it only offers a set of easy-to-customize components. Oruga wants you to focus only on the UI/UX aspects of your app and be completely flexible for future changes without having to touch a line of JavaScript.

Components Included:

  • Autocomplete
  • Button
  • Checkbox
  • Collapse
  • Dropdown
  • Field
  • Icon
  • Input
  • Loading
  • Modal
  • Pagination
  • Radio
  • Select
  • Sidebar
  • Skeleton
  • Slider
  • Steps
  • Switch
  • Table
  • Tabs
  • Tooltip
  • Upload

How to make use of it:

Install and download:

// Vue.js 2
npm install @oruga-ui/oruga

// Vue.js 3
npm install @oruga-ui/oruga-next

Install Oruga

npm install @oruga-ui/oruga

Then import the full package.

import Vue from 'vue';
import Oruga from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga.css';


or individual components (tree vibration).

import Vue from 'vue';
import { Field, Input } from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga.css';


Vue 3
Install Oruga

npm install @oruga-ui/oruga-next

Then import the full package

import { createApp } from 'vue'
import Oruga from '@oruga-ui/oruga-next';
import '@oruga-ui/oruga-next/dist/oruga.css';


or individual components (tree vibration)

import Vue from 'vue'
import { Field, Input } from '@oruga-ui/oruga'
import '@oruga-ui/oruga/dist/oruga.css'


Minimal Functional UI Components Library For Vue.js, Oruga UI Plugin/Github, minimal material ui

See Demo And Download

Official Website(oruga-ui): Click Here

This superior jQuery/javascript plugin is developed by oruga-ui. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…