Components

Base

The everyday building blocks.

Question

AccordionDisclosure rows for FAQs and settings groups, built on native <details>.

AnnouncementA small dismissible card for product news, used in the sidebar footer.

ORPBLS

AvatarRepresents a person or team with initials, an icon or a photo.

NewActive

BadgeShort status or category label.

1. Docs
2. Button

BreadcrumbShows the page location in the hierarchy.

ButtonCancel

ButtonTriggers an action or event, such as submitting a form, opening a dialog or saving changes.

DayWeek

Button GroupA row of related toggle buttons for view switchers and filters.

Checked

CheckboxFor independent options and multi-select.

AllDesign

ChipInteractive filter or choice chip.

Oct 27, 2026

Date PickerDate field that opens a month calendar with Cancel / Apply.

OR

DividerSeparates content groups.

ProfileLog out

DropdownA menu of actions opened from a button.

Click to upload

File UploadDrag-and-drop area with click-to-browse, plus a queue of files with progress.

InputSingle-line text field with label, optional required marker, hint and error message.

Input OTPOne-time code input.

Link ButtonText actions styled like links, plus the square icon button and the close button.

NotificationA dismissible notification with a status icon or avatar, actions and an optional countdown.

123

PaginationFull for desktop tables, Simple when the count matters more than direct access.

Option

RadioOne choice from 2–6 options shown together.

MonthYear

Segmented ControlSwitches between 2–5 views of the same content.

Olivia Rhye

SelectSingle-select dropdown with label, hint and error.

SliderSingle value or range slider with label and live value.

On

SwitchToggle for settings that take effect immediately.

Name	Role
Olivia	Admin

TableData table with sortable columns, row selection, status badges, end-aligned numbers and row actions.

OverviewActivity

TabsSwitch between sections of related content.

TextareaMulti-line text field with label, hint and character counter.

Tooltip

TooltipShort, non-essential hint on hover and focus.

DesignFigma

TagNeutral label for categories, applied filters and user-entered values.

Filter ChipInteractive choice chip for quick filters above lists and tables.

View all →

LinkInline or standalone text link.

SearchSearch field with leading icon, clear button when filled and an optional keyboard shortcut hint.

DesignUX

ComboboxSearchable select.

Progress BarDeterminate progress for uploads and onboarding.

Progress CircleCircular determinate progress for dashboards and uploads.

SkeletonLoading placeholder that mirrors the final layout, with a shimmer.

SpinnerIndeterminate loading indicator used by every Pending state.

Saved

AlertInline message about the current page or task.

Message archived

ToastBrief confirmation that appears at the bottom-start corner and dismisses after 5 seconds.

Pixels 2.0 is here

BannerFull-width, page-level announcement above the header.

OR

PB

List ItemRow for people, files or settings lists with leading slot, title, supporting text, meta and chevron.

Revenue$45k

StatKPI tile: label, value and a trend badge against a comparison period.

CardContainer for a related group of content with header, content slot and footer actions.

2. 2
3. 3

StepperShows progress through a multi-step flow.

Empty StateShown when a list, table or search has nothing to display.

Invite your team

PopoverNon-modal panel anchored to a trigger for rich hints, onboarding steps or small forms.

DrawerSide panel for filters, details and settings that keeps page context.

Type a command⌘K

Command PaletteGlobal ⌘K launcher for navigation and actions.

Nav ItemSidebar link with an icon, label and optional count.

Top BarApplication header with logo, primary navigation, search, utilities and account.

Store BadgeDownload badges for the App Store and Google Play in black and white, two sizes.

CarouselScroll-snap slides with dots and previous/next buttons.

Tree ViewA file tree with folders, guide lines and badges.

G  Sign in with Google

Social ButtonSign in with a third-party account.

ModalDialog that blocks the page for a focused task or confirmation.

Meeting Scheduler ProA calendar beside time-slot radios with a booking confirmation.

Advanced Pro

Pro product parts: commerce, finance, chat, content and mobile.

Metric Card ProKPI tile with a trend badge, sparkline, icon, progress or comparison.

Activity Item ProA feed entry for comments, status changes, files, assignments and system events, with a timeline rail and unread highlight.

Notification Item ProInbox row for mentions, invites, alerts and success messages, with an unread dot.

