+
{categoryNames[animation.category]}
@@ -73,6 +74,25 @@ export function AnimationCard({ animation }: AnimationCardProps) {
+ {animation.author?.username && (
+
+ )}
);
diff --git a/apps/docs/components/components-landing-page.tsx b/apps/docs/components/components-landing-page.tsx
index 38f3e37..504c7cc 100644
--- a/apps/docs/components/components-landing-page.tsx
+++ b/apps/docs/components/components-landing-page.tsx
@@ -6,7 +6,7 @@ import { Component, ComponentCategory, categoryNames } from "@/types";
import { Input } from "@uitripled/react-shadcn/ui/input";
import { ScrollArea } from "@uitripled/react-shadcn/ui/scroll-area";
import { AnimatePresence, motion } from "framer-motion";
-import { ArrowRight, Search } from "lucide-react";
+import { ArrowRight, Github, Search } from "lucide-react";
import Link from "next/link";
import { useMemo, useState } from "react";
@@ -18,10 +18,11 @@ const ComponentCard = ({ component }: { component: Component }) => {
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }}
transition={{ duration: 0.2 }}
+ className="group relative flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card/50 transition-all hover:-translate-y-1 hover:border-primary/50 hover:bg-card hover:shadow-md"
>
@@ -56,6 +57,25 @@ const ComponentCard = ({ component }: { component: Component }) => {
)}
+ {component.author?.username && (
+
+ )}
);
};
diff --git a/apps/docs/public/llms-full.txt b/apps/docs/public/llms-full.txt
index 6e1cea0..9f8a971 100644
--- a/apps/docs/public/llms-full.txt
+++ b/apps/docs/public/llms-full.txt
@@ -2,7 +2,7 @@
> Production-ready UI components, blocks, and full pages available in shadcn/ui and Base UI, powered by Framer Motion. Copy-paste components — not an installable npm package.
-**Last Updated:** 2026-03-13T00:55:24.849Z
+**Last Updated:** 2026-04-14T15:39:21.158Z
- Components come in **shadcn/ui**, **Base UI**, and **Carbon** variants (the suffix in the name indicates the style system, e.g. `-shadcnui`, `-baseui`, `-carbon`)
- **Copy-paste model** — browse the docs, preview a component, then copy its code directly into your project
diff --git a/apps/docs/public/llms.txt b/apps/docs/public/llms.txt
index 0064c71..b047a10 100644
--- a/apps/docs/public/llms.txt
+++ b/apps/docs/public/llms.txt
@@ -2,7 +2,7 @@
> Production-ready UI components, blocks, and full pages available in shadcn/ui and Base UI, powered by Framer Motion. Copy-paste components — not an installable npm package.
-**Last Updated:** 2026-03-13T00:55:24.833Z
+**Last Updated:** 2026-04-14T15:39:21.142Z
- Components come in **shadcn/ui**, **Base UI**, and **Carbon** variants (the suffix in the name indicates the style system, e.g. `-shadcnui`, `-baseui`, `-carbon`)
- **Copy-paste model** — browse the docs, preview a component, then copy its code directly into your project
diff --git a/apps/docs/public/r/native-flip-text-baseui.json b/apps/docs/public/r/native-flip-text-baseui.json
index 749ea01..0ec0326 100644
--- a/apps/docs/public/r/native-flip-text-baseui.json
+++ b/apps/docs/public/r/native-flip-text-baseui.json
@@ -13,8 +13,8 @@
],
"files": [
{
- "path": "@uitripled/react-baseui/src/components/native/native-flip-text-baseui.tsx",
- "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\ninterface NativeFlipTextProps {\n /**\n * Array of words to flip through.\n */\n words: string[];\n /**\n * Duration of each word display in ms.\n * Default: 2000\n */\n duration?: number;\n className?: string;\n}\n\nexport function NativeFlipText({\n words,\n duration = 2000,\n className,\n}: NativeFlipTextProps) {\n const [index, setIndex] = useState(0);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setIndex((prevIndex) => (prevIndex + 1) % words.length);\n }, duration);\n\n return () => clearInterval(interval);\n }, [words.length, duration]);\n\n return (\n
\n \n \n {words[index]}\n \n \n \n );\n}\n",
+ "path": "@uitripled/react-carbon/src/components/native/native-flip-text-carbon-baseui.tsx",
+ "content": "// Error: Could not read file @uitripled/react-carbon/src/components/native/native-flip-text-carbon-baseui.tsx\n// File not found: @uitripled/react-carbon/src/components/native/native-flip-text-carbon-baseui.tsx",
"type": "registry:component",
"target": "components/uitripled/native-flip-text-baseui.tsx"
}
diff --git a/apps/docs/public/r/native-user-card-baseui.json b/apps/docs/public/r/native-user-card-baseui.json
index 0be8afb..9f47037 100644
--- a/apps/docs/public/r/native-user-card-baseui.json
+++ b/apps/docs/public/r/native-user-card-baseui.json
@@ -14,7 +14,7 @@
"files": [
{
"path": "@uitripled/react-baseui/src/components/native/native-user-card-baseui.tsx",
- "content": "\"use client\";\n\nimport { Avatar } from \"@base-ui/react/avatar\";\nimport { Button } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionConfig } from \"framer-motion\";\nimport { ArrowRight } from \"lucide-react\";\n\ninterface NativeUserCardProps {\n imageSrc: string;\n name: string;\n handle: string;\n href?: string;\n onClick?: () => void;\n className?: string;\n}\n\nconst transition = {\n type: \"spring\" as const,\n stiffness: 400,\n damping: 30,\n};\n\nexport function NativeUserCard({\n imageSrc,\n name,\n handle,\n href = \"#\",\n onClick,\n className,\n}: NativeUserCardProps) {\n const CardContent = (\n
\n \n
\n
\n \n \n {name.charAt(0)}\n \n \n
\n\n
\n
\n {name}\n
\n
\n {handle}\n
\n
\n
\n
\n
\n \n \n {name.charAt(0)}\n \n \n
\n\n
\n
\n {name}\n
\n
\n {handle}\n
\n
\n
+
+
+
+
+ );
+}
+
+export function NativeMarqueeVertical() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/components/react-baseui/src/components/native/native-marquee-baseui.tsx b/packages/components/react-baseui/src/components/native/native-marquee-baseui.tsx
new file mode 100644
index 0000000..4d5c811
--- /dev/null
+++ b/packages/components/react-baseui/src/components/native/native-marquee-baseui.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { cn } from "@uitripled/utils";
+import { motion, useAnimate } from "framer-motion";
+
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+
+interface NativeMarqueeItem {
+ id: string;
+ icon?: React.ReactNode;
+ label: string;
+}
+
+interface NativeMarqueeProps {
+ className?: string;
+ speed?: number;
+ items: NativeMarqueeItem[];
+ gap?: number;
+ isVertical?: boolean;
+ reverse?: boolean;
+ pauseOnHover?: boolean;
+ pauseOnTouch?: boolean;
+}
+
+function NativeMarquee({
+ speed = 10,
+ gap = 2,
+ isVertical = false,
+ reverse = false,
+ pauseOnHover = false,
+ pauseOnTouch = false,
+ items,
+}: NativeMarqueeProps) {
+ const { containerRef, marqueeRef, multiplier, isMounted } = useMarquee({
+ isVertical,
+ });
+
+ const [scope1, animate1] = useAnimate();
+ const [scope2, animate2] = useAnimate();
+ const anim1Ref = useRef(null);
+ const anim2Ref = useRef(null);
+
+ const duration = 100 / speed;
+
+ useEffect(() => {
+ if (!isMounted || !scope1.current || !scope2.current) return;
+
+ const axis = isVertical ? "y" : "x";
+ const from = reverse ? -100 : 0;
+ const to = reverse ? 0 : -100;
+
+ const start = () => {
+ anim1Ref.current = animate1(
+ scope1.current,
+ { [axis]: [from + "%", to + "%"] },
+ { duration, ease: "linear", repeat: Infinity }
+ );
+ anim2Ref.current = animate2(
+ scope2.current,
+ { [axis]: [from + "%", to + "%"] },
+ { duration, ease: "linear", repeat: Infinity }
+ );
+ };
+
+ const animationFrame = requestAnimationFrame(start);
+
+ return () => cancelAnimationFrame(animationFrame);
+ }, [isMounted, isVertical, speed, reverse]);
+
+ const content = useMemo(
+ () => (
+
+ {items.map((item) => (
+ -
+ {item.icon}
+ {item.label}
+
+ ))}
+
+ ),
+ [items]
+ );
+
+ const copies = useCallback(
+ (multiplier: number) => {
+ const arraySize = multiplier >= 0 ? multiplier : 0;
+ return [...Array(arraySize)].map((_, i) => (
+
+ {content}
+
+ ));
+ },
+ [items]
+ );
+
+ const pause = () => {
+ anim1Ref.current?.pause();
+ anim2Ref.current?.pause();
+ };
+
+ const resume = () => {
+ anim1Ref.current?.play();
+ anim2Ref.current?.play();
+ };
+
+ const hoverProps = pauseOnHover
+ ? { onMouseEnter: pause, onMouseLeave: resume }
+ : {};
+ const touchProps = pauseOnTouch
+ ? { onTouchStart: pause, onTouchEnd: resume }
+ : {};
+
+ if (!isMounted) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ {content}
+
+ {copies(multiplier - 1)}
+
+
+
+
+ {copies(multiplier)}
+
+
+
\n
\n
\n {icon}\n
\n
\n \n {change}\n \n
\n
\n {label}\n
\n
\n {value}\n
\n