Lightweight Library of UI Components Without CSS Framework

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

Features

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';

Vue.use(Oruga);

or individual components (tree vibration).

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
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';

createApp(...).use(Oruga);

or individual components (tree vibration)

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

createApp(...)
  .use(Field)
  .use(Input)

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