Announcement Bar ProSite or app-wide message in six tones, subtle or solid, as a full bar or a floating pill.

Inline Hint ProA short contextual message in six tones: subtle (tinted), outline (bordered) or accent (start bar).

File Upload Item ProOne file in an upload list with type badge, progress, size and time left.

File Dropzone ProA drop zone that takes clicks and dragged files, with hover, dragging and disabled states.

Stepper Card ProNumbered steps with titles and hints in a card, in brand, success or neutral tone.

Empty Card ProZero-data, no-results, error and success placeholders in a card, a dashed box or with no container.

Code Snippet ProCode block with a title or tabs, line numbers and a copy button.

Chat Message ProUser and assistant messages as bubbles or flat text, with time and a typing state.

Chat Composer ProA prompt input with attach, voice, model chip and send.

Kanban Card ProTask card with priority, tag, description, team, due date, and optional cover or progress.

Product Card ProProduct tile with image, discount, wishlist, rating, prices and add to cart.

Cart Item ProLine item for a cart or order summary with quantity stepper, remove and prices; out-of-stock state.

Pricing Tier ProPlan card with price, description, call to action and features.

Testimonial ProCustomer quote as a card, a large centred quote or compact; default, filled or inverse.

Payment Card ProBank or credit card visual in brand, dark, gradient, emerald, rose and indigo.

Transaction Row ProBanking ledger line for income, expense, pending and failed payments, with amount and status badge.

Calendar Event ProEvent for day and week views as a block or a chip, in five tones; past events are muted.

Job Listing ProCareers card or row with role, team, location, type, salary and apply.

Blog Card ProArticle preview with cover, category, read time, title, excerpt and author.

Team Member ProPeople card with photo or initials, name, role, bio and contact links.

Mobile Header Bar ProTop app bar for mobile: title, large title or search, light or dark.

Mobile Tab Bar ProBottom navigation for mobile apps, docked or floating, light or dark, with or without labels.

Ticker Item ProMarket quote with symbol, price, change and a tiny trend line.

Feature Item ProMarketing feature with an icon tile, stacked, inline or in a card, in five tones.

Big Stat ProA big number with a label for marketing pages: default, bordered, brand, filled or inverse; start or centred.

Avatar Upload ProProfile photo picker with preview, upload and remove; circle or rounded.

Placeholder Logo ProFictional brand marks for logo clouds and demos in mono, brand or muted.

Rich Separator ProDivider with a label, a button or an icon; solid or dashed; content at the centre, start or end.

Featured Icon ProAn icon in a tinted tile: six tones × subtle, solid or outline × md or lg.

Glass Pro

Pro frosted surfaces for content over imagery, video and gradients.

Glass Panel ProThe frosted surface every glass part is built on, in light, dark and brand tints.

Glass Input ProSearch, text and password fields on glass with a shortcut hint and show/hide.

Glass Tab Bar ProBottom tab bar on glass with labels or icons only.

Glass Sidebar ProApp sidebar on glass, expanded or collapsed, with a count and the account.

Glass Menu ProActions menu on glass with shortcuts and a danger row.

Glass Segmented Control ProA two to four option switcher on glass.

Glass Popover ProA short frosted tooltip or popover label with a shortcut.

Glass Chip ProStatus, filter, avatar and count chips on glass.

Glass Media Player ProA now-playing card with cover, title, artist, play button and scrubber.

Glass Profile Card ProProfile card with avatar, name, role, three stats and a follow toggle.

Glass Auth Card ProSign-in and sign-up forms on glass with remember me and social sign-in.

Glass Pricing Card ProA plan card on glass; featured uses the solid call to action.

Glass Command Palette ProCommand palette on glass with grouped results, empty state and key hints.

Glass Notification ProA message notification on glass with reply and mark read.

Glass Dock ProAn app dock or a floating formatting toolbar of glass icon buttons.

Glass Control Tile ProControl-centre tiles: toggle, slider and connectivity.

Glass Progress Card ProFile upload progress on glass, uploading or done.

Glass Widget ProHome-screen widgets on glass: weather, wallet and fitness.

Glass Bottom Sheet ProAn action sheet on glass with a grabber, actions, a danger row and cancel.

