Data display

Avatar.

A familiar face, with a useful fallback.

A familiar face, with initials as a fallback.

Accent

Glow intensity

Size

Reduced motion

tsx

import { Avatar, AvatarGroup } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <AvatarGroup label="Project team" max={3}>
      <Avatar alt="Alex Morgan" />
      <Avatar alt="Jamie Chen" />
      <Avatar alt="Sam Rivera" />
      <Avatar alt="Taylor Park" />
    </AvatarGroup>
  );
}

Installation

bash

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import AvatarProps from the package for the full inherited contract.

Prop	Type	Details
`src`	`string`	Optional unless marked required.
`alt`required	`string`	Optional unless marked required.
`fallback`	`React.ReactNode`	Optional unless marked required.
`size`	`'sm' \| 'md' \| 'lg'`	Optional unless marked required.
`max`	`number`	AvatarGroupProps
`label`	`string`	AvatarGroupProps

Accessibility and keyboard

Required alt names the person; decorative images share the parent accessible name. Initials remain available if the image fails. AvatarGroup is labeled and announces overflow. No action is implied.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

tsx

import { LuminescentProvider, Avatar, AvatarGroup } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <AvatarGroup label="Project team" max={3}>
        <Avatar alt="Alex Morgan" />
        <Avatar alt="Jamie Chen" />
        <Avatar alt="Sam Rivera" />
        <Avatar alt="Taylor Park" />
      </AvatarGroup>
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.