The foundation for your design system
Accessible components and tokens built straight from Figma. Live previews, copy-paste code and a React package on npm, so design and development ship the same thing.
Brand
Direction
Everything below is live. Click, type and drag.
BadgeNeutralLive
Team membersInvite your team to collaborate.
3 seats- OROlivia Rhyeolivia@pixels.ioOwner
- PBPhoenix Bakerphoenix@pixels.ioEditor
- Lana SteinerInvitedPending
Contribution historyLast 6 months of activity
24%$12 per month · Team plan
$9 per month, billed yearly · Team plan
68%
Audit complete
28 issues found in 312 layers.
FIG
Checkout flow.fig
Set a new milestoneDefine your target and we’ll help you pace it.
Target date
NotificationsChoose what you hear about.
3PaymentsRecent transactions.
View all| Acme Inc. | Paid | $349 |
| Globex | Pending | $99 |
| Initech | Failed | $1,999 |
Is it free to use?
The docs and Storybook are open. Plans add the Figma library and support.
Does it support RTL?
Yes. Every component mirrors with dir="rtl".
Browse all 196 components
Search or pick a group. Each one opens with a live preview, code and its Figma properties.
BaseAccordionDisclosure rows for FAQs and settings groups, built on native <details>.BaseAnnouncementA small dismissible card for product news, used in the sidebar footer.BaseAvatarRepresents a person or team with initials, an icon or a photo.BaseBadgeShort status or category label.BaseBreadcrumbShows the page location in the hierarchy.BaseButtonTriggers an action or event, such as submitting a form, opening a dialog or saving changes.BaseButton GroupA row of related toggle buttons for view switchers and filters.BaseCheckboxFor independent options and multi-select.BaseChipInteractive filter or choice chip.BaseDate PickerDate field that opens a month calendar with Cancel / Apply.BaseDividerSeparates content groups.BaseDropdownA menu of actions opened from a button.BaseFile UploadDrag-and-drop area with click-to-browse, plus a queue of files with progress.BaseInputSingle-line text field with label, optional required marker, hint and error message.BaseInput OTPOne-time code input.BaseLink ButtonText actions styled like links, plus the square icon button and the close button.BaseNotificationA dismissible notification with a status icon or avatar, actions and an optional countdown.BasePaginationFull for desktop tables, Simple when the count matters more than direct access.BaseRadioOne choice from 2–6 options shown together.BaseSegmented ControlSwitches between 2–5 views of the same content.BaseSelectSingle-select dropdown with label, hint and error.BaseSliderSingle value or range slider with label and live value.BaseSwitchToggle for settings that take effect immediately.BaseTableData table with sortable columns, row selection, status badges, end-aligned numbers and row actions.BaseTabsSwitch between sections of related content.BaseTextareaMulti-line text field with label, hint and character counter.BaseTooltipShort, non-essential hint on hover and focus.BaseTagNeutral label for categories, applied filters and user-entered values.BaseFilter ChipInteractive choice chip for quick filters above lists and tables.BaseLinkInline or standalone text link.BaseSearchSearch field with leading icon, clear button when filled and an optional keyboard shortcut hint.BaseComboboxSearchable select.BaseProgress BarDeterminate progress for uploads and onboarding.BaseProgress CircleCircular determinate progress for dashboards and uploads.BaseSkeletonLoading placeholder that mirrors the final layout, with a shimmer.BaseSpinnerIndeterminate loading indicator used by every Pending state.BaseAlertInline message about the current page or task.BaseToastBrief confirmation that appears at the bottom-start corner and dismisses after 5 seconds.BaseBannerFull-width, page-level announcement above the header.BaseList ItemRow for people, files or settings lists with leading slot, title, supporting text, meta and chevron.BaseStatKPI tile: label, value and a trend badge against a comparison period.BaseCardContainer for a related group of content with header, content slot and footer actions.BaseStepperShows progress through a multi-step flow.BaseEmpty StateShown when a list, table or search has nothing to display.BasePopoverNon-modal panel anchored to a trigger for rich hints, onboarding steps or small forms.BaseDrawerSide panel for filters, details and settings that keeps page context.BaseCommand PaletteGlobal ⌘K launcher for navigation and actions.BaseNav ItemSidebar link with an icon, label and optional count.BaseTop BarApplication header with logo, primary navigation, search, utilities and account.BaseStore BadgeDownload badges for the App Store and Google Play in black and white, two sizes.AdvancedMetric CardKPI tile with a trend badge, sparkline, icon, progress or comparison.AdvancedActivity ItemA feed entry for comments, status changes, files, assignments and system events, with a timeline rail and unread highlight.AdvancedNotification ItemInbox row for mentions, invites, alerts and success messages, with an unread dot.AdvancedAnnouncement BarSite or app-wide message in six tones, subtle or solid, as a full bar or a floating pill.AdvancedInline HintA short contextual message in six tones: subtle (tinted), outline (bordered) or accent (start bar).AdvancedFile Upload ItemOne file in an upload list with type badge, progress, size and time left.AdvancedFile DropzoneA drop zone that takes clicks and dragged files, with hover, dragging and disabled states.AdvancedStepper CardNumbered steps with titles and hints in a card, in brand, success or neutral tone.AdvancedEmpty CardZero-data, no-results, error and success placeholders in a card, a dashed box or with no container.AdvancedCode SnippetCode block with a title or tabs, line numbers and a copy button.AdvancedChat MessageUser and assistant messages as bubbles or flat text, with time and a typing state.AdvancedChat ComposerA prompt input with attach, voice, model chip and send.AdvancedKanban CardTask card with priority, tag, description, team, due date, and optional cover or progress.AdvancedProduct CardProduct tile with image, discount, wishlist, rating, prices and add to cart.AdvancedCart ItemLine item for a cart or order summary with quantity stepper, remove and prices; out-of-stock state.AdvancedPricing TierPlan card with price, description, call to action and features.AdvancedTestimonialCustomer quote as a card, a large centred quote or compact; default, filled or inverse.AdvancedPayment CardBank or credit card visual in brand, dark, gradient, emerald, rose and indigo.AdvancedTransaction RowBanking ledger line for income, expense, pending and failed payments, with amount and status badge.AdvancedCalendar EventEvent for day and week views as a block or a chip, in five tones; past events are muted.AdvancedJob ListingCareers card or row with role, team, location, type, salary and apply.AdvancedBlog CardArticle preview with cover, category, read time, title, excerpt and author.AdvancedTeam MemberPeople card with photo or initials, name, role, bio and contact links.AdvancedMobile Header BarTop app bar for mobile: title, large title or search, light or dark.AdvancedMobile Tab BarBottom navigation for mobile apps, docked or floating, light or dark, with or without labels.AdvancedTicker ItemMarket quote with symbol, price, change and a tiny trend line.AdvancedFeature ItemMarketing feature with an icon tile, stacked, inline or in a card, in five tones.AdvancedBig StatA big number with a label for marketing pages: default, bordered, brand, filled or inverse; start or centred.AdvancedAvatar UploadProfile photo picker with preview, upload and remove; circle or rounded.AdvancedPlaceholder LogoFictional brand marks for logo clouds and demos in mono, brand or muted.AdvancedRich SeparatorDivider with a label, a button or an icon; solid or dashed; content at the centre, start or end.AdvancedFeatured IconAn icon in a tinted tile: six tones × subtle, solid or outline × md or lg.GlassGlass PanelThe frosted surface every glass part is built on, in light, dark and brand tints.GlassGlass InputSearch, text and password fields on glass with a shortcut hint and show/hide.GlassGlass Tab BarBottom tab bar on glass with labels or icons only.GlassGlass SidebarApp sidebar on glass, expanded or collapsed, with a count and the account.GlassGlass MenuActions menu on glass with shortcuts and a danger row.GlassGlass Segmented ControlA two to four option switcher on glass.GlassGlass PopoverA short frosted tooltip or popover label with a shortcut.GlassGlass ChipStatus, filter, avatar and count chips on glass.GlassGlass Media PlayerA now-playing card with cover, title, artist, play button and scrubber.GlassGlass Profile CardProfile card with avatar, name, role, three stats and a follow toggle.GlassGlass Auth CardSign-in and sign-up forms on glass with remember me and social sign-in.GlassGlass Pricing CardA plan card on glass; featured uses the solid call to action.GlassGlass Command PaletteCommand palette on glass with grouped results, empty state and key hints.GlassGlass NotificationA message notification on glass with reply and mark read.GlassGlass DockAn app dock or a floating formatting toolbar of glass icon buttons.GlassGlass Control TileControl-centre tiles: toggle, slider and connectivity.GlassGlass Progress CardFile upload progress on glass, uploading or done.GlassGlass WidgetHome-screen widgets on glass: weather, wallet and fitness.GlassGlass Bottom SheetAn action sheet on glass with a grabber, actions, a danger row and cancel.GlassGlass Form ControlSwitch, checkbox and radio rows on glass with label and hint.GlassGlass ChatIncoming and outgoing chat bubbles and a composer on glass.GlassGlass BannerCookie consent and announcement banners on glass.GlassGlass ElementsThe glass building blocks: buttons, icon buttons, badges, avatars, controls, segments, tab items, fields, list items and progress.BaseCarouselScroll-snap slides with dots and previous/next buttons.BaseTree ViewA file tree with folders, guide lines and badges.BaseSocial ButtonSign in with a third-party account.BaseModalDialog that blocks the page for a focused task or confirmation.BaseMeeting SchedulerA calendar beside time-slot radios with a booking confirmation.BlocksAuth CardSign-in and sign-up cards with social providers, email fields and a call to action.BlocksData TableA data table with search, a region filter, sortable columns, row selection and pagination.BlocksSidebarPrimary app navigation.BlocksAgent ThinkingThinking indicators for AI products: bouncing dots, an orbit and a spark, each with a shimmering label.BlocksAgent ProgressAn agent run as a checklist: done, running and queued steps with a progress bar and elapsed time.BlocksAI ComposerA prompt composer with file chips, a model picker, tool toggles and a send button.BlocksMonth CalendarA month view with colored event pills, today marker and month switcher.BlocksSettings ModalA settings dialog with a section sidebar, form rows and switches.BlocksComposer LoaderA loading state that wraps an input: a soft light band orbits the rim while the product works.BlocksTask ListA streaming task log: steps reveal one by one, with a shimmering title on the running step.BlocksAlerts CardA scrollable alert feed with tinted icon circles and date pills.BlocksProfile CardA profile card with avatar and label/value detail rows.IndustryFinance · Balance OverviewFinance block.IndustryFinance · Cash FlowFinance block.IndustryFinance · My CardsFinance block.IndustryFinance · Recent TransactionsFinance block.IndustryFinance · Quick TransferFinance block.IndustryFinance · Spending by CategoryFinance block.IndustryFinance · Savings GoalsFinance block.IndustryFinance · Upcoming BillsFinance block.IndustryFinance · Market WatchFinance block.IndustryFinance · Currency ConverterFinance block.IndustryAdtech · Campaign KPIsAdtech block.IndustryAdtech · Campaigns TableAdtech block.IndustryAdtech · Spend PacingAdtech block.IndustryAdtech · Channel MixAdtech block.IndustryAdtech · AudienceAdtech block.IndustryAdtech · Top CreativesAdtech block.IndustryHealthcare · VitalsHealthcare block.IndustryHealthcare · Patient SummaryHealthcare block.IndustryHealthcare · AppointmentsHealthcare block.IndustryHealthcare · Lab ResultsHealthcare block.IndustryHealthcare · Bed OccupancyHealthcare block.IndustryHealthcare · MedicationsHealthcare block.IndustryHR · People KPIsHR block.IndustryHR · Employee DirectoryHR block.IndustryHR · Time-off RequestsHR block.IndustryHR · Hiring PipelineHR block.IndustryHR · CelebrationsHR block.IndustryHR · Headcount by DepartmentHR block.IndustryE-commerce · Product GridE-commerce block.IndustryE-commerce · Order SummaryE-commerce block.IndustryE-commerce · Checkout FormE-commerce block.IndustryE-commerce · Order TrackingE-commerce block.IndustryE-commerce · Category CardsE-commerce block.IndustryProjects · Kanban BoardProjects block.IndustryProjects · Project ListProjects block.IndustryProjects · Week CalendarProjects block.IndustryProjects · Team WorkloadProjects block.IndustryProjects · RoadmapProjects block.IndustryAI · AI Chat PanelAI block.IndustryAI · Prompt StartersAI block.IndustryAI · Insight CardAI block.IndustryAI · Chat HistoryAI block.WebsiteWebsite · Top navigationWebsite section.WebsiteWebsite · Hero SplitWebsite section.WebsiteWebsite · Hero CenteredWebsite section.WebsiteWebsite · Logo CloudWebsite section.WebsiteWebsite · Feature GridWebsite section.WebsiteWebsite · Feature SplitWebsite section.WebsiteWebsite · StatsWebsite section.WebsiteWebsite · TestimonialsWebsite section.WebsiteWebsite · PricingWebsite section.WebsiteWebsite · FAQWebsite section.WebsiteWebsite · CTAWebsite section.WebsiteWebsite · NewsletterWebsite section.WebsiteWebsite · FooterWebsite section.WebsiteWebsite · TeamWebsite section.WebsiteWebsite · BlogWebsite section.ChartsStat CardsA row of KPI cards with count-up values and delta chips.ChartsRevenue ChartA year of revenue as an area against the year before, with a count-up headline, delta chip and hover readout per month.ChartsOrders ChartMonthly orders as bars, this year beside last year, with a period switch.ChartsSteps ChartSeven daily bars on tracks, a week switcher, a fixed weekly total and a value bubble on the hovered bar.ChartsActivity RingsConcentric goal rings that draw in, with stat tiles.ChartsSleep ScoreA segmented score ring with sub-score rows.ChartsFunnel ChartA sign-up funnel: stages flow into each other in accent shades, with conversion pills, stage tiles and a range switch.ChartsEarnings ChartMonthly earnings as rounded bars on tracks, with a weekly, monthly and yearly switch, a count-up total and hover focus.ChartsContributionsA contributions heat grid that follows the accent color.ChartsLine ChartTwo series as lines with a curved or sharp switch, a count-up total and a hover readout.ChartsBar ListRanked rows with a share bar behind each label, tabs for the breakdown and a show-more toggle.ChartsRadar ChartTwo series on a radar with a legend and a headline that follows the hovered axis.ChartsRadial GaugeA half gauge with ticks and a count-up percentage toward a single goal.ChartsHeatmapA day-by-hour matrix in accent shades with a hover readout and legend.ChartsStage BarsFunnel stages as rounded pills in accent shades with value and share.ChartsPie ChartA donut of up to six series in brand shades with a legend and a hover readout in the centre.ChartsActivity GaugeConcentric progress rings, one per series, with a centre label and a legend on the side or below.
No component matches. Try “input” or “menu”.