Skip to content
CodeUpVik home
Atlas UI cover: tokens, components and templates
Analytics dashboard template in light mode
The same dashboard template in dark mode
Marketing page templates
Design tokens: colour scales
Icon set in the docs site
Pricing page template in dark mode
Mobile templates: home, wallet and profile
Sign-up, settings and project board templates
Dev Kits & Templates

Atlas UI: a Code-First Design System for React and HTML/CSS

A code-first design system: light and dark design tokens, 60 React + TypeScript components in 169 variants, 20 page templates and 300 icons.

from ₹10,249

Choose a licence

Your download link appears right after payment.

Share
Get it customised as per your need

About this product

Every colour, type size, spacing step, radius and shadow is a design token, in light and dark. The same tokens drive a React + TypeScript component library, a plain HTML/CSS edition and 20 full page templates, so design and code never drift apart. Tokens import into Figma as styles and variables with the free Tokens Studio plugin (third-party, not affiliated). There is no native .fig file and no ready-made Figma component set.

What's included

  • Design tokens (W3C format and a Tokens Studio file) with light and dark themes, CSS variables and Tailwind presets (v3 and v4)
  • 60 React + TypeScript components documented in 169 variants across 22 categories
  • HTML/CSS edition: all 169 variants and all templates as static HTML with one stylesheet
  • 20 page templates: 6 marketing, 7 dashboard, 4 auth and 3 mobile
  • 300 open-source icons (ISC licence, credited)
  • Static docs site with live examples, a light/dark toggle and copy-code buttons
  • Figma import guide
  • Re-runnable accessibility checks: WCAG AA contrast check of the token pairs, and an automated scan of all 20 templates at 375 and 1440 px in both modes

File formats

  • React + TypeScript and HTML/CSS source
  • Design token files
  • Delivered as one ZIP: the same kit in every licence

Works with

  • React 18 or 19 for the React edition
  • Node.js 20+ to run the docs site or rebuild tokens
  • A Figma account and the free Tokens Studio plugin for Figma import

Licence

All licences allow commercial use in unlimited end products for yourself or clients, with unlimited end users, and removing our branding. Solo covers 1 person, Team up to 5 named people in one organisation, Agency unlimited people in one organisation. No licence allows reselling or sharing the kit (or a substantial part) as a kit, template pack, design system or boilerplate, or publishing its source. Full terms are in LICENSE.md.

Questions

Is there a Figma file?

No native .fig file or Figma component set. Tokens import into Figma as styles and variables with the free Tokens Studio plugin, and pages can be imported as editable layers with a third-party HTML import plugin. A guide is included.

Do I need React?

No. The HTML/CSS edition covers all 169 variants and all 20 templates with one stylesheet. The React edition needs React 18 or 19.

What is the difference between Solo, Team and Agency?

All three download the same files. Solo covers 1 person, Team up to 5 named people in one organisation, and Agency unlimited people in one organisation with unlimited client projects.

How do I get my file?

Right after payment you see a Download button on the payment page. Each link works for 10 minutes, so save the file straight away. If a link expires, write to us with your order ID for a new one.

Can I get a refund?

Digital products are final sale. If a download does not work, email us within 7 days of purchase with your order ID and a short screen recording. We send a working file within 2 working days, or refund you in full if we cannot. Read the refund policy

Is anything shipped?

No. Every product is a digital download. Nothing physical is shipped.

Is the payment secure?

Payments are processed by Cashfree on its own secure checkout page.

Paid, but no download?

Write to us with the order ID shown on the payment page and we will sort it out. [email protected]

You may also like

Tidyline Icons — 235 Line Icons
Dev Kits & Templates

Tidyline Icons — 235 Line Icons

235 original line icons on a 24 px grid, in 3 stroke weights, ready for websites, apps, slides and design tools.

Gumroad price ₹1,149 ₹999 13% below Gumroad price

LaunchPad Pages — 12 Landing Page Templates
Dev Kits & Templates

LaunchPad Pages — 12 Landing Page Templates

12 landing pages in plain HTML + Tailwind CSS, with light and dark themes, a compiled CSS build, a CDN build and copy-and-paste snippets.

from ₹2,499

World History Explorer — Web App Source Code
Dev Kits & Templates

World History Explorer — Web App Source Code

Click anywhere on Earth and read its history. Plain HTML/CSS/JS, no API keys, no build step.

from Gumroad price ₹2,393 ₹2,099 12% below Gumroad price

Atlas UI — Design System₹10,249Buy now