Neobrut Vue

Colorful Vue 3 components with hard borders, useful semantics, and no SSR required. Try the real button below—then flip to Code to see exactly what runs here.

PreviewCode

Copy

<script setup lang="ts">
import { ref } from 'vue'
import { NbButton } from '@neobrut-vue/core'

const loading = ref(false)
function simulateSave() {
  loading.value = true
  window.setTimeout(() => { loading.value = false }, 900)
}
</script>

<template>
  <div class="demo-row">
    <NbButton @click="simulateSave" :loading="loading">Save changes</NbButton>
    <NbButton variant="secondary">Secondary</NbButton>
    <NbButton variant="accent">Accent</NbButton>
    <NbButton variant="ghost">Ghost</NbButton>
  </div>
</template>

<style scoped>
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
</style>

Install the package · Explore live components · View source

The component gallery has more of the kit to click through.