There is no first-party Proper UI Figma kit yet — Proper UI is visually the Untitled UI design language, so this page is the manual, group-by-group translation from an Untitled UI Figma layer name to a registry entry and its real props.
Proper UI is visually the Untitled UI design language: same tokens, same spacing scale, same component variants. There is no first-party Proper UI Figma kit yet. If your team designs in an Untitled UI Figma file (the official kit, or a derivative), this page is the manual translation from a layer name in that file to a registry entry and the props that reproduce it — not an automated plugin, and not a guarantee that every Figma variant has a rendered counterpart. Where a mapping is approximate or a variant doesn't exist yet, it says so.
Read this alongside the registry itself: npx @properui/cli@latest add <slug> installs the file,
and /components/<slug> on the docs site shows every variant live. This page is the index that
gets a designer's eye from a Figma layer to the right one of those.
How to read the tables
Untitled UI's Figma layer names are usually <Group>/<Variant>/<Size> (e.g. Buttons/Primary/md,
Badges/Pill colors/Gray/md). Each row below gives that pattern, the registry slug it maps to, and
a real JSX snippet using the actual prop names from packages/ui/src/components — not
approximations. Where Untitled UI's Figma variant names don't literally match Proper UI's prop
values (rare — the two vocabularies were kept close on purpose), the row says so.
Foundations
| Figma layer | Registry slug | Maps to |
|---|---|---|
Featured icons/Light circle outline/md | featured-icons | <FeaturedIcon icon={Icon} theme="outline" size="md" color="brand" /> — theme is one of "light", "gradient", "dark", "outline", "modern", "modern-neue"; color one of "brand", "gray", "success", "warning", "error". |
Rating stars/5 stars | rating-badge-and-stars | packages/ui/src/components/foundations/rating — see the docs page for the exact star-count props. |
Payment icons/*, Social icons/* | (bundled with credit-cards / social-buttons) | foundations/payment-icons, foundations/social-icons — icon components, not a variant-driven single component; import the one matching the brand. |
Logos/* | (not a registry entry) | foundations/logo ships as library-internal marks for docs/marketing use, not a general-purpose logo component — bring your own product logo. |
| Typography scale | docs/theming | Untitled UI's type ramp (Display lg, Text md, …) is the text-display-lg/text-md/etc. utility classes from theme.css, documented on the Typography page, not a component. |
Base components
| Figma layer | Registry slug | Maps to |
|---|---|---|
Buttons/Primary/md | buttons | <Button color="primary" size="md">Label</Button> — color ∈ primary, secondary, tertiary, primary-destructive, secondary-destructive, tertiary-destructive, link-gray, link-color, link-destructive; size ∈ xs, sm, md, lg, xl. |
Button group/Default | button-groups | <ButtonGroup size="md"><ButtonGroup.Item>…</ButtonGroup.Item></ButtonGroup> — size ∈ sm|md|lg. |
Utility buttons/* | utility-buttons | ButtonUtility — icon-only chrome buttons (close, dots, expand). See its docs page for size/color. |
Social buttons/*, App store buttons/* | social-buttons, mobile-app-store-buttons | SocialButton, AppStoreButton — one component per brand/store, not a single enum-driven component. |
Badges/Pill colors/Gray/md | badges | <Badge type="pill-color" color="gray" size="md">Label</Badge> — type ∈ pill-color, badge-color, badge-modern (badge-modern only ships the gray color); color (for pill-color/badge-color) ∈ gray, brand, error, warning, success, slate, sky, blue, indigo, purple, pink, orange; size ∈ sm|md|lg. |
Badges/With dot, With flag, With avatar, With close X, With icon | badges (same file) | BadgeWithDot, BadgeWithFlag, BadgeWithImage, BadgeWithButton, BadgeWithIcon, BadgeIcon — sibling exports of the same badge type/color/size vocabulary. |
Badge groups/* | badge-groups | <BadgeGroup size={...}> wraps a Badge and a counter/company-name pattern; see docs page. |
Tags/* | tags | <TagGroup size="sm"><Tag>…</Tag></TagGroup> — size ∈ sm|md|lg; TagAvatar for the avatar variant. |
Toggle chips/* | toggle-chips | <ToggleChip size="md" color="gray">Label</ToggleChip> — color is BadgeColors (same palette as Badge). |
Dropdowns/*, Context menus/* | dropdowns, context-menus | Dropdown.Root / Dropdown.Menu / Dropdown.Item (namespace object — see Component API); Dropdown.DotsButton for the icon-only trigger. |
Inputs/Input field/Default/md | inputs | <Input size="md" label="…" placeholder="…" /> — size ∈ sm|md. Leading icon, dropdown, tooltip and prefix/suffix are all separate demo variants of the same Input. |
Inputs/Textarea | textareas | <TextArea size="md" label="…" /> — size ∈ sm|md. |
Inputs/PIN code field | verification-code-inputs | PinInput.Group / PinInput.Slot — compound; see Component API. |
Dropdowns/Select/Default/md | select | <Select size="md" label="…">…<Select.Item id="…">…</Select.Item></Select> — size ∈ sm|md|lg; Select.ComboBox for the searchable variant. |
Dropdowns/Select/Multi-select | multi-select | MultiSelect (MultiSelect.Item, .Footer, .EmptyState) — same size scale as Select. |
Checkbox/Simple/md | checkboxes | <Checkbox size="sm" label="…" /> — size ∈ sm|md (note: Untitled UI's Figma default is md; the component's default is sm). |
Radio buttons/Simple, Radio buttons/Group | radio-buttons, radio-groups | <RadioGroup size="sm"><RadioButton value="…" label="…" /></RadioGroup> — size ∈ sm|md. |
Toggles/Simple/md | toggles | <Toggle size="sm" label="…" /> — size ∈ sm|md; slim for the slimmer track variant. |
Sliders/Simple | sliders | <Slider labelPosition="top-floating" minValue={0} maxValue={100} /> — labelPosition ∈ default|bottom|top-floating. |
Avatars/Single/Photo/md | avatars | <Avatar size="md" src="…" status="online" verified badge={<Icon />} /> — size ∈ xs|sm|md|lg|xl|2xl; status ∈ online|offline. |
Tooltips/Default | tooltips | <Tooltip title="…" placement="top" arrow><TooltipTrigger>…</TooltipTrigger></Tooltip>. |
Progress indicators/Circular, Linear | progress-indicators | ProgressBar (linear, with value/min/max) — the circular variant is a separate demo in the same file. |
Loading indicators/* | (see application table — loading-indicators) | |
Skeleton/* | skeleton | <Skeleton className="…" />, <SkeletonText lines={3} />. |
Popovers/Simple, Hover cards/* | popovers, hover-card | Popover — positioned overlay primitive most other compounds (Select, Dropdown, CommandMenu) build on. |
Text editor/Toolbar | text-editors | TextEditor.Toolbar, .Bold, .Italic, .AlignLeft, … — full slot list in Component API. |
Credit cards/*, QR codes/*, Illustrations/*, Video players/* | credit-cards, qr-codes, illustrations, video-players | Static/media assets and the VideoPlayer component (size ∈ keyof styles.sizes, type for the source kind). |
Application components
| Figma layer | Registry slug | Maps to |
|---|---|---|
Alerts/Info, Success, Warning, Error | alerts | <Alert color="success">…</Alert> — color is the same keyof featuredIcons palette as FeaturedIcon (brand, gray, success, warning, error). |
Callouts/* | callouts | <Callout>…</Callout>. |
Empty states/Simple, Illustration, Featured icon | empty-states | EmptyState.Header, .Illustration, .FeaturedIcon, .Title, .Description, .Footer — compound; size ∈ sm|md|lg on the icon slot. |
Metrics/Simple, Modern | metrics | <MetricCard type="simple">…</MetricCard> — card type ∈ modern|simple; footer type (MetricFooterType) matches. |
Card headers/Simple/md | card-headers | <CardHeader size="md">…</CardHeader> — size ∈ sm|md. |
Section headers/*, Section footers/* | section-headers, section-footers | Slot-composed headers/footers for a content section — see the docs page for the exact children shape. |
Content dividers/Single line, Dual line, With icon, With text | content-dividers | <ContentDivider type="single-line">…</ContentDivider> — type ∈ single-line|dual-line (icon/text variants render as children of dual-line). |
Inline CTAs/* | inline-ctas | <InlineCTA>…</InlineCTA>. |
Loading indicators/Line simple, Line spinner, Dot circle | loading-indicators | <LoadingIndicator type="line-simple" size="…"> — type ∈ line-simple|line-spinner|dot-circle. |
Progress steps/Numbered, Icon, Dot, Line, Minimal | progress-steps | <ProgressSteps type="number" orientation="horizontal">…</ProgressSteps> (plus .Minimal) — a step's own status ∈ complete|current|incomplete|locked. |
Tabs/Button group, Underline, Line | tabs | <TabList type="button-brand" orientation="horizontal" size="md"><Tab .../></TabList> — type ∈ button-brand|button-gray|button-border|button-minimal|underline|line; size ∈ sm|md. |
Breadcrumbs/Text, Icon, With account | breadcrumbs | <Breadcrumbs type="text"> (type ∈ the BreadcrumbsType union — text/icon styles) with .Item, .Collapsed, .Account, .AccountMenu. |
Pagination/Default, Dot, Line | pagination | Pagination.Root/.Item/.Ellipsis (default), plus the pagination-dot/pagination-line demo variants of the same namespace. |
Tables/Simple | tables | <Table> with .Header, .Row, .Cell, .Body, .Head — size ∈ sm|md on the surrounding TableCard. |
Tree/* | tree-views | TreeView.Item / .ItemContent — size (TreeViewSize), hasGuides. |
Filter bars/* | filter-bars | FilterBar.Root/.FilterRow/.FilterButton/.FilterDropdown/.FilterIconButton. |
Command menus/* (⌘K palette) | command-menus | CommandMenu.Trigger/.Popover/.Search/.List/.Group/.Item/.Shortcut/.Empty/.Footer. |
Date pickers/*, Calendars/* | date-pickers, calendars | DatePicker — size follows Button's size scale (ButtonProps["size"]). |
Modals/*, Slideout menus/*, Confirm dialogs/* | modals, drawers, confirm-dialogs | All three are slot compositions over React Aria Dialog/ModalOverlay (Modal, Dialog, ModalOverlay; SlideoutMenu.Header/.Content/.Footer; ConfirmDialog's own width prop) rather than single enum-driven components — match by content, not by a variant prop. |
Notifications/Toast | notifications | Notification + NotificationsProvider — see docs page for placement/variant. |
Messaging/Incoming, Outgoing | messaging | <Message direction="incoming" status="online"> with .Bubble, .Quote, .File, .Audio, .Image, .LinkPreview, .LinkCard, .Reactions, .Typing; MessageList.Divider groups by date. |
Activity feed/* | activity-feeds | ActivityFeed.Item (href, status) with .Link, .File, .Labels, .Message, .Quote. |
Page headers/Simple, With banner, With avatar | page-headers | PageHeader.Banner/.Content/.Heading/.Title/.Description/.Avatar/.Actions/.Footer. |
Description lists/* | description-lists | DescriptionList.Item/.Term/.Details. |
File upload/Drop zone, List item | file-uploaders | FileUpload.Root/.DropZone/.List — a list item's type matches FileIcon's file-type union. |
Image picker/* | image-pickers | ImagePicker.Provider/.DropZone/.FillModeSelect/.RotateButton/.AdjustmentSliders. |
Color picker/* | color-pickers | ColorPicker.Provider/.Panel/.Area/.HueSlider/.AlphaSlider/.Swatches/.Palette/.Preview. |
Gradient picker/* | gradient-pickers | GradientPicker.Provider/.Area/.Slider/.TypeSelect/.StopList/.SavedGradients. |
Carousel/* | carousels | Carousel.Root (orientation ∈ horizontal|vertical)/.Content/.Item/.PrevTrigger/.NextTrigger/.IndicatorGroup. |
Code snippet/* | code-snippets | CodeSnippet — syntax-highlighted read-only block with a copy button. |
Charts/Line, Bar, Pie, Radar, Area, Gauges | line-bar-charts, pie-charts, radar-charts, area-charts, activity-gauges | One registry slug per chart family, each its own component (not one Chart with a type prop) — match by shape, not by name. |
Navigation/Header, Navigation/Sidebar | header-navigations, sidebar-navigations | Full nav shells assembled from Button, Avatar, Dropdown, Badge, etc. — see the docs page for the slot layout, since these are page-level, not single-prop, components. |
The newer application-layer groups map one to one by name and have no Untitled UI Figma
counterpart yet: menubar, number-input, tag-input, hover-card, code-editor, data-table,
gantt, kanban, resizable, scroll-area, sortable-list, stepper, timeline and
ai-elements. Each is its own registry entry and docs page; a Figma layer that seems to point at one
of them should be treated as unmapped until the kit gains a matching component.
Marketing sections
Untitled UI's marketing page groups (Hero sections, Feature sections, Pricing sections,
Testimonial sections, CTA sections, FAQ sections, Team sections, Blog sections,
Contact sections, Careers sections, Social proof sections, Content/rich text sections,
Metrics sections, Newsletter CTA sections, Header sections, Header navigations, Footers,
Banners) map one-to-one to the marketing registry slugs of the same name
(hero-header-sections, features-sections, pricing-sections, testimonial-sections,
cta-sections, faq-sections, team-sections, blog-sections, contact-sections,
careers-sections, social-proof-sections, content-rich-text-sections, metrics-sections,
newsletter-cta-sections, header-sections, header-navigations, footers, banners). Unlike a
base or application component, a marketing section isn't one component with a size/color prop —
each Figma variant inside a group (Simple centered, With image, Split with form, …) is its own
named export, e.g. HeroSplitWithImage01, one per file under
packages/ui/src/components/marketing/<slug>/. Match by layout, not by prop: open
/marketing/<slug> and pick the variant whose structure matches the Figma frame, then install it
by name with add.
Whole-page examples
Untitled UI's page templates (a full dashboard, settings screen, login page, 404, pricing page, …)
map to the app-examples and marketing-examples registry sections the same way: one exported
component per page variant (packages/ui/src/components/app-examples/dashboards/dashboard-04.tsx,
for example), not a single parameterised page component. These are already full compositions of the
base/application/marketing pieces above, so there's nothing further to map prop-by-prop — pick the
closest variant on /components/<slug> (app examples) or /marketing/<slug> (marketing examples)
and start from its source.