---
name: "@darx"
slug: "darx"
description: "A single showcase component — Magic 3D Tabs — from Darshit's personal portfolio. Features mouse-interactive 3D rotation via spring physics, floating particle background effects, and smooth spring animations. Built as a React component with Tailwind CSS. Minimal scope: one experimental interactive pattern. Free and open source. Use for: pulling a specific 3D tab interaction effect when you want mouse-reactive depth without building it yourself."
category: "Niche/single-purpose"
tags: ["3d", "aesthetic", "animation", "backgrounds", "hooks", "navigation"]
framework: "react"
license: null
author: "Darshh09"
website: "https://darshitdev.in/arts"
github: "https://github.com/Darshh09/darshit-portfolio"
registry: "https://darshitdev.in/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 1
generated_at: "2026-07-28T08:00:50.948Z"
---

# @darx

A single showcase component — Magic 3D Tabs — from Darshit's personal portfolio. Features mouse-interactive 3D rotation via spring physics, floating particle background effects, and smooth spring animations. Built as a React component with Tailwind CSS. Minimal scope: one experimental interactive pattern. Free and open source. Use for: pulling a specific 3D tab interaction effect when you want mouse-reactive depth without building it yourself.

## Links

- Website: https://darshitdev.in/arts
- GitHub: https://github.com/Darshh09/darshit-portfolio
- Registry JSON: https://darshitdev.in/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/darx
- This file: https://sh4dcn.vercel.app/md/darx.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://darshitdev.in/r/registry.json
pnpm dlx shadcn@latest add https://darshitdev.in/r/registry.json
bunx shadcn@latest add https://darshitdev.in/r/registry.json
# clone the source repo
git clone https://github.com/Darshh09/darshit-portfolio.git
# fetch the raw registry index
curl -s https://darshitdev.in/r/registry.json
```

## Components (1)

| name | type | description | install |
| --- | --- | --- | --- |
| magic-genie-tabs | registry:component | macOS-style genie animation with a sleek glass pill nav bar | `npx shadcn@latest add https://darshitdev.in/r/magic-genie-tabs.json` |

## For AI agents

```text
You are adding components from @darx to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/darx.md) for the component list.
2. Fetch the machine-readable index: https://darshitdev.in/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: darx).
```