Skip to main content
Data display components help you present information in structured, visually appealing ways.

​
DaisyAccordion

Groups multiple collapsible sections where only one can be expanded at a time.

​
Basic Usage

<daisy:DaisyAccordion ExpandedIndex="0">
  <daisy:DaisyAccordionItem Title="Section 1">
    <TextBlock Text="Content for section 1" />
  </daisy:DaisyAccordionItem>
  <daisy:DaisyAccordionItem Title="Section 2">
    <TextBlock Text="Content for section 2" />
  </daisy:DaisyAccordionItem>
  <daisy:DaisyAccordionItem Title="Section 3">
    <TextBlock Text="Content for section 3" />
  </daisy:DaisyAccordionItem>
</daisy:DaisyAccordion>

​
Properties

PropertyTypeDefaultDescription
ExpandedIndexint-1Index of currently expanded item
VariantDaisyCollapseVariantArrowIcon style (Arrow, Plus)

​
DaisyAlert

Feedback messages with variant-based coloring for different message types.

​
Variants

<daisy:DaisyAlert Variant="Info" Message="Informational message" />
<daisy:DaisyAlert Variant="Success" Message="Operation successful!" />
<daisy:DaisyAlert Variant="Warning" Message="Warning: Check your input" />
<daisy:DaisyAlert Variant="Error" Message="Error: Something went wrong" />

​
With Custom Content

<daisy:DaisyAlert Variant="Success" ShowIcon="True">
  <StackPanel Spacing="8">
    <TextBlock Text="Success!" FontWeight="Bold" />
    <TextBlock Text="Your changes have been saved." />
  </StackPanel>
</daisy:DaisyAlert>

​
DaisyAvatar

Profile image container with status indicators and shape variants.

​
Basic Usage

<daisy:DaisyAvatar ImageSource="/Assets/user.png" Size="Medium" />

​
With Status Indicator

<daisy:DaisyAvatar ImageSource="/Assets/user.png" 
                   Size="Large" 
                   ShowStatus="True" 
                   StatusColor="Green" />

​
Shapes

<daisy:DaisyAvatar ImageSource="/Assets/user.png" Shape="Circle" />
<daisy:DaisyAvatar ImageSource="/Assets/user.png" Shape="Square" />

​
DaisyAvatarGroup

Groups multiple avatars with automatic overflow handling.

​
Basic Usage

<daisy:DaisyAvatarGroup MaxVisible="4">
  <daisy:DaisyAvatar ImageSource="/Assets/user1.png" />
  <daisy:DaisyAvatar ImageSource="/Assets/user2.png" />
  <daisy:DaisyAvatar ImageSource="/Assets/user3.png" />
  <daisy:DaisyAvatar ImageSource="/Assets/user4.png" />
  <daisy:DaisyAvatar ImageSource="/Assets/user5.png" />
</daisy:DaisyAvatarGroup>
Displays first 4 avatars plus “+1” overflow indicator.

​
DaisyBadge

Small status indicators with variant colors.

​
Variants

<daisy:DaisyBadge Content="Default" />
<daisy:DaisyBadge Content="Primary" Variant="Primary" />
<daisy:DaisyBadge Content="Secondary" Variant="Secondary" />
<daisy:DaisyBadge Content="Accent" Variant="Accent" />
<daisy:DaisyBadge Content="Ghost" Variant="Ghost" />

​
Sizes

<daisy:DaisyBadge Content="XS" Size="ExtraSmall" Variant="Primary" />
<daisy:DaisyBadge Content="SM" Size="Small" Variant="Primary" />
<daisy:DaisyBadge Content="MD" Size="Medium" Variant="Primary" />
<daisy:DaisyBadge Content="LG" Size="Large" Variant="Primary" />

​
DaisyCard

Content container with shadow, padding, and optional glass effects.

​
Basic Usage

<daisy:DaisyCard Padding="16">
  <StackPanel Spacing="12">
    <TextBlock Text="Card Title" FontSize="20" FontWeight="Bold" />
    <TextBlock Text="Card content goes here" />
    <daisy:DaisyButton Content="Action" Variant="Primary" />
  </StackPanel>
</daisy:DaisyCard>

​
With Glass Effect

<daisy:DaisyCard UseGlassEffect="True" 
                 GlassOpacity="0.8" 
                 BlurAmount="20" 
                 Padding="24">
  <TextBlock Text="Frosted glass effect" />
