nexa-ui-kit

A premium, modern, accessible component library built natively on the Nexa reactivity and VDOM engine. It features glassmorphism, responsive designs, custom form controls, data layers, and gesture support.

---

Forms & Inputs

NInput

General purpose text input with clearable options, status states, and sizing.

Props

Prop	Type	Default	Description
modelValue	string	''	Input value
type	string	'text'	Input type (text, email, password)
label	string	''	Floating input label
placeholder	string	''	Input placeholder
disabled	boolean	false	Disables interaction
readonly	boolean	false	Sets input to read-only
error	string	''	Display validation error message
clearable	boolean	false	Shows clear button when input has value
maxlength	number	undefined	Maximum character length

Emits

Event	Parameters	Description
update:modelValue	value: string	Triggered when value changes
clear	none	Triggered when clear button is clicked

Example

<script setup>
import { signal } from 'nexa-framework'
import { NInput } from 'nexa-ui-kit'

const username = signal('')
</script>

<template>
  <NInput
    v-model="username"
    label="Username"
    placeholder="Enter username"
    clearable
  />
</template>

---

NPassword

High-security password field with built-in strength meter and criteria checklist.

Props

Prop	Type	Default	Description
modelValue	string	''	Password value
label	string	'Password'	Floating input label
placeholder	string	''	Input placeholder
disabled	boolean	false	Disables interaction
readonly	boolean	false	Sets input to read-only
clearable	boolean	false	Shows clear button
toggleMask	boolean	true	Allows toggling password visibility
showStrength	boolean	true	Displays password strength meter
validate	boolean	true	Activates criteria validation checklist
showRequirements	boolean	true	Renders criteria checklist
minLength	number	8	Minimum required password length
requireLower	boolean	true	Requires at least one lowercase character
requireUpper	boolean	true	Requires at least one uppercase character
requireNumber	boolean	true	Requires at least one number
requireSpecial	boolean	true	Requires at least one special character

Emits

Event	Parameters	Description
update:modelValue	value: string	Triggered when value changes

Example

<script setup>
import { signal } from 'nexa-framework'
import { NPassword } from 'nexa-ui-kit'

const pwd = signal('')
</script>

<template>
  <NPassword
    v-model="pwd"
    :minLength="10"
    :showStrength="true"
    :showRequirements="true"
  />
</template>

---

NAutocomplete

Asynchronous select with suggestion filtering, keyboard navigation, and debouncing.

Props

Prop	Type	Default	Description
modelValue	any	null	Selected option
suggestions	any[]	[]	Active list of options to search through
label	string	''	Input label
placeholder	string	''	Input placeholder
disabled	boolean	false	Disables interaction
loading	boolean	false	Shows loading spinner

Emits

Event	Parameters	Description
update:modelValue	value: any	Triggered when suggestion is selected
complete	query: string	Triggered when user types (debounced)

Example

<script setup>
import { signal } from 'nexa-framework'
import { NAutocomplete } from 'nexa-ui-kit'

const selectedCity = signal(null)
const cities = signal([])

const handleSearch = (query) => {
  cities.value = ['Madrid', 'Barcelona', 'Valencia'].filter(c => c.toLowerCase().includes(query.toLowerCase()))
}
</script>

<template>
  <NAutocomplete
    v-model="selectedCity"
    :suggestions="cities.value"
    label="City"
    @complete="handleSearch"
  />
</template>

---

NSelect

Custom premium dropdown with filterable options, smooth selections, and clearable options.

Props

Prop	Type	Default	Description
modelValue	any	null	Current selected option value
options	any[]	[]	Array of options ({ label, value } or strings)
label	string	''	Dropdown label
placeholder	string	'Select option'	Dropdown placeholder
disabled	boolean	false	Disables select
clearable	boolean	false	Allows clearing selection
filterable	boolean	false	Allows search filtering in list

Emits

Event	Parameters	Description
update:modelValue	value: any	Triggered when selected option changes

Example

<script setup>
import { signal } from 'nexa-framework'
import { NSelect } from 'nexa-ui-kit'

