Skip to main content
Layout components help organize and structure your application’s user interface.

​
DaisyDivider

Separation line with optional text label.

​
Basic Usage

<daisy:DaisyDivider />

​
With Text

<StackPanel Spacing="16">
  <TextBlock Text="Section 1 content" />
  <daisy:DaisyDivider Text="OR" />
  <TextBlock Text="Section 2 content" />
</StackPanel>

​
Vertical Divider

<StackPanel Orientation="Horizontal" Spacing="16">
  <TextBlock Text="Left" />
  <daisy:DaisyDivider Orientation="Vertical" />
  <TextBlock Text="Right" />
</StackPanel>

​
Variants

<daisy:DaisyDivider Text="Primary" Variant="Primary" />
<daisy:DaisyDivider Text="Secondary" Variant="Secondary" />
<daisy:DaisyDivider Text="Accent" Variant="Accent" />

​
Properties

PropertyTypeDefaultDescription
TextstringnullOptional divider text
OrientationOrientationHorizontalHorizontal or Vertical
VariantDaisyDividerVariantDefaultColor variant

​
DaisyDrawer

Sidebar navigation with overlay backdrop.

​
Basic Usage

<daisy:DaisyDrawer x:Name="MyDrawer" IsOpen="False">
  <daisy:DaisyDrawer.DrawerContent>
    <StackPanel Padding="16" Spacing="12">
      <TextBlock Text="Drawer Menu" FontSize="20" FontWeight="Bold" />
      <daisy:DaisyButton Content="Home" Variant="Ghost" />
      <daisy:DaisyButton Content="Profile" Variant="Ghost" />
      <daisy:DaisyButton Content="Settings" Variant="Ghost" />
    </StackPanel>
  </daisy:DaisyDrawer.DrawerContent>
  
  <daisy:DaisyDrawer.MainContent>
    <Grid>
      <daisy:DaisyButton Content="Open Drawer" 
                         Click="OnOpenDrawer" 
                         Variant="Primary" />
    </Grid>
  </daisy:DaisyDrawer.MainContent>
</daisy:DaisyDrawer>

​
Opening and Closing

private void OnOpenDrawer(object sender, RoutedEventArgs e)
{
  MyDrawer.IsOpen = true;
}

private void OnCloseDrawer(object sender, RoutedEventArgs e)
{
  MyDrawer.IsOpen = false;
}

​
Properties

PropertyTypeDefaultDescription
IsOpenboolfalseControls drawer visibility
PositionDaisyDrawerPositionLeftDrawer position (Left, Right, Top, Bottom)
ShowBackdropbooltrueShows dimmed overlay
CloseOnBackdropClickbooltrueCloses when clicking backdrop
DrawerWidthdouble280Drawer width (for Left/Right)
DrawerHeightdouble280Drawer height (for Top/Bottom)

​
DaisyHero

Large banner component for featured content.

​
Basic Usage

<daisy:DaisyHero Background="{ThemeResource DaisyPrimaryBrush}" 
                 MinHeight="400">
  <StackPanel Spacing="16" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Welcome to Flowery.Uno" 
               FontSize="48" 
               FontWeight="Bold" 
               Foreground="White" />
    <TextBlock Text="Beautiful DaisyUI components for Uno Platform" 
               FontSize="20" 
               Foreground="White" 
               Opacity="0.9" />
    <daisy:DaisyButton Content="Get Started" 
                       Variant="Accent" 
                       Size="Large" />
  </StackPanel>
</daisy:DaisyHero>

​
With Background Image

<daisy:DaisyHero MinHeight="500">
  <daisy:DaisyHero.Background>
    <ImageBrush ImageSource="/Assets/hero-bg.jpg" Stretch="UniformToFill" />
  </daisy:DaisyHero.Background>
  
  <Grid>
    <!-- Hero content -->
  </Grid>
</daisy:DaisyHero>

​
DaisyJoin

