NOCTA UI

Avatar

A versatile avatar component for displaying user profile images, initials, and status indicators with dark mode support

Installation

Install the Avatar component using the nocta-ui CLI:

npx @nocta-ui/cli add avatar

Then import the component:

import { Avatar } from '@/components/ui/avatar';

Examples

Default Avatar

Sizes

Variants

Status Indicators

Fallback Handling

Avatar Groups

API Reference

Prop

Type

Area Chart

Visualise continuous trends and cumulative values with smooth area graphs.

Badge

A versatile badge component for labels, status indicators, and tags with multiple variants, sizes and dark mode support

On this page

Status Indicators

Fallback Handling