const selected = signal('option1')
const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' }
]
</script>

<template>
  <NSelect
    v-model="selected"
    :options="options"
    label="Choose option"
  />
</template>

---

NMultiSelect

Advanced multi-select pill selector supporting filtering, tag displays, and checkmarks.

Props

Prop	Type	Default	Description
modelValue	any[]	[]	Selected options array
options	any[]	[]	Available options ({ label, value })
label	string	''	Field label
placeholder	string	'Select options'	Field placeholder
disabled	boolean	false	Disables component
maxSelectedLabels	number	3	Maximum count displayed before collapsing to "+X Selected"

Emits

Event	Parameters	Description
update:modelValue	value: any[]	Triggered on item selection toggle

Example

<script setup>
import { signal } from 'nexa-framework'
import { NMultiSelect } from 'nexa-ui-kit'

const selectedOptions = signal([])
const options = [
  { label: 'Vue', value: 'vue' },
  { label: 'Nexa', value: 'nexa' },
  { label: 'React', value: 'react' }
]
</script>

<template>
  <NMultiSelect
    v-model="selectedOptions"
    :options="options"
    label="Select technologies"
  />
</template>

---

NInputNumber

Formatted numeric input supporting increments, decrements, constraints, and localized currencies.

Props

Prop	Type	Default	Description
modelValue	number	null	Numeric value
min	number	undefined	Minimum allowed value
max	number	undefined	Maximum allowed value
step	number	1	Numeric step incremental scale
mode	string	'decimal'	Format mode (decimal, currency)
currency	string	'USD'	Active currency type ISO code
locale	string	'en-US'	Active localization locale format
prefix	string	''	Decorative input prefix
suffix	string	''	Decorative input suffix

Emits

Event	Parameters	Description
update:modelValue	value: number	Triggered on numeric adjustment

Example

<script setup>
import { signal } from 'nexa-framework'
import { NInputNumber } from 'nexa-ui-kit'

const price = signal(100)
</script>

<template>
  <NInputNumber
    v-model="price"
    mode="currency"
    currency="USD"
    label="Price"
  />
</template>

---

NCheckbox

Custom reactive checkbox toggle with customizable label slots.

Props

Prop	Type	Default	Description
modelValue	any	false	Binding target state
label	string	''	Checkbox display label
disabled	boolean	false	Disables interaction
checkedValue	any	true	Value matching checked state
uncheckedValue	any	false	Value matching unchecked state

Emits

Event	Parameters	Description
update:modelValue	value: any	Triggered when state is toggled

Example

<script setup>
import { signal } from 'nexa-framework'
import { NCheckbox } from 'nexa-ui-kit'

const accepted = signal(false)
</script>

<template>
  <NCheckbox
    v-model="accepted"
    label="Accept terms and conditions"
  />
</template>

---

NRadio

Group-aware custom radio choice item.

Props

Prop	Type	Default	Description
modelValue	any	null	Binding target group value
value	any	null	Choice value
label	string	''	Radio display label
name	string	''	Form name group
disabled	boolean	false	Disables choice selection

Emits

Event	Parameters	Description
update:modelValue	value: any	Triggered on checked change

Example

<script setup>
import { signal } from 'nexa-framework'
import { NRadio } from 'nexa-ui-kit'

const selectedGender = signal('female')
</script>

<template>
  <div class="flex gap-4">
    <NRadio v-model="selectedGender" value="male" label="Male" name="gender" />
    <NRadio v-model="selectedGender" value="female" label="Female" name="gender" />
  </div>
</template>

---

NSwitch

A premium iOS-style switch toggle.

Props

Prop	Type	Default	Description
modelValue	boolean	false	Binding state
label	string	''	Toggle display label
disabled	boolean	false	Disables switch

Emits

Event	Parameters	Description
update:modelValue	value: boolean	Triggered when toggled

Example

<script setup>
import { signal } from 'nexa-framework'
import { NSwitch } from 'nexa-ui-kit'

const isNotificationsEnabled = signal(true)
</script>

<template>
  <NSwitch
    v-model="isNotificationsEnabled"
    label="Enable Notifications"
  />
