Toolverse npm Packagev1.3.0 LIVE

npm install toolverse — 263 components + 1,099 icons

3 steps to get started

Toolverse is a regular npm package. Install once, then import any of the 263 components or 1,099 icons into your React project.

1Install the package

npm install toolverse

Or: yarn add toolverse / pnpm add toolverse

2Wrap your app with ToolverseProvider (optional but recommended for theming)

// app.tsx or _app.tsx
import { ToolverseProvider } from "toolverse";

export default function App({ children }) {
  return (
    <ToolverseProvider theme={{ colors: { primary: "#6366f1" } }}>
      {children}
    </ToolverseProvider>
  );
}

3Import and use any component or icon

import { Button, Card, Alert, Badge, Avatar, Plus, Search } from "toolverse";

function MyPage() {
  return (
    <Card hover padding="lg">
      <h2>Hello Toolverse</h2>
      <Button variant="primary" gradient>
        <Plus size={16} /> Add Item
      </Button>
      <Alert variant="success" title="Done!">Item added successfully</Alert>
      <Badge variant="primary" dot>New</Badge>
      <Avatar name="John Doe" status="online" />
      <Search size={20} color="#6366f1" />
    </Card>
  );
}

That's it — no file creation, no copy-paste

All 263 components and 1,099 icons are now available. Tree-shaking ensures only imported components are bundled. Updates automatic with npm update toolverse.

Three ways to use Toolverse

1. npm install (RECOMMENDED) — install package, import components. No file creation.
2. CLI — npx toolverse add button adds component file to your project. You own the code.
3. Export as File (web app) — for Vue/Svelte/Angular. Single file with embedded styles (NEW in v1.3.0 — no more 2-file problem!).

Toolverse npm package is open-source (MIT license). View on npmjs.com/package/toolverse. Questions? Contact us.