Atoms
The lowest layer of Nuxora. Every other component is built from these.
Avatar
Sizes and fallback
SDSDSDB
<UiAvatar name="Sarah Dewi" size="lg" />Group with overflow
SD
RP
JW
+2<UiAvatarGroup :max="3"> ... </UiAvatarGroup>| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Full name. Used for initials and as the accessible name. |
| src | string | undefined | Image URL. Falls back to initials when omitted. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Avatar diameter. |
AvatarGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 4 | How many avatars to show before collapsing the rest into +N. |
Badge
Variants
DraftNewActivePendingFailedInfo
<UiBadge variant="success" dot>Active</UiBadge>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Semantic colour. |
| size | 'sm' | 'md' | 'md' | Badge height and text size. |
| dot | boolean | false | Shows a leading status dot. |
| icon | string | undefined | Leading icon id. |
Button
Variants
<UiButton variant="secondary">Cancel</UiButton>Sizes
<UiButton size="lg">Continue</UiButton>Icons and state
<UiButton icon="lucide:plus" :loading="true">Add</UiButton>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | Visual weight of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | Control height and padding. |
| loading | boolean | false | Shows a spinner, keeps the label, and blocks clicks. |
| disabled | boolean | false | Blocks interaction. |
| icon | string | undefined | Leading icon id. |
| iconEnd | string | undefined | Trailing icon id. |
| type | 'button' | 'submit' | 'reset' | 'button' | Native button type. |
Divider
Plain and labelled
OR
LeftRight
<UiDivider label="OR" />| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Divider direction. |
| label | string | undefined | Optional centred label. |
Icon
Sizes
<UiIcon name="lucide:check" :size="16" />Labelled icon
<UiIcon name="lucide:bell" label="Notifications" />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Icon id, e.g. "lucide:check". |
| size | number | 20 | Rendered size in pixels. |
| label | string | undefined | Accessible name. Omit for decorative icons. |
Icon button
Variants and sizes
<UiIconButton icon="lucide:trash-2" label="Delete" variant="danger" />| Prop | Type | Default | Description |
|---|---|---|---|
| icon | string | — | Icon id to render. |
| label | string | — | Required accessible name. |
| variant | 'secondary' | 'ghost' | 'danger' | 'secondary' | Visual weight. |
| size | 'sm' | 'md' | 'lg' | 'md' | Square control size. |
| disabled | boolean | false | Blocks interaction. |
Kbd
Shortcuts
Search CtrlKSave CtrlShiftSClose Esc
<UiKbd keys="mod+k" />| Prop | Type | Default | Description |
|---|---|---|---|
| keys | string | undefined | Combination such as "mod+k". "mod" renders as ⌘ on macOS and Ctrl elsewhere. |
Skeleton
Loading a profile card
<UiSkeleton :lines="3" />Block
<UiSkeleton shape="rect" height="8rem" />| Prop | Type | Default | Description |
|---|---|---|---|
| shape | 'line' | 'circle' | 'rect' | 'line' | Placeholder shape. |
| width | string | '100%' | Any CSS width. |
| height | string | '1rem' | Any CSS height. |
| lines | number | 1 | Line count. The last line is shortened. |
Spinner
Sizes
<UiSpinner size="lg" label="Saving" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Spinner diameter. |
| label | string | 'Loading' | Accessible status name. |