npmpackage.info

Gathering detailed insights and metrics for @oruga-ui/examples

@oruga-ui/examples - 0.11.1 | npmpackage.info

@oruga-ui/examples

🐛 Oruga is a lightweight Vue.js UI component library without any CSS dependency

0.11.1

1,157

MIT

Vue

17.01 MB

5.5

Installations

npm install @oruga-ui/examples

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

22.16.0

NPM Version

10.9.2 Pull Requests

Open

2

Total

884

Closed

84

Merged

798

Issues

Open

19

Total

461

Closed

442

Releases

v0.11.1

Updated on Jun 26, 2025

v0.11.0

Updated on Jun 16, 2025

v0.11.0-pre.1

Updated on Jun 09, 2025

v0.10.6

Updated on May 27, 2025

v0.10.5

Updated on May 05, 2025

v0.10.4

Updated on Mar 26, 2025

View All 66 releases

Languages

Vue

TypeScript

JavaScript

SCSS

Vue (55.66%)

TypeScript (43.27%)

JavaScript (0.85%)

SCSS (0.22%)

Developer

oruga-ui

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,157 Stars

2,000 Commits

172 Forks

7 Watchers

5 Branches

85 Contributors

Updated on Jul 11, 2025

Maintainers

View All 85 Contributors

Package Meta Information

Latest Version

0.11.1

Package Id

@oruga-ui/examples@0.11.1

Unpacked Size

17.01 MB

Size

4.33 MB

File Count

176

NPM Version

10.9.2

Node Version

22.16.0

Published on

Jun 26, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

(🐛) => 🦋

Features

Oruga is a lightweight UI components library for Vue.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 several themes to provide you with a variety of ready-to-use styles. 🦋

Documentation

Browse online 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 the examples directories for each component, it serves as the demo as well.

Quick start

🐛 Oruga is available for Vue.js version 3.x

Setup Oruga

Install Oruga.

1npm install @oruga-ui/oruga-next

Import the components:

To get started quickly, use Oruga to register all components:

1import { createApp } from 'vue'
2import Oruga from '@oruga-ui/oruga-next';
3
4createApp(...).use(Oruga);

To use tree shaking, either register component manually:

1import { createApp } from 'vue'
2import { OField, OInput } from '@oruga-ui/oruga'
3
4createApp(...)
5  .use(OField)
6  .use(OInput)

or import them in your SFC.

Customization

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 "configuration" section in Oruga documentation.

If 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 (source code available here) or if you're more familiar with TailwindCSS 2 give our official TailwindCSS Demo a try (source code here)

Using Oruga with Nuxt

Oruga doesn't provide a Nuxt.js module at the moment.

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

1import Oruga from "@oruga-ui/oruga-next";
2
3export default defineNuxtPlugin((nuxtApp) => {
4    nuxtApp.vueApp.use(Oruga);
5});

To make this plugin available in your app, add this file to the plugins array in your nuxt.config.js

1plugins: [{ src: "~plugins/oruga.js" }];

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

Contributing

Please see the contributing guidelines.

Contact us 👾

➜ Join the Oruga Discord server.

Versioning

Oruga uses Semantic 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

Core Team

_{Walter Tommasi}

_{Andrea Stagi}

_{Marcel Moravek}

Contributors

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

Complete list.

Credits

Oruga logo designed by Matteo Guadagnini

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

License

Code released under MIT license.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

10

SAST

Determines if the project uses static code analysis.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 4

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/build.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/codeql.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/codeql.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/codeql.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commit-lint.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/commit-lint.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commit-lint.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/commit-lint.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/gen-check.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/gen-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/gen-check.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/gen-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint-check.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/lint-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint-check.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/lint-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-pre-release.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/publish-pre-release.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-pre-release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/publish-pre-release.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-pre-release.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/publish-pre-release.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/publish-release.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/publish-release.yml/develop?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-release.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/publish-release.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-check.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/test-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-check.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/test-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-check.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/test-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ts-check.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/ts-check.yml/develop?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ts-check.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/oruga-ui/oruga/ts-check.yml/develop?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/commit-lint.yml:22
Warn: npmCommand not pinned by hash: .github/workflows/publish-pre-release.yml:37
Warn: npmCommand not pinned by hash: .github/workflows/publish-release.yml:38
Info: 0 out of 20 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 7 out of 10 npmCommand dependencies pinned

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

5.5

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@oruga-ui/examples

Installations

Developer Guide

No

ESM

22.16.0

10.9.2

Pull Requests

2

884

84

798

Issues

19

461

442

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Features

Documentation

Quick start

Setup Oruga

Customization

Using Oruga with Nuxt

Contributing

Contact us 👾

Versioning

Core Team

Contributors

Credits

License

10

10

10

10

10

10

9

4

1

0

0

0

0

0

5.5

/10