Components

Code

Codes are used to display short inline code snippets.
Static SSR Source Styles source

Usage

dotnet add package LumexUI
<LumexCode>dotnet add package LumexUI</LumexCode>

Sizes

Use the Size parameter to set the size of the code snippet.

dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI
<div class="flex flex-col gap-4">
    <LumexCode Size="@Size.Small">dotnet add package LumexUI</LumexCode>
    <LumexCode Size="@Size.Medium">dotnet add package LumexUI</LumexCode>
    <LumexCode Size="@Size.Large">dotnet add package LumexUI</LumexCode>
</div>

Radius

Use the Radius parameter to set the border radius of the code snippet.

dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI
<div class="flex flex-col gap-4">
    <LumexCode Radius="@Radius.None">dotnet add package LumexUI</LumexCode>
    <LumexCode Radius="@Radius.Small">dotnet add package LumexUI</LumexCode>
    <LumexCode Radius="@Radius.Medium">dotnet add package LumexUI</LumexCode>
    <LumexCode Radius="@Radius.Large">dotnet add package LumexUI</LumexCode>
    <LumexCode Radius="@Radius.Full">dotnet add package LumexUI</LumexCode>
</div>

Colors

Use the Color parameter to set the semantic color of the code snippet.

dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI dotnet add package LumexUI
<div class="flex flex-wrap gap-4">
    <LumexCode Color="@ThemeColor.Default">dotnet add package LumexUI</LumexCode>
    <LumexCode Color="@ThemeColor.Primary">dotnet add package LumexUI</LumexCode>
    <LumexCode Color="@ThemeColor.Secondary">dotnet add package LumexUI</LumexCode>
    <LumexCode Color="@ThemeColor.Warning">dotnet add package LumexUI</LumexCode>
    <LumexCode Color="@ThemeColor.Success">dotnet add package LumexUI</LumexCode>
    <LumexCode Color="@ThemeColor.Danger">dotnet add package LumexUI</LumexCode>
    <LumexCode Color="@ThemeColor.Info">dotnet add package LumexUI</LumexCode>
</div>

Custom Styles

You can customize the code component by passing any Tailwind CSS classes to the component's Class parameter.

dotnet add package LumexUI 
<LumexCode Class="border border-black/8 dark:border-white/8">
    dotnet add package LumexUI
</LumexCode>

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

An unhandled error has occurred. Reload 🗙