</template>

---

NChips

A fluid tags builder enabling interactive dynamic list tags management.

Props

Prop	Type	Default	Description
modelValue	string[]	[]	Active list array
label	string	''	Builder label
placeholder	string	''	Placeholder instructions
disabled	boolean	false	Disables modifications
max	number	undefined	Maximum count allowed

Emits

Event	Parameters	Description
update:modelValue	value: string[]	Triggered on chip add or remove

Example

<script setup>
import { signal } from 'nexa-framework'
import { NChips } from 'nexa-ui-kit'

const tags = signal(['design', 'code'])
</script>

<template>
  <NChips
    v-model="tags"
    label="Tags"
    placeholder="Press enter to add tag"
  />
</template>

---

NDatepicker

Calendar picker component integrating Teleport container and automated smart viewport positioning.

Props

Prop	Type	Default	Description
modelValue	string	''	Date string (YYYY-MM-DD)
label	string	''	Date picker label
placeholder	string	''	Placeholder text
format	string	'YYYY-MM-DD'	Output date format
disabled	boolean	false	Disables interactions
minDate	string	''	Minimum allowed selectable date
maxDate	string	''	Maximum allowed selectable date

Emits

Event	Parameters	Description
update:modelValue	value: string	Triggered on date select

Example

<script setup>
import { signal } from 'nexa-framework'
import { NDatepicker } from 'nexa-ui-kit'

const birthday = signal('1995-12-17')
</script>

<template>
  <NDatepicker
    v-model="birthday"
    label="Select Birthday"
  />
</template>

---

Buttons & Layout

NButton

Premium, highly configurable action button with loading states, sizes, and ripple effects.

Props

Prop	Type	Default	Description
variant	string	'primary'	Style theme (primary, secondary, success, warning, info, danger, ghost, outline, glass)
size	string	'md'	Sizing scale (sm, md, lg)
type	string	'button'	Underlying button element type
disabled	boolean	false	Disables click interactions
loading	boolean	false	Shows animated loading icon
block	boolean	false	Expands to full container width
rounded	boolean	false	Applies pill-style rounded shape
loadingText	string	''	Loading label state text

Emits

Event	Parameters	Description
click	event: MouseEvent	Triggered on click when not active loading or disabled

Example

<script setup>
import { NButton } from 'nexa-ui-kit'
</script>

<template>
  <NButton variant="primary" size="md">Submit Form</NButton>
</template>

---

NCard

Premium structure containers providing border options, hover effects, header and footer structures.

Props

Prop	Type	Default	Description
title	string	''	Card title
subtitle	string	''	Card subtitle
bordered	boolean	true	Displays card borders
shadow	boolean	true	Displays modern depth shadows
hoverable	boolean	false	Enhances lift transform animations on hover

Slots

Name	Description
header	Replaces title block structure
default	Renders main body content
footer	Bottom footer content

Example

<script setup>
import { NCard, NButton } from 'nexa-ui-kit'
</script>

<template>
  <NCard title="Developer Profile" subtitle="Nexa Core Developer">
    <p>Building local-first reactive applications.</p>
    <template #footer>
      <NButton size="sm">View Details</NButton>
    </template>
  </NCard>
</template>

---

NModal

Responsive modal overlay dialog featuring animated background blurs and accessibility controls.

Props

Prop	Type	Default	Description
modelValue	boolean	false	Modal display state
title	string	''	Header title
size	string	'md'	Width sizing (sm, md, lg, xl, full)
closable	boolean	true	Shows top close button
closeOnOverlay	boolean	true	Allows click on outer backdrop to dismiss

Emits

Event	Parameters	Description
update:modelValue	value: boolean	Triggered on dismissal

Slots

Slot	Description
header	Modal header
default	Main content
footer	Modal footer action buttons

Example

<script setup>
import { signal } from 'nexa-framework'
import { NModal, NButton } from 'nexa-ui-kit'

const showModal = signal(false)
</script>

