An aesthetic C# .NET Blazor component library that makes the UI seamless and entertaining to use.
dotnet add package ChatAIze.DopamineUIInstall-Package ChatAIze.DopamineUI<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.
For detailed examples, see our preview app.
<DPButton Text="Sign In" /><DPButton Text="Sign In" IsFullWidth="true" /><DPButton Text="Create Account" Style="ButtonStyle.Accent" /><DPButton Text="Delete Account" Style="ButtonStyle.Destructive" /><DPButton Text="Download" IsLoading="true" /><DPButton Text="Upgrade" IsDisabled="true" /><DPTextField @bind-Value="Text" /> <DPTextField Label="Username" @bind-Value="Text" /> <DPTextField Label="Email" Type="TextFieldType.Email" @bind-Value="PropertyABC123" /> <DPTextField Label="Password" Type="TextFieldType.Password" @bind-Value="PropertyABC123" /> <DPTextField Label="Title" IsFullWidth="true" @bind-Value="PropertyABC123" /> <DPTextField Label="Display Name" IsLoading="true" @bind-Value="PropertyABC123" /> <DPTextField Label="User ID" IsDisabled="true" @bind-Value="PropertyABC123" /><DPTextArea @bind-Value="Text" /> <DPTextArea Label="Description" @bind-Value="Text" /> <DPTextArea Label="Description" IsFullWidth="true" @bind-Value="PropertyABC123" /> <DPTextArea Label="Description" IsLoading="true" @bind-Value="PropertyABC123" /> <DPTextArea Label="Description" IsDisabled="true" @bind-Value="PropertyABC123" /><DPToggleSwitch @bind-value="PropertyABC123" /><DPToggleSwitch Label="Airplane Mode" @bind-value="PropertyABC123" /><DPToggleSwitch Label="Airplane Mode" IsFullWidth="true" @bind-value="PropertyABC123" /><DPToggleSwitch Label="Airplane Mode" IsFrameVisible="true" @bind-value="PropertyABC123" /><DPToggleSwitch Label="Airplane Mode" IsDisabled="true" @bind-value="PropertyABC123" /><DPCheckBox @bind-value="PropertyABC123" /><DPCheckBox Label="Remember Me" @bind-value="PropertyABC123" /><DPCheckBox Label="Remember Me" IsFullWidth="true" @bind-value="PropertyABC123" /><DPCheckBox Label="Remember Me" IsFrameVisible="true" @bind-value="PropertyABC123" /><DPCheckBox Label="Remember Me" IsDisabled="true" @bind-value="PropertyABC123" /><DPRadioButton @bind-value="PropertyABC123" /><DPRadioButton Label="Option A" @bind-value="PropertyABC123" /><DPRadioButton Label="Option B" IsFullWidth="true" @bind-value="PropertyABC123" /><DPRadioButton Label="Option C" IsFrameVisible="true" @bind-value="PropertyABC123" /><DPRadioButton Label="Option D" IsDisabled="true" @bind-value="PropertyABC123" /><DPDivider />