Ship product at the speed of thought.
//* ion converts Figma designs into clean react code to free up your development cycles .*//
Design with ion
Your design language, your system. Theme it based on your needs, and supercharge your design process.
Generate code with ion
Generate pixel-perfect code that fits your codebase and style.
Pixel-perfect code
Stop going back and forth between vsCode and Figma. Generate and ship with confidence.
Multifile components, tailored to your codebase
ion learns from your existing code to write multiple components indistinguishable from what your engineers write.
Conditional logic and stub functions
ion generates complicated component sets with ease. ion also generates state handlers and stub functions, getting you 80% of the way to prod in one click.
'use client';
// Generated with Ion on 2/6/2024, 10:17:46 AM
// Figma Link:

import { Pencil } from '@phosphor-icons/react';
import Button from 'components/ion/Button';
import CookieRadioBar from 'components/ion/CookieRadioBar';
import { MouseEvent } from 'react';

function CookieSettings() {
  function savePreferencesClickHandler(e: MouseEvent<HTMLButtonElement>) {
    alert('savePreferencesClickHandler fired');
  return (
    <div className="bg-base w-[360px] flex-col flex items-start gap-y-6 px-6 py-8 rounded-radius-lg border border-sub-stroke h-fit">
      <div className="flex-col flex items-start">
        <div className="text-2xl text-base-foreground">Cookie Settings</div>
        <div className="text-base font-semibold text-sub-foreground">
          Manage your cookie settings here.
        title="Strictly Necessary"
        subtitle="These cookies are essential in order to use the website and use its features."
        subtitle="These cookies allow the website to provide personalized functionality."
        title="Functional Cookies"
        subtitle="These cookies help improve the performance of the website."
        title="Performance Cookies"
        iconTrailing={<Pencil size={16} weight={'regular'} />}
        Save Preferences
export default CookieSettings;
Our shipping cadence has been unleashed since we started using Ion. And surprisingly, it's improved the quality of our codebase and our final product. That's because we can spend more time thinking about design and architecture and less time on UI and CSS. It's hard for me to imagine going back.
Agree Ahmed
Cofounder, NUMI (YC W20)
Get early access
Supercharge your front end process
Get Early Access