SonoJS

React components, blocks, and tools for your projects.

A customizable React UI library with ready-to-use components, interface blocks, charts, and icons. Use the SonoJS CLI to add components to your project, or connect an AI coding agent through MCP.

  1. Reading your project
  2. Composing with SonoJS components
  3. Wrote login-form.tsx

Welcome back

Sign in to continue.

Forgot your password?

Blocks for complete AI interfaces

Production-ready blocks for agent workspaces, chat composers, and full product flows — so you can ship real interfaces without starting from a blank canvas.

  • Model picker and send controls
  • Interactive composers for AI agents
  • RTL-ready and theme-aware
  • Copy or install with the SonoJS CLI

118+ blocks. Ready to build with.

Build a login form with email and password.
Done — email, password, and a Sign in button with SonoJS Field and Button.
Add a forgot-password link under the form.
Added. Centered muted link under the actions — works in LTR and RTL.

Charts ready for production

A collection of customizable, interactive charts for React, built for modern dashboards and data-driven applications. Fully RTL-ready, with dark mode and responsive layouts. Easy to customize and install with the SonoJS CLI.

  • Full RTL support
  • Dark mode and responsive layouts
  • Interactive chart demos
  • Copy, customize, or install with the SonoJS CLI

221+ charts. Ready to build with.

BitcoinBTC/USD

+0.70%

$68,097.84

0.00%

Icons for every interface

Explore a growing collection of icons for development, crypto, interfaces, and everyday use. Find the right icon, customize it, and use it directly in your React projects.

  • Developer and technology icons
  • Crypto and blockchain icons
  • UI and general-purpose icons
  • Easy to find and use

Tools that simplify your workflow

Practical browser tools for everyday work — call APIs, inspect responses, and clear friction without leaving your tab.

SonoJS developer tools preview

MCP for your AI coding agent

Connect AI coding agents like Cursor and Claude Code to SonoJS through MCP. Let your agent discover components, access documentation, and build interfaces directly in your codebase.

SonoJS MCP for AI coding agents