Container that groups children by merging their borders.

​
Basic Usage

<daisy:DaisyJoin>
  <daisy:DaisyButton Content="Button 1" Variant="Primary" />
  <daisy:DaisyButton Content="Button 2" Variant="Primary" />
  <daisy:DaisyButton Content="Button 3" Variant="Primary" />
</daisy:DaisyJoin>

​
Vertical Join

<daisy:DaisyJoin Orientation="Vertical">
  <daisy:DaisyButton Content="Top" Variant="Primary" />
  <daisy:DaisyButton Content="Middle" Variant="Primary" />
  <daisy:DaisyButton Content="Bottom" Variant="Primary" />
</daisy:DaisyJoin>

​
Join with Inputs

<daisy:DaisyJoin>
  <daisy:DaisyInput PlaceholderText="Email" Variant="Bordered" />
  <daisy:DaisyButton Content="Subscribe" Variant="Primary" />
</daisy:DaisyJoin>

​
Properties

PropertyTypeDefaultDescription
OrientationOrientationHorizontalJoin direction

​
DaisyStack

Stacks children visually with offsets creating a layered effect.

​
Basic Usage

<daisy:DaisyStack>
  <daisy:DaisyCard Width="200" Height="150" Background="{ThemeResource DaisyPrimaryBrush}">
    <TextBlock Text="Card 1" Foreground="White" />
  </daisy:DaisyCard>
  <daisy:DaisyCard Width="200" Height="150" Background="{ThemeResource DaisySecondaryBrush}">
    <TextBlock Text="Card 2" Foreground="White" />
  </daisy:DaisyCard>
  <daisy:DaisyCard Width="200" Height="150" Background="{ThemeResource DaisyAccentBrush}">
    <TextBlock Text="Card 3" Foreground="White" />
  </daisy:DaisyCard>
</daisy:DaisyStack>

​
With Custom Offset

<daisy:DaisyStack OffsetX="20" OffsetY="20">
  <!-- Children will be offset by 20px horizontally and vertically -->
</daisy:DaisyStack>

​
Properties

PropertyTypeDefaultDescription
OffsetXdouble8Horizontal offset between items
OffsetYdouble8Vertical offset between items

​
Common Layout Patterns

<daisy:DaisyDrawer x:Name="AppDrawer">
  <daisy:DaisyDrawer.DrawerContent>
    <daisy:DaisyMenu>
      <daisy:DaisyMenuItem Content="Dashboard" Icon="..." />
      <daisy:DaisyMenuItem Content="Settings" Icon="..." />
    </daisy:DaisyMenu>
  </daisy:DaisyDrawer.DrawerContent>
  
  <daisy:DaisyDrawer.MainContent>
    <Grid RowDefinitions="Auto,*">
      <daisy:DaisyNavbar>
        <daisy:DaisyButton Content="☰" 
                           Click="{x:Bind () => AppDrawer.IsOpen = true}" 
                           Variant="Ghost" />
      </daisy:DaisyNavbar>
      
      <Frame Grid.Row="1" x:Name="ContentFrame" />
    </Grid>
  </daisy:DaisyDrawer.MainContent>
</daisy:DaisyDrawer>

​
Hero Section with Content

<ScrollViewer>
  <StackPanel>
    <daisy:DaisyHero MinHeight="500" Background="{ThemeResource DaisyPrimaryBrush}">
      <StackPanel Spacing="24" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Your App" FontSize="56" FontWeight="Bold" />
        <daisy:DaisyButton Content="Get Started" Variant="Accent" Size="Large" />
      </StackPanel>
    </daisy:DaisyHero>
    
    <Grid Padding="48" MaxWidth="1200">
      <!-- Main content -->
    </Grid>
  </StackPanel>
</ScrollViewer>

​
Next Steps

Navigation

Explore navigation components

Feedback

Learn about feedback controls

Build docs developers (and LLMs) love

Get started for freeTalk to us