🛡️ Toolverse

Premium UI Component & Icon Library for React — Vue, Svelte & Angular via export

254 components (handcrafted + generated library) · 1,052 icons × 7 variants · real theme system · zero-dependency CLI

Install · copy · ship. Like Bootstrap gave you CSS, Toolverse gives you React.

⚡ Install

npm install toolverse

That's it. No file creation. No config. No copy-paste. Just install and import.

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

<Card hover padding="lg">
  <h2>Hello Toolverse 👋</h2>
  <Button variant="primary" gradient>
    <Plus size={16} /> Get Started
  </Button>
  <Alert variant="success" title="Done!">Your account is ready.</Alert>
</Card>

🎯 Why Toolverse?

| | Toolverse | Typical UI kit | |---|---|---| | Components | 254 (handcrafted + library) | ~50 | | Icons | 1,052 × 7 variants = same icon in 7 looks | 1 look | | Theme system | Real — one <ToolverseProvider> re-skins everything | CSS vars if you're lucky | | TypeScript | Strict, full types | Partial | | Zero runtime CSS-in-JS | ✅ inline styles, tree-shakeable | ❌ | | CLI (own the code) | ✅ shadcn-style npx toolverse add | ❌ | | Live builder on the web | ✅ Component Builder | ❌ |

🧩 What's Included

31 Handcrafted Premium Components

Production-ready, fully themed, accessible. Every one reads the theme.

| Category | Components | Example | |----------|-----------|---------| | Buttons | Button, IndigoGradientButton, PillButton, GlowButton, OutlineButton, GhostButton | <Button variant="primary" gradient>Save</Button> | | Cards | Card, CardHeader, CardBody, CardFooter | <Card hover padding="lg">…</Card> | | Alerts | Alert (info/success/warning/danger) | <Alert variant="success" title="Done!">Saved</Alert> | | Badges | Badge (7 variants) | <Badge variant="primary" dot>New</Badge> | | Inputs | Input, Textarea | <Input label="Email" error="Invalid" /> | | Avatars | Avatar, AvatarGroup | <Avatar name="John" status="online" /> | | Tooltips | Tooltip (4 positions) | <Tooltip content="Save"><Button>?</Button></Tooltip> | | Progress | Progress, CircularProgress | <Progress value={75} striped /> | | Dividers | Divider (3 styles × 2 orientations) | <Divider label="OR" /> | | Loaders | Spinner, Skeleton, DotsLoader | <Spinner size={32} /> | | Tags | Tag (removable, 7 variants) | <Tag variant="primary" removable>React</Tag> | | Navbar | Navbar (responsive, mobile drawer) | <Navbar brand="App" items={[…]} /> | | Hero | Hero (3 variants) | <Hero title="Welcome" variant="gradient" /> | | Code | Code, InlineCode | <Code code="const x = 10;" language="js" /> | | Navigation | Tabs, Breadcrumb | <Tabs items={[…]} variant="underline" /> | | Overlay | Modal, Drawer | <Modal open={open} onClose={…}>…</Modal> | | States | EmptyState, ErrorState, SuccessState | <EmptyState title="No items" /> |

243 Library Components — every pixel customizable

Each accepts full customization props. Every name below is verified — copy it, import it, it works.

Buttons (14)

BlockButton, Button, FABButton, GhostButton, GlowButton, GradientTextButton, IconButton, IndigoGradientButton, LinkButton, MagneticButton, OutlineButton, PillButton, SolidButton, WaveButton

Cards (23)

AuroraGlowCard, BasicCard, Card, DarkGlassCard, FloatingCard, GlassCard, GlassHoverCard, GradientBorderCard, GradientCard, GradientMeshCard, HolographicCard, HoverLiftCard, MorphCard, NeonCard, NeumorphicCard, PaperFoldCard, PerspectiveCard, PricingCard, Retro80sCard, ShineCard, SpotlightCard, StatsCard, TiltCard

Alerts (17)

