30+ controls built for modern apps
DotVVM Tailwind UI supports Tailwind CSS v3 and v4.
Basic Controls
Form Controls
Data & Layout
Navigation & Overlays
Buttons & Actions
The Button control renders a styled Tailwind button with support for types (primary, secondary, danger…), sizes, icons, and disabled states — all data-bindable. ButtonGroup and DropDownButton let you compose richer toolbars with minimal markup.
<t:Button Type="Primary" Text="Save"
Click="{command: Save()}" />
<t:Button Type="Secondary" Text="Cancel" />
<t:Button Type="Danger" Text="Delete"
Click="{command: Delete()}">
<PostBack.Handlers>
<t:ModalConfirmPostBackHandler
Message="Do you really want to delete the item?" />
</PostBack.Handlers>
</t:Button>
<t:ButtonGroup>
<t:Button Text="Day" />
<t:Button Text="Week" />
<t:Button Text="Month" />
</t:ButtonGroup>
<t:DropDownButton Text="Actions">
<t:DropDownItem Text="Save changes"
Click="{command: Save()}" />
<t:DropDownItem Text="Delete item"
Click="{command: Delete()}" />
</t:DropDownButton>Forms & Inputs
Build validated forms quickly using TextBox, ComboBox, CheckBox, and RadioButton wrapped in the Form layout control. All controls integrate with DotVVM validation out of the box.
<t:Form>
<t:TextBoxFormField LabelText="Name"
Text="{value: Name}" />
<t:ComboBoxFormField LabelText="Country"
DataSource="{value: Countries}"
SelectedValue="{value: Country}" />
<t:DateTimePickerFormField LabelText="Date"
SelectedDate="{value: Date}" />
<t:CheckBoxFormField Text="I accept the terms"
Checked="{value: AcceptTerms}" />
<t:Button Type="Primary" Text="Submit"
Click="{command: Submit()}" />
</t:Form>
<t:Alert Type="Success" Text="Thanks! Your demo form is ready."
Visible="{value: Submitted}" />GridView & DataPager
Display and page through data sets with the Tailwind-styled GridView and DataPager. Server-side sorting and paging work the same as with built-in DotVVM controls — just swap the tag prefix.
<t:GridView DataSource="{value: Orders}">
<dot:GridViewTextColumn HeaderText="#"
ValueBinding="{value: Id}"
Width="56px"
AllowSorting="true" />
<dot:GridViewTextColumn HeaderText="Customer"
ValueBinding="{value: Customer}"
AllowSorting="true" />
<dot:GridViewTextColumn HeaderText="Total"
ValueBinding="{value: Total}"
FormatString="c"
Width="84px"
AllowSorting="true" />
</t:GridView>
<t:DataPager DataSet="{value: Orders}" />Navigation: TopMenu & SideMenu
Build complete app shells with the TopMenu and SideMenu controls. Both are data-bindable, support active route highlighting, and render a responsive layout automatically.
<t:TopMenu>
<StartTemplate>
<t:SideMenuToggleButton />
</StartTemplate>
<EndTemplate>
<t:MenuDropDownItem Text="Actions" Icon="Bolt">
<t:MenuItem Text="Dashboard" Icon="Home"
NavigateUrl="/Tailwind/Block4?page=Dashboard" />
<t:MenuItem Text="Orders" Icon="ListBullet"
NavigateUrl="/Tailwind/Block4?page=Orders" />
<t:MenuItem Text="Customers" Icon="User"
NavigateUrl="/Tailwind/Block4?page=Customers" />
</t:MenuDropDownItem>
</EndTemplate>
</t:TopMenu>
<t:SideMenu>
<t:SideMenuSection Title="Workspace">
<t:MenuItem Text="Dashboard" Icon="Home"
NavigateUrl="/Tailwind/Block4?page=Dashboard" />
<t:MenuItem Text="Orders" Icon="ListBullet"
NavigateUrl="/Tailwind/Block4?page=Orders" />
<t:MenuItem Text="Customers" Icon="User"
NavigateUrl="/Tailwind/Block4?page=Customers" />
</t:SideMenuSection>
</t:SideMenu>Notifications & Alerts
Inform users without interrupting their workflow. The Notifications control shows toast messages triggered from the viewmodel, while Alert renders inline dismissible messages for validation feedback or status updates.
<t:Notifications Items="{value: Notifications}" />
<t:Button Type="Primary" Text="Save"
Click="{command: Save()}" />
<t:Button Type="Warning" Text="Review"
Click="{command: Review()}" />
<t:Alert Type="Success" Text="Changes saved successfully."
Visible="{value: ShowSuccess}" />
<t:Alert Type="Warning" Text="Please review the form."
Visible="{value: ShowWarning}" />