COBALT: E-commerce Figma UI Kit and Next.js Template
DjectStudio
An e-commerce design system delivered twice: a Figma kit and a Next.js template on the same tokens. 73 screens, 146 with dark mode, plus working cart, search and checkout.
COBALT is for designers and developers building an online store who want the design file and the code to match. You get a Figma kit and a Next.js template that share one token system, so the design and the build stay in step.
The Figma file has 73 screens, 146 with dark mode, in desktop, tablet and mobile versions. The previews show a home page with a hero and lookbook link, product listings with category tabs, a product page with color options, a cart with order summary, sign in, an orders list with delivery status and a thank-you screen. The code side has 23 routes built with Next.js 16, Tailwind CSS v4 and TypeScript, 47 typed React components, a working cart, search and checkout, and a live styleguide page. A live preview runs at cobalt-template.vercel.app.
Customization runs on 132 design variables. Pick one of 3 corner-radius styles (Sharp, Medium, Rounded) and one of 4 font presets (Space Grotesk, Geist, Fraunces, Sora). The kit uses full auto layout, 35 reusable components, 49 custom icons and 24 text styles, with a global style guide for colors and type.
Highlights
Figma kit plus full Next.js source code
73 screens, 146 with light and dark mode
Desktop, tablet and mobile versions
23 coded routes in Next.js 16, Tailwind CSS v4 and TypeScript
Working cart, search and checkout
132 variables, 3 corner-radius styles and 4 font presets
35 Figma components, 47 typed React components, 49 custom icons
What's included
73 Premium Screens (146 with Dark Mode)
Figma File + Full Next.js Source Code
Desktop, Tablet & Mobile Versions
Full Auto Layout
Light & Dark Mode
35 Reusable UI Components
49 Custom Icons
132 Design Variables
3 Corner-Radius Styles (Sharp, Medium, Rounded)
4 Font Presets (Space Grotesk, Geist, Fraunces, Sora)
24 Text Styles
23 Coded Routes (Next.js 16, Tailwind CSS v4, TypeScript)
Working Cart, Search & Checkout
47 Typed React Components
Live Styleguide Page
Global Style Guide
Free Fonts
Neatly & Organized Layers
Lifetime Updates
Made by DjectStudio, a design studio for websites, apps and brands in English and Arabic. Get it on the DjectStudio store: djectstudio.com/store/cobalt-ecommerce-ui-kit-nextjs-template
Like this project
Posted Oct 10, 2026
E-commerce Figma kit plus Next.js source code on one token system. 73 screens (146 with dark mode), 23 coded routes, working cart, search and checkout.