ActionAlert, Alert, BannerAlert, BannerSlideAlert, BorderedAlert, DarkAlert, DismissibleAlert, ErrorAlert, GlassAlert, GradientBorderAlert, GradientInfoAlert, IconBlockAlert, InfoAlert, NeonAlert, RoundedAlert, SuccessAlert, WarningAlert

Badges (10)

Badge, ChipBadge, CountBadge, DotBadge, IconBadge, OutlineBadge, PulseBadge, ShimmerBadge, ShineBadge, SolidBadge

Inputs (17)

Checkbox, FloatingLabel, FloatingLabelInput, GlassInput, GlowInput, IconInput, IconLeftInput, Input, PasswordInput, RoundedInput, SearchBar, Select, TextInput, Textarea, ToggleSwitch, UnderlineInput, UnderlinedInput

Tooltips (8)

ArrowTooltip, DarkTooltip, GlassTooltip, GlowTooltip, GradientTooltip, NeonTooltip, RichTooltip, Tooltip

Progress (12)

AnimatedProgress, CircularProgress, CircularProgress_progresscircular, GlowProgress, GradientProgress, Progress, PulseProgress, SegmentedProgress, StepProgress, StripedProgress, ThinProgress, WaveProgress

Dividers (15)

DashedDivider, Divider, DottedDivider, DoubleDivider, FadeDivider, GlowDivider, GradientDivider, IconDivider, LineDivider, MountainDivider, ParticleDivider, TextDivider, ThickDivider, WaveDivider, ZigzagDivider

Loaders (7)

BounceDots, DotsLoader, ProgressBarLoader, RingSpinner, Skeleton, SkeletonLoader, Spinner

Tags (9)

AnimatedOutlineTag, ChipTag, CounterTag, GlassTag, GradientTag, NeonTag, RemovableTag, ShineTag, StatusTag

Navbar (17)

AnimatedUnderlineNavbar, CenteredNavbar, DarkNavbar, GlassNavbar, GradientNavbar, IconPillsNavbar, MegaMenuNavbar, Navbar, NavbarwithSearch, PillFloatingNavbar, RoundedNavbar, ScrollAwareNavbar, SidebarToggleNavbar, SimpleNavbar, SplitNavbar, SpotlightNavbar, TransparentNavbar

Hero (17)

AuroraHero, CardMosaicHero, CenteredHero, DarkHero, FloatingShapesHero, GlassHero, GradientHero, GridPatternHero, Hero, MinimalHero, MouseSpotlightHero, NeonHero, ParticlesHero, ProductShowcaseHero, SplitDarkHero, SplitHero, TerminalHero

Code (2)

InlineCode, TerminalCode

Navigation (4)

BottomNav, Breadcrumb, Pagination, Tabs

Overlay (8)

ConfirmModal, DarkModal, DarkToast, ErrorToast, GlassModal, InfoToast, Modal, ModalDialog

States (7)

EmptyState, ErrorState, LoadingState, MaintenanceState, NoPermissionState, State, SuccessState

Effects & Utility (67)

AnimatedBorder, AnimatedUnderline, AnimatedWaves, Avatar, AvatarGroup, BurstAvatar, CardBody, CardFooter, CardHeader, CircleAvatar, CodeBlock, CornerBrackets, CubeFlip, DarkCodeBlock, DashedFlow, DoubleBorder, EqualizerBars, FireText, FlipX, FloatingOrbs, GlitchText, GlowAvatar, GlowBorder, GlowCodeBlock, GlowPulse, GradientAvatar, GradientBorder, GradientCodeBlock, GradientRingAvatar, GradientShift, GradientText, GridPattern, HexagonAvatar, IconBounce, InsetBorder, LargeAvatar, LiftUp, MeshGradient, NeonPulseBorder, NeonText, Orbit, PillNavigation, ProgressBar, PulseRing, RingAvatar, Rotate360, RoundedRectAvatar, ShadowBorder, Shake, ShimmerText, SlideBackground, SquareAvatar, Starfield, StatusAvatar, StepNavigation, StoryRingAvatar, SwitchToggle, TabNavigation, ToastNotification, TooltipBottom, TooltipLeft, TooltipRight, TooltipTop, ToolverseProvider, TreeNavigation, TypingEffect, ZoomReveal

