Every component, block and theme preset in Howdy UI. Each page draws its examples beside their code, and shows the command that copies it into your project.
Typography
Actions
Forms
InputText inputs, text areas, selects and labels.FieldForm fields: a label, a control, and the text that explains or corrects it.CheckboxCheckboxes and radio buttons.SwitchSwitches: an on-off setting that takes effect straight away.SliderSliders: pick a number from a range by dragging or with the arrow keys.Input groupInput groups: a text input with text, icons or buttons inside its border.Input otpOne-time code inputs: a box for each digit of a code sent by email or text message.SelectSelects: a button that opens a list of options to choose one from.CommandCommand menus and comboboxes: a search box over a list of options that narrows as you type.CalendarCalendars and date pickers: one date, a range, or several dates, over one month or a few side by side.QuestionnaireQuestionnaires: questions asked one at a time, with progress, back, skip and next, each answer checked before moving on, and the answers gathered at the end.
Layout
LayoutContainers, stacks, rows and separators.CardCards: a raised surface, with optional parts for a header, content and footer.SidebarAn application layout with a sidebar for navigation.EffectsSmall visual effects: a fade at the edges of a scrolling area, and a shimmer over text that is still arriving.Aspect ratioAspect ratios: a box that keeps its shape as it grows and shrinks, for images, video and maps.Scroll areaScroll areas: a region that scrolls on its own, with thin scrollbars in the theme's colours.ResizableResizable panels: panels side by side, or stacked, with handles that can be dragged to share the space differently.DirectionDirection: which way text runs, for a whole page or part of one.
Overlays
DialogDialogs, alert dialogs and sheets: content shown above the page, which is inert until the dialog closes.DrawerDrawers: a panel that slides up from the bottom of the screen, and can be dragged by its handle to resize or dismiss it.PopoverPopovers: a panel anchored to the button that opens it.TooltipTooltips: a short hint shown above an element while it is hovered or focused.MenuDropdown menus: a list of actions opened from a button.Context menuContext menus: a menu that opens where you right-click, or press the context menu key, inside an area.MenubarMenubars: a row of menus, as at the top of a desktop application.Hover cardHover cards: a preview that appears beside a link while the pointer rests on it or it has focus, such as a profile behind a name.
Navigation
TabsTabs: panels of content, one shown at a time, picked from a row of tabs.AccordionAccordions and collapsibles: sections that open and close.PaginationPagination: links to the previous, next and nearby pages of a list.BreadcrumbBreadcrumbs: the trail of pages above the current one.Navigation menuNavigation menus: a site's main links, some opening a panel of further links.
Data display
TableTables for rows of data.Data tableData tables: rows of records with sortable columns and selectable rows.ChartCharts: bar, line and area charts drawn as SVG on the server, in the theme's chart colours.BadgeBadges: short labels such as a status or a count.AvatarAvatars: a small round picture of a person, with initials when there is no picture or it fails to load.CarouselCarousels: slides side by side, one in view at a time, with previous and next buttons.ItemItems: rows of a list, each with an optional picture, a title and description, and actions.
Feedback
ProgressProgress bars: how much of some work is done, or that work is under way when how much is unknown.EmptyEmpty states: what to show where there is nothing yet, and what to do about it.AlertAlerts: a message that stands out from the content around it.ToastToasts: short notifications in a corner of the screen that go away on their own.LoadingSkeletons and spinners, for content that is on its way.
Chat
Blocks
App shellAn application shell: a sidebar of navigation, a top bar with the page heading and actions, and the page's content.Stat cardA stat card: a headline number, what it measures, and how it changed.Sign inA sign-in screen: email, password, "keep me signed in", and a link to create an account.Sign upA sign-up screen: name, email, password, a plan and the terms, with each problem shown beside its field.