Repository files navigation

Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly

(🐛) => 🦋

Oruga is a lightweight UI components library forVue.js without any dependency.It offers a set of easily customisable components and doesn't depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS, etc...). Therefore, it doesn't provide a grid system or CSS utilities, but you can integrate any CSS framework you like.Oruga provides you with a set of functional components, so you can focus only on the UI/UX aspects of your application and can be entirely flexible for future changes without having to touch a line of JavaScript.

• 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

If you need a component library and want to easily apply your custom styles, Oruga is the library for you! 🐛

In addition, if you don't want to style everything yourself, we've created severalthemes to provide you with a variety of ready-to-use styles. 🦋

Browseonline documentation here.

💅 For more info about components customization, read carefully the"customization" section in the documentation.

🕹 To see Oruga in action, go to the"example" section in the documentation.

Note: the source code of the documentation examples can be found in theexamples directories for each component, it serves as the demo as well.

🐛 Oruga is available forVue.jsversion 3.x

1. Install Oruga.

npm install @oruga-ui/oruga-next

2. Import the components:

• To get started quickly, useOruga to register all components:

  import{createApp}from'vue'importOrugafrom'@oruga-ui/oruga-next';createApp(...).use(Oruga);

• To use tree shaking, either register component manually:

  import{createApp}from'vue'import{OField,OInput}from'@oruga-ui/oruga'createApp(...).use(OField).use(OInput)

• orimport them in your SFC.

Oruga's superpower is its configurability and its CSS framework agnostic approach.Each component can be individually customised and configured by defining specific classes using a class-mapping approach. Therefore, Oruga comes without any styling by default. However, there are several official predefined configurations called themes, which you can include and extend to give your application a individual look and feel. And all components came with predefined classes by default.

Please read the"customization" section in Oruga documentation.

If you want to see an example with a fully customized registration form usingTailwind,Bulma,Bootstrap,Material or any other CSS framework have a look at the officialOruga multiframework example (source code availablehere) or if you're more familiar with TailwindCSS 2 give our officialTailwindCSS Demo a try (source codehere)

Oruga doesn't provide aNuxt.js module at the moment.

You can use Nuxt.js plugins system adding a file (e.g.oruga.js) in yourplugins folder containing:

importOrugafrom'@oruga-ui/oruga-next';exportdefaultdefineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.use(Oruga);});

To make this plugin available in your app, add this file to theplugins array in yournuxt.config.js

plugins:[{src:'~plugins/oruga.js'}]

To understand how the plugins work with Nuxt.js, take a look at theNuxtJS plugin documentation.

Take a look at theofficial NuxtJS + Oruga example.

Please see thecontributing guidelines.

→ Join theOruga Discord server.

Oruga usesSemantic Versioning 2.0.0 for package versions.

While it's still in beta, versions will follow this pattern:v0.Y.Z, where:

• Y: Major (breaking changes)
• Z: Minor or patch

Walter Tommasi

Andrea Stagi

Marcel Moravek

Thank you to everyone involved for improving this project, day by day 💚

Complete list.

Oruga logo designed byMatteo Guadagnini

Oruga svg images for Checkbox and Radio components and Holidays assets created byFabrizio Masini

Code released underMIT license.