---
name: "@upfork"
slug: "upfork"
description: "React + Tailwind CSS components and landing pages. The free ones install with no setup; the rest with an UpFork token."
category: "Crypto/web3"
tags: ["3d", "animation", "blocks", "buttons", "cards", "crypto", "dashboard", "e-commerce", "glassmorphism", "icons", "maps", "marketing", "media", "navigation", "pro-available"]
framework: "react"
license: "MIT"
author: "upfork-dev"
website: "https://upfork.dev"
github: "https://github.com/upfork-dev/free-components"
registry: "https://upfork.dev/r/registry.json"
pro: true
pro_url: "https://upfork.dev/components/pricing"
github_stars: 0
component_count: 20
generated_at: "2026-10-27T06:34:08.542Z"
---

# @upfork

React + Tailwind CSS components and landing pages. The free ones install with no setup; the rest with an UpFork token.

## Links

- Website: https://upfork.dev
- GitHub: https://github.com/upfork-dev/free-components
- Registry JSON: https://upfork.dev/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/upfork
- This file: https://sh4dcn.netlify.app/md/upfork.md
- Pro / pricing: https://upfork.dev/components/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://upfork.dev/r/registry.json
pnpm dlx shadcn@latest add https://upfork.dev/r/registry.json
bunx shadcn@latest add https://upfork.dev/r/registry.json
# clone the source repo
git clone https://github.com/upfork-dev/free-components.git
# fetch the raw registry index
curl -s https://upfork.dev/r/registry.json
```

## Components (20)

| name | type | description | install |
| --- | --- | --- | --- |
| shadcn-event-calendar-scheduler-react | registry:component | A full event calendar and scheduler for React and shadcn/ui: month, week, day and agenda views, drag-and-drop to create, move and resize, recurring events, att… | `npx shadcn@latest add https://upfork.dev/r/shadcn-event-calendar-scheduler-react.json` |
| restaurant-hero-section-react | registry:component | Steakhouse & restaurant hero section for React and Next.js. Maple, a filmed cartoon cow in a knitted scarf, follows your guest's cursor across six photographed… | `npx shadcn@latest add https://upfork.dev/r/restaurant-hero-section-react.json` |
| glassmorphism-icon-sidebar-menu-react | registry:component | A two-part glass sidebar for React: a slim icon dock with a glowing indicator, and a full menu that unfurls beside it. Linked hover, expandable channels, Setti… | `npx shadcn@latest add https://upfork.dev/r/glassmorphism-icon-sidebar-menu-react.json` |
| glass-collapsible-sidebar-react | registry:component | A cinema-grade glass sidebar for React: a red active bar that travels between rows, a collapse into a monogram rail, notifications, a profile switcher, search,… | `npx shadcn@latest add https://upfork.dev/r/glass-collapsible-sidebar-react.json` |
| shadcn-contacts-app-crm-react | registry:component | A complete contacts manager for React and shadcn/ui: folders and labels, highlighted search, filters, list, grid and table views, details, activity and notes, … | `npx shadcn@latest add https://upfork.dev/r/shadcn-contacts-app-crm-react.json` |
| real-estate-map-listings-react-shadcn | registry:component | A complete real estate property search for React and shadcn/ui: a clustered MapLibre map with price pills, synced to a fast listings panel, smart search, filte… | `npx shadcn@latest add https://upfork.dev/r/real-estate-map-listings-react-shadcn.json` |
| shadcn-chat-app-messenger-react | registry:component | A complete team chat for React and shadcn/ui: conversation list with tabs, threads with replies, reactions and Markdown, image lightbox, file uploads, voice no… | `npx shadcn@latest add https://upfork.dev/r/shadcn-chat-app-messenger-react.json` |
| email-client-inbox-react-shadcn | registry:component | A complete email client for React and shadcn/ui: three resizable panes, folders and labels, threaded conversations, a rich-text compose window with recipient c… | `npx shadcn@latest add https://upfork.dev/r/email-client-inbox-react-shadcn.json` |
| aptwork | registry:block | A dark, motion-rich landing page for an automation or AI SaaS: a three.js data-terrain hero, workflows that actually run, a pinned 3D feature deck, pricing and… | `npx shadcn@latest add https://upfork.dev/r/aptwork.json` |
| marketly-trading-landing | registry:block | A market-data landing page template with its dependent pages, built to be re-skinned: every color, type size, radius and shadow is a design token, every sectio… | `npx shadcn@latest add https://upfork.dev/r/marketly-trading-landing.json` |
| crypto-web3-hero-section-react | registry:component | A crypto and Web3 hero section for React over a hand-written WebGL light background: neon lanes fall into an order book, a live price ticker pulses the light o… | `npx shadcn@latest add https://upfork.dev/r/crypto-web3-hero-section-react.json` |
| macos-folder-draggable-windows-react | registry:component | A macOS-style folder for React that bursts open into draggable windows: photos, videos, a working music player, weather and swatches with real traffic lights, … | `npx shadcn@latest add https://upfork.dev/r/macos-folder-draggable-windows-react.json` |
| 3d-parallax-image-gallery-react | registry:component | A 3D parallax image gallery hero for React: cards float around your headline, follow the cursor like a camera, lift and face you on hover, and open into a cine… | `npx shadcn@latest add https://upfork.dev/r/3d-parallax-image-gallery-react.json` |
| dynamic-3d-carousel-react | registry:component | A draggable 3D carousel for React and Next.js: photo, video and text cards on a curved arc with momentum, a seamless infinite loop, autoplay and a click-to-exp… | `npx shadcn@latest add https://upfork.dev/r/dynamic-3d-carousel-react.json` |
| pet-shop-hero | registry:component | Interactive pet shop hero section for React, Next.js and Tailwind CSS: an AI-filmed cat follows the cursor at 60 fps, watches shoppers type in search and nods … | `npx shadcn@latest add https://upfork.dev/r/pet-shop-hero.json` |
| orbit-gallery-3d-carousel-react | registry:component | A 3D WebGL carousel for React and Next.js: project cards on a curved arc above a reflective floor. Drag, scroll or use the arrow keys, then click a card to ope… | `npx shadcn@latest add https://upfork.dev/r/orbit-gallery-3d-carousel-react.json` |
| interactive-saas-hero | registry:component | A cinematic hero for a visual website builder. At the top are a badge, a headline, a subheading, two calls to action and social proof, over an aurora. Below th… | `npx shadcn@latest add https://upfork.dev/r/interactive-saas-hero.json` |
| border-beam-button | registry:ui | A premium pill call to action for Next.js with a comet of light that travels around its border. Unlike the usual rotating conic gradient, the beam moves at a c… | `npx shadcn@latest add https://upfork.dev/r/border-beam-button.json` |
| black-hole-hero | registry:component | A React hero section with a black hole ray-traced live in WebGL: real light bending, a scroll dive into the event horizon, and light and dark themes. | `npx shadcn@latest add https://upfork.dev/r/black-hole-hero.json` |
| crowdwall | registry:component | A hero section for communities and social products: a headline and call to action over an endless wall of portraits whose rows slide in alternating directions.… | `npx shadcn@latest add https://upfork.dev/r/crowdwall.json` |

## For AI agents

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