v1.0
Buy Now

Stop rebuilding UI.
Design system and
component library, unified.

Create UI is a React component library and Figma design system, with 65+ components, 16,800+ variants, and 700+ design tokens. Designers and developers, working from one source.

Start Free Code LibraryView Pricing
Theme
Base

Sign In

Create UI

Please enter your account informations.

Forgot Password?
Don’t have an account?Sign Up
4/8
Design
Development
Project Management
Marketing
Ayla Karagöz
Luca Moretti
Mei Lin Chen
Liam O'Brien
Sofia Reis
+7

Manage team access

Who can join and what they can do.

Each ticket includes standard entry.

Upgrade to Pro

Unlock advanced pro components.

Select Countries

Türkiye
Spain
Italy
United Kingdom
Germany

Transaction in progress

65+

Core
Components

Growing

Core UI foundations, expanding with every release.

16,800+

Variant
Combinations

Growing

Every size, state, style, and interaction covered.

700+

Design Tokens &
Variables

Colors, spacing, type, radius, and layout system.

140+

Text, Shadow &
Effect Styles

Typography, shadows, blur, and effects ready to use.

COMPONENTS

65+ production-ready UI components. Built for design and code.

Every component ships in both Figma and React, with full variant coverage for size, state, style, and interaction. No gaps between design and production.

Button [Default]
Button & Actions

Button [Default]

5040 Variants4 Appearances5 Sizes
Checkbox
Form Controls

Checkbox

810 Variants3 Shapes3 Sizes
Radio
Form Controls

Radio

150 Variants3 Sizes
Switch
Form Controls

Switch

600 Variants3 Shapes3 Sizes
Tooltip
Overlay Items

Tooltip

20 Variants4 Directions
Badge [Tag]
Indicators

Badge [Tag]

936 Variants4 Appearances3 Sizes
Chips
Indicators

Chips

840 Variants4 Colors5 Sizes
Toast / Snackbar
Feedback

Toast / Snackbar

28 Variants4 Appearances
Avatar
Data Display

Avatar

42 Variants3 Appearances7 Sizes
Input [Text]
Form Controls

Input [Text]

231 Variants3 Sizes
Dropdown Menu
Overlay Items

Dropdown Menu

24 Variants3 Sizes
Inline Alert
Feedback

Inline Alert

56 Variants4 Appearances2 Shapes
All ComponentsAll Components

Carefully structured, continuously expanding

FIGMA DESIGN SYSTEM

The Figma design system your team actually ships with.

Tokens, components, color variables, spacing, and usage rules, all structured in Figma from day one. Open the file and start designing.

Preview in Figma

Token Foundation

Centralized tokens for color, spacing, radius, typography and elevation.

primary-500
font-geist
rounded-md
component-sm

Color Variables

Semantic and global colors
for a unified visual language.

#4F39F6
color-indigo-600
primary-base

Component Logic

Scalable components with variants, states, and properties built for real product use cases

Button
| VariantPrimary
| AppearanceSolid
| Sizexl
| ShapeRounded
| StateDefault
| Loading
| Disabled
| Icon Only
| Lead Icon Selectoradd-circle-fill
| Lead Icon Visibility
| Trail Icon Selectoradd-circle-fill
| Trail Icon Visibility
| Button TextButton

Spacing Scale

A consistent, responsive
spacing system built on a 4px grid.

Desktop
32 px
Tablet
24 px
Mobile
16 px

Theme Ready

Light and dark mode support.

Type Scale

A responsive type scale with
clear hierarchy across every screen size.

Auto Layout

Flexible and adaptive system.

File Structure

Well organized file structure.

Usage Guidance

Usage rules and best practices.

FREE REACT CODE LIBRARY

Start with the free code library. Production-ready.

Start free with core components, then unlock advanced patterns, expanded variants, and the full Pro code library at 40% off.

