All React Components | krz-ui

Here you can find all the components available in the library. Each page has a live preview and usage.

All components

AccordionVertically stacked panels that expand and collapse.AlertFour intents, with titles, actions and dismiss.Alert DialogA confirmation dialog that needs an explicit yes or no.Aspect RatioKeeps media at a fixed width-to-height ratio.AvatarImages, generated initials, status and groups.BadgeSoft, solid and outline, with status dots.BreadcrumbShows the current page's location in a hierarchy.ButtonFive variants, three sizes, icons and loading state.CalendarA month grid for picking a single date or a range.CardElevated, outline, glass and gradient border.CarouselSwipeable slides with arrows, dots and autoplay.CheckboxChecked, unchecked and indeterminate, with labels.CollapsibleShows and hides a section with an animated height.ComboboxA select you can type into to search the options.CommandA searchable command palette, inline or as a ⌘K dialog.Context MenuA menu of actions opened with a right-click.Date PickerA field that opens a calendar to pick a date or range.DrawerA panel that slides in from any edge of the screen.Dropdown MenuA menu of actions opened from a trigger button.Empty StateA friendly placeholder for screens with no data yet.File UploadA drag-and-drop zone with file type and size checks.Hover CardA rich preview card shown when hovering a link.InputLabels, hints, validation and icons.Input OTPSeparate boxes for entering a one-time code.KbdDisplays a keyboard key or shortcut.LabelAn accessible form label with required and hint markers.ModalAnimated, focus-trapped, closes on Escape.Navigation MenuA site nav bar whose items open panels of links.Number InputA numeric field with − / + buttons and keyboard stepping.PaginationPage navigation with ellipsis for long ranges.PopoverA floating panel of interactive content, anchored to a trigger.ProgressDeterminate, indeterminate and striped progress bars.Radio GroupPick one option from a set, as a list or cards.RatingStar rating, interactive or read-only with half stars.Scroll AreaA scrolling container with slim, themed scrollbars.SelectCustom dropdown select with labels, hints and validation.SeparatorA horizontal or vertical divider, optionally labelled.SkeletonPlaceholders shown while content loads.SliderPick a value or a range by dragging along a track.SpinnerA loading indicator in four sizes.StepperShows progress through the steps of a flow.SwitchControlled or uncontrolled, with labels.TableRows and columns with sorting, selection and an empty state.TabsUnderline, pills and enclosed, with keyboard navigation.Tag InputTurns typed entries into removable tags.TextareaMulti-line input with auto-resize and a character count.TimelineA vertical list of events, like an activity feed.ToastBrief notifications, triggered from anywhere with useToast.ToggleTwo-state buttons, alone or in a group.TooltipFour placements, shown on hover and focus.