Ingot UI components are plain React 19 + Tailwind CSS v4 files you own. Interactive parts use Base UI for accessibility.
Install
In a Next.js, Vite or Remix project with Tailwind v4:
npx ingotui init npx ingotui add button kpi-card capsule-bars
Prefer shadcn? Every free component is a shadcn registry item:
npx shadcn add https://ingotui.com/r/button.json
Tokens & theming
Each system is a set of --fu-* CSS variables. The theme bridge maps them to Tailwind utilities like bg-fu-surface and text-fu-ink. Import both in your global CSS:
@import "tailwindcss"; @import "./styles/ingot/theme.css"; @import "./styles/ingot/loopo.css";
Switch systems by swapping the token file, or scope one per area with data-system="loopo". Light mode ships at launch; dark mode is the first update.
Figma
On any component page, “Copy to Figma” puts the component on your clipboard (charts and icons as editable vectors). Pro plans include the full Figma kit for each system with variables, components and screens.
AI agents
Connect the MCP server (see MCP & CLI). Ask your agent to run init_project first: it writes the tokens and a rules file so later sessions keep using the system.
License
Use components in unlimited personal and commercial projects. Free components are free forever. Pro components need an active Pro or Lifetime plan when you copy them; what you shipped stays yours. You may not resell or redistribute the library itself as a UI kit.