Figma components
brought to perfection✨

Explore the world's largest library of practical Figma components. Learn best practices to organize your design assets.

Preview All Components

Preview All Components

Preview All Components

Table of contents ↓

Styles

350 Styles, 358 Variables

Colors

↓

Colors

↓

Colors

↓

Breakpoints

↓

Breakpoints

↓

Breakpoints

↓

Imagery

↓

Imagery

↓

Imagery

↓

Effects

↓

Effects

↓

Effects

↓

Gradients

↓

Gradients

↓

Gradients

↓

Layout Grids

↓

Layout Grids

↓

Layout Grids

↓

Radius

↓

Radius

↓

Radius

↓

Sizing & Spacing

↓

Sizing & Spacing

↓

Sizing & Spacing

↓

Typography

↓

Typography

↓

Typography

↓

Charts

130 Charts

Bar

↓

Bar

↓

Bar

↓

Donut

↓

Donut

↓

Donut

↓

Gauge

↓

Gauge

↓

Gauge

↓

Line

↓

Line

↓

Line

↓

Map

↓

Map

↓

Map

↓

Pie

↓

Pie

↓

Pie

↓

Heatmap

↓

Heatmap

↓

Heatmap

↓

Scatter

↓

Scatter

↓

Scatter

↓

Radar

↓

Radar

↓

Radar

↓

Templates

48 Templates

Account

↓

Account

↓

Account

↓

Activity Feed

↓

Activity Feed

↓

Activity Feed

↓

Analytics

↓

Analytics

↓

Analytics

↓

Authentication

↓

Authentication

↓

Authentication

↓

Broadcasts

↓

Broadcasts

↓

Broadcasts

↓

Documentation

↓

Documentation

↓

Documentation

↓

File Manager

↓

File Manager

↓

File Manager

↓

Kanban

↓

Kanban

↓

Kanban

↓

Mail

↓

Mail

↓

Mail

↓

Messaging

↓

Messaging

↓

Messaging

↓

Report

↓

Report

↓

Report

↓

Repository

↓

Repository

↓

Repository

↓

Sales

↓

Sales

↓

Sales

↓

Storefront

↓

Storefront

↓

Storefront

↓

Settings

↓

Settings

↓

Settings

↓

Widgets

↓

Widgets

↓

Widgets

↓

Web Blocks

500 Blocks

Site Builder

↓

Site Builder

↓

Site Builder

↓

Article

↓

Article

↓

Article

↓

Blog

↓

Blog

↓

Blog

↓

Calendar

↓

Calendar

↓

Calendar

↓

Checkout

↓

Checkout

↓

Checkout

↓

CTA

↓

CTA

↓

CTA

↓

E-commerce

↓

E-commerce

↓

E-commerce

↓

Features

↓

Features

↓

Features

↓

Forms

↓

Forms

↓

Forms

↓

FAQ

↓

FAQ

↓

FAQ

↓

Gallery

↓

Gallery

↓

Gallery

↓

Hero

↓

Hero

↓

Hero

↓

Footer

↓

Footer

↓

Footer

↓

Navigation

↓

Navigation

↓

Navigation

↓

Page Header

↓

Page Header

↓

Page Header

↓

Pricing

↓

Pricing

↓

Pricing

↓

Social Proof

↓

Social Proof

↓

Social Proof

↓

Stats

↓

Stats

↓

Stats

↓

Components

62 Categories

Accordion

↓

Accordion

↓

Accordion

↓

Alert & Notification

↓

Alert & Notification

↓

Alert & Notification

↓

Annotation

↓

Annotation

↓

Annotation

↓

Avatar

↓

Avatar

↓

Avatar

↓

Breadcrumbs

↓

Breadcrumbs

↓

Breadcrumbs

↓

Browser

↓

Browser

↓

Browser

↓

Button

↓

Button

↓

Button

↓

Button Group

↓

Button Group

↓

Button Group

↓

Calendar

↓

Calendar

↓

Calendar

↓

Cards

↓

Cards

↓

Cards

↓

Carousel

↓

Carousel

↓

Carousel

↓

Chart

↓

Chart

↓

Chart

↓

