Dopamine Ui
Aesthetic C# .NET Blazor component library that makes the UI seamless and entertaining to use.
Dopamine UI
An aesthetic C# .NET Blazor component library that makes the UI seamless and entertaining to use.
Installation
NuGet Package
.NET CLI
dotnet add package ChatAIze.DopamineUI
Package Manager Console
Install-Package ChatAIze.DopamineUI
CSS
App.razor File
<head>
<!-- ... -->
<link rel="stylesheet" href="_content/ChatAIze.DopamineUI/css/tailwind.css">
<!-- ... -->
</head>
[!NOTE] Dopamine UI is built with Tailwind CSS, however, you don't have to install, set up, or use Tailwind CSS by yourself. All styles are already pre-generated and included in the NuGet package.
Usage
For detailed examples, see our preview app.
Table of Contents
- Button
- Text Field
- Text Area
- Toggle Switch
- Checkbox
- Radio Button
- Divider
Button
Standard
<DPButton Text="Sign In" />Full Width
<DPButton Text="Sign In" IsFullWidth="true" />Accent
<DPButton Text="Create Account" Style="ButtonStyle.Accent" />Destructive
<DPButton Text="Delete Account" Style="ButtonStyle.Destructive" />Loading
<DPButton Text="Download" IsLoading="true" />Disabled
<DPButton Text="Upgrade" IsDisabled="true" />Text Field
Unlabeled
<DPTextField @bind-Value="Text" />Standard
<DPTextField Label="Username" @bind-Value="Text" />Email
<DPTextField Label="Email" Type="TextFieldType.Email" @bind-Value="PropertyABC123" />Password
<DPTextField Label="Password" Type="TextFieldType.Password" @bind-Value="PropertyABC123" />Full Width
<DPTextField Label="Title" IsFullWidth="true" @bind-Value="PropertyABC123" />Loading
<DPTextField Label="Display Name" IsLoading="true" @bind-Value="PropertyABC123" />Disabled
<DPTextField Label="User ID" IsDisabled="true" @bind-Value="PropertyABC123" />Text Area
Unlabeled
<DPTextArea @bind-Value="Text" />Standard
<DPTextArea Label="Description" @bind-Value="Text" />Full Width
<DPTextArea Label="Description" IsFullWidth="true" @bind-Value="PropertyABC123" />Loading
<DPTextArea Label="Description" IsLoading="true" @bind-Value="PropertyABC123" />Disabled
<DPTextArea Label="Description" IsDisabled="true" @bind-Value="PropertyABC123" />Toggle Switch
Unlabeled
<DPToggleSwitch @bind-value="PropertyABC123" />Standard
<DPToggleSwitch Label="Airplane Mode" @bind-value="PropertyABC123" />Full Width
<DPToggleSwitch Label="Airplane Mode" IsFullWidth="true" @bind-value="PropertyABC123" />Framed
<DPToggleSwitch Label="Airplane Mode" IsFrameVisible="true" @bind-value="PropertyABC123" />Disabled
<DPToggleSwitch Label="Airplane Mode" IsDisabled="true" @bind-value="PropertyABC123" />Checkbox
Unlabeled
<DPCheckBox @bind-value="PropertyABC123" />Standard
<DPCheckBox Label="Remember Me" @bind-value="PropertyABC123" />Full Width
<DPCheckBox Label="Remember Me" IsFullWidth="true" @bind-value="PropertyABC123" />Framed
<DPCheckBox Label="Remember Me" IsFrameVisible="true" @bind-value="PropertyABC123" />Disabled
<DPCheckBox Label="Remember Me" IsDisabled="true" @bind-value="PropertyABC123" />Radio Button
Unlabeled
<DPRadioButton @bind-value="PropertyABC123" />Standard
<DPRadioButton Label="Option A" @bind-value="PropertyABC123" />Full Width
<DPRadioButton Label="Option B" IsFullWidth="true" @bind-value="PropertyABC123" />Framed
<DPRadioButton Label="Option C" IsFrameVisible="true" @bind-value="PropertyABC123" />Disabled
<DPRadioButton Label="Option D" IsDisabled="true" @bind-value="PropertyABC123" />Divider
<DPDivider />