<template>
  <NButton @click="showModal.value = true">Open Dialog</NButton>
  <NModal v-model="showModal" title="Security Warning">
    <p>Are you sure you want to delete this resource?</p>
    <template #footer>
      <NButton variant="ghost" @click="showModal.value = false">Cancel</NButton>
      <NButton variant="danger">Confirm</NButton>
    </template>
  </NModal>
</template>

---

NBottomSheet

Mobile drawer modal drawer sheet sliding from bottom with swipe velocity detection closures.

Props

Prop	Type	Default	Description
modelValue	boolean	false	Bottom drawer status
title	string	''	Header title
height	string	'50vh'	Target height
dragToClose	boolean	true	Allows dragging downwards to close
snapPoints	number[]	[]	Fractional vertical snapping heights

Emits

Event	Parameters	Description
update:modelValue	value: boolean	Triggered on sheet closure

Example

<script setup>
import { signal } from 'nexa-framework'
import { NBottomSheet, NButton } from 'nexa-ui-kit'

const showDrawer = signal(false)
</script>

<template>
  <NButton @click="showDrawer.value = true">Open Bottom Menu</NButton>
  <NBottomSheet v-model="showDrawer" title="Actions Menu">
    <div class="p-4 flex flex-col gap-2">
      <button class="menu-item">Share Contact</button>
      <button class="menu-item">Edit Profile</button>
    </div>
  </NBottomSheet>
</template>

---

NTabs

Organized tab selector providing tab panel slot structures and selection tracking.

Props

Prop	Type	Default	Description
modelValue	string	''	Selected active tab ID
items	any[]	[]	Tab structures ({ id, label, icon })
position	string	'top'	Tab bar location (top, bottom)

Emits

Event	Parameters	Description
update:modelValue	value: string	Triggered on tab change

Example

<script setup>
import { signal } from 'nexa-framework'
import { NTabs } from 'nexa-ui-kit'

const activeTab = signal('tab1')
const tabItems = [
  { id: 'tab1', label: 'Home' },
  { id: 'tab2', label: 'Settings' }
]
</script>

<template>
  <NTabs v-model="activeTab" :items="tabItems" />
  <div v-if="activeTab.value === 'tab1'">Home view content</div>
  <div v-if="activeTab.value === 'tab2'">Settings panel view</div>
</template>

---

Data Display

NDataTable

Premium tables with asynchronous loading overlays, pagination, selection options, and sorting.

Props

Prop	Type	Default	Description
columns	any[]	[]	Column configurations. See Column Customization below.
data	any[]	[]	Rows database array
loading	boolean	false	Renders dynamic glass loading block overlay
paginator	boolean	false	Renders interactive NPaginator pagination
rows	number	10	Rows limit per page
selectionMode	string	null	Selection scheme (single, multiple)
selection	any	null	Bound selected row choices
sortField	string	''	Sorted database field key
sortOrder	number	1	Sorting direction (1 ASC, -1 DESC)

Column Customization

Unlike PrimeVue which uses template scoped slots (<template #body="slotProps">), Nexa uses JS/TS render functions (body and headerTemplate) inside the column configuration objects in <script setup>. This is because Nexa compiles template slots to static VNode arrays rather than functions.

Using body with h() achieves the exact same results with native JS flexibility and reactivity.

Column Configuration Properties

Property	Type	Description
field	string	The data field key to display
header	string	The header label to show
sortable	boolean	Whether this column can be sorted
type	string	The column data type ('text', 'number', 'boolean')
align	'left' | 'right' | 'center'	Horizontal alignment of cell contents
width	string	Column width (e.g. '120px')
body	(row: any, context: { index: number, column: any, field: string, value: any }) => any	Custom cell renderer function returning a VNode or string
headerTemplate	(col: any) => any	Custom header renderer function returning a VNode or string

Basic Example (Status Badge)

To render simple dynamic status tags using UI components:

<script setup>
import { signal, h } from 'nexa-framework'
import { NDataTable, NBadge } from 'nexa-ui-kit'

const columns = [
  { field: 'name', header: 'Name' },
  { 
    field: 'status', 
    header: 'Status',
    body: (row) => h(NBadge, {
      variant: row.status === 'active' ? 'success' : 'danger'
    }, [row.status.toUpperCase()])
  }
]

const items = signal([
  { id: 1, name: 'Alice Smith', status: 'active' },
  { id: 2, name: 'Bob Jones', status: 'inactive' }
])
</script>

<template>
  <NDataTable :columns="columns" :data="items.value" />
</template>

Complex Example (Product Layout + Formatters + Interactive Buttons)

You can build complex nested layouts, call helper utilities, display images, and attach event listeners (with stopPropagation) to custom actions:

<script setup>
import { signal, h } from 'nexa-framework'
import { NDataTable, NButton } from 'nexa-ui-kit'

const formatCurrency = (val) => {
  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val)
}