Chat

↓

Chat

↓

Chat

↓

Checkbox

↓

Checkbox

↓

Checkbox

↓

Checkbox Group

↓

Checkbox Group

↓

Checkbox Group

↓

Chip & Badge

↓

Chip & Badge

↓

Chip & Badge

↓

Color Picker

↓

Color Picker

↓

Color Picker

↓

Combobox

↓

Combobox

↓

Combobox

↓

Command Panel

↓

Command Panel

↓

Command Panel

↓

Counter

↓

Counter

↓

Counter

↓

Date Picker

↓

Date Picker

↓

Date Picker

↓

Dialog

↓

Dialog

↓

Dialog

↓

Divider

↓

Divider

↓

Divider

↓

Drawer

↓

Drawer

↓

Drawer

↓

Dropdown List

↓

Dropdown List

↓

Dropdown List

↓

Feedback

↓

Feedback

↓

Feedback

↓

Feeds

↓

Feeds

↓

Feeds

↓

Footer Bar

↓

Footer Bar

↓

Footer Bar

↓

Forms

↓

Forms

↓

Forms

↓

Input

↓

Input

↓

Input

↓

Input OTP

↓

Input OTP

↓

Input OTP

↓

Menu

↓

Menu

↓

Menu

↓

Menu Navigation

↓

Menu Navigation

↓

Menu Navigation

↓

Menubar

↓

Menubar

↓

Menubar

↓

Modal

↓

Modal

↓

Modal

↓

Navbar

↓

Navbar

↓

Navbar

↓

Loader

↓

Loader

↓

Loader

↓

Pagination

↓

Pagination

↓

Pagination

↓

Player

↓

Player

↓

Player

↓

Pricing

↓

Pricing

↓

Pricing

↓

Progress

↓

Progress

↓

Progress

↓

Popover

↓

Popover

↓

Popover

↓

Radio

↓

Radio

↓

Radio

↓

Radio Group

↓

Radio Group

↓

Radio Group

↓

Rating

↓

Rating

↓

Rating

↓

Scroll Bar

↓

Scroll Bar

↓

Scroll Bar

↓

Select

↓

Select

↓

Select

↓

Stepper

↓

Stepper

↓

Stepper

↓

Slider

↓

Slider

↓

Slider

↓

Skeleton

↓

Skeleton

↓

Skeleton

↓

Table

↓

Table

↓

Table

↓

Tabs

↓

Tabs

↓

Tabs

↓

Tablist

↓

Tablist

↓

Tablist

↓

Text

↓

Text

↓

Text

↓

Toast

↓

Toast

↓

Toast

↓

Tooltip

↓

Tooltip

↓

Tooltip

↓

Toggle

↓

Toggle

↓

Toggle

↓

Tree View

↓

Tree View

↓

Tree View

↓

Uploader

↓

Uploader

↓

Uploader

↓

Widget

↓

Widget

↓

Widget

↓

WYSIWYG

↓

WYSIWYG

↓

WYSIWYG

↓

Icons

↓

Icons

↓

Icons

↓

Why choose Frames X UI components?

Why choose Frames X
over other UI kits?

Scalable & Structured

Scalable & Structured

Perfectly named, layered, and easy-to-consume components to scale your projects.

Ultimate Figma UI kit library with over 20K+ components across 70+ categories for smarter product design

Framework Independent

Framework Independent

Compatible with development frameworks such as Shadcn, Tailwind CSS, and Bootstrap.

100% Resizeble

100% Resizeble

Perfectly organized to provide you with a sleek resizing and customization experience.

Figma Interactive Components

Figma Interactive Components

Includes animations for common UI components states, e.g., hover, pressed, active.

Includes animations for common UI components states, e.g., hover, pressed, active.

Properties & Variants

Properties & Variants

Includes variants in multiple sizes and types, allowing you to design effectively.

Powered by Variables

Powered by Variables

Easy to customize and repurpose using Figma's variables modes to easily operate any component.

Join 27,000+ creatives and get new design system articles, tutorials, and top-quality UI resources ↓

no spam, only good stuff 👌

no spam, only good stuff 👌

no spam, only good stuff 👌