Skip to content

Instantly share code, notes, and snippets.

View henrybabbage's full-sized avatar

Henry Babbage henrybabbage

26 followers · 162 following
View GitHub Profile
@nickzelei
nickzelei / sidebar.tsx
Created May 21, 2025 20:54
Shadcn multi-sidebar
import { cn } from '@/lib/utils'
import { Slot } from '@radix-ui/react-slot'
import { VariantProps, cva } from 'class-variance-authority'
import { PanelLeftIcon } from 'lucide-react'
import * as React from 'react'
import { useIsMobile } from '../../lib/hooks/useMobile'
import { Button } from './button'
import { Input } from './input'
import KeybindingTooltip from './KeybindingTooltip'
import { Separator } from './separator'
@SimeonGriggs
SimeonGriggs / sanity-studio-opinionated.md
Last active March 11, 2025 13:23
.cursor/rules/sanity-studio-opinionated.mdc
@t3dotgg
t3dotgg / try-catch.ts
Last active March 10, 2026 03:34
Theo's preferred way of handling try/catch in TypeScript
// Types for the result object with discriminated union
type Success<T> = {
data: T;
error: null;
};
type Failure<E> = {
data: null;
error: E;
};
@carloitaben
carloitaben / TransitionRouter.tsx
Created October 29, 2024 10:39
React 19 page transitions
import type { ReactNode } from "react"
import { useEffect, useState, useTransition } from "react"
import { createSafeContext } from "@/lib/context"
type TransitionRouterStage = "entering" | "leaving" | undefined
type TransitionRouterStartFunction = (
callback: () => void | Promise<void>
) => void
@adevinwild
adevinwild / scroll-area.tsx
Last active March 13, 2026 22:23
A shadcn/ui like scroll area that adds a little gradient inside the list with TailwindCSS
import clsx from "clsx";
import {
useEffect,
useRef,
useState,
type HTMLAttributes,
type ReactNode,
type RefObject,
} from "react";
@johnpolacek
johnpolacek / AnimateIn.tsx
Last active May 1, 2025 11:03
Utility React UI Component for animating elements in with Tailwind and CSS Animation and plays nicely with shadcn
import React, { useEffect, useState } from "react";
import cn from "mxcn";
// or if using shadcn:
// import { cn } from "@/lib/utils"; // https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/utils.ts
const AnimateIn = ({
children,
delay = 0,
duration = 500,
className = "",
@nivethan-me
nivethan-me / README.md
Last active March 22, 2026 15:22
Setup a Next.js 13 project with Eslint + Prettier with automatic tailwind class sorting
@AbeCole
AbeCole / sanity_asset_custom_field.tsx
Last active December 12, 2023 21:16
Sanity - Custom input component for managing Asset metadata
// Use with Sanity schema on your existing 'image' field, add a subfields option:
// The subfield 'options.field' attribute defines which asset field we are managing
// If no 'options.field' is provided, the 'title' attribute will be downcased and used (i.e. Title -> title)
//
// {
// title: 'Image',
// name: 'image',
// type: 'image',
// fields: [
// {
@cassidoo
cassidoo / mergerefs.jsx
Created January 10, 2023 22:57
Merge refs in React so a component can have more than one ref
export function mergeRefs(refs) {
return (value) => {
refs.forEach((ref) => {
if (typeof ref === "function") {
ref(value);
} else if (ref != null) {
ref.current = value;
}
});
};
@tafaust
tafaust / gen-tailwind-cmap.js
Last active January 5, 2023 14:17
Generates
const fs = require('fs');
const pseudo = ['hover', 'active', 'focus']
const prefix = ['text', 'bg'];
const colors = ['primary', 'secondary' , 'success' , 'error' , 'warning'];
const intensity = ['50' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900'];
const fileContent = [];
const p = (str) => fileContent.push(str);