ArtistCard Component
A card component for displaying artist information with cover image, avatar, bio, genres, and subscription details. Perfect for artist discovery and browsing interfaces.
Basic Artist Card
Chris Stapleton
1.2M subscribers
$25
per month
Country music superstar with multiple Grammy awards
<ArtistCard
artist={{
name: "Chris Stapleton",
slug: "chris-stapleton",
bio: "Country music superstar with multiple Grammy awards",
subscriberCount: 1234567,
subscriptionPrice: 25
}}
onSubscribe={(slug) => alert(`Subscribe to ${slug}`)}
/>
With Images
Sarah Smith
45.6K subscribers
$15
per month
Electronic music producer pushing boundaries with innovative soundscapes.
<ArtistCard
artist={{
name: "Sarah Smith",
slug: "sarah-smith",
avatar: "https://example.com/avatar.jpg",
coverImage: "https://example.com/cover.jpg",
bio: "Electronic music producer pushing boundaries.",
subscriberCount: 45678,
subscriptionPrice: 15
}}
onSubscribe={(slug) => alert(`Subscribe to ${slug}`)}
/>
With Genres
The Midnight Band
123.4K subscribers
$20
per month
Alternative rock band from Seattle bringing fresh energy to the indie scene.
<ArtistCard
artist={{
name: "The Midnight Band",
slug: "the-midnight-band",
avatar: "avatar.jpg",
coverImage: "cover.jpg",
bio: "Alternative rock band from Seattle.",
genres: ["Alternative", "Rock", "Indie", "Experimental", "Post-Rock"],
subscriberCount: 123456,
subscriptionPrice: 20
}}
onSubscribe={(slug) => alert(`Subscribe to ${slug}`)}
/>
Artist Discovery Grid
Jazz Collective
8.9K subscribers
$12
per month
Modern jazz ensemble bringing classic sounds to new audiences.
Luna Rodriguez
234.5K subscribers
$25
per month
Latin pop sensation with chart-topping hits across the Americas.
Echo Chamber
3.4K subscribers
$8
per month
Experimental electronic duo creating immersive sonic experiences.
View Only (No Subscribe)
Classical Masters
67.8K subscribers
Bringing timeless classical compositions to modern audiences.
<ArtistCard
artist={{
name: "Classical Masters",
slug: "classical-masters",
bio: "Bringing timeless classical compositions to modern audiences.",
genres: ["Classical", "Orchestra", "Chamber Music"],
subscriberCount: 67890
}}
// No onSubscribe prop - only shows "View Profile" button
/>
Large Numbers Display
Number Formatting:
- 1,234,567 → 1.2M subscribers
- 45,678 → 45.7K subscribers
- 999 → 999 subscribers
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| artist | Artist | required | Artist information object |
| onSubscribe | (artistSlug: string) => void | undefined | Subscribe button callback |
| className | string | undefined | Additional CSS classes |
Artist Interface
interface Artist {
name: string;
slug: string;
avatar?: string;
coverImage?: string;
bio?: string;
genres?: string[];
subscriberCount?: number;
subscriptionPrice?: number;
}