Glass Form Control ProSwitch, checkbox and radio rows on glass with label and hint.

Glass Chat ProIncoming and outgoing chat bubbles and a composer on glass.

Glass Banner ProCookie consent and announcement banners on glass.

Glass Elements ProThe glass building blocks: buttons, icon buttons, badges, avatars, controls, segments, tab items, fields, list items and progress.

Blocks

Larger assemblies, ready to drop in.

Auth CardSign-in and sign-up cards with social providers, email fields and a call to action.

Data TableA data table with search, a region filter, sortable columns, row selection and pagination.

HomeProjects

SidebarPrimary app navigation.

Agent ThinkingThinking indicators for AI products: bouncing dots, an orbit and a spark, each with a shimmering label.

Agent Progress ProAn agent run as a checklist: done, running and queued steps with a progress bar and elapsed time.

AI Composer ProA prompt composer with file chips, a model picker, tool toggles and a send button.

Month Calendar ProA month view with colored event pills, today marker and month switcher.

Settings Modal ProA settings dialog with a section sidebar, form rows and switches.

Composer Loader ProA loading state that wraps an input: a soft light band orbits the rim while the product works.

Task List ProA streaming task log: steps reveal one by one, with a shimmering title on the running step.

Alerts Card ProA scrollable alert feed with tinted icon circles and date pills.

Profile Card ProA profile card with avatar and label/value detail rows.

Industry Pro

Pro dashboard blocks for finance, adtech, healthcare, HR, e-commerce, projects and AI.

Finance · Balance Overview ProFinance block.

Finance · Cash Flow ProFinance block.

Finance · My Cards ProFinance block.

Finance · Recent Transactions ProFinance block.

Finance · Quick Transfer ProFinance block.

Finance · Spending by Category ProFinance block.

Finance · Savings Goals ProFinance block.

Finance · Upcoming Bills ProFinance block.

Finance · Market Watch ProFinance block.

Finance · Currency Converter ProFinance block.

Adtech · Campaign KPIs ProAdtech block.

Adtech · Campaigns Table ProAdtech block.

Adtech · Spend Pacing ProAdtech block.

Adtech · Channel Mix ProAdtech block.

Adtech · Audience ProAdtech block.

Adtech · Top Creatives ProAdtech block.

Healthcare · Vitals ProHealthcare block.

Healthcare · Patient Summary ProHealthcare block.

Healthcare · Appointments ProHealthcare block.

Healthcare · Lab Results ProHealthcare block.

Healthcare · Bed Occupancy ProHealthcare block.

Healthcare · Medications ProHealthcare block.

HR · People KPIs ProHR block.

HR · Employee Directory ProHR block.

HR · Time-off Requests ProHR block.

HR · Hiring Pipeline ProHR block.

HR · Celebrations ProHR block.

HR · Headcount by Department ProHR block.

E-commerce · Product Grid ProE-commerce block.

E-commerce · Order Summary ProE-commerce block.

E-commerce · Checkout Form ProE-commerce block.

E-commerce · Order Tracking ProE-commerce block.

E-commerce · Category Cards ProE-commerce block.

Projects · Kanban Board ProProjects block.

Projects · Project List ProProjects block.

Projects · Week Calendar ProProjects block.

Projects · Team Workload ProProjects block.

Projects · Roadmap ProProjects block.

AI · AI Chat Panel ProAI block.

AI · Prompt Starters ProAI block.

AI · Insight Card ProAI block.

AI · Chat History ProAI block.

Website Pro

Pro marketing sections: navigation, heroes, features, pricing, FAQ and footer.

Website · Top navigation ProWebsite section.

Website · Hero Split ProWebsite section.

Website · Hero Centered ProWebsite section.

Website · Logo Cloud ProWebsite section.

Website · Feature Grid ProWebsite section.

Website · Feature Split ProWebsite section.

Website · Stats ProWebsite section.

Website · Testimonials ProWebsite section.

Website · Pricing ProWebsite section.

Website · FAQ ProWebsite section.

Website · CTA ProWebsite section.

Website · Newsletter ProWebsite section.

Website · Footer ProWebsite section.

Website · Team ProWebsite section.

Website · Blog ProWebsite section.

Charts

Data cards for dashboards.

Stat CardsA row of KPI cards with count-up values and delta chips.

