Umbraco UI components

February 27, 2026 ยท View on GitHub

  • :hammer_and_wrench: - WIP in ./src/components
  • :package: - released
  • without emoji - untouched idea

Basics

  • :hammer_and_wrench: Action bar (maybe just button-group, used in Cards, Lists etc. ust a round cornered box holding some buttons)
  • :package: Avatar
  • :package: Avatar Group
  • :package: Badge
  • :package: Button
  • :package: Button Group
  • Button Grid (use for Icon selector, Colors)
  • :hammer_and_wrench: Cards (One base and maybe more specific card types, concepts: Node, Media, Image, File, Folder, DocumentType, User, Member, Form, DataType, CloudProject...)
  • :hammer_and_wrench: Card Grid (Show any type of card)
  • Card Grid Create Button
  • :hammer_and_wrench: Caret symbol
  • :package: Checkbox
  • Color picker
  • :hammer_and_wrench: Date & Time picker
  • :hammer_and_wrench: Base Dropdown (Open towards, picked entry-display and unfold-display.)
  • :hammer_and_wrench: FileInput Dropzone
  • :hammer_and_wrench: FileInput Input
  • :hammer_and_wrench: FileInput Preview (Form data, displays one of three symbols:...)
  • :hammer_and_wrench: File Symbol
  • :hammer_and_wrench: Folder Symbol
  • :hammer_and_wrench: Image-File Symbol (A frame on a thumbnail)
  • :hammer_and_wrench: Icon
  • :hammer_and_wrench: Inline create button (Vertical, Horizontal. the one from BL and MediaPicker v3)
  • :package: Input
  • :package: Loader
  • :hammer_and_wrench: Locked part (often used for locking the Alias)
  • :hammer_and_wrench: Menu item
  • :hammer_and_wrench: Menu item list
  • :hammer_and_wrench: More symbol ( three dots )
  • Node Display (Today called: Node-Preview, this is a base component that will be used for creating specific types for Content, Media, Image, File, Folder, DocumentType, User, Member, Form, DataType, etc.)
  • Node Display List
  • :hammer_and_wrench: Overflow container
  • :hammer_and_wrench: Password input
  • :package: Progress bar
  • :package: Progress circle
  • :package: Radio
  • Rich text Editor
  • :package: Single Slider
  • Range Slider
  • :package: Tag
  • :package: Table
  • :package: Toggle
  • TextAreaField
  • Search input

Fragments

  • :hammer_and_wrench: Dialog
  • Notification
  • Notification List
  • Tooltip
  • Tooltip button (Little i, which can be clicked to get more info)
  • :package: Breadcrumbs
  • Overlay
  • Overlay Manager (ability to stack overlays, left, right, animate in and out)
  • Tree
  • :package: Tabs
  • Typeahead
  • :hammer_and_wrench: Pagination