const editProduct = (prod) => {
  console.log('Edit', prod.id)
}

const deleteProduct = (prod) => {
  console.log('Delete', prod.id)
}

const columns = [
  {
    field: 'product',
    header: 'Product Detail',
    width: '300px',
    body: (row) => h('div', { class: 'flex items-center gap-3' }, [
      h('img', { 
        src: row.image, 
        alt: row.name, 
        class: 'w-12 h-12 rounded-lg object-cover border border-gray-200' 
      }),
      h('div', { class: 'flex flex-col' }, [
        h('span', { class: 'font-semibold text-gray-800' }, [row.name]),
        h('span', { class: 'text-xs text-gray-400' }, [row.sku])
      ])
    ])
  },
  {
    field: 'price',
    header: 'Price',
    align: 'right',
    body: (row) => h('span', { class: 'font-mono text-green-600' }, [formatCurrency(row.price)])
  },
  {
    field: 'actions',
    header: 'Actions',
    align: 'center',
    width: '150px',
    body: (row) => h('div', { class: 'flex gap-2 justify-center' }, [
      h(NButton, { 
        size: 'sm', 
        variant: 'glass',
        onClick: (e) => {
          e.stopPropagation()
          editProduct(row)
        }
      }, ['✏️']),
      h(NButton, { 
        size: 'sm', 
        variant: 'danger',
        onClick: (e) => {
          e.stopPropagation()
          deleteProduct(row)
        }
      }, ['🗑️'])
    ])
  }
]

const products = signal([
  { id: 101, name: 'Wireless Headphones', sku: 'HD-992', price: 99.99, image: 'https://placehold.co/100' },
  { id: 102, name: 'Mechanical Keyboard', sku: 'KB-881', price: 149.50, image: 'https://placehold.co/100' }
])
</script>

<template>
  <NDataTable :columns="columns" :data="products.value" />
</template>

Custom Header Example (With Badges & Icons)

You can also customize the headers of the table columns using the headerTemplate function property:

<script setup>
import { signal, h } from 'nexa-framework'
import { NDataTable } from 'nexa-ui-kit'

const columns = [
  { field: 'name', header: 'Name' },
  { 
    field: 'notifications', 
    header: 'Notifications',
    headerTemplate: (col) => h('div', { class: 'flex items-center gap-1.5' }, [
      h('span', null, ['🔔']),
      h('span', null, [col.header]),
      h('span', { class: 'px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full' }, ['2'])
    ])
  }
]

const data = signal([
  { id: 1, name: 'System Logs', notifications: 'Warnings detected' }
])
</script>

<template>
  <NDataTable :columns="columns" :data="data.value" />
</template>

Emits

Event	Parameters	Description
update:selection	value: any	Triggered when row selection updates
sort	{ field: string, order: number }	Triggered on column sorting action
page	{ first: number, rows: number }	Triggered on paginated page changes

Example

<script setup>
import { signal } from 'nexa-framework'
import { NDataTable } from 'nexa-ui-kit'

const columns = [
  { field: 'name', header: 'Name', sortable: true },
  { field: 'email', header: 'Email' }
]

const users = signal([
  { id: 1, name: 'Alice', email: 'alice@nexa.dev' },
  { id: 2, name: 'Bob', email: 'bob@nexa.dev' }
])
</script>