Customization props (all 243 generated components):

import { SolidButton, GradientCard, NeonAlert, GlowInput } from "toolverse";

<SolidButton
  text="Click Me"
  bgColor="#ff0000" textColor="#ffffff"
  borderRadius={8} fontSize={14} fontWeight={600}
  shadowX={0} shadowY={4} shadowBlur={12} shadowColor="#ff0000"
/>
<GradientCard text="Card content" gradientFrom="#6366f1" gradientTo="#8b5cf6" useGradient />
<NeonAlert text="Warning!" bgColor="#f59e0b" />
<GlowInput text="Search…" shadowColor="#6366f1" shadowBlur={20} />

| Prop group | Props | |---|---| | Content | text | | Colors | bgColor, textColor, borderColor | | Sizing | borderRadius, paddingX, paddingY, fontSize, fontWeight | | Shadows | shadowX, shadowY, shadowBlur, shadowColor | | Gradients | useGradient, gradientFrom, gradientTo |

🎨 Icons — 1,052 icons × 7 variants

Same icon, 7 different looks. Pick per context.

import { Heart } from "toolverse";

<Heart size={32} variant="line" />        // ✏️ default outline
<Heart size={32} variant="solid" />       // ⬛ filled
<Heart size={32} variant="duotone" />     // 🎨 halo effect
<Heart size={32} variant="aurora" />      // 🌈 animated gradient
<Heart size={32} variant="neon" color="#22d3ee" />  // ⚡ cyberpunk glow
<Heart size={32} variant="glass" />       // 💎 frosted glass
<Heart size={32} variant="crystal3d" color="#a855f7" />  // 🔮 3D depth

| Variant | Look | |---|---| | line | Default outline — thin stroke, transparent fill | | solid | Filled — bold, active states | | duotone | Halo — soft, modern | | aurora | Animated multi-color gradient | | neon | Cyberpunk double glow | | glass | Frosted glass gradient | | crystal3d | 3D depth with shadow layer |

All icons use currentColor by default — set via CSS or the color prop.

🎭 Theme — one provider, whole-library re-skin

import { ToolverseProvider } from "toolverse";

<ToolverseProvider theme={{
  colors: { primary: "#6366f1", danger: "#ef4444", background: "#ffffff" },
  radii: { sm: "4px", md: "12px", lg: "20px" },
  shadows: { md: "0 8px 24px rgba(0,0,0,0.15)" },
}}>
  <App />
</ToolverseProvider>

Change colors.primary once — Button, Badge, Progress, focus rings, everything follows. Read the theme inside your own components with useToolverseTheme().

🎨 Don't want to hand-write themes? Open Theme Studio — pick colors visually, preview live, copy the generated code.

🛠️ Three Ways to Use Toolverse

1️⃣ npm install (recommended)

npm install toolverse

import { Button } from "toolverse";

Zero file creation, automatic updates, tree-shaking.

2️⃣ CLI — own the code (shadcn-style)

npx toolverse add button        # writes src/components/toolverse/Button.tsx
npx toolverse add all           # all 18 component groups
npx toolverse list              # see every group
npx toolverse icons wallet      # search 1,052 icons
npx toolverse theme midnight    # write a ready-made theme preset
npx toolverse stats             # package numbers
npx toolverse doctor            # health check

import { Button } from "./components/toolverse/Button";

3️⃣ Export as File — any framework

Open Toolverse → Developer Studio → Component Builder → customize → Export as File. One file, embedded styles: React .tsx, Vue .vue, Svelte .svelte, Angular, HTML, Tailwind, CSS, SCSS.

🌐 Links

• 📦 npm: toolverse
• 🌍 Live web app + Component Builder + Theme Studio
• 🐛 Report an issue
• 💬 Discussions

🤝 Contributing

PRs welcome! See CONTRIBUTING.md. Run the playground locally:

git clone https://github.com/imranah10/toolverse.git
cd toolverse && npm install
npm run playground:install && npm run playground:dev

📄 License

MIT — free for personal and commercial use.

⭐ Star this repo if Toolverse saved you time — it helps other devs find it.