Get Start Free
sign-in-card.tsx
Open in Docs
import Image from "next/image"
import { RiArrowDownSLine, RiLock2Line } from "@create-ui/assets/icons"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
import {
  Field,
  FieldContent,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupControl,
  InputGroupSlot,
} from "@/components/ui/input-group"
import { Label, LabelMain } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { SocialLoginButton } from "@/components/ui/social-login-button"
import { TextLink } from "@/components/ui/text-link"

export function SignInCard() {
  return (
    <form className="bg-static border-light shadow-neutral-xs flex w-full flex-col overflow-hidden rounded-xl border">
      <div className="p-component-lg flex flex-col gap-2">
        <div className="flex items-center justify-between gap-2">
          <h3 className="text-body-md text-strongest font-semibold">Sign In</h3>
          <Image
            src="/logomark.svg"
            alt="Create UI"
            width={24}
            height={24}
          />
        </div>
        <p className="text-body-sm text-body">
          Please enter your account informations.
        </p>
      </div>

      <Separator />

      <div className="gap-component-lg p-component-lg flex flex-col">
        <SocialLoginButton brand="google" appearance="white" size="md" />

        <FieldGroup className="gap-component-lg">
          <Field size="sm">
            <FieldLabel>E-Mail Address</FieldLabel>
            <Input type="email" placeholder="[email protected]" />
          </Field>

          <Field size="sm">
            <FieldLabel>Password</FieldLabel>
            <InputGroup>
              <InputGroupSlot>
                <RiLock2Line />
                <InputGroupControl type="password" placeholder="••••••••" />
              </InputGroupSlot>
            </InputGroup>
          </Field>
        </FieldGroup>

        <div className="flex items-center justify-between">
          <CheckboxGroup variant="primary" size="sm" placement="left">
            <Checkbox defaultChecked />
            <FieldContent>
              <LabelMain>
                <Label>Remember Me</Label>
              </LabelMain>
            </FieldContent>
          </CheckboxGroup>
          <TextLink variant="neutral" size="xs" underline>
            Forgot Password?
          </TextLink>
        </div>
      </div>

      <Separator align="center">
        <RiArrowDownSLine />
      </Separator>

      <div className="p-component-lg flex flex-col gap-2">
        <Button variant="primary" appearance="solid" size="lg">
          Sign In
        </Button>
        <div className="text-paragraph-xs text-body flex items-center justify-center gap-1">
          <span>Don't have an account?</span>
          <TextLink variant="primary" size="xs" underline>
            Sign Up
          </TextLink>
        </div>
      </div>
    </form>
  )
}
Preview

Sign In

Create UI

Please enter your account informations.

Forgot Password?
Don’t have an account?Sign Up
Clean Code

Readable, typed, and built to stay maintainable.

Modern Stack

React, Tailwind CSS, and Radix UI primitives.

Design Matched

Every component matches the Figma system exactly.

Responsive

Fully responsive across every breakpoint, out of the box.

Token Sync

Design tokens sync from Figma directly into code.

RESPONSIVE DESIGN SYSTEM

Responsive UI components, built for every screen size.

Every Create UI component adapts across desktop, tablet, and mobile, spacing, typography, and layout adjust automatically. No extra config.

Mobile
767px320px

Responsive UI,
out of the box.

Browse Components
Switch component preview
Avatar component preview
Banner component preview
40% OFF · LIMITED TIME

One system, three ways in.
Pay once. Use forever.

Choose the access you need across design and development. Start with React, scale with Figma, or unlock the full workflow with Figma + React.

Design

$29840% OFF
$179
lifetimesingle user

The complete Figma design system, tokens, components, and variables, ready to open.

  • Full Figma design systemReady
  • 65+ base componentsGrowing
  • 16,800+ component variants
  • 700+ Design tokens & variables
  • Auto layout + dark mode ready
  • Future block + template updates
  • Documentation & usage rules
  • Commercial use included
  • E-Mail & Discord support (24h)
  • AI Context Files.md
Get Design System

Code

$49840% OFF
$299
lifetimesingle user