Revenue ChartA year of revenue as an area against the year before, with a count-up headline, delta chip and hover readout per month.

Orders ChartMonthly orders as bars, this year beside last year, with a period switch.

Steps Chart ProSeven daily bars on tracks, a week switcher, a fixed weekly total and a value bubble on the hovered bar.

Activity Rings ProConcentric goal rings that draw in, with stat tiles.

Sleep Score ProA segmented score ring with sub-score rows.

Funnel Chart ProA sign-up funnel: stages flow into each other in accent shades, with conversion pills, stage tiles and a range switch.

Earnings Chart ProMonthly earnings as rounded bars on tracks, with a weekly, monthly and yearly switch, a count-up total and hover focus.

Contributions ProA contributions heat grid that follows the accent color.

Line ChartTwo series as lines with a curved or sharp switch, a count-up total and a hover readout.

Bar ListRanked rows with a share bar behind each label, tabs for the breakdown and a show-more toggle.

Radar Chart ProTwo series on a radar with a legend and a headline that follows the hovered axis.

Radial Gauge ProA half gauge with ticks and a count-up percentage toward a single goal.

Heatmap ProA day-by-hour matrix in accent shades with a hover readout and legend.

Stage Bars ProFunnel stages as rounded pills in accent shades with value and share.

Pie ChartA donut of up to six series in brand shades with a legend and a hover readout in the centre.

Activity GaugeConcentric progress rings, one per series, with a centre label and a legend on the side or below.

Patterns Pro

Ready-made sections built from the components: sign in, pricing, settings, notifications and more.

Sign inA split sign-in screen: a brand panel with a quote on one side, the auth card on the other.

Stats overviewA dashboard header with a period switch and export, a KPI row and a revenue chart.

Filters barSearch, filter selects, active filter chips and a clear action above a list.

Profile settingsProfile settings with tabs, avatar upload, two-column form rows and preference switches.

Empty stateAn empty list that explains why it is empty and offers next steps.

Loading statesSkeleton cards, a busy button and the orbiting loader for work in progress.

Notification centerA tabbed inbox with unread dots, avatars and inline accept and decline actions.

Pricing plansThree plan cards with a highlighted tier, features and a call to action.

Customers tableA table page: title, export action and the data table with search, sort and pagination.

Templates Pro

Full dashboards for real products. Every block uses the same components and tokens.

Home dashboardStat cards, revenue and orders charts, contributions, a task list and a customers table in the app shell.

AnalyticsAn analytics screen: KPI row, sign-up funnel, earnings bars, revenue against last year and monthly orders.

FinanceA finance screen: KPI row, visitors line, goal gauge, traffic bar list, earnings and busiest hours.

Project boardA kanban board with tagged cards, team avatars, stage bars and a skills radar.

CustomersA customers screen with search, filter selects, active filter chips and the data table.

AI chatAn AI chat screen: recent chats, a thread with an agent run and thinking state, and the composer.

SettingsWorkspace settings: the profile form with preferences beside the notification inbox.

Medical reportA patient overview with profile, weekly steps, sleep score, activity rings and alerts.

Pages Pro

Complete app and website pages, desktop and mobile, in light, dark and right-to-left.

Landing pageAn app template from the Pixels Figma file: hero, logos, features, pricing, FAQ and footer.

StorefrontAn app template from the Pixels Figma file: navigation, categories, products and footer.

CheckoutAn app template from the Pixels Figma file: checkout form, order summary and tracking.

Finance appAn app template from the Pixels Figma file: balances, cash flow, cards, bills and markets.

ClinicianAn app template from the Pixels Figma file: vitals, patient, appointments, labs and meds.

HR peopleAn app template from the Pixels Figma file: kPIs, directory, time off, hiring and headcount.

Projects boardAn app template from the Pixels Figma file: kanban, roadmap, workload, projects and calendar.

Adtech campaignsAn app template from the Pixels Figma file: kPIs, pacing, channel mix, campaigns and creatives.

AI assistantAn app template from the Pixels Figma file: chat history, assistant thread and insights.

Finance mobileAn app template from the Pixels Figma file: wallet home: card, stats and activity.

Health mobileAn app template from the Pixels Figma file: vitals and medication schedule on mobile.