Components

Every GoodUnited component, built on shadcn naming and styled only with GoodUnited tokens. Open one to see its variants, sizes, states, guidance and options.

Figma: 10 / Components and 11 / Components / Accordion
AccordionThe source accordion: SourceList, Source, Group and DetailRow with count badges.AvatarPeople and organizations, with a neutral placeholder and overlapping groups.BadgeStatus, labels and counts, including the GoodUnited status set and score badge.ButtonActions in five variants and six sizes.CardA raised container with a header, content and footer.CheckboxSelect one or more independent options.ChecklistItemComplete, incomplete and info marks beside a line of copy.DatePickerSingle dates, day ranges and month ranges with presets.DialogFocused tasks and confirmations: Dialog and AlertDialog.DropdownMenuA list of actions or options opened from a trigger.FieldA label, a control and helper or error text, stacked or in a row.InputSingle-line text entry, including the search input group.LabelForm labels and inline labels with an icon.MetricsMetric cards, values, summaries and count badges.NotificationIndicatorA small ring that marks new activity.PopoverRich content, such as filters, anchored to a trigger.PostEngagementViews, likes and comments for a social post.RadioGroupChoose exactly one option from a short list.SelectChoose one value from a list in a compact trigger.SeparatorA 1px rule between groups of content.SidebarNavigation buttons, sub buttons and actions for the app sidebar.SwitchTurn a single setting on or off immediately.TableRows of records with sortable headers, cells, pagination and link cards.TabsSegmented tabs and icon tabs for switching views.TextareaMulti-line text entry that grows with its content.TooltipA short hint on hover or focus.TreeToggleExpand and collapse a row in a tree.

GoodUnited design system. The Figma file is the source of truth for every color, type size and component.

Made with Modulify