The full React component library, installable, production-ready, built to ship.

  • Full Installable Pro code library
  • Clean and developer-friendly
  • Responsive code structure
  • Design-aligned components
  • Future block + template updates
  • Documentation & usage examples
  • Commercial use included
  • E-Mail & Discord support (24h)
  • AI Context Files.md
  • Agent - Friendly ResourcesMCP
  • Pro AISkills
Get Pro Code

40% off - v1.0 is out now

Complete

$64840% OFF
$389
lifetimesingle user

Figma and React, unified. The fastest path from design to production.

  • Save $89 with complete package
  • Everything inDesignincluded
  • Everything inCodeincluded
  • Unified workflow across design and code
  • Better consistency and faster handoff
  • Design-aligned components
  • Documentation & usage examples
  • Commercial use included
  • E-Mail & Discord support (24h)
Get Full System
40% off - v1.0 is out now
Lifetime access
Future updates included
FAQ

Questions,
answered clearly.

Plans, pricing, licensing, updates, and technical questions, all answered in one place.

Still have questions?

Visit ourHelp Centerfor detailed guidance, orGet in Touchwith our team
Çağla
Hakan
Batuhan
Atakan
Çağatay
for product,licensing or technical questions.

Create UI is a unified design and code system, a Figma design system and a React component library built to work together. It gives designers ready-to-use components, tokens, and styles in Figma, and gives developers the same components as installable React code. The goal: eliminate the gap between design and production so your team ships faster and stays consistent.

The Design plan includes the full Figma design system, all components, tokens, variables, and styles. The Code plan includes the installable React component library, built with React, Tailwind CSS, and Radix UI. The Complete plan includes both, at a $44 discount vs buying separately, and is the recommended option for teams and anyone who works across design and development.

Both. If you're a designer, the Design plan gives you everything you need in Figma, no code required. If you're a developer, the Code plan gives you the React library independently, no Figma needed. Many solo builders and indie hackers go with Complete because they do both.

The free version includes a selection of core React components, enough to evaluate the system and start building. It does not include the full Figma design system, the complete component library, design tokens, advanced variants, or Pro patterns. If you're building a real product and need the full system, all 65+ components, 16,800+ variants, and the Figma kit, you'll need a paid plan.

Your current plan is a one-time payment, no subscriptions, no recurring charges for what you buy today. Some future Create UI products (such as AI-powered features) may be offered as optional add-on subscriptions, but these are entirely separate and will never affect your existing purchase. What you buy now, you own permanently.

No. This is launch pricing, the lowest Create UI will ever be. The discount reduces step by step over the coming months until prices return to standard rates. Once you buy, your price is locked and you're never charged again. See the pricing page for today's price.

After purchase, you'll receive an email with access instructions within a few minutes. The Figma design system is shared as a Figma Community file, you duplicate it into your workspace. The React component library is available via npm or copy-paste from the docs. If you don't receive access within 15 minutes, check your spam folder or contact us at [email protected].

Individual plans cover a single user. If you're a team, each member who actively uses the Figma system or code library needs their own license, or contact us about a Teams or Enterprise plan for volume pricing. Freelancers using Create UI across client projects can use a single individual license, as long as you are the one building with it.

Yes, commercial use is included in all paid plans. You can use Create UI in client work, commercial products, SaaS applications, and internal tools. You may not resell, redistribute, or sublicense the components, Figma files, or any Create UI assets as a standalone product or design system kit. Building with Create UI is permitted; reselling Create UI as your own system is not.

All sales are final. Because Create UI is a digital product delivered immediately upon purchase, including access to the Figma system and code library, we do not offer refunds once access has been granted. We strongly recommend exploring the free code library and previewing the Figma system before purchasing. If you experience a technical issue preventing access, contact us within 7 days of purchase and we will resolve it. Refunds are not issued for change of mind, unmet feature expectations, or unused licenses.

Create UI
40% OFF · LIMITED TIME

Stop deciding.
Start shipping.

The system is ready. Free to start, or get full access
at 40% off before the price goes up.

Get 40% off nowStart for Free

Start Free Now.
Upgrade whenever you need.