Xela UI kit for React Web components

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.
Accordions, Alerts, Badges, Breadcrumbs, Buttons, Charts and more

1900+ variants of 30 components

Xela UI Kit - Figma design system. Mobile & Desktop templates
Web app layouts made with care of usability and attention to details

50 templates for mobile & desktop

We crafted XELA with a purpose to swap between themes without a hassle

Toggle between dark & light

Xela UI Kit - Figma design system. Mobile & Desktop templates
App design quickstarter
for startups, indiehackers or busy designers

Organized, based on auto-layout

Xela UI Kit - Figma design system. Mobile & Desktop templates
Xela UI Kit - Figma design system. Mobile & Desktop templates

Preview 2,000+ components

Xela UI kit for Figma & React offers a full collection of perfectly shaped components powered by Auto-layout and based on Variants. Labeled, scalable, and paginated into 31 categories to design & code apps faster

Xela UI kit - Figma dashboard design system
Accordions
Xela UI kit - Figma dashboard design system
Alerts
Xela UI kit - Figma dashboard design system
Avatars
Xela UI kit - Figma dashboard design system
Badges
Xela UI kit - Figma dashboard design system
Breadcrumbs
Xela UI kit - Figma dashboard design system
Buttons
Xela UI kit - Figma dashboard design system
Charts
Xela UI kit - Figma dashboard design system
Checkboxes
Xela UI kit - Figma dashboard design system
Chips
Xela UI kit - Figma dashboard design system
Color Tokens
Xela UI kit - Figma dashboard design system
Datepickers
Xela UI kit - Figma dashboard design system
Dialogs
Xela UI kit - Figma dashboard design system
Numeric Inputs
Xela UI kit - Figma dashboard design system
Pagination
Xela UI kit - Figma dashboard design system
Radio Buttons
Xela UI kit - Figma dashboard design system
Sliders Range
Xela UI kit - Figma dashboard design system
Rating
Xela UI kit - Figma dashboard design system
Segmented Controls
Xela UI kit - Figma dashboard design system
Selection
Xela UI kit - Figma dashboard design system
Sliders
Xela UI kit - Figma dashboard design system
Steps
Xela UI kit - Figma dashboard design system
Switches
Xela UI kit - Figma dashboard design system
Tables
Xela UI kit - Figma dashboard design system
Tabs
Xela UI kit - Figma dashboard design system
Text Inputs
Xela UI kit - Figma dashboard design system
Textareas
Xela UI kit - Figma dashboard design system
Toasts
Xela UI kit - Figma dashboard design system
Tooltips
Xela UI kit - Figma dashboard design system
Typography

Preview 50+ templates

Built with components, auto-layout for proper scaling, well-organized dashboard layouts. Modify the UI, styles, colors or use for your app as it is.

Xela UI kit - Figma dashboard design system
Analytics
Mobile template
Xela UI kit - Figma dashboard design system
Analytics
Mobile template
Xela UI kit - Figma dashboard design system
Analytics
Desktop template
Xela UI kit - Figma dashboard design system
Checkout
Mobile template
Xela UI kit - Figma dashboard design system
Checkout
Mobile template
Xela UI kit - Figma dashboard design system
Checkout
Desktop template
Xela UI kit - Figma dashboard design system
Data Table
Mobile template
Xela UI kit - Figma dashboard design system
Data Table
Desktop template
Xela UI kit - Figma dashboard design system
Ecommerce
Mobile template
Xela UI kit - Figma dashboard design system
Ecommerce
Mobile template
Xela UI kit - Figma dashboard design system
Ecommerce
Desktop template
Xela UI kit - Figma dashboard design system
Search Results
Mobile template
Xela UI kit - Figma dashboard design system
Search Results
Mobile template
Xela UI kit - Figma dashboard design system
Search Results
Desktop template
Xela UI kit - Figma dashboard design system
Mailbox
Mobile template
Xela UI kit - Figma dashboard design system
Mailbox
Mobile template
Xela UI kit - Figma dashboard design system
Mailbox
Desktop template
Xela UI kit - Figma dashboard design system
Media
Mobile template
Xela UI kit - Figma dashboard design system
Media
Mobile template
Xela UI kit - Figma dashboard design system
Media
Desktop template
Xela UI kit - Figma dashboard design system
Social
Mobile template
Xela UI kit - Figma dashboard design system
Social
Mobile template
Xela UI kit - Figma dashboard design system
Social
Desktop template
Xela UI kit - Figma dashboard design system
Task Manager
Mobile template
Xela UI kit - Figma dashboard design system
Task Manager
Mobile template
Xela UI kit - Figma dashboard design system
Task Manager
Desktop template
Xela UI kit - Figma dashboard design system
Project Manager
Mobile template
Xela UI kit - Figma dashboard design system
Project Manager
Desktop template

Light & Dark themes

Get started⚡
Pay once & use forever this well-crafted Figma libraries with code to release any apps 3x faster.
Xela UI kit for Figma
$128
Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout. Preview in Figma →
Buy Now
Xela Design & Code bundle
$499
Grab this 5-in-1 design & code bundle with Figma, React, Flutter, SwiftUI & Jetpack Compose components included and 150+ pre-coded screens (all with sources).
Buy Now
Xela for React
$258
10 ready-made web app screens with 39 blocks based on 30 fully coded React components. Source code for React included.

Demo / Docs →
Buy Now
Xela for Flutter
$258
36 ready-made app screens based on 66 widgets. Source code for Android Studio Project, Flutter.

Demo / Docs →
Buy Now
Xela for Android
$258
36 ready-made app screens based on 66 widgets. Source code for Android Studio, Jetpack Compose, min SDK 26, target SDK 30.
Demo / Docs →
Buy Now
Xela for Swift
$258
36 ready-made application screens based on 66 widgets. Source code for Swift 5+, SwiftUI, iOS 13+, Xcode.

Demo / Docs →
Buy Now
Questions and Answers
How to start with this design system?
After the successful purchase via Gumroad (it's safe and encrypted) you will be taken to a download page. You will also get the download link in your email (check the SPAM folder sometimes). Then just simply drag and drop .FIG file onto your Figma app. Do not drop it onto the project. Drop it over the starting screen with recent projects grid.
I am new to Figma. Should I try your kits?
Definitely! Our products help customers who learning Figma from scratch. By exploring and studying commercial UI kits you learn how the components and layouts were crafted, which styles being used and which styling tricks have been applied.
How to import your kits?
Which license type should I choose?
You must select the proper license type according to the number of users in Figma if you're purchasing our product for the business.

Business license — for startups or enterprise organizations to use for a local team or publish in Figma library
Individual license — for freelancers, indie developers, or solopreneurs working on a single project
Can I build commercial projects with your products?
Yes! You can build an unlimited amount of commercial projects using Setproduct assets. But, please, consider a license type before making a purchase.
I have a project. Can I hire you?
We're open-minded to your custom design & development projects. We can create complex templates based on our Figma libraries and code them in the production using a wide variety of popular frameworks and technologies.

If you have a project to design & develop, simply contact us describing your brief, budget, and expectations.