Contributing
DocumentationGitHub
  • Contributing to Umbraco
  • Hacktoberfest 2024
    • Contributing to Hacktoberfest
  • Documentation
    • How to contribute
      • Submit a Pull Request
      • Submit Feedback
      • Create a new version of an article
    • Style Guide
      • Markdown Conventions
      • Code Blocks
      • Structure
    • UmbracoDocs on GitHub
  • Umbraco-CMS
    • How to contribute
      • Before you start
      • Finding your first issue: Up for grabs
      • Building the codebase
      • Unwanted changes
      • Other ways to contribute
    • Umbraco-CMS on GitHub
  • UI Library
    • How to contribute
    • Components
    • Umbraco.UI on GitHub
  • Backoffice Project
    • How to contribute
    • Umbraco.CMS.Backoffice on GitHub
Powered by GitBook
On this page
  • Basics
  • Fragments
  • Navigation

Was this helpful?

Export as PDF
  1. UI Library

Components

PreviousHow to contributeNextHow to contribute

Last updated 7 months ago

Was this helpful?

  • 🛠️ - WIP in

  • 📦 - released

  • without emoji - untouched idea

Basics

  • 🛠️ Action bar (maybe just button-group, used in Cards, Lists etc. ust a round cornered box holding some buttons)

  • 📦 Avatar

  • 📦 Avatar Group

  • 📦 Badge

  • 📦 Button

  • 📦 Button Group

  • Button Grid (use for Icon selector, Colors)

  • 🛠️ Cards (One base and maybe more specific card types, concepts: Node, Media, Image, File, Folder, DocumentType, User, Member, Form, DataType, CloudProject...)

  • 🛠️ Card Grid (Show any type of card)

  • Card Grid Create Button

  • 🛠️ Caret symbol

  • 📦 Checkbox

  • Color picker

  • 🛠️ Date & Time picker

  • 🛠️ Base Dropdown (Open towards, picked entry-display and unfold-display.)

  • 🛠️ Dropdown Select List (A dropdown with select component baked in)

  • 🛠️ FileInput Dropzone

  • 🛠️ FileInput Input

  • 🛠️ FileInput Preview (Form data, displays one of three symbols:...)

  • 🛠️ File Symbol

  • 🛠️ Folder Symbol

  • 🛠️ Image-File Symbol (A frame on a thumbnail)

  • 🛠️ Icon

  • 🛠️ Inline create button (Vertical, Horizontal. the one from BL and MediaPicker v3)

  • 📦 Input

  • 📦 Loader

  • 🛠️ Locked part (often used for locking the Alias)

  • 🛠️ Menu item

  • 🛠️ Menu item list

  • 🛠️ 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

  • 🛠️ Overflow container

  • 🛠️ Password input

  • 📦 Progress bar

  • 📦 Progress circle

  • 📦 Radio

  • Rich text Editor

  • 📦 Single Slider

  • Range Slider

  • 📦 Tag

  • 📦 Table

  • 📦 Toggle

  • TextAreaField

  • Search input

Fragments

  • 🛠️ Dialog

  • Notification

  • Notification List

  • Tooltip

  • Tooltip button (Little i, which can be clicked to get more info)

Navigation

  • 📦 Breadcrumbs

  • Overlay

  • Overlay Manager (ability to stack overlays, left, right, animate in and out)

  • Tree

  • 📦 Tabs

  • Typeahead

  • 🛠️ Pagination

./src/components