Components
These are live components from @neobrut-vue/core. Use them here, switch to Code, and open each component page for usage and accessibility details.
Button
Section titled “Button”Actions in the kit’s color variants. Usage and props →
<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>Type a name; the text updates immediately. Usage and details →
<script setup lang="ts">
import { ref } from 'vue'
import { NbInput } from '@neobrut-vue/core'
const name = ref('')
</script>
<template>
<div class="demo-stack">
<NbInput v-model="name" label="Your name" placeholder="Type something" hint="This updates as you type." />
<p aria-live="polite">{{ name ? `Hello, ${name}!` : 'Your name appears here.' }}</p>
</div>
</template>
<style scoped>
.demo-stack { display: grid; gap: 1rem; max-width: 26rem; }
.demo-stack p { margin: 0; font-weight: 700; }
</style>Select
Section titled “Select”Open the styled menu and choose an option. Usage and details →
<script setup lang="ts">
import { ref } from 'vue'
import { NbSelect, NbSelectItem } from '@neobrut-vue/core'
const color = ref('')
</script>
<template>
<div class="demo-stack">
<NbSelect v-model="color" label="Pick a color" placeholder="Choose one">
<NbSelectItem value="yellow">Sunshine yellow</NbSelectItem>
<NbSelectItem value="mint">Mint green</NbSelectItem>
<NbSelectItem value="coral">Coral pink</NbSelectItem>
</NbSelect>
<p aria-live="polite">{{ color ? `Selected: ${color}` : 'Nothing selected yet.' }}</p>
</div>
</template>
<style scoped>
.demo-stack { display: grid; gap: 1rem; max-width: 26rem; }
.demo-stack p { margin: 0; font-weight: 700; }
</style>Switch
Section titled “Switch”Toggle the setting with a click or Space. Usage and details →
<script setup lang="ts">
import { ref } from 'vue'
import { NbSwitch } from '@neobrut-vue/core'
const enabled = ref(true)
</script>
<template>
<div class="demo-stack">
<NbSwitch v-model="enabled" label="Launch alerts" />
<p aria-live="polite">Alerts are {{ enabled ? 'on' : 'off' }}.</p>
</div>
</template>
<style scoped>
.demo-stack { display: grid; gap: 1rem; justify-items: start; }
.demo-stack p { margin: 0; font-weight: 700; }
</style>Accordion
Section titled “Accordion”Expand a section to see the animated disclosure. Usage and details →
<script setup lang="ts">
import { NbAccordion, NbAccordionItem } from '@neobrut-vue/core'
</script>
<template>
<div class="demo-stack">
<NbAccordion default-value="first">
<NbAccordionItem value="first" title="Can I use this in Vue 3?">
Yes. Install the core package and import the stylesheet once.
</NbAccordionItem>
<NbAccordionItem value="second" title="Does it work without SSR?">
Yes. The components run in a client-side Vue app.
</NbAccordionItem>
<NbAccordionItem value="third" title="Can I use the keyboard?">
Yes. Press Tab to focus a heading, then Enter or Space to toggle it.
</NbAccordionItem>
</NbAccordion>
</div>
</template>
<style scoped>
.demo-stack { max-width: 36rem; }
</style>Switch panels with a click or arrow keys. Usage and details →
<script setup lang="ts">
import { NbTabs, NbTabsList, NbTabsTrigger, NbTabsContent } from '@neobrut-vue/core'
</script>
<template>
<NbTabs default-value="overview">
<NbTabsList>
<NbTabsTrigger value="overview">Overview</NbTabsTrigger>
<NbTabsTrigger value="details">Details</NbTabsTrigger>
<NbTabsTrigger value="disabled" disabled>Disabled</NbTabsTrigger>
</NbTabsList>
<NbTabsContent value="overview">A quick look at the project.</NbTabsContent>
<NbTabsContent value="details">Use arrow keys to move between tabs.</NbTabsContent>
<NbTabsContent value="disabled">You can't open this one.</NbTabsContent>
</NbTabs>
</template>Dialog
Section titled “Dialog”Open the dialog, then close it with Escape. Usage and details →
<script setup lang="ts">
import { ref } from 'vue'
import { NbButton, NbDialog } from '@neobrut-vue/core'
const open = ref(false)
</script>
<template>
<div>
<NbButton @click="open = true">Open dialog</NbButton>
<NbDialog v-model:open="open" title="Ready to go?">
<p>The dialog traps focus and closes with Escape.</p>
<template #footer>
<NbButton variant="accent" @click="open = false">Got it</NbButton>
</template>
</NbDialog>
</div>
</template>Fill and submit a local form; nothing is sent to a server. Validation and usage →
<script setup lang="ts">
import { ref } from 'vue'
import { NbButton, NbCheckbox, NbInput, NbSelect, NbSelectItem, NbSwitch } from '@neobrut-vue/core'
const name = ref('')
const color = ref('yellow')
const updates = ref(true)
const accepted = ref(false)
const submitted = ref(false)
function submit() {
submitted.value = true
}
</script>
<template>
<form class="demo-form" @submit.prevent="submit">
<NbInput v-model="name" label="Name" required placeholder="Ada Lovelace" />
<NbSelect v-model="color" label="Favorite color">
<NbSelectItem value="yellow">Sunshine yellow</NbSelectItem>
<NbSelectItem value="mint">Mint green</NbSelectItem>
<NbSelectItem value="coral">Coral pink</NbSelectItem>
</NbSelect>
<NbSwitch v-model="updates" label="Send me updates" />
<NbCheckbox v-model="accepted" label="I agree to continue" />
<NbButton type="submit" :disabled="!accepted">Save form</NbButton>
<p v-if="submitted" role="status">Saved for {{ name }}. Color: {{ color }}. Updates: {{ updates ? 'on' : 'off' }}.</p>
</form>
</template>
<style scoped>
.demo-form { display: grid; gap: 1.25rem; max-width: 27rem; }
.demo-form p { margin: 0; font-weight: 700; }
</style>More in the kit
Section titled “More in the kit”The interactive gallery includes the remaining components, from navigation and overlays to data display. Their source is in the core repository.