Ship product at the speed of thought.
/* ion converts Figma designs into clean react code to free up your development cycles, built for your own design system. */
Supercharge your Product Team
Stop having your devs repeat the work your designer has already done. With ion, you'll accomplish more than ever.
Industry Leading Code Generation
ion generates pixel-perfect code that fits your codebase and style.
Built for your design system
ion will automatically understand your bespoke design system and generate tailor-fitted code for your use case. It'll even understand what libraries you use.
Your AI Teammate
ion learns from your existing code to write multiple components indistinguishable from what your engineers write. Say goodbye to spaghetti code.
Logic & Stub Functions
ion generates complicated components with ease. Front end will be fully hooked up and ready to ship with animations, state, and even fetching. Just hook up your api and ship!
'use client';
// Generated with Ion on 2/6/2024, 10:17:46 AM
// Figma Link: https://www.figma.com/file/Qohyu8a8oaVqtDvIRuY120?node-id=657:4038

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.
        </div>
      </div>
      <CookieRadioBar
        title="Strictly Necessary"
        subtitle="These cookies are essential in order to use the website and use its features."
      />
      <CookieRadioBar
        subtitle="These cookies allow the website to provide personalized functionality."
        title="Functional Cookies"
      />
      <CookieRadioBar
        subtitle="These cookies help improve the performance of the website."
        title="Performance Cookies"
      />
      <Button
        iconTrailing={<Pencil size={16} weight={'regular'} />}
        emphasis="medium"
        color="primary"
        size="md"
        onClick={savePreferencesClickHandler}
        className="w-full"
      >
        Save Preferences
      </Button>
    </div>
  );
}
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 Started today, for free!
Supercharge your front end process
Start Free Trial