Installation

Use fetaUI from React, through your agent with the MCP server, with shadcn or as plain SVG.

Pre-release: The packages below are not published yet. Commands and imports are final, so you can plan around them.

React

Install the package and Motion, which it uses as a peer dependency.

Terminal

npm install @fetaui/react motion

Import icons from the style you want. Each style is its own entry point, so only the icons you use end up in your bundle.

app.tsx

import { Notification03Icon } from '@fetaui/react/rounded'

export function Inbox() {
  return <Notification03Icon size={24} trigger="hover" />
}

A single icon adds about 2 KB gzipped, plus Motion. Riso, Glass and Neon are slightly larger because they carry extra layers.

MCP server

The fetaUI MCP server lets your agent search every component and icon, read its docs and props, and get Free source. It runs at https://fetaui.dev/mcp over HTTP, with nothing to install. With Pro, send your key in the X-API-Key header and the same tools return Pro source.

Claude Code

Terminal

claude mcp add --transport http fetaui https://fetaui.dev/mcp

With your Pro key:

.mcp.json

{
  "mcpServers": {
    "fetaui": {
      "type": "http",
      "url": "https://fetaui.dev/mcp",
      "headers": { "X-API-Key": "${FETA_PRO_TOKEN}" }
    }
  }
}

Cursor

.cursor/mcp.json

{
  "mcpServers": {
    "fetaui": {
      "url": "https://fetaui.dev/mcp"
    }
  }
}

With your Pro key:

.cursor/mcp.json

{
  "mcpServers": {
    "fetaui": {
      "url": "https://fetaui.dev/mcp",
      "headers": { "X-API-Key": "${env:FETA_PRO_TOKEN}" }
    }
  }
}

VS Code

.vscode/mcp.json

{
  "servers": {
    "fetaui": {
      "type": "http",
      "url": "https://fetaui.dev/mcp"
    }
  }
}

With your Pro key:

.vscode/mcp.json

{
  "servers": {
    "fetaui": {
      "type": "http",
      "url": "https://fetaui.dev/mcp",
      "headers": { "X-API-Key": "${input:feta-pro-token}" }
    }
  },
  "inputs": [
    { "type": "promptString", "id": "feta-pro-token", "description": "fetaUI Pro key", "password": true }
  ]
}

The tools are search, get_component, get_icon and get_started. They only read, and each visitor gets 120 calls a minute.

shadcn

Copy an icon into your project as source. Item names are <style>-<icon>.

Terminal

npx shadcn add @fetaui/riso-bell

Static SVG

Download a style pack, or copy any icon from the icon browser with Copy SVG. Files are 24 × 24 and use currentColor, so they take the text color of their container.

index.html

<span style="color: #0ea5e9">
  <img src="/icons/rounded/bell.svg" width="24" height="24" alt="" />
</span>

Styles with extra colors read CSS variables with a built in default, so they look right even as a plain image.

Introduction Styles