</daisy:DaisyCard>

​
DaisyCarousel

Scrollable container for items with optional navigation.

​
Basic Usage

<daisy:DaisyCarousel ItemWidth="300" ItemHeight="200">
  <Image Source="/Assets/image1.jpg" />
  <Image Source="/Assets/image2.jpg" />
  <Image Source="/Assets/image3.jpg" />
</daisy:DaisyCarousel>

​
DaisyChatBubble

Message bubbles for chat interfaces with header and footer support.

​
Basic Usage

<daisy:DaisyChatBubble Message="Hello, how are you?" 
                       Alignment="Start" 
                       Variant="Primary" />

<daisy:DaisyChatBubble Message="I'm doing great, thanks!" 
                       Alignment="End" 
                       Variant="Secondary" />

<daisy:DaisyChatBubble Alignment="Start" Variant="Primary">
  <daisy:DaisyChatBubble.Header>
    <TextBlock Text="John Doe" FontWeight="Bold" />
  </daisy:DaisyChatBubble.Header>
  <daisy:DaisyChatBubble.Message>
    <TextBlock Text="Hello, how are you?" />
  </daisy:DaisyChatBubble.Message>
  <daisy:DaisyChatBubble.Footer>
    <TextBlock Text="10:30 AM" Opacity="0.7" />
  </daisy:DaisyChatBubble.Footer>
</daisy:DaisyChatBubble>

​
DaisyCollapse

Single collapsible section with animated expand/collapse.

​
Basic Usage

<daisy:DaisyCollapse Title="Click to expand" IsExpanded="False">
  <TextBlock Text="This content is hidden until expanded" 
             TextWrapping="Wrap" />
</daisy:DaisyCollapse>

​
With Custom Icon

<daisy:DaisyCollapse Title="Custom Icon" 
                     Variant="Plus" 
                     IsExpanded="True">
  <StackPanel Spacing="8">
    <TextBlock Text="Content line 1" />
    <TextBlock Text="Content line 2" />
  </StackPanel>
</daisy:DaisyCollapse>

​
DaisyCountdown

Monospace digit display for countdowns and timers.

​
Basic Usage

<daisy:DaisyCountdown Value="{x:Bind RemainingSeconds, Mode=OneWay}" 
                      Size="Large" />

​
DaisyDiff

Before/After image comparison slider.

​
Basic Usage

<daisy:DaisyDiff BeforeImage="/Assets/before.jpg" 
                 AfterImage="/Assets/after.jpg" 
                 Width="600" 
                 Height="400" />

​
DaisyKbd

Keyboard key visual style for displaying shortcuts.

​
Basic Usage

<StackPanel Orientation="Horizontal" Spacing="8">
  <daisy:DaisyKbd Content="Ctrl" />
  <TextBlock Text="+" VerticalAlignment="Center" />
  <daisy:DaisyKbd Content="C" />
</StackPanel>

​
DaisyStat

Statistics display block with title, value, and description.

​
Basic Usage

<daisy:DaisyStat Title="Total Sales" 
                 Value="$12,345" 
                 Description="↗︎ 12% increase" 
                 Variant="Primary" />

​
Multiple Stats

<Grid ColumnDefinitions="*,*,*" ColumnSpacing="16">
  <daisy:DaisyStat Title="Users" Value="8,282" Description="Active" />
  <daisy:DaisyStat Title="Revenue" Value="$45.2K" Description="This month" 
                   Grid.Column="1" />
  <daisy:DaisyStat Title="Orders" Value="1,234" Description="Pending" 
                   Grid.Column="2" />
</Grid>

​
DaisyTimeline

Vertical list of events with connecting lines.

​
Basic Usage

<daisy:DaisyTimeline>
  <daisy:DaisyTimelineItem Title="Project Started" 
                           Description="Jan 1, 2024" 
                           Icon="Start" />
  <daisy:DaisyTimelineItem Title="First Milestone" 
                           Description="Feb 15, 2024" 
                           Icon="Milestone" />
  <daisy:DaisyTimelineItem Title="Launch" 
                           Description="Mar 1, 2024" 
                           Icon="Rocket" />
</daisy:DaisyTimeline>

​
Next Steps

Data Input

Explore form controls

Layout

Learn about layout components

Build docs developers (and LLMs) love

Get started for freeTalk to us