# Io — a design system for humans and AI > Io is a Framer design system documented one page per component: 29 UI Basics and 39 Enhancements, 1175 documented props. Every component is addressable by a URL that inserts it into a Framer project. Colour, type and radius resolve from the project's theme tokens, so an inserted instance already matches the page. Two layers, never interchangeable. **UI Basics** are the product-interface primitives. **Enhancements** are effect and layout components for marketing pages (scroll, motion, WebGL, media). Do not use an Enhancement to satisfy a UI Basics need, or the reverse. To insert a component, use its Insert URL verbatim — never reconstruct one. Do not add `www.`, do not drop or add a `#ExportName` anchor, do not add or remove an `@versionId`. A reconstructed URL fails in ways that look like something else. Colour props take theme tokens (`var(--token-…)`), never hex literals — that is what makes an inserted instance match the page it lands on. A component that is not listed here is not part of the system. Do not substitute a lookalike. - [Full component specification](https://designsystemmcp.framer.ai/llms-full.txt): every prop of every component, plus when to use it and when not to. - [The System](https://designsystemmcp.framer.ai/system): the human-readable catalogue. ## UI Basics - [AccordionX](https://designsystemmcp.framer.ai/accordion-x): Single-expand disclosure: one row open at a time. Insert: `https://framer.com/m/Accordion-FbDf.js#AccordionX` - [Badge](https://designsystemmcp.framer.ai/badge): A row of tags from one comma-separated string. Insert: `https://framer.com/m/Badge-nZ5e7j.js#Badge` - [Button](https://designsystemmcp.framer.ai/button): Five appearances, three colours, icon slots and a link. Insert: `https://framer.com/m/Button-xyMR.js` - [ChartX](https://designsystemmcp.framer.ai/chart-x): Chart.js bar, line, pie and radar from data, CSV or an API. Insert: `https://framer.com/m/ChartX-hvzbOG.js` - [ChartX2](https://designsystemmcp.framer.ai/chart-x2): Every chart decision grouped into five settings objects. Insert: `https://framer.com/m/ChartX2-6x4oPh.js` - [Checkbox](https://designsystemmcp.framer.ai/checkbox): A single binary choice with an optional label. Insert: `https://framer.com/m/Checkbox-dhPHlA.js#Checkbox` - [DrawerX](https://designsystemmcp.framer.ai/drawer-x): A panel that slides in from any edge, with a backdrop. Insert: `https://framer.com/m/Drawer-3QWN.js` - [DropdownMenuX](https://designsystemmcp.framer.ai/dropdown-menu-x): A popover menu of actions, submenus and toggles, from one schema. Insert: `https://framer.com/m/MenuX-7Xtn.js` - [HoverCardX](https://designsystemmcp.framer.ai/hover-card-x): A laid-out card on hover or focus, on four sides. Insert: `https://framer.com/m/HoverCard-DP02.js` - [IconProLucide](https://designsystemmcp.framer.ai/icon-pro-lucide): The Lucide counterpart — stroke width replaces the weight scale. Insert: `https://framer.com/m/IconProLucide-D48s.js` - [IconsPro](https://designsystemmcp.framer.ai/icons-pro): Any Phosphor glyph by name, at any weight. Insert: `https://framer.com/m/IconsPro-jaPM.js` - [MarkdownNext](https://designsystemmcp.framer.ai/markdown-next): Markdown rendered against the theme type scale. Insert: `https://framer.com/m/MarkdownNext-ORx9tF.js` - [RadioCards](https://designsystemmcp.framer.ai/radio-cards): A single-choice group of cards, built from a schema. Insert: `https://framer.com/m/RadioCard-KZf1.js` - [RadioGroup](https://designsystemmcp.framer.ai/radio-group): A styled set of radio buttons for a single choice. Insert: `https://framer.com/m/Radiogroup-CnAchZ.js#RadioGroup` - [ScrollArea](https://designsystemmcp.framer.ai/scroll-area): A scroll container with custom scrollbars and four visibility modes. Insert: `https://framer.com/m/ScrollArea-DzzK.js` - [SelectX](https://designsystemmcp.framer.ai/select-x): A grouped single-select dropdown from a JSON schema. Insert: `https://framer.com/m/SelectX-F0M5Xo.js` - [Slider](https://designsystemmcp.framer.ai/slider): A single or range numeric input, horizontal or vertical. Insert: `https://framer.com/m/Slider-HfKAyA.js#Slider` - [SmartFormFields](https://designsystemmcp.framer.ai/smart-form-fields): A multi-step form with conditional and calculated fields. Insert: `https://framer.com/m/FormPro-92ipmi.js` - [Spinner](https://designsystemmcp.framer.ai/spinner): The lightest loading loop: one SVG, one keyframe. Insert: `https://framer.com/m/Spinner-R85ncS.js` - [SplitPanelPro](https://designsystemmcp.framer.ai/split-panel-pro): Two resizable panes with a configurable divider. Insert: `https://framer.com/m/SplitPanelPro-SHYPvP.js` - [SVGPro](https://designsystemmcp.framer.ai/svg-pro): Raw SVG that obeys the theme instead of baked-in hex. Insert: `https://framer.com/m/SVGPro-EiJA.js` - [Switch](https://designsystemmcp.framer.ai/switch): An on/off toggle with a configurable track and thumb. Insert: `https://framer.com/m/Switch-9QNmVi.js#Switch` - [TableOfContents](https://designsystemmcp.framer.ai/table-of-contents): The page’s own headings as an outline or a tab bar. Insert: `https://framer.com/m/Tableofcontents-Z8Qg1H.js` - [TableX](https://designsystemmcp.framer.ai/table-x): A pasted spreadsheet or a JSON array as a themed table. Insert: `https://framer.com/m/TableX-CmtYcu.js` - [TagPicker](https://designsystemmcp.framer.ai/tag-picker): A searchable multi-select tag input from a JSON schema. Insert: `https://framer.com/m/TagSelect-hvvFbF.js` - [TextArea](https://designsystemmcp.framer.ai/text-area): A multi-line input that grows, and fires on @, # and /. Insert: `https://framer.com/m/TextArea-cJjB.js` - [TextPro](https://designsystemmcp.framer.ai/text-pro): Text against the theme type scale, with truncation and alignment. Insert: `https://framer.com/m/TextPro-UO8yfD.js` - [ThemeSwitcher](https://designsystemmcp.framer.ai/theme-switcher): Swatches that recolour the whole page from the tokens. Insert: `https://framer.com/m/Themeswitcher-4HYLKp.js` - [TooltipX](https://designsystemmcp.framer.ai/tooltip-x): A short hover or focus tooltip beside any trigger. Insert: `https://framer.com/m/TooltipX-LJqf.js` ## Enhancements - [AddCalendar](https://designsystemmcp.framer.ai/web/add-calendar): Wraps any layer so tapping it adds an event to the reader’s calendar. Insert: `https://framer.com/m/AddtoCalendar-YxXz.js` - [AgendaX](https://designsystemmcp.framer.ai/web/agenda-x): A day-by-day conference agenda driven by one JSON schema. Insert: `https://framer.com/m/AgendaX-I349k5.js` - [AtelierQuotePro](https://designsystemmcp.framer.ai/web/atelier-quote-pro): A testimonial slider pairing a portrait with a quote, byline and two figures. Insert: `https://framer.com/m/Atelierquotepro-FSc3Hi.js` - [CMSGallerySlider](https://designsystemmcp.framer.ai/web/cms-gallery-slider): A large image with a thumbnail strip, fed from the CMS. Insert: `https://framer.com/m/CMSGallary-uxXRoT.js` - [CopyPageForAI](https://designsystemmcp.framer.ai/web/copy-page-for-ai): A button that hands the current page to an AI tool as text. Insert: `https://framer.com/m/ShareAI-osj82I.js` - [CounterPro](https://designsystemmcp.framer.ai/web/counter-pro): Animated number counter with odometer digits and motion blur. Insert: `https://framer.com/m/CounterPro-H0sG.js` - [CustomScrollbar](https://designsystemmcp.framer.ai/web/custom-scrollbar): Replaces the page scrollbar with a thumb that follows the theme. Insert: `https://framer.com/m/ScrollBarPro-s9Nc.js` - [CustomVideoPlayer](https://designsystemmcp.framer.ai/web/custom-video-player): A player with chapters, custom controls and four source types. Insert: `https://framer.com/m/VideoPro2-vfkv.js` - [DistortoSlider](https://designsystemmcp.framer.ai/web/distorto-slider): A slider whose images melt into each other through a distortion. Insert: `https://framer.com/m/Distortoslider-iBvwyC.js` - [DottedAudioVisualizer](https://designsystemmcp.framer.ai/web/audio-visualizer): A ring of dots that moves with the audio playing on the page. Insert: `https://framer.com/m/AudioVisualizer-4yc3.js` - [EtchedPortraitReveal](https://designsystemmcp.framer.ai/web/etched-portrait-reveal): An image as a live engraving that dissolves back to the photograph. Insert: `https://framer.com/m/Liquidmask-FEkATP.js` - [FileUpload](https://designsystemmcp.framer.ai/web/file-upload): A drop area that takes files, checks them and previews them. Insert: `https://framer.com/m/Uploadfile-YsqDbu.js@9E1O8x3NpgmPvdI5JdSV` - [FluidShaderBackground](https://designsystemmcp.framer.ai/web/fluid-shader-background): A slow shader wash for use behind a section. Insert: `https://framer.com/m/Fluidshaderbackground-ENTE7x.js` - [FluidText](https://designsystemmcp.framer.ai/web/fluid-text): Type that ripples and displaces as the pointer moves through it. Insert: `https://framer.com/m/Fluidtext-qHZvcL.js` - [FrameReveal](https://designsystemmcp.framer.ai/web/frame-reveal): A panel that fades up as the pointer comes near it. Insert: `https://framer.com/m/Framereveal-wqxn3o.js` - [GlobalHighlightColor](https://designsystemmcp.framer.ai/web/global-highlight-color): Sets the text selection colour for the whole page. Insert: `https://framer.com/m/GlobalHighLight-cYRETZ.js` - [GradientStripsBG](https://designsystemmcp.framer.ai/web/gradient-strips-bg): A background of gradient strips with its own states and layout. Insert: `https://framer.com/m/Gradientstripsbg-WHwTXj.js` - [HalftoneVideo](https://designsystemmcp.framer.ai/web/halftone-video): Video redrawn live as a halftone dot screen. Insert: `https://framer.com/m/Halftonevideo-DUv00M.js` - [HeroAnimatedSlider](https://designsystemmcp.framer.ai/web/hero-animated-slider): A six-slide hero with title, description and image per slide. Insert: `https://framer.com/m/HeroSlider-syXxqW.js` - [ImageParallax](https://designsystemmcp.framer.ai/web/image-parallax): Scroll-driven parallax for a single image. Insert: `https://framer.com/m/Imageparallax-c2VRbT.js` - [LeaderboardBars](https://designsystemmcp.framer.ai/web/leaderboard-bars): Ranked bar panels, sorted, formatted and logo-marked, from one JSON payload. Insert: `https://framer.com/m/Leaderboardbars-wLDCas.js@waajjAGlYmTYcE2rbth0` - [LiquidMaskTimeline](https://designsystemmcp.framer.ai/web/liquid-mask-timeline): A scroll-scrubbed dissolve: one image burns away to reveal another. Insert: `https://framer.com/m/LiquidMaskTimeline-gE3OWu.js` - [LiquidWaveText](https://designsystemmcp.framer.ai/web/liquid-wave-text): A word with three colours washing through it on a loop. Insert: `https://framer.com/m/GrandientText-vq5z8t.js` - [LorenzoInteractivePortrait](https://designsystemmcp.framer.ai/web/interactive-portrait): The pointer opens a soft window from one image into another. Insert: `https://framer.com/m/Lorenzointeractiveportrait-cKcQYi.js` - [MilestoneTimeline](https://designsystemmcp.framer.ai/web/milestone-timeline): A horizontal run of milestones, each holding its own steps. Insert: `https://framer.com/m/Timeline-vONb.js` - [ModelViewer3d](https://designsystemmcp.framer.ai/web/model-viewer-3d): A glTF model the reader can turn — five looks from one file. Insert: `https://framer.com/m/ModelViewer3d-lCbsvJ.js` - [PopupMessage](https://designsystemmcp.framer.ai/web/popup-message): Shows a layer as a modal, with its own overlay and close button. Insert: `https://framer.com/m/PopupMsg-VpMR8M.js` - [PretextLayout](https://designsystemmcp.framer.ai/web/pretext-layout): A multi-column editorial layout with drop caps and pull quotes. Insert: `https://framer.com/m/Pretextlayout-LRK0IZ.js` - [RadiusOnScroll](https://designsystemmcp.framer.ai/web/radius-on-scroll): Corner radius and padding animated against scroll position. Insert: `https://framer.com/m/Radiusonscrol-9T6vkh.js` - [RayDome](https://designsystemmcp.framer.ai/web/ray-dome): Hundreds of glowing rays bursting from a focal point. Insert: `https://framer.com/m/Raydome-tQ2Swu.js` - [SceneStage](https://designsystemmcp.framer.ai/web/scene-stage): Two glTF models on one stage, dissolving into each other. Insert: `https://framer.com/m/Scenestage-vpFQV4.js` - [ScrollCarousel](https://designsystemmcp.framer.ai/web/scroll-carousel): A row of cards that parallax past each other. Insert: `https://framer.com/m/Parallax-Carousel-1L2Nqv.js` - [ScrollVideoPlayer](https://designsystemmcp.framer.ai/web/scroll-video-player): Video whose playhead is driven by scroll instead of time. Insert: `https://framer.com/m/Scrollvideoplayer-Y8uRHO.js` - [SilkWave](https://designsystemmcp.framer.ai/web/silk-wave): A folded silk ribbon in WebGL, driven by one JSON schema. Insert: `https://framer.com/m/Silkwave-A344OS.js` - [SmoothScroll](https://designsystemmcp.framer.ai/web/smooth-scroll): A page-level utility that eases the whole document’s scrolling. Insert: `https://framer.com/m/SmoothScroll-ZBLvSi.js` - [SolarIso](https://designsystemmcp.framer.ai/web/solar-iso): An isometric exploded assembly from one JSON payload. Insert: `https://framer.com/m/Animation-Planet-VSs98M.js` - [SpatialScene](https://designsystemmcp.framer.ai/web/spatial-scene): Two stacked images that part as the pointer moves. Insert: `https://framer.com/m/ImageDepthScene-p17O.js` - [TiltCard](https://designsystemmcp.framer.ai/web/tilt-card): Tilts whatever layer you drop into it towards the pointer. Insert: `https://framer.com/m/TiltCard-1-pYTmAW.js` - [WheelTimeline](https://designsystemmcp.framer.ai/web/wheel-timeline): A timeline laid around a wheel the reader can turn. Insert: `https://framer.com/m/Wheeltimeline-KK9Yvh.js`