![](\"https://github.com/oruga-ui/oruga/raw/master/packages/docs/pages/public/logo.png\"){kind=logo}
\n \n\n \n \n \n
\n ![](\"https://img.shields.io/npm/v/@oruga-ui/oruga-next.svg?logo=npm\")
\n ![](\"https://img.shields.io/npm/dt/@oruga-ui/oruga-next.svg\")
\n ![](\"https://github.com/oruga-ui/oruga/actions/workflows/build.yml/badge.svg\"){kind=icon}
\n ![](\"https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord\"){kind=icon}
\n ![](\"https://img.shields.io/badge/ko--fi-donate-%23FF5E5B?style=flat&logo=ko-fi&logoColor=white\"){kind=icon}
\n Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly\n
\n\n\n(π) => π¦\n
\n\n## Features\n\nOruga is a lightweight UI components library for [Vue.js](https://vuejs.org/) without any dependency.\nIt 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.\nOruga 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.\n\n- **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\n- **Components with steroids**: most of the components aren't a simple wrapper of native elements but they add new and custom features\n- **Lightweight**: no other internal dependency and import only components that you need\n\nIf you need a component library and want to easily apply your custom styles, Oruga is the library for you! π\n\nIn addition, if you don't want to style everything yourself, we've created several [themes](https://oruga-ui.com/documentation/themes.html) to provide you with a variety of ready-to-use styles. π¦\n\n## Documentation\n\nBrowse [online documentation here](https://oruga-ui.com/documentation/).\n\nπ For more info about components customization, read carefully the [\"customization\" section](https://oruga-ui.com/documentation/configuration.html) in the documentation.\n\nπΉ To see Oruga in action, go to the [\"example\" section](https://oruga-ui.com/documentation/#examples) in the documentation.\n\n> Note: the source code of the documentation examples can be found in the `examples` directories for each component, it serves as the demo as well.\n\n## Quick start\n\nπ Oruga is available for [Vue.js](https://vuejs.org/) **version 3.x**\n\n### Setup Oruga\n\n1. Install Oruga.\n\n```bash\nnpm install @oruga-ui/oruga-next\n```\n\n2. Import the components:\n\n- To get started, create a new Oruga instance by the `createOruga` composable. The instance then has to be passed to the `app.use()` function of your current Vue app.\n\n ```js\n import { createApp } from \"vue\"\n import { createOruga } from \"@oruga-ui/oruga-next\";\n\n const oruga = createOruga();\n\n createApp(...).use(oruga, {\n // here goes the global config\n });\n ```\n\n- To take advantage of bundlerβs tree-shaking optimisations, no components are registered globally by default. If you want to register a component globally, extend your Oruga instance with the relevant component plugin. This makes the respective component and its subcomponents, as well as any related programmatic components, globally available.\n\n ```js\n import { createOruga, Autocomplete, Sidebar } from \"@oruga-ui/oruga-next\";\n\n const oruga = createOruga();\n\n // register any necessary components globally\n oruga.use(Autocomplete);\n oruga.use(Sidebar);\n ```\n\n- or [import them in your SFC](https://vuejs.org/guide/components/registration.html#local-registration).\n\n### Customization\n\nOruga's superpower is its configurability and its CSS framework agnostic approach.\nEach 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.\n\nPlease read the [\"configuration\" section](https://oruga-ui.com/documentation/configuration.html) in Oruga documentation.\n\nIf you want to see an example with a fully customized registration form using `Tailwind`, `Bulma`, `Bootstrap`, `Material` or any other CSS framework have a look at the official [Oruga multiframework example](https://oruga-multiframework-demo.netlify.app/tailwind) (source code available [here](https://github.com/oruga-ui/demo-multiframework)) or if you're more familiar with TailwindCSS 2 give our official [TailwindCSS Demo](https://oruga-tailwindcss-demo.netlify.app/) a try (source code [here](https://github.com/oruga-ui/demo-tailwindcss))\n\n### Using Oruga with Nuxt\n\nOruga doesn't provide a [Nuxt.js](https://nuxtjs.org) module at the moment.\n\nYou can use Nuxt.js plugins system adding a file (e.g. `oruga.js`) in your `plugins` folder containing:\n\n```js\nimport Oruga from \"@oruga-ui/oruga-next\";\n\nexport default defineNuxtPlugin((nuxtApp) => {\n nuxtApp.vueApp.use(Oruga);\n});\n```\n\nTo make this plugin available in your app, add this file to the `plugins` array in your `nuxt.config.js`\n\n```js\nplugins: [{ src: \"~plugins/oruga.js\" }];\n```\n\nTo understand how the plugins work with Nuxt.js, take a look at the [NuxtJS plugin documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-plugins).\n\n## Contributing\n\nPlease see the [contributing guidelines](./.github/CONTRIBUTING.md).\n\n### Contact us πΎ\n\nβ Join the [Oruga Discord server](https://discord.gg/RuKuBYN).\n\n## Versioning\n\nOruga uses [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for package versions.\n\nWhile it's still in beta, versions will follow this pattern: **v0.Y.Z**, where:\n\n- **Y**: Major (breaking changes)\n- **Z**: Minor or patch\n\n## Core Team\n\n![\"\"/](\"https://avatars0.githubusercontent.com/u/8029488?v=4\") Walter Tommasi | \n ![\"\"/](\"https://avatars0.githubusercontent.com/u/537363?v=4\") Andrea Stagi | \n ![\"\"/](\"https://avatars0.githubusercontent.com/u/25961416?v=4\") Marcel Moravek | \n
![](\"https://img.shields.io/npm/l/@oruga-ui/oruga.svg?logo=github\")
\n\nCode released under [MIT](https://github.com/oruga-ui/oruga/blob/master/LICENSE) license.\n","readmeFilename":"README.md"}