Skip to main content

Components Overview

This page lists every component currently documented on this site — i.e. components whose design spec has been finalized in Figma and whose implementation has been validated against @plaud/design.

Components that are exported by @plaud/design but have not yet been finalized in Figma are intentionally not listed here.

  • Source of truth: this site's docs/components/
  • Co-documented: shares a page with another component (e.g. MultiSelect inside Select, RangePicker inside DatePicker)

ComponentExportDocs
AI ButtonAIButtonAI Button
BadgeBadgeBadge
BreadcrumbBreadcrumbBreadcrumb
ButtonButton, buttonVariantsButton
CarouselCarousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarouselCarousel
CheckboxCheckbox, Controls.CheckboxCheckbox
CircularProgressCircularProgress, ProgressIndicators.CircularProgressCircularProgress
DatePickerDatePickerDatePicker
Dialog (alias Modal)Dialog, ModalDialog
DropdownMenuDropdownMenuDropdownMenu
Feedbacks (alias Toast)Feedbacks, Toast, toast, ToasterFeedbacks (Toast)
FullScreenLoadingFullScreenLoading, ProgressIndicators.FullScreenLoadingFullScreenLoading
HoverCardHoverCard, Tips.HoverCardHoverCard
ImageViewerImageViewerImageViewer
InputInput, Input.Search, Input.PasswordInput
Menu (sidenav)Menu, MenuItem, MenuGroupMenu
MultiSelectMultiSelectCo-documented in Select
PageControlsPageControlsPageControls
PopoverPopover, Tips.PopoverPopover
RadioGroupRadioGroup, RadioGroupItem, Controls.RadioGroupRadioGroup
RangePickerRangePickerCo-documented in DatePicker
SelectSelectSelect
Sheet (alias Drawer)Sheet, DrawerSheet
SkeletonSkeleton, ProgressIndicators.SkeletonSkeleton
SpinnerSpinner, ProgressIndicators.SpinnerSpinner
SwitchSwitchSwitch
TableTableTable
TabsTabs, TabsList, TabsTrigger, TabsContentTabs
TextareaTextareaTextarea
TimePickerTimePickerTimePicker
TooltipTooltip, Tips.TooltipTooltip
TourTour, Tips.TourTour
TreeTreeTree
UploadUploadUpload

Summary

  • Documented pages: 32
  • Components covered: 34 (Select and DatePicker each cover one extra co-documented component)

When adding a new component to this site, follow the structure defined in packages/design-site/CLAUDE.md: component overview → basic usage → main matrix → supplementary capabilities → size / token table → Props → advanced.