@thedevrealm/neo-vue

Vue 3 component library for The Dev Realm Neo-Brutalist design system. <script setup> SFCs. Fully typed. Peer dep: Vue ≥ 3.3.

Install

npm install @thedevrealm/neo-css @thedevrealm/neo-vue

Setup

Register all components globally (plugin)

// main.ts
import '@thedevrealm/neo-css/dist/neo.css'
import { createApp } from 'vue'
import NeoVue from '@thedevrealm/neo-vue'
import App from './App.vue'

createApp(App).use(NeoVue).mount('#app')

Or import individually (tree-shaking)

<script setup>
import '@thedevrealm/neo-css/dist/neo.css'
import { NeoButton, NeoCard } from '@thedevrealm/neo-vue'
</script>

Components

NeoButton

<NeoButton variant="primary" size="md">Download</NeoButton>
<NeoButton variant="accent" @click="onBoost">Boost</NeoButton>
<NeoButton variant="ghost" :disabled="loading">Cancel</NeoButton>

NeoCard

<NeoCard variant="brand" :pattern="true">
  <div style="padding:1.5rem">Content</div>
</NeoCard>

NeoTag

<NeoTag variant="accent" :rotated="true">Hot</NeoTag>
<NeoTag variant="brand">New</NeoTag>

NeoInput

<NeoInput v-model="name" label="Full Name" placeholder="Your name..." />

<!-- With icon slot -->
<NeoInput v-model="query" label="Search" placeholder="Search...">
  <template #icon>
    <SearchIcon :size="16" />
  </template>
</NeoInput>

NeoSelect

<NeoSelect
  v-model="level"
  label="Skill Level"
  placeholder="Choose a level..."
  :options="[
    { value: 'beginner',     label: 'Beginner' },
    { value: 'intermediate', label: 'Intermediate' },
    { value: 'advanced',     label: 'Advanced' },
  ]"
/>

NeoAlert

<NeoAlert variant="success" title="Saved">
  <template #icon><CheckIcon :size="20" /></template>
  Your changes have been saved.
</NeoAlert>

NeoTable

<NeoTable
  :columns="[
    { key: 'name',     header: 'Course' },
    { key: 'students', header: 'Students' },
  ]"
  :data="courses"
  row-key="id"
>
  <!-- Scoped slot for custom cell rendering -->
  <template #students="{ value }">
    <strong>{{ value }}</strong>
  </template>
</NeoTable>

NeoToggleGroup

<NeoToggleGroup v-model="view">
  <template #default="{ active, onChange }">
    <button
      v-for="opt in ['grid','list','table']"
      :key="opt"
      class="neo-toggle-btn"
      :class="active === opt && 'neo-toggle-btn-active'"
      @click="onChange(opt)"
    >{{ opt }}</button>
  </template>
</NeoToggleGroup>

License

MIT — © The Dev Realm