Holo

Holo is a component library for Vue 3. Inspired by over-the-top holographic user interfaces in sci-fi, it tries to strike a balance between usability, flexibility of customization, and crazy cool eye candy. Some call it form over function, but Holo tries to not skimp on the function. That said, by virtue of this design goal, it will not be suitable for every project.

NOTE! Holo is still in development. It won't be ready for a while, so take the rest of this readme and the docs with a grain of triangular salt.

Features

• Intentionally open for extension and tinkering – not a comprehensive framework
• Wide range of customizable UI components
• Simple grid abstraction powered by CSS
• Theming with CSS custom properties
• Support for reactive color scheme preference
• Embracing modern web standards and ES features
• Fully written in typescript under the hood
• Cool sci-fi triangles
• And stuff...

Docs

Read the bespoke documentation online at holo.ovi.moe. It includes guides on installing, using, and customizing Holo. Reference for every component includes API documentation and examples.

To learn more about how the docs get made or contribute, see the docs readme.

Get started now

Quick start for speed-runners. For us mortals, read the docs.

This guide uses npm. Adapt to whatever you use accordingly.

Step 0: Requirements

Holo requires Vue version 3.2 and up. It also likes to run in modern browsers.

Step 1: Install

npm install holo-vue in your Vue project

Step 2 ver.α: Use as a plugin

In your main.ts or main.js entry point file:

import { createApp } from 'vue'
import Holo from 'holo-vue' // Import the plugin (the default export)
import 'holo-vue/dist/style.css' // Import the stylesheet
import App from './App.vue'

const app = createApp(App)
app.use(Holo) // Register it
app.mount('#app')

Step 2 ver.δ: Import only specific components

This isn't ready yet...

Step 3: Triangles everywhere

Speed-run is over, now read the docs anyway. Make a Root. Build the rest of the owl— er, app.

Sponsors

Platinum Sponsors

poli-cz

Contributing

I'll get to it. :)