$144, Costs more than your $30 budget
Cover illustration. The files are listed under What's inside.
Advanced Atomic Design Components
1,500 components organized as atoms, molecules and organisms, with 24 page templates, three-tier Figma variables, JSON tokens and React code.
$149
$119 more than your $30 budget
Added to your cart.View your cart
- Includes the Standard license: personal, commercial and client work for one person.
- Instant download after payment, plus an email with links that stay active for 30 days.
- Refund within 14 days if you haven't downloaded it yet, if it doesn't work in the supported software listed here, or if it's faulty and we can't fix it.
- Contents
- 1,500 components
- File formats
- .fig, .jsx, .css, .json, .png
- Supported software
- Figma, React, Tailwind CSS
- Download size
- 288 MB
- Good for
- Design system teams
- Long-lived SaaS products
- Design-to-code handoff
About this product
Components here follow atomic design closely: 320 atoms such as buttons, inputs and badges combine into 760 molecules like search fields and form rows, which assemble into 420 organisms including headers, tables and checkout panels. Twenty-four page templates show the organisms in context, and design tokens use three tiers of Figma variables (primitive, semantic and component) with light and dark modes.
Atoms and molecules are mirrored as React components styled with Tailwind CSS, and the tokens are exported to JSON so code and design draw on the same values. Design system leads and product teams planning a long-lived system get a structure that can grow without renaming everything later.
What's inside
- 1,500 components: 320 atoms, 760 molecules, 420 organisms
- 24 page templates assembled from organisms
- Three-tier Figma variables: primitive, semantic, component
- Light and dark modes at every level
- React components with Tailwind CSS for atoms and molecules
- Design tokens exported as JSON
License
Standard license
Included with every purchase
For one person. Use the assets in unlimited personal and commercial projects, including work you deliver to clients.
Allowed
- Design a client's website with a UI kit and hand over the finished site
- Use the same asset in as many of your projects as you like
- Build your startup's pitch deck from a presentation template
- Use an icon set throughout your company's web app
Not allowed
- Reselling, sharing, sublicensing or giving away the files, as they are or modified, for example on stock sites or marketplaces
- Uploading the files anywhere others can download or extract them, such as a public repository
- Letting several people work from one Standard license (a Team license covers that)
- Selling print-on-demand merchandise or templates built on the assets without an Extended license
$157, Costs more than your $30 budget
$131, Costs more than your $30 budget
$149, Costs more than your $30 budget