12 snippets and counting

Copy. Paste. Ship.

Curated React components from the best UI libraries — ready to drop into your project. Use them with Prompt Snippets (⌃⌥J).

Aceternity UI

Animated, high-impact effects for hero sections and feature showcases.

Floating Navbar

Featured

Detaching glassmorphism navbar on scroll

"use client";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

export function FloatingNav({ items }: {
Aceternity UI tsx · 45 lines

Spotlight Effect

Featured

Mouse-tracking spotlight hover effect

"use client";
import { useRef, useState } from "react";
import { motion } from "framer-motion";

export function Spotlight({ children, className = "" }: {
Aceternity UI tsx · 39 lines

Text Generate Effect

Words fade in one by one with blur effect

"use client";
import { motion } from "framer-motion";

export function TextGenerate({ text, className = "" }: {
  text: string;
Aceternity UI tsx · 26 lines

Magic UI

Delightful micro-interactions — shimmers, docks, glowing borders.

macOS Dock

Featured

macOS-style magnifying dock bar

"use client";
import { useRef } from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";

function DockItem({ icon, label, mouseX }: {
Magic UI tsx · 49 lines

Shimmer Button

Featured

CTA button with sweeping shimmer on hover

export function ShimmerButton({ children, className = "" }: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
Magic UI tsx · 16 lines

Animated Gradient Border

Card with spinning gradient border

export function GradientCard({ children, className = "" }: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
Magic UI tsx · 26 lines

Material UI

Material Design 3 patterns built from scratch with React.

Data Table

Sortable paginated table with MUI styling

"use client";
import { useState, useMemo } from "react";
import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";

type Column<T> = { key: keyof T; label: string; sortable?: boolean };
Material UI tsx · 69 lines

Speed Dial FAB

Floating action button with expanding actions

"use client";
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, X } from "lucide-react";
Material UI tsx · 56 lines

Radix UI

Accessible headless primitives styled with Tailwind.

Toast Notifications

Featured

Toast system with useToast hook

"use client";
import * as Toast from "@radix-ui/react-toast";
import { createContext, useContext, useState, useCallback } from "react";
import { X } from "lucide-react";
Radix UI tsx · 50 lines

Animated Dialog

Accessible modal with scale animation

"use client";
import * as Dialog from "@radix-ui/react-dialog";
import { X } from "lucide-react";

export function Modal({ trigger, title, children }: {
Radix UI tsx · 28 lines

Dropdown Menu

Polished dropdown with icons and shortcuts

"use client";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

type MenuItem = {
  label: string;
Radix UI tsx · 46 lines

shadcn/ui

Composable building blocks you own and customize.

Command Palette

Featured

⌘K command palette with fuzzy search

"use client";
import { useState, useEffect, useRef } from "react";
import { Search } from "lucide-react";

type Command = { id: string; label: string; group: string; action: () => void };
shadcn/ui tsx · 84 lines