<template>
  <NDataTable
    :columns="columns"
    :data="users.value"
    :paginator="true"
    :rows="5"
  />
</template>

---

NPaginator

Independent standalone navigator controller supporting pagination range selections.

Props

Prop	Type	Default	Description
totalRecords	number	0	Total records length
rows	number	10	Visible records scale limit per page
first	number	0	Current offset index
rowsPerPageOptions	number[]	[5, 10, 20, 50]	Dropdown page limit scale choices

Emits

Event	Parameters	Description
pageChange	{ first: number, rows: number }	Triggered on navigation

Example

<script setup>
import { signal } from 'nexa-framework'
import { NPaginator } from 'nexa-ui-kit'

const offset = signal(0)
const rowsPerPage = signal(10)

const onPage = (event) => {
  offset.value = event.first
  rowsPerPage.value = event.rows
}
</script>

<template>
  <NPaginator
    :totalRecords="120"
    :first="offset.value"
    :rows="rowsPerPage.value"
    @pageChange="onPage"
  />
</template>

---

NTreeMenu

Recursive hierarchal navigation trees.

Props

Prop	Type	Default	Description
items	any[]	[]	Hierarchical nodes ({ label, key, children })
modelValue	any	null	Selected active tree node ID key
selectionMode	string	'single'	Selected item schemes
expandAll	boolean	false	Automatically expands all folders

Emits

Event	Parameters	Description
update:modelValue	value: any	Selected key update

Example

<script setup>
import { signal } from 'nexa-framework'
import { NTreeMenu } from 'nexa-ui-kit'

const selectedNode = signal(null)
const items = [
  {
    label: 'Documents',
    key: 'docs',
    children: [
      { label: 'Resume.pdf', key: 'resume' },
      { label: 'Invoice.json', key: 'invoice' }
    ]
  }
]
</script>

<template>
  <NTreeMenu
    v-model="selectedNode"
    :items="items"
  />
</template>

---

NAvatar

User profile avatar placeholder supporting various sizes, border colors, and initials fallback.

Props

Prop	Type	Default	Description
src	string	''	Avatar image source URL
name	string	''	User name (initial fallback)
size	string	'md'	Scale sizing (sm, md, lg)
rounded	boolean	true	Makes the avatar round
border	boolean	false	Displays visual rings

Example

<script setup>
import { NAvatar } from 'nexa-ui-kit'
</script>

<template>
  <NAvatar
    src="https://images.nexa.dev/avatar.jpg"
    name="John Doe"
    size="lg"
  />
</template>

---

NTag

Clean status indicators with closing functions.

Props

Prop	Type	Default	Description
variant	string	'primary'	Visual scheme style
size	string	'md'	Scale size
rounded	boolean	true	Pill style format
closable	boolean	false	Renders close action button

Emits

Event	Parameters	Description
close	none	Triggered on close button click

Example

<script setup>
import { NTag } from 'nexa-ui-kit'
</script>

<template>
  <div class="flex gap-2">
    <NTag variant="success">Completed</NTag>
    <NTag variant="warning" closable>Pending</NTag>
  </div>
</template>

---

NBadge

Floating indicator tags showing numeric status overlays.

Props

Prop	Type	Default	Description
value	any	''	Tag value or text
max	number	undefined	Numeric cap scale limit (e.g. 99+ display)
variant	string	'danger'	Theme variant style
dot	boolean	false	Minimizes structure badge to simple alert dot

Example

<script setup>
import { NBadge, NButton } from 'nexa-ui-kit'
</script>

<template>
  <div class="relative inline-block">
    <NButton>Inbox</NButton>
    <NBadge :value="5" :max="9" />
  </div>
</template>

---

Feedback & Loading

NAlert

Clean feedback block alerts incorporating close handlers and layout formatting.

Props

Prop	Type	Default	Description
variant	string	'info'	Alert styles (info, success, warning, danger)
title	string	''	Alert header bold label
closable	boolean	false	Enables close button
icon	string	''	Display icon character

Emits

Event	Parameters	Description
close	none	Triggered when alert is dismissed

Example

<script setup>
import { NAlert } from 'nexa-ui-kit'
</script>

<template>
  <NAlert variant="success" title="Success Notification" closable>
    Your profile has been updated successfully.
  </NAlert>
</template>

---

NToastContainer

Global toaster system portal. Renders floating status messages triggered via useToast helpers.

Props

Prop	Type	Default	Description
position	string	'top-right'	Visual screen location
duration	number	3000	Expiration delay inside millisecond scale
maxToasts	number	5	Maximum stacked displays

useToast Hook

import { useToast } from 'nexa-ui-kit'

const { success, error, info, warning } = useToast()

success('Successfully saved!')
error('Failed to authenticate.')

Example

<script setup>
import { NToastContainer, NButton, useToast } from 'nexa-ui-kit'

const { success } = useToast()
</script>

<template>
  <NToastContainer position="top-right" :duration="4000" />
  <NButton @click="success('Notification sent!')">Show Toast</NButton>
</template>

---

NProgressBar

Modern, fluid progress bars.

Props

Prop	Type	Default	Description
value	number	0	Active value progression scale
max	number	100	Maximum limit
variant	string	'primary'	Style variant theme
striped	boolean	false	Renders striped indicator blocks
animated	boolean	false	Animates stripe sequences
showValue	boolean	false	Renders overlay value percentage label

Example

<script setup>
import { NProgressBar } from 'nexa-ui-kit'
</script>

<template>
  <NProgressBar :value="70" :max="100" showValue striped animated />
</template>

---

NSkeleton

Dynamic layout content skeletons rendering sleek animation loading loops.

Props

Prop	Type	Default	Description
variant	string	'text'	Skeleton shapes (text, circle, rect)
width	string	'100%'	Target width
height	string	'1rem'	Target height
animated	boolean	true	Animates loading shimmer effects

Example

<script setup>
import { NSkeleton } from 'nexa-ui-kit'
</script>

<template>
  <div class="flex flex-col gap-2 p-4">
    <NSkeleton variant="circle" width="48px" height="48px" />
    <NSkeleton variant="text" width="60%" height="1.2rem" />
    <NSkeleton variant="rect" width="100%" height="120px" />
  </div>
</template>

---

NTooltip

Accessible interactive tooltips using Teleport and smart viewport orientation positioning.

Props

Prop	Type	Default	Description
content	string	''	Text displayed in overlay
position	string	'top'	Preferred overlay location (top, bottom, left, right)
trigger	string	'hover'	Interaction trigger event (hover, focus, click)
disabled	boolean	false	Disables tooltip overlay

Example

<script setup>
import { NTooltip, NButton } from 'nexa-ui-kit'
</script>

<template>
  <NTooltip content="Delete permanently" position="top">
    <NButton variant="danger">Delete</NButton>
  </NTooltip>
</template>

---

Form Container & Validation

NForm

Robust wrapping structures managing rules, states, and global field validation routines.

Props

Prop	Type	Default	Description
rules	Record<string, any>	{}	Validation rules mapping
modelValue	Record<string, any>	{}	Form values data object

Emits

Event	Parameters	Description
submit	event: Event	Triggered when form submits with validation passing

Example

<script setup>
import { signal } from 'nexa-framework'
import { NForm, NFormField, NInput, NButton } from 'nexa-ui-kit'

const formData = signal({
  email: ''
})

const rules = {
  email: [
    { required: true, message: 'Email address is required' }
  ]
}

const handleSubmit = () => {
  console.log('Form validated successfully!')
}
</script>

<template>
  <NForm :modelValue="formData.value" :rules="rules" @submit="handleSubmit">
    <NFormField prop="email" label="Email Address" required>
      <NInput v-model="formData.value.email" placeholder="Enter email" />
    </NFormField>
    <NButton type="submit" class="mt-4">Register</NButton>
  </NForm>
</template>

---

NFormField

Helper field label layout mapping validation states and errors.

Props

Prop	Type	Default	Description
prop	string	''	Field key property name (matches NForm rules)
label	string	''	Display field label
required	boolean	false	Appends visual required asterisk
error	string	''	Custom active error overrides