CSS Artart-componentsimplemented2 demos

ArtCircularGallery

ArtCircularGallery renders the ArtCircularGallery CSS-art scene as a reusable React component.

Import@duskmoon-dev/art-components

2API sections

9documented props

1behavior scenarios

Key API

titleitemsidsrchrefalt

Usage

When to use

Use it when a page needs a reusable DuskMoon visual asset rendered from CSS rather than an image.
Keep it decorative unless the illustration carries information that must be announced.

Implementation notes

StylesheetImport @duskmoon-dev/art-components/styles.css once before rendering art components.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

SizingUse the size prop and CSS custom properties to adapt the scene without replacing markup.

Features

CSS-art wrapper

Renders the matching @duskmoon-dev/css-art scene through a typed React component.

Accessible decoration

Defaults to decorative output while allowing aria labels and roles when the scene carries meaning.

Primary API surface

ArtCircularGallery is most often configured through `title`, `items`, `id`, `src`.

Covered behavior

Renders targetable gallery cards

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import ArtCircularGallery and the art component stylesheet before rendering the CSS art scene.

Source

import "@duskmoon-dev/art-components/styles.css";
import { ArtCircularGallery } from "@duskmoon-dev/art-components";

export function Example() {
  return (<ArtCircularGallery
  title="Moons"
  size="sm"
  items={[
    { title: "Crater", src: "https://picsum.photos/seed/dm-art-1/160/220" },
    { title: "Orbit", src: "https://picsum.photos/seed/dm-art-2/160/220" },
    { title: "Lunar", src: "https://picsum.photos/seed/dm-art-3/160/220" },
    { title: "Night", src: "https://picsum.photos/seed/dm-art-4/160/220" }
  ]}
/>);
}

Preview

Moons

Accessible art

authored

Use ArtCircularGallery as decorative output by default, or pass accessible labeling when the scene is meaningful.

Source

import "@duskmoon-dev/art-components/styles.css";
import { ArtCircularGallery } from "@duskmoon-dev/art-components";

export function AccessibleArt() {
  return (<ArtCircularGallery
  title="Moons"
  size="sm"
  items={[
    { title: "Crater", src: "https://picsum.photos/seed/dm-art-1/160/220" },
    { title: "Orbit", src: "https://picsum.photos/seed/dm-art-2/160/220" },
    { title: "Lunar", src: "https://picsum.photos/seed/dm-art-3/160/220" },
    { title: "Night", src: "https://picsum.photos/seed/dm-art-4/160/220" }
  ]}
  decorative={false}
  aria-label="Art Circular Gallery illustration"
/>);
}

API

The API reference below lists every parsed exported type or interface for ArtCircularGallery. Start with `title`, `items`, `id`, `src` for common usage.

Types: packages/art-components/src/index.tsxScenarios: packages/art-components/tests/art-components.test.tsx

ArtCircularGalleryPropsinterface extends Omit<SizedArtProps, "title">

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures ArtCircularGallery.
`items`	`ArtCircularGalleryItem[]`	Yes	items configures ArtCircularGallery.

ArtCircularGalleryIteminterface

Prop	Type	Required	Description
`id`	`string`	No	id configures ArtCircularGallery.
`title`	`string`	Yes	title configures ArtCircularGallery.
`src`	`string`	Yes	src configures ArtCircularGallery.
`href`	`string`	No	href configures ArtCircularGallery.
`alt`	`string`	No	alt configures ArtCircularGallery.
`target`	`ComponentProps<"a">["target"]`	No	target configures ArtCircularGallery.
`rel`	`ComponentProps<"a">["rel"]`	No	rel configures ArtCircularGallery.