The modern registry toolchain
jsrepo handles the hard parts of registries so you can focus on building.
Customize your experience with plugins
With a js based config the sky is the limit.
Rest easy
If your registry builds with jsrepo, it will work for your users.
Built for LLMs
jsrepo is optimized for LLMs by giving them demos and documentation alongside registry items.
Shadcn compatible
Add and update items seamlessly from shadcn registries.
@ieedan/shadcn-svelte-extras/button {"->"} src/components/button.svelte
+ 20 more unchanged (-E to expand)
21
{" "}link: 'text-primary underline-offset
22
{" "}
{"},"}
23
{" "}size: {"{"}
24
{" default: 'h-10 px-"}
3
4
{" py-2',"}
25
{" "}sm: 'h-9 rounded-md px-3',
26
{" "}lg: 'h-11 rounded-md px-8',
27
{" "}icon: 'h-10 w-10'
+ 60 more unchanged (-E to expand)
Host your registry anywhere
Host your registry publicly or privately wherever you want.
jsrepo.dev
$ {page.data.title}
{page.data.description}
jsrepo.dev
$ {title}
{description}
setRegistry(e.target.value)}
/>
{registry === "" ? (
<>
) : (
)}
{children}
{children}
);
}
function FeatureTabsTrigger({
value,
duration,
description,
className,
children,
...props
}: React.HTMLAttributes{description}
{children}
);
}
export { FeatureTabs, FeatureTabsList, FeatureTabsTrigger, FeatureTabsContent };
================================================
FILE: apps/docs/src/components/files.tsx
================================================
'use client';
import { cva } from 'class-variance-authority';
import {
FileIcon as LucideFileIcon,
FolderIcon,
FolderOpenIcon,
} from 'lucide-react';
import { type HTMLAttributes, type ReactNode, useState } from 'react';
import { cn } from '@/lib/utils';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from './ui/collapsible';
import { JavaScriptLogo, SvelteLogo, TypeScriptLogo, VueLogo } from './logos';
const itemVariants = cva(
'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4',
);
export function Files({
className,
...props
}: HTMLAttributes
{props.children}
);
}
export interface FileProps extends HTMLAttributes{props.children}
{context.text.chooseLanguage}
{context.locales.map((item) => ( ))}{item.children}
;
if (item.type === 'menu') {
const children = item.items.map((child, j) => {
if (child.type === 'custom') {
return
{child.icon}
) : null,
...rest
} = child.menu ?? {};
return (
{child.text}
{child.description}
)}{item.children}
;
if (item.type === 'menu') {
const header = (
<>
{item.icon}
{item.text}
);
return (
{item.url ? (
-
{navItems
.filter((item) => !isSecondary(item))
.map((item, i) => (
{searchToggle.enabled !== false &&
(searchToggle.components?.lg ?? (
)}
-
{navItems.filter(isSecondary).map((item, i) => (
-
{searchToggle.enabled !== false &&
(searchToggle.components?.sm ?? (
{menuItems.filter(isSecondary).map((item, i) => (
)}
{themeSwitch.enabled !== false &&
(themeSwitch.component ?? (
{filteredItems.map((registry) => (
{registry.logo && (
)}
{registry.name}
{registry.description}
Hello
Hello
setOpen(false)}
/>
{({ present }) => (
)}
);
}
export function SidebarHeader(props: ComponentProps<'div'>) {
return (
{props.children}
);
}
export function SidebarSeparator(props: ComponentProps<'p'>) {
return (
({ open, setOpen }), [open])}
>
{props.children}
);
}
export function SidebarFolderTrigger({
className,
...props
}: CollapsibleTriggerProps) {
const { open } = useFolderContext();
return (
{props.children}
);
}
export function SidebarFolderLink(props: LinkProps) {
const { open, setOpen } = useFolderContext();
const { prefetch } = useInternalContext();
const pathname = usePathname();
const active =
props.href !== undefined && isActive(props.href, pathname, false);
return (
{
if (
e.target instanceof Element &&
e.target.matches('[data-icon], [data-icon] *')
) {
setOpen(!open);
e.preventDefault();
} else {
setOpen(active ? !open : true);
}
}}
prefetch={prefetch}
>
{props.children}
({
...ctx,
level: level + 1,
}),
[ctx, level],
)}
>
{props.children}
);
}
export function SidebarTrigger({
children,
...props
}: ComponentProps<'button'>) {
const { setOpen } = useSidebar();
return (
);
}
export function SidebarCollapseTrigger(props: ComponentProps<'button'>) {
const { collapsed, setCollapsed } = useSidebar();
return (
);
}
function useFolderContext() {
const ctx = useContext(FolderContext);
if (!ctx) throw new Error('Missing sidebar folder');
return ctx;
}
function useInternalContext() {
const ctx = useContext(Context);
if (!ctx) throw new Error(';
}) {
const { root } = useTreeContext();
return useMemo(() => {
const { Separator, Item, Folder } = props.components ?? {};
function renderSidebarList(
items: PageTree.Node[],
level: number,
): ReactNode[] {
return items.map((item, i) => {
if (item.type === 'separator') {
if (Separator) return
{item.icon}
{item.name}
);
}
if (item.type === 'folder') {
const children = renderSidebarList(item.children, level + 1);
if (Folder)
return (
{children}
);
return (
{children}
);
}
if (Item) return
{item.name}
);
});
}
return (
{renderSidebarList(root.children, 1)}
);
}, [props.components, root]);
}
function PageTreeFolder({
item,
...props
}: {
item: PageTree.Folder;
children: ReactNode;
}) {
const { defaultOpenLevel, level } = useInternalContext();
const path = useTreePath();
return (
= level) || path.includes(item)
}
>
{item.index ? (
{item.icon}
{item.name}
) : (
{item.icon}
{item.name}
)}
{props.children}
);
}
================================================
FILE: apps/docs/src/components/theme-toggle.tsx
================================================
'use client';
import { cva } from 'class-variance-authority';
import { Moon, Sun, Airplay } from 'lucide-react';
import { useTheme } from 'next-themes';
import { type HTMLAttributes, useLayoutEffect, useState } from 'react';
import { cn } from '../lib/cn';
const itemVariants = cva(
'size-6.5 rounded-full p-1.5 text-fd-muted-foreground',
{
variants: {
active: {
true: 'bg-fd-accent text-fd-accent-foreground',
false: 'text-fd-muted-foreground',
},
},
},
);
const full = [
['light', Sun] as const,
['dark', Moon] as const,
['system', Airplay] as const,
];
export function ThemeToggle({
className,
mode = 'light-dark',
...props
}: HTMLAttributes & {
mode?: 'light-dark' | 'light-dark-system';
}) {
const { setTheme, theme, resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useLayoutEffect(() => {
setMounted(true);
}, []);
const container = cn(
'inline-flex items-center rounded-full border p-1',
className,
);
if (mode === 'light-dark') {
const value = mounted ? resolvedTheme : null;
return (
);
}
const value = mounted ? theme : null;
return (
) {
return ) {
return (
) {
return (
svg]:rotate-180",
className
)}
{...props}
>
{children}
)
}
function AccordionContent({
className,
children,
...props
}: React.ComponentProps) {
return (
)
}
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
================================================
FILE: apps/docs/src/components/ui/animated-beam.tsx
================================================
"use client"
import { RefObject, useEffect, useId, useState } from "react"
import { motion } from "motion/react"
import { cn } from "@/lib/utils"
export interface AnimatedBeamProps {
className?: string
containerRef: RefObject // Container ref
fromRef: RefObject
toRef: RefObject
curvature?: number
reverse?: boolean
pathColor?: string
pathWidth?: number
pathOpacity?: number
gradientStartColor?: string
gradientStopColor?: string
delay?: number
duration?: number
startXOffset?: number
startYOffset?: number
endXOffset?: number
endYOffset?: number
}
export const AnimatedBeam: React.FC = ({
className,
containerRef,
fromRef,
toRef,
curvature = 0,
reverse = false, // Include the reverse prop
duration = Math.random() * 3 + 4,
delay = 0,
pathColor = "gray",
pathWidth = 2,
pathOpacity = 0.2,
gradientStartColor = "#ffaa40",
gradientStopColor = "#9c40ff",
startXOffset = 0,
startYOffset = 0,
endXOffset = 0,
endYOffset = 0,
}) => {
const id = useId()
const [pathD, setPathD] = useState("")
const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })
// Calculate the gradient coordinates based on the reverse prop
const gradientCoordinates = reverse
? {
x1: ["90%", "-10%"],
x2: ["100%", "0%"],
y1: ["0%", "0%"],
y2: ["0%", "0%"],
}
: {
x1: ["10%", "110%"],
x2: ["0%", "100%"],
y1: ["0%", "0%"],
y2: ["0%", "0%"],
}
useEffect(() => {
const updatePath = () => {
if (containerRef.current && fromRef.current && toRef.current) {
const containerRect = containerRef.current.getBoundingClientRect()
const rectA = fromRef.current.getBoundingClientRect()
const rectB = toRef.current.getBoundingClientRect()
const svgWidth = containerRect.width
const svgHeight = containerRect.height
setSvgDimensions({ width: svgWidth, height: svgHeight })
const startX =
rectA.left - containerRect.left + rectA.width / 2 + startXOffset
const startY =
rectA.top - containerRect.top + rectA.height / 2 + startYOffset
const endX =
rectB.left - containerRect.left + rectB.width / 2 + endXOffset
const endY =
rectB.top - containerRect.top + rectB.height / 2 + endYOffset
const controlY = startY - curvature
const d = `M ${startX},${startY} Q ${
(startX + endX) / 2
},${controlY} ${endX},${endY}`
setPathD(d)
}
}
// Initialize ResizeObserver
const resizeObserver = new ResizeObserver(() => {
updatePath()
})
// Observe the container element
if (containerRef.current) {
resizeObserver.observe(containerRef.current)
}
// Call the updatePath initially to set the initial path
updatePath()
// Clean up the observer on component unmount
return () => {
resizeObserver.disconnect()
}
}, [
containerRef,
fromRef,
toRef,
curvature,
startXOffset,
startYOffset,
endXOffset,
endYOffset,
])
return (
)
}
================================================
FILE: apps/docs/src/components/ui/badge.tsx
================================================
"use client";
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { BadgeCheckIcon, CodeIcon, Download, SettingsIcon } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
import { cn } from "@/lib/utils";
import { useQuery } from "@tanstack/react-query";
const badgeVariants = cva(
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
);
function Badge({
className,
variant,
asChild = false,
...props
}: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span";
return , "variant"> & {
/**
* The path to the source file. Relative to the root of the project.
*/
path: string;
}) {
return (
);
}
function OfficialBadge({ className, ...props }: Omit, "variant">) {
return (
);
}
function DefaultBadge({ className, ...props }: Omit, "variant">) {
return (
);
}
type DownloadsResponse = {
downloads: number;
start: string;
end: string;
package: string;
};
function NpmBadge({
packageName,
className,
...props
}: Omit, "variant"> & { packageName: string }) {
const query = useQuery({
queryKey: ["npm", packageName],
queryFn: async () => {
try {
const response = await fetch(`https://api.npmjs.org/downloads/point/last-month/${packageName}`);
if (!response.ok) {
return 0;
}
const data = (await response.json()) as DownloadsResponse;
return data.downloads;
} catch {
return 0;
}
},
staleTime: 1000 * 60 * 60 * 24, // 24 hours
refetchOnMount: false,
refetchOnWindowFocus: false,
});
return (
);
}
function BadgeGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
);
}
export { Badge, badgeVariants, SourceBadge, OfficialBadge, DefaultBadge, BadgeGroup, NpmBadge };
================================================
FILE: apps/docs/src/components/ui/button.tsx
================================================
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-sm": "size-8",
"icon-lg": "size-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export type ButtonProps = React.ComponentProps<"button"> &
VariantProps & {
asChild?: boolean;
};
function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
const Comp = asChild ? Slot : "button";
return
>(({ children, ...props }, ref) => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
{children}
);
});
CollapsibleContent.displayName =
CollapsiblePrimitive.CollapsibleContent.displayName;
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
================================================
FILE: apps/docs/src/components/ui/field.tsx
================================================
"use client"
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
return (
{props.children}
);
}
export function SidebarFooter(props: ComponentProps<'div'>) {
return (
{props.children}
);
}
export function SidebarViewport(props: ScrollAreaProps) {
return (
{props.children}
); } export function SidebarItem({ icon, ...props }: LinkProps & { icon?: ReactNode; }) { const pathname = usePathname(); const active = props.href !== undefined && isActive(props.href, pathname, false); const { prefetch } = useInternalContext(); return ( {icon ?? (props.external ?
{full.map(([key, Icon]) => (
))}
);
}
================================================
FILE: apps/docs/src/components/ui/accordion.tsx
================================================
"use client"
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Accordion({
className,
...props
}: React.ComponentProps{children}
Officially supported by the jsrepo team.
Works with zero config.
Available on npm.