= ({
15 | className,
16 | decimalScale = 2,
17 | decimalSeparator = ",",
18 | prefix = "$",
19 | thousandSeparator = ".",
20 | value,
21 | }) => {
22 | return (
23 |
32 | );
33 | };
34 |
35 | export default PriceFormat_Basic;
36 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/price-format/sale/price-format-sale-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import PriceFormat_Sale from "@/components/commerce-ui/components/price-format/sale/price-format-sale";
4 |
5 | export default function PriceFormat_Sale_Ex_01() {
6 | return (
7 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/price-format/sale/price-format-sale-ex-02.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import PriceFormat_Sale from "@/components/commerce-ui/components/price-format/sale/price-format-sale";
4 |
5 | export default function PriceFormat_Sale_Ex_02() {
6 | return (
7 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/price-format/sale/price-format-sale-ex-03.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import PriceFormat_Sale from "@/components/commerce-ui/components/price-format/sale/price-format-sale";
4 |
5 | export default function PriceFormat_Sale_Ex_03() {
6 | return (
7 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/quantity-input/basic/quantity-input-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import QuantityInputBasic from "@/components/commerce-ui/components/quantity-input/basic/quantity-input-basic";
5 |
6 | export default function QuantityInput_Basic_Ex_01() {
7 | const [quantity, setQuantity] = useState(1);
8 |
9 | const handleQuantityChange = (newQuantity: number) => {
10 | setQuantity(newQuantity);
11 | };
12 |
13 | return (
14 | <>
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/quantity-input/basic/quantity-input-ex-02.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import QuantityInputBasic from "@/components/commerce-ui/components/quantity-input/basic/quantity-input-basic";
5 |
6 | export default function QuantityInput_Basic_Ex_02() {
7 | const [quantity, setQuantity] = useState(1);
8 |
9 | const handleQuantityChange = (newQuantity: number) => {
10 | setQuantity(newQuantity);
11 | };
12 |
13 | return (
14 | <>
15 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/quantity-input/basic/quantity-input-ex-03.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import QuantityInputBasic from "@/components/commerce-ui/components/quantity-input/basic/quantity-input-basic";
5 |
6 | export default function QuantityInput_Basic_Ex_03() {
7 | const [quantity, setQuantity] = useState(1);
8 |
9 | const handleQuantityChange = (newQuantity: number) => {
10 | setQuantity(newQuantity);
11 | };
12 |
13 | return (
14 | <>
15 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/star-rating/basic/star-rating-basic-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import StarRatingBasic from "@/components/commerce-ui/components/star-rating/basic/star-rating-basic";
4 | import { useState } from "react";
5 |
6 | export default function StarRating_Basic_Ex_01() {
7 | const [rating, setRating] = useState(3);
8 | return (
9 |
10 |
11 |
({rating})
12 |
10 |
11 |
({rating})
12 |
10 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/star-rating/fractions/star-rating-fractions-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import StarRatingFractions from "@/components/commerce-ui/components/star-rating/fractions/star-rating-fractions";
4 | import { useState } from "react";
5 |
6 | export default function StarRating_Fractions_Ex_01() {
7 | const [rating, setRating] = useState(4.3);
8 | return (
9 |
10 |
11 |
({rating})
12 |
8 |
12 |
13 |
17 |
18 |
22 |
10 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/upvote-rating/animated/upvote-rating-animated-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import UpvoteRating_Animated from "@/components/commerce-ui/components/upvote-rating/animated/upvote-rating-animated";
5 |
6 | export default function UpvoteRating_Animated_Ex_01() {
7 | const [upvotes, setUpvotes] = useState(100);
8 | const [downvotes, setDownvotes] = useState(20);
9 | const [upvoted, setUpvoted] = useState(false);
10 | const [downvoted, setDownvoted] = useState(false);
11 |
12 | return (
13 |
14 | {
20 | setUpvotes(newState.upvotes);
21 | setDownvotes(newState.downvotes);
22 | setUpvoted(newState.upvoted);
23 | setDownvoted(newState.downvoted);
24 | }}
25 | />
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/upvote-rating/animated/upvote-rating-animated-ex-02.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import UpvoteRating_Animated from "@/components/commerce-ui/components/upvote-rating/animated/upvote-rating-animated";
5 |
6 | export default function UpvoteRating_Animated_Ex_02() {
7 | const [upvotes, setUpvotes] = useState(100);
8 | const [downvotes, setDownvotes] = useState(20);
9 | const [upvoted, setUpvoted] = useState(false);
10 | const [downvoted, setDownvoted] = useState(false);
11 |
12 | return (
13 |
14 | {
20 | setUpvotes(newState.upvotes);
21 | setDownvotes(newState.downvotes);
22 | setUpvoted(newState.upvoted);
23 | setDownvoted(newState.downvoted);
24 | }}
25 | upvoteIncrement={15}
26 | downvoteIncrement={15}
27 | />
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/upvote-rating/basic/upvote-rating-basic-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import UpvoteRating_Basic from "@/components/commerce-ui/components/upvote-rating/basic/upvote-rating-basic";
5 |
6 | export default function UpvoteRating_Basic_Ex_01() {
7 | const [upvotes, setUpvotes] = useState(100);
8 | const [downvotes, setDownvotes] = useState(20);
9 | const [upvoted, setUpvoted] = useState(false);
10 | const [downvoted, setDownvoted] = useState(false);
11 |
12 | return (
13 |
14 | {
20 | setUpvotes(newState.upvotes);
21 | setDownvotes(newState.downvotes);
22 | setUpvoted(newState.upvoted);
23 | setDownvoted(newState.downvoted);
24 | }}
25 | />
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/upvote-rating/basic/upvote-rating-basic-ex-02.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import UpvoteRating_Basic from "@/components/commerce-ui/components/upvote-rating/basic/upvote-rating-basic";
5 |
6 | export default function UpvoteRating_Basic_Ex_02() {
7 | const [upvotes, setUpvotes] = useState(100);
8 | const [downvotes, setDownvotes] = useState(20);
9 | const [upvoted, setUpvoted] = useState(false);
10 | const [downvoted, setDownvoted] = useState(false);
11 |
12 | return (
13 |
14 | {
20 | setUpvotes(newState.upvotes);
21 | setDownvotes(newState.downvotes);
22 | setUpvoted(newState.upvoted);
23 | setDownvoted(newState.downvoted);
24 | }}
25 | upvoteIncrement={15}
26 | downvoteIncrement={15}
27 | />
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/variant-color-selector/basic/variant-color-selector-basic-ex-01.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import VariantColorSelectorBasic, {
3 | ColorVariantItem,
4 | } from "./variant-color-selector-basic";
5 |
6 | const variants: ColorVariantItem[] = [
7 | { color: "#000000", id: "color-black", label: "Black", value: "black" },
8 | { color: "#FFFFFF", id: "color-white", label: "White", value: "white" },
9 | { color: "#FF0000", id: "color-red", label: "Red", value: "red" },
10 | { color: "#0000FF", id: "color-blue", label: "Blue", value: "blue" },
11 | { color: "#00FF00", id: "color-green", label: "Green", value: "green" },
12 | { color: "#FFFF00", id: "color-yellow", label: "Yellow", value: "yellow" },
13 | { color: "#800080", id: "color-purple", label: "Purple", value: "purple" },
14 | ];
15 |
16 | export default function VariantColorSelectorBasicExample() {
17 | const [selectedColor, setSelectedColor] = React.useState("black");
18 |
19 | return (
20 |
21 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import VariantSelectorBasic, {
5 | VariantItem,
6 | } from "@/components/commerce-ui/components/variant-selector/basic/variant-selector-basic";
7 |
8 | const variants: VariantItem[] = [
9 | { id: "variant-xxs", label: "XXS", value: "variant-xxs" },
10 | { id: "variant-xs", label: "XS", value: "variant-xs" },
11 | { id: "variant-s", label: "S", value: "variant-s" },
12 | { id: "variant-m", label: "M", value: "variant-m" },
13 | { id: "variant-l", label: "L", value: "variant-l" },
14 | { id: "variant-xl", label: "XL", value: "variant-xl" },
15 | { id: "variant-xxl", label: "XXL", value: "variant-xxl" },
16 | ];
17 |
18 | export default function VariantSelector_Basic_Ex_01() {
19 | const [selectedVariant, setSelectedVariant] = React.useState("variant-m");
20 |
21 | return (
22 |
23 |
31 |
32 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-02.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import VariantSelectorBasic, {
5 | VariantItem,
6 | } from "@/components/commerce-ui/components/variant-selector/basic/variant-selector-basic";
7 |
8 | const variants: VariantItem[] = [
9 | { id: "variant-xxs", label: "XXS", value: "variant-xxs" },
10 | { id: "variant-xs", label: "XS", value: "variant-xs" },
11 | { id: "variant-s", label: "S", value: "variant-s" },
12 | { id: "variant-m", label: "M", value: "variant-m" },
13 | { id: "variant-l", label: "L", value: "variant-l" },
14 | { id: "variant-xl", label: "XL", value: "variant-xl" },
15 | { id: "variant-xxl", label: "XXL", value: "variant-xxl" },
16 | ];
17 |
18 | export default function VariantSelector_Basic_Ex_02() {
19 | const [selectedVariant1, setSelectedVariant1] = React.useState("variant-m");
20 | const [selectedVariant2, setSelectedVariant2] = React.useState("variant-m");
21 |
22 | return (
23 |
24 |
33 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-04.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import VariantSelectorBasic, {
5 | VariantItem,
6 | } from "@/components/commerce-ui/components/variant-selector/basic/variant-selector-basic";
7 |
8 | // Example size variants
9 | const sizeVariants: VariantItem[] = [
10 | { id: "size-xs", label: "XS", value: "size-xs" },
11 | { id: "size-s", label: "S", value: "size-s" },
12 | { id: "size-m", label: "M", value: "size-m" },
13 | { id: "size-l", label: "L", value: "size-l" },
14 | { id: "size-xl", label: "XL", value: "size-xl" },
15 | ];
16 |
17 | export default function VariantSelector_Basic_Ex_04() {
18 | const [selectedSize, setSelectedSize] = React.useState("size-m");
19 |
20 | return (
21 |
22 |
23 |
24 | Pill Style
25 |
26 |
27 | Rounded pill-shaped variant buttons with custom active state using
28 | data-state
29 |
30 |
31 |
32 |
35 |
44 |
45 |
46 |
41 |
55 |
56 | {variant.label}
57 |
58 |
59 |
60 | ))}
61 |
62 | );
63 | };
64 |
65 | export default VariantSelectorBasic;
66 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/variant-selector/images/variant-selector-images-ex-01.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import VariantSelectorImages from "@/components/commerce-ui/components/variant-selector/images/variant-selector-images";
5 |
6 | const variants = [
7 | {
8 | id: "cat-default",
9 | label: "Default Cat",
10 | url: "/placeholders/cat-default.webp",
11 | value: "cat-default",
12 | },
13 | {
14 | id: "cat-steampunk",
15 | label: "Steampunk Cat",
16 | url: "/placeholders/cat-steampunk.webp",
17 | value: "cat-steampunk",
18 | },
19 | {
20 | id: "cat-cyberpunk",
21 | label: "Cyberpunk Cat",
22 | url: "/placeholders/cat-cyberpunk.webp",
23 | value: "cat-cyberpunk",
24 | },
25 | ];
26 |
27 | export default function VariantSelector_Images_Ex_01() {
28 | const [selected, setSelected] = useState("cat-default");
29 |
30 | return (
31 |
32 |
40 |
41 | Selected variant: {selected}
42 |
43 |
33 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/components/commerce-ui/components/variant-selector/multiple/variant-selector-multiple.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { ToggleGroup, ToggleGroupItem } from "@radix-ui/react-toggle-group";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | export interface VariantItem {
9 | id: string;
10 | value: string;
11 | label: string;
12 | disabled?: boolean;
13 | }
14 |
15 | interface VariantSelectorMultipleProps {
16 | values: string[];
17 | onValuesChange: (values: string[]) => void;
18 | variants: VariantItem[];
19 | className?: string;
20 | itemClassName?: string;
21 | labelClassName?: string;
22 | }
23 |
24 | const VariantSelectorMultiple = ({
25 | className,
26 | itemClassName,
27 | labelClassName,
28 | onValuesChange,
29 | values,
30 | variants,
31 | }: VariantSelectorMultipleProps) => {
32 | return (
33 |
39 | {variants.map((variant) => (
40 |
41 |
54 |
55 | {variant.label}
56 |
57 |
58 |
59 | ))}
60 |
61 | );
62 | };
63 |
64 | export default VariantSelectorMultiple;
65 |
--------------------------------------------------------------------------------
/components/commerce-ui/pages/product-01/components/store-navigation.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import {
4 | Breadcrumb,
5 | BreadcrumbEllipsis,
6 | BreadcrumbItem,
7 | BreadcrumbLink,
8 | BreadcrumbList,
9 | BreadcrumbPage,
10 | BreadcrumbSeparator,
11 | } from "@/components/ui/breadcrumb";
12 | import {
13 | DropdownMenu,
14 | DropdownMenuContent,
15 | DropdownMenuItem,
16 | DropdownMenuTrigger,
17 | } from "@/components/ui/dropdown-menu";
18 |
19 | export function StoreNavigation() {
20 | return (
21 |
22 |
23 |
24 |
25 | Home
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | Toggle menu
34 |
35 |
36 | Documentation
37 | Themes
38 | GitHub
39 |
40 |
41 |
42 |
43 |
44 |
45 | Electronics
46 |
47 |
48 |
49 |
50 | Premium Noise-Cancelling Headphones
51 |
52 |
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/components/commerce-ui/pages/product-01/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Banner_08 from "@/components/commerce-ui/blocks/banners/banner-08";
4 | import Review_04 from "@/components/commerce-ui/blocks/reviews/review-04";
5 | import Product from "@/components/commerce-ui/pages/product-01/components/product";
6 | import { ProductInfo } from "@/components/commerce-ui/pages/product-01/components/product-info";
7 | import { StoreHeader } from "@/components/commerce-ui/pages/product-01/components/store-header";
8 | import { StoreNavigation } from "@/components/commerce-ui/pages/product-01/components/store-navigation";
9 |
10 | export default function ProductPage_01() {
11 | return (
12 |
13 | {/* Header Section */}
14 |
15 |
16 |
17 |
18 |
19 | {/* Main Content */}
20 |
21 |
22 | {/* Product Section */}
23 |
24 |
25 | {" "}
26 |
27 |
28 |
31 |
32 |
33 |
34 |
33 |
34 |
39 |
40 |
41 |
42 |
48 | {isOpen ? "Hide" : "Show"} code
49 |
50 |
51 |
54 |
58 |
59 |
60 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/components/docs/scroll-progress.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { motion, MotionProps, useScroll, useSpring } from "motion/react";
5 | import React from "react";
6 | type ScrollProgressProps = Omit<
7 | React.HTMLAttributes,
8 | keyof MotionProps
9 | >;
10 |
11 | export const ScrollProgress = React.forwardRef<
12 | HTMLDivElement,
13 | ScrollProgressProps
14 | >(({ className, ...props }, ref) => {
15 | const { scrollYProgress } = useScroll();
16 |
17 | const scaleX = useSpring(scrollYProgress, {
18 | damping: 50,
19 | restDelta: 0.001,
20 | stiffness: 200,
21 | });
22 |
23 | return (
24 |
35 | );
36 | });
37 |
38 | ScrollProgress.displayName = "ScrollProgress";
39 |
--------------------------------------------------------------------------------
/components/landing/header-custom-links.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowUpRight } from "lucide-react";
2 | import Link from "next/link";
3 |
4 | export async function HeaderCustomLinks() {
5 | return (
6 |
7 |
8 |
13 |
14 |
15 | Go full-stack
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | Commerce API
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | {context.text.chooseLanguage}
32 |
33 | {context.locales.map((item) => (
34 |
49 | ))}
50 |
51 |
52 | );
53 | }
54 |
55 | export function LanguageToggleText(
56 | props: HTMLAttributes
57 | ): React.ReactElement {
58 | const context = useI18n();
59 | const text = context.locales?.find(
60 | (item) => item.locale === context.locale
61 | )?.name;
62 |
63 | return {text};
64 | }
65 |
--------------------------------------------------------------------------------
/components/layout/nav.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import Link, { type LinkProps } from 'fumadocs-core/link';
3 | import {
4 | createContext,
5 | type ReactNode,
6 | useContext,
7 | useEffect,
8 | useState,
9 | } from 'react';
10 | import { cn } from '../../lib/cn';
11 | import { useI18n } from 'fumadocs-ui/provider';
12 |
13 | export interface NavProviderProps {
14 | /**
15 | * Use transparent background
16 | *
17 | * @defaultValue none
18 | */
19 | transparentMode?: 'always' | 'top' | 'none';
20 | }
21 |
22 | export interface TitleProps {
23 | title?: ReactNode;
24 |
25 | /**
26 | * Redirect url of title
27 | * @defaultValue '/'
28 | */
29 | url?: string;
30 | }
31 |
32 | interface NavContextType {
33 | isTransparent: boolean;
34 | }
35 |
36 | const NavContext = createContext({
37 | isTransparent: false,
38 | });
39 |
40 | export function NavProvider({
41 | children,
42 | transparentMode = 'none',
43 | }: NavProviderProps & { children: ReactNode }) {
44 | const [transparent, setTransparent] = useState(transparentMode !== 'none');
45 |
46 | useEffect(() => {
47 | if (transparentMode !== 'top') return;
48 |
49 | const listener = () => {
50 | setTransparent(window.scrollY < 10);
51 | };
52 |
53 | listener();
54 | window.addEventListener('scroll', listener);
55 | return () => {
56 | window.removeEventListener('scroll', listener);
57 | };
58 | }, [transparentMode]);
59 |
60 | return (
61 |
62 | {children}
63 |
64 | );
65 | }
66 |
67 | export function useNav(): NavContextType {
68 | return useContext(NavContext);
69 | }
70 |
71 | export function Title({
72 | title,
73 | url,
74 | ...props
75 | }: TitleProps & Omit) {
76 | const { locale } = useI18n();
77 |
78 | return (
79 |
87 | {title}
88 |
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/components/layout/search-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { type ButtonHTMLAttributes } from "react";
3 | import { SearchIcon } from "lucide-react";
4 | import { useSearchContext } from "fumadocs-ui/provider";
5 | import { useI18n } from "fumadocs-ui/provider";
6 | import { cn } from "../../lib/cn";
7 | import { buttonVariants } from "../ui/button";
8 |
9 | export function SearchToggle({
10 | hideIfDisabled,
11 | ...props
12 | }: ButtonHTMLAttributes & {
13 | hideIfDisabled?: boolean;
14 | }) {
15 | const { enabled, setOpenSearch } = useSearchContext();
16 | if (hideIfDisabled && !enabled) return null;
17 |
18 | return (
19 |
36 | );
37 | }
38 |
39 | export function LargeSearchToggle({
40 | hideIfDisabled,
41 | ...props
42 | }: ButtonHTMLAttributes & {
43 | hideIfDisabled?: boolean;
44 | }) {
45 | const { enabled, hotKey, setOpenSearch } = useSearchContext();
46 | const { text } = useI18n();
47 | if (hideIfDisabled && !enabled) return null;
48 |
49 | return (
50 |
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/components/layout/theme-toggle.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { cva } from 'class-variance-authority';
3 | import { Moon, Sun, Airplay } from 'lucide-react';
4 | import { useTheme } from 'next-themes';
5 | import { type HTMLAttributes, useLayoutEffect, useState } from 'react';
6 | import { cn } from '../../lib/cn';
7 |
8 | const itemVariants = cva('size-7 rounded-full p-1.5 text-fd-muted-foreground', {
9 | variants: {
10 | active: {
11 | false: 'text-fd-muted-foreground',
12 | true: 'bg-fd-accent text-fd-accent-foreground',
13 | },
14 | },
15 | });
16 |
17 | export function ThemeToggle({
18 | className,
19 | mode = 'light-dark',
20 | ...props
21 | }: HTMLAttributes & {
22 | mode?: 'light-dark' | 'light-dark-system';
23 | }) {
24 | const { resolvedTheme, setTheme, theme } = useTheme();
25 | const [mounted, setMounted] = useState(false);
26 |
27 | useLayoutEffect(() => {
28 | setMounted(true);
29 | }, []);
30 |
31 | const container = cn(
32 | 'inline-flex items-center rounded-full border p-[3px]',
33 | className,
34 | );
35 |
36 | if (mode === 'light-dark') {
37 | const value = mounted ? resolvedTheme : null;
38 |
39 | return (
40 |
49 | );
50 | }
51 |
52 | const value = mounted ? theme : null;
53 |
54 | return (
55 |
56 | {[
57 | ['light', Sun] as const,
58 | ['dark', Moon] as const,
59 | ['system', Airplay] as const,
60 | ].map(([key, Icon]) => (
61 |
69 | ))}
70 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/components/magicui/grid-pattern.tsx:
--------------------------------------------------------------------------------
1 | import { useId } from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | interface GridPatternProps extends React.SVGProps {
6 | width?: number;
7 | height?: number;
8 | x?: number;
9 | y?: number;
10 | squares?: Array<[x: number, y: number]>;
11 | strokeDasharray?: string;
12 | className?: string;
13 | [key: string]: unknown;
14 | }
15 |
16 | export function GridPattern({
17 | width = 40,
18 | height = 40,
19 | x = -1,
20 | y = -1,
21 | strokeDasharray = "0",
22 | squares,
23 | className,
24 | ...props
25 | }: GridPatternProps) {
26 | const id = useId();
27 |
28 | return (
29 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/components/magicui/line-shadow-text.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { motion, MotionProps } from "motion/react";
3 |
4 | interface LineShadowTextProps
5 | extends Omit, keyof MotionProps>,
6 | MotionProps {
7 | shadowColor?: string;
8 | as?: React.ElementType;
9 | }
10 |
11 | export function LineShadowText({
12 | children,
13 | shadowColor = "black",
14 | className,
15 | as: Component = "span",
16 | ...props
17 | }: LineShadowTextProps) {
18 | const MotionComponent = motion.create(Component);
19 | const content = typeof children === "string" ? children : null;
20 |
21 | if (!content) {
22 | throw new Error("LineShadowText only accepts string content");
23 | }
24 |
25 | return (
26 |
39 | {content}
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import { type VariantProps, cva } from "class-variance-authority";
2 | import type * as React from "react";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const badgeVariants = cva(
7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
8 | {
9 | defaultVariants: {
10 | variant: "default",
11 | },
12 | variants: {
13 | variant: {
14 | default:
15 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
16 | destructive:
17 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
18 | outline: "text-foreground",
19 | secondary:
20 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
21 | },
22 | },
23 | }
24 | );
25 |
26 | export interface BadgeProps
27 | extends React.HTMLAttributes,
28 | VariantProps {}
29 |
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 | return (
32 |
33 | );
34 | }
35 |
36 | export { Badge, badgeVariants };
37 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from "@radix-ui/react-slot";
2 | import { type VariantProps, cva } from "class-variance-authority";
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
9 | {
10 | defaultVariants: {
11 | size: "default",
12 | variant: "default",
13 | },
14 | variants: {
15 | size: {
16 | default: "h-9 px-4 py-2",
17 | icon: "h-9 w-9",
18 | lg: "h-10 rounded-md px-8",
19 | sm: "h-8 rounded-md px-3 text-xs",
20 | },
21 | variant: {
22 | default:
23 | "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
24 | destructive:
25 | "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
26 | ghost: "hover:bg-accent hover:text-accent-foreground",
27 | link: "text-primary underline-offset-4 hover:underline",
28 | outline:
29 | "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
30 | secondary:
31 | "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
32 | },
33 | },
34 | }
35 | );
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributes,
39 | VariantProps {
40 | asChild?: boolean;
41 | }
42 |
43 | const Button = React.forwardRef(
44 | ({ asChild = false, className, size, variant, ...props }, ref) => {
45 | const Comp = asChild ? Slot : "button";
46 | return (
47 |
52 | );
53 | }
54 | );
55 | Button.displayName = "Button";
56 |
57 | export { Button, buttonVariants };
58 |
--------------------------------------------------------------------------------
/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
3 | import { forwardRef } from "react";
4 |
5 | const Collapsible = CollapsiblePrimitive.Root;
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
8 |
9 | const CollapsibleContent = forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ children, ...props }, ref) => {
13 | return (
14 |
22 | {children}
23 |
24 | );
25 | });
26 |
27 | CollapsibleContent.displayName =
28 | CollapsiblePrimitive.CollapsibleContent.displayName;
29 |
30 | export { Collapsible, CollapsibleTrigger, CollapsibleContent };
31 |
--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | const Input = React.forwardRef>(
6 | ({ className, type, ...props }, ref) => {
7 | return (
8 |
17 | );
18 | }
19 | );
20 | Input.displayName = "Input";
21 |
22 | export { Input };
23 |
--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as LabelPrimitive from "@radix-ui/react-label";
4 | import { type VariantProps, cva } from "class-variance-authority";
5 | import * as React from "react";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | );
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 |
26 | export { Label };
27 |
--------------------------------------------------------------------------------
/components/ui/page-header.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | function PageHeader({
4 | children,
5 | className,
6 | ...props
7 | }: React.HTMLAttributes) {
8 | return (
9 |
18 | );
19 | }
20 |
21 | function PageHeaderHeading({
22 | className,
23 | ...props
24 | }: React.HTMLAttributes) {
25 | return (
26 |
33 | );
34 | }
35 |
36 | function PageHeaderDescription({
37 | className,
38 | ...props
39 | }: React.HTMLAttributes) {
40 | return (
41 |
48 | );
49 | }
50 |
51 | function PageActions({
52 | className,
53 | ...props
54 | }: React.HTMLAttributes) {
55 | return (
56 |
63 | );
64 | }
65 |
66 | export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading };
67 |
--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as PopoverPrimitive from "@radix-ui/react-popover";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverAnchor = PopoverPrimitive.Anchor;
13 |
14 | const PopoverContent = React.forwardRef<
15 | React.ElementRef,
16 | React.ComponentPropsWithoutRef
17 | >(({ align = "center", className, sideOffset = 4, ...props }, ref) => (
18 |
19 |
29 |
30 | ));
31 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
32 |
33 | export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
34 |
--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function Progress({
9 | className,
10 | value,
11 | ...props
12 | }: React.ComponentProps) {
13 | return (
14 |
22 |
27 |
28 | )
29 | }
30 |
31 | export { Progress }
32 |
--------------------------------------------------------------------------------
/components/ui/references.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import Link from "next/link";
3 | import type React from "react";
4 | import { badgeVariants } from "./badge";
5 | import { ExternalLinkIcon } from "./icons";
6 |
7 | interface LinkItem {
8 | link: string;
9 | label: string;
10 | }
11 |
12 | export function References({ children }: React.PropsWithChildren) {
13 | return (
14 |
15 |
Libraries used:
16 | {children}
17 |
42 |
${htmlLight}
43 |
${htmlDark}
44 |
${code}
`;
49 | }
50 | }
51 |
52 | // Optional: Cleanup function if needed
53 | export function disposeHighlighter() {
54 | if (highlighterPromise) {
55 | highlighterPromise.then((highlighter) => highlighter.dispose());
56 | highlighterPromise = null;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/lib/source.ts:
--------------------------------------------------------------------------------
1 | import { blog as blogPosts, docs, meta } from "@/.source";
2 | import { createMDXSource } from "fumadocs-mdx";
3 | import { loader } from "fumadocs-core/source";
4 | import { create } from "@/components/ui/icons";
5 | import { icons } from "lucide-react";
6 |
7 | export const source = loader({
8 | baseUrl: "/docs",
9 | icon(icon) {
10 | if (icon && icon in icons)
11 | return create({ icon: icons[icon as keyof typeof icons] });
12 | },
13 | source: createMDXSource(docs, meta),
14 | });
15 |
16 | export const blog = loader({
17 | baseUrl: "/blog",
18 | source: createMDXSource(blogPosts, []),
19 | });
20 |
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | import { createMDX } from "fumadocs-mdx/next";
2 |
3 | const withMDX = createMDX();
4 |
5 | /** @type {import('next').NextConfig} */
6 | const config = {
7 | reactStrictMode: true,
8 | output: "export",
9 | };
10 |
11 | export default withMDX(config);
12 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | '@tailwindcss/postcss': {},
4 | },
5 | };
6 |
--------------------------------------------------------------------------------
/public/cover.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/cover.jpeg
--------------------------------------------------------------------------------
/public/fonts/Geist-Medium.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/fonts/Geist-Medium.otf
--------------------------------------------------------------------------------
/public/fonts/Redaction_35-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/fonts/Redaction_35-Regular.woff2
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/public/placeholders/backpack.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/backpack.jpg
--------------------------------------------------------------------------------
/public/placeholders/bike-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/bike-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/camera-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/camera-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/cat-cyberpunk.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/cat-cyberpunk.webp
--------------------------------------------------------------------------------
/public/placeholders/cat-default.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/cat-default.webp
--------------------------------------------------------------------------------
/public/placeholders/cat-steampunk.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/cat-steampunk.webp
--------------------------------------------------------------------------------
/public/placeholders/charger-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/charger-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/coffee-cups-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/coffee-cups-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/coffee-filter-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/coffee-filter-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/coffee-machine-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/coffee-machine-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/coffee-machine-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/coffee-machine-02.jpg
--------------------------------------------------------------------------------
/public/placeholders/essential-oil-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/essential-oil-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/family-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/family-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/hand-cream-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/hand-cream-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/hand-cream-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/hand-cream-02.jpg
--------------------------------------------------------------------------------
/public/placeholders/hand-cream-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/hand-cream-03.jpg
--------------------------------------------------------------------------------
/public/placeholders/hand-cream-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/hand-cream-04.jpg
--------------------------------------------------------------------------------
/public/placeholders/handcream-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/handcream-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/headphone-1-thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/headphone-1-thumb.jpg
--------------------------------------------------------------------------------
/public/placeholders/headphone-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/headphone-1.jpg
--------------------------------------------------------------------------------
/public/placeholders/headphone-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/headphone-2.jpg
--------------------------------------------------------------------------------
/public/placeholders/headphone-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/headphone-3.jpg
--------------------------------------------------------------------------------
/public/placeholders/headphone-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/headphone-4.jpg
--------------------------------------------------------------------------------
/public/placeholders/hotel-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/hotel-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/hotel-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/hotel-02.jpg
--------------------------------------------------------------------------------
/public/placeholders/logo-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/logo-01.png
--------------------------------------------------------------------------------
/public/placeholders/logo-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/logo-02.png
--------------------------------------------------------------------------------
/public/placeholders/logo-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/logo-03.png
--------------------------------------------------------------------------------
/public/placeholders/logo-04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/logo-04.png
--------------------------------------------------------------------------------
/public/placeholders/logo-05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/logo-05.png
--------------------------------------------------------------------------------
/public/placeholders/logo-06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/logo-06.png
--------------------------------------------------------------------------------
/public/placeholders/shoes-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/shoes-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/shoes-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/shoes-02.jpg
--------------------------------------------------------------------------------
/public/placeholders/smartwatch-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/smartwatch-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/smartwatch-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/smartwatch-02.jpg
--------------------------------------------------------------------------------
/public/placeholders/speaker-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/speaker-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/speaker-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/speaker-02.jpg
--------------------------------------------------------------------------------
/public/placeholders/speaker-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/speaker-03.jpg
--------------------------------------------------------------------------------
/public/placeholders/speaker-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/speaker-04.jpg
--------------------------------------------------------------------------------
/public/placeholders/speaker-05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/speaker-05.jpg
--------------------------------------------------------------------------------
/public/placeholders/tablet-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/tablet-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/user-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/user-01.jpg
--------------------------------------------------------------------------------
/public/placeholders/user-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/user-02.jpg
--------------------------------------------------------------------------------
/public/placeholders/user-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/user-03.jpg
--------------------------------------------------------------------------------
/public/placeholders/user-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/user-04.jpg
--------------------------------------------------------------------------------
/public/placeholders/user-05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/user-05.jpg
--------------------------------------------------------------------------------
/public/placeholders/user-06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/user-06.jpg
--------------------------------------------------------------------------------
/public/placeholders/user-07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackzero-labs/ui/7dec626f7def18a062676113bc9dbccd92c23cc4/public/placeholders/user-07.jpg
--------------------------------------------------------------------------------
/public/r/example-block.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-block",
3 | "type": "registry:block",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/star-rating-fractions.json",
9 | "https://ui.stackzero.co/r/image-carousel-horizontal.json",
10 | "https://ui.stackzero.co/r/price-format-basic.json"
11 | ],
12 | "files": [
13 | {
14 | "type": "registry:block",
15 | "content": "\"use client\";\n\nimport ImageCarousel_Horizontal from \"@/components/commerce-ui/image-carousel-horizontal\";\nimport PriceFormat_Basic from \"@/components/commerce-ui/price-format-basic\";\nimport StarRating from \"@/components/commerce-ui/star-rating-fractions\";\n\nconst images = [\n \"https://prd.place/400/600?id=37\",\n \"https://prd.place/400/600?id=38\",\n \"https://prd.place/400/600?id=39\",\n \"https://prd.place/800/1200?id=40\",\n \"https://prd.place/800/300?id=41\",\n];\n\nconst STAR_RATING_VALUE = 4.5;\nexport default function TestBlock() {\n return (\n \n
\n
\n \n
\n
\n
Product Name
\n
\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n quos.\n
\n
\n
\n
\n
({STAR_RATING_VALUE})
\n
\n
\n
\n
\n
How do you feel about this product?
\n
\n
Rating: {rating}
\n
\n \n
\n );\n}\n",
14 | "path": "/components/commerce-ui/components/image-viewer/basic/image-viewer-basic-ex-01.tsx",
15 | "target": "/components/commerce-ui/image-viewer-basic-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/image-viewer-motion-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "image-viewer-motion-ex-01",
3 | "type": "registry:component",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/image-viewer-motion.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:component",
13 | "content": "\"use client\";\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-motion\";\n\nconst EXAMPLE_IMAGE_URL =\n \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg\";\nconst EXAMPLE_THUMBNAIL_URL =\n \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg\";\n\nexport default function ImageViewer_Basic_Ex_01() {\n return (\n \n \n
\n );\n}\n",
14 | "path": "/components/commerce-ui/components/image-viewer/motion/image-viewer-motion-ex-01.tsx",
15 | "target": "/components/commerce-ui/image-viewer-motion-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/like-rating-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "like-rating-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/like-rating-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport LikeRatingBasic from \"@/components/commerce-ui/like-rating-basic\";\nimport { useState } from \"react\";\n\nexport default function LikeRating_Basic_Ex_01() {\n const [likes, setLikes] = useState(1100);\n const [dislikes, setDislikes] = useState(260);\n const [isLiked, setIsLiked] = useState(true);\n const [isDisliked, setIsDisliked] = useState(false);\n\n return (\n \n {\n setLikes(newState.likes);\n setDislikes(newState.dislikes);\n setIsLiked(newState.isLiked);\n setIsDisliked(newState.isDisliked);\n }}\n />\n
\n );\n}\n",
14 | "path": "/components/commerce-ui/components/like-rating/basic/like-rating-ex-01.tsx",
15 | "target": "/components/commerce-ui/like-rating-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/price-format-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "price-format-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/price-format-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport PriceFormat_Basic from \"@/components/commerce-ui/price-format-basic\";\n\nexport default function PriceFormat_Basic_Ex_01() {\n return (\n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/price-format/basic/price-format-basic-ex-01.tsx",
15 | "target": "/components/commerce-ui/price-format-basic-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/price-format-basic.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "price-format-basic",
3 | "type": "registry:component",
4 | "dependencies": [
5 | "lucide-react",
6 | "react-number-format"
7 | ],
8 | "registryDependencies": [
9 | "button"
10 | ],
11 | "files": [
12 | {
13 | "type": "registry:component",
14 | "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { NumericFormat } from \"react-number-format\";\n\ninterface PriceFormat_BasicProps extends React.HTMLAttributes {\n value: number;\n prefix?: string;\n thousandSeparator?: string;\n decimalSeparator?: string;\n decimalScale?: number;\n}\n\nconst PriceFormat_Basic: React.FC = ({\n className,\n decimalScale = 2,\n decimalSeparator = \",\",\n prefix = \"$\",\n thousandSeparator = \".\",\n value,\n}) => {\n return (\n \n );\n};\n\nexport default PriceFormat_Basic;\n",
15 | "path": "/components/commerce-ui/components/price-format/basic/price-format-basic.tsx",
16 | "target": "/components/commerce-ui/price-format-basic.tsx"
17 | }
18 | ]
19 | }
--------------------------------------------------------------------------------
/public/r/price-format-sale-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "price-format-sale-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [],
5 | "registryDependencies": [
6 | "https://ui.stackzero.co/r/price-format-sale.json"
7 | ],
8 | "files": [
9 | {
10 | "type": "registry:example",
11 | "content": "\"use client\";\n\nimport PriceFormat_Sale from \"@/components/commerce-ui/price-format-sale\";\n\nexport default function PriceFormat_Sale_Ex_01() {\n return (\n \n );\n}\n",
12 | "path": "/components/commerce-ui/components/price-format/sale/price-format-sale-ex-01.tsx",
13 | "target": "/components/commerce-ui/price-format-sale-ex-01.tsx"
14 | }
15 | ]
16 | }
--------------------------------------------------------------------------------
/public/r/price-format-sale-ex-02.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "price-format-sale-ex-02",
3 | "type": "registry:example",
4 | "dependencies": [],
5 | "registryDependencies": [
6 | "https://ui.stackzero.co/r/price-format-sale.json"
7 | ],
8 | "files": [
9 | {
10 | "type": "registry:example",
11 | "content": "\"use client\";\n\nimport PriceFormat_Sale from \"@/components/commerce-ui/price-format-sale\";\n\nexport default function PriceFormat_Sale_Ex_02() {\n return (\n \n );\n}\n",
12 | "path": "/components/commerce-ui/components/price-format/sale/price-format-sale-ex-02.tsx",
13 | "target": "/components/commerce-ui/price-format-sale-ex-02.tsx"
14 | }
15 | ]
16 | }
--------------------------------------------------------------------------------
/public/r/price-format-sale-ex-03.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "price-format-sale-ex-03",
3 | "type": "registry:example",
4 | "dependencies": [],
5 | "registryDependencies": [
6 | "https://ui.stackzero.co/r/price-format-sale.json"
7 | ],
8 | "files": [
9 | {
10 | "type": "registry:example",
11 | "content": "\"use client\";\n\nimport PriceFormat_Sale from \"@/components/commerce-ui/price-format-sale\";\n\nexport default function PriceFormat_Sale_Ex_03() {\n return (\n \n );\n}\n",
12 | "path": "/components/commerce-ui/components/price-format/sale/price-format-sale-ex-03.tsx",
13 | "target": "/components/commerce-ui/price-format-sale-ex-03.tsx"
14 | }
15 | ]
16 | }
--------------------------------------------------------------------------------
/public/r/quantity-input-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "quantity-input-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/quantity-input-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport QuantityInputBasic from \"@/components/commerce-ui/quantity-input-basic\";\n\nexport default function QuantityInput_Basic_Ex_01() {\n const [quantity, setQuantity] = useState(1);\n\n const handleQuantityChange = (newQuantity: number) => {\n setQuantity(newQuantity);\n };\n\n return (\n <>\n \n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/quantity-input/basic/quantity-input-ex-01.tsx",
15 | "target": "/components/commerce-ui/quantity-input-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/quantity-input-basic-ex-02.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "quantity-input-basic-ex-02",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/quantity-input-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport QuantityInputBasic from \"@/components/commerce-ui/quantity-input-basic\";\n\nexport default function QuantityInput_Basic_Ex_02() {\n const [quantity, setQuantity] = useState(1);\n\n const handleQuantityChange = (newQuantity: number) => {\n setQuantity(newQuantity);\n };\n\n return (\n <>\n \n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/quantity-input/basic/quantity-input-ex-02.tsx",
15 | "target": "/components/commerce-ui/quantity-input-ex-02.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/quantity-input-basic-ex-03.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "quantity-input-basic-ex-03",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/quantity-input-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport QuantityInputBasic from \"@/components/commerce-ui/quantity-input-basic\";\n\nexport default function QuantityInput_Basic_Ex_03() {\n const [quantity, setQuantity] = useState(1);\n\n const handleQuantityChange = (newQuantity: number) => {\n setQuantity(newQuantity);\n };\n\n return (\n <>\n \n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/quantity-input/basic/quantity-input-ex-03.tsx",
15 | "target": "/components/commerce-ui/quantity-input-ex-03.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/rating-upvote-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rating-upvote-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "files": [
8 | {
9 | "type": "registry:example",
10 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport RatingUpvote_Basic from \"@/components/commerce-ui/rating-upvote-basic\";\n\nexport default function RatingUpvote_Basic_Ex_01() {\n const [upvotes, setUpvotes] = useState(100);\n const [downvotes, setDownvotes] = useState(20);\n const [upvoted, setUpvoted] = useState(false);\n const [downvoted, setDownvoted] = useState(false);\n\n return (\n \n {\n setUpvotes(newState.upvotes);\n setDownvotes(newState.downvotes);\n setUpvoted(newState.upvoted);\n setDownvoted(newState.downvoted);\n }}\n />\n
\n );\n}\n",
11 | "path": "/components/commerce-ui/rating-upvote/basic/rating-upvote-basic-ex-01.tsx",
12 | "target": "/components/commerce-ui/rating-upvote-basic-ex-01.tsx"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/public/r/star-rating-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "star-rating-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/star-rating-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport StarRatingBasic from \"@/components/commerce-ui/star-rating-basic\";\nimport { useState } from \"react\";\n\nexport default function StarRating_Basic_Ex_01() {\n const [rating, setRating] = useState(3);\n return (\n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/star-rating/basic/star-rating-basic-ex-01.tsx",
15 | "target": "/components/commerce-ui/star-rating-basic-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/star-rating-basic-ex-02.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "star-rating-basic-ex-02",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/star-rating-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport StarRatingBasic from \"@/components/commerce-ui/star-rating-basic\";\nimport { useState } from \"react\";\n\nexport default function StarRating_Basic_Ex_01() {\n const [rating, setRating] = useState(7);\n return (\n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/star-rating/basic/star-rating-basic-ex-02.tsx",
15 | "target": "/components/commerce-ui/star-rating-basic-ex-02.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/star-rating-basic-ex-03.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "star-rating-basic-ex-03",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/star-rating-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport StarRatingBasic from \"@/components/commerce-ui/star-rating-basic\";\nimport { useState } from \"react\";\n\nexport default function StarRating_Basic_Ex_01() {\n const [rating, setRating] = useState(7);\n return (\n \n \n
\n );\n}\n",
14 | "path": "/components/commerce-ui/components/star-rating/basic/star-rating-basic-ex-03.tsx",
15 | "target": "/components/commerce-ui/star-rating-basic-ex-03.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/star-rating-fractions-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "star-rating-fractions-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/star-rating-fractions.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport StarRatingFractions from \"@/components/commerce-ui/star-rating-fractions\";\nimport { useState } from \"react\";\n\nexport default function StarRating_Fractions_Ex_01() {\n const [rating, setRating] = useState(4.3);\n return (\n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/star-rating/fractions/star-rating-fractions-ex-01.tsx",
15 | "target": "/components/commerce-ui/star-rating-fractions-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/star-rating-fractions-ex-02.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "star-rating-fractions-ex-02",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/star-rating-fractions.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport StarRatingFractions from \"@/components/commerce-ui/star-rating-fractions\";\n\nexport default function StarRating_Fractions_Ex_02() {\n return (\n \n );\n}\n",
14 | "path": "/components/commerce-ui/components/star-rating/fractions/star-rating-fractions-ex-02.tsx",
15 | "target": "/components/commerce-ui/star-rating-fractions-ex-02.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/star-rating-fractions-ex-03.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "star-rating-fractions-ex-03",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/star-rating-fractions.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport StarRatingFractions from \"@/components/commerce-ui/star-rating-fractions\";\nimport { useState } from \"react\";\n\nexport default function StarRating_Fractions_Ex_02() {\n const [rating, setRating] = useState(4.3);\n return (\n \n \n
\n );\n}\n",
14 | "path": "/components/commerce-ui/components/star-rating/fractions/star-rating-fractions-ex-03.tsx",
15 | "target": "/components/commerce-ui/star-rating-fractions-ex-03.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/upvote-rating-animated-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "upvote-rating-animated-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react",
6 | "@number-flow/react"
7 | ],
8 | "registryDependencies": [
9 | "https://ui.stackzero.co/r/upvote-rating-animated.json"
10 | ],
11 | "files": [
12 | {
13 | "type": "registry:example",
14 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport UpvoteRating_Animated from \"@/components/commerce-ui/upvote-rating-animated\";\n\nexport default function UpvoteRating_Animated_Ex_01() {\n const [upvotes, setUpvotes] = useState(100);\n const [downvotes, setDownvotes] = useState(20);\n const [upvoted, setUpvoted] = useState(false);\n const [downvoted, setDownvoted] = useState(false);\n\n return (\n \n {\n setUpvotes(newState.upvotes);\n setDownvotes(newState.downvotes);\n setUpvoted(newState.upvoted);\n setDownvoted(newState.downvoted);\n }}\n />\n
\n );\n}\n",
15 | "path": "/components/commerce-ui/components/upvote-rating/animated/upvote-rating-animated-ex-01.tsx",
16 | "target": "/components/commerce-ui/upvote-rating-animated-ex-01.tsx"
17 | }
18 | ]
19 | }
--------------------------------------------------------------------------------
/public/r/upvote-rating-animated-ex-02.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "upvote-rating-animated-ex-02",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react",
6 | "@number-flow/react"
7 | ],
8 | "registryDependencies": [
9 | "https://ui.stackzero.co/r/upvote-rating-animated.json"
10 | ],
11 | "files": [
12 | {
13 | "type": "registry:example",
14 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport UpvoteRating_Animated from \"@/components/commerce-ui/upvote-rating-animated\";\n\nexport default function UpvoteRating_Animated_Ex_02() {\n const [upvotes, setUpvotes] = useState(100);\n const [downvotes, setDownvotes] = useState(20);\n const [upvoted, setUpvoted] = useState(false);\n const [downvoted, setDownvoted] = useState(false);\n\n return (\n \n {\n setUpvotes(newState.upvotes);\n setDownvotes(newState.downvotes);\n setUpvoted(newState.upvoted);\n setDownvoted(newState.downvoted);\n }}\n upvoteIncrement={15}\n downvoteIncrement={15}\n />\n
\n );\n}\n",
15 | "path": "/components/commerce-ui/components/upvote-rating/animated/upvote-rating-animated-ex-02.tsx",
16 | "target": "/components/commerce-ui/upvote-rating-animated-ex-02.tsx"
17 | }
18 | ]
19 | }
--------------------------------------------------------------------------------
/public/r/upvote-rating-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "upvote-rating-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/upvote-rating-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport UpvoteRating_Basic from \"@/components/commerce-ui/upvote-rating-basic\";\n\nexport default function UpvoteRating_Basic_Ex_01() {\n const [upvotes, setUpvotes] = useState(100);\n const [downvotes, setDownvotes] = useState(20);\n const [upvoted, setUpvoted] = useState(false);\n const [downvoted, setDownvoted] = useState(false);\n\n return (\n \n {\n setUpvotes(newState.upvotes);\n setDownvotes(newState.downvotes);\n setUpvoted(newState.upvoted);\n setDownvoted(newState.downvoted);\n }}\n />\n
\n );\n}\n",
14 | "path": "/components/commerce-ui/components/upvote-rating/basic/upvote-rating-basic-ex-01.tsx",
15 | "target": "/components/commerce-ui/upvote-rating-basic-ex-01.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/upvote-rating-basic-ex-02.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "upvote-rating-basic-ex-02",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react"
6 | ],
7 | "registryDependencies": [
8 | "https://ui.stackzero.co/r/upvote-rating-basic.json"
9 | ],
10 | "files": [
11 | {
12 | "type": "registry:example",
13 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport UpvoteRating_Basic from \"@/components/commerce-ui/upvote-rating-basic\";\n\nexport default function UpvoteRating_Basic_Ex_02() {\n const [upvotes, setUpvotes] = useState(100);\n const [downvotes, setDownvotes] = useState(20);\n const [upvoted, setUpvoted] = useState(false);\n const [downvoted, setDownvoted] = useState(false);\n\n return (\n \n {\n setUpvotes(newState.upvotes);\n setDownvotes(newState.downvotes);\n setUpvoted(newState.upvoted);\n setDownvoted(newState.downvoted);\n }}\n upvoteIncrement={15}\n downvoteIncrement={15}\n />\n
\n );\n}\n",
14 | "path": "/components/commerce-ui/components/upvote-rating/basic/upvote-rating-basic-ex-02.tsx",
15 | "target": "/components/commerce-ui/upvote-rating-basic-ex-02.tsx"
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/public/r/utils.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "utils",
3 | "type": "registry:lib",
4 | "dependencies": [
5 | "clsx",
6 | "tailwind-merge"
7 | ],
8 | "files": [
9 | {
10 | "type": "registry:lib",
11 | "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n",
12 | "path": "/lib/utils.ts",
13 | "target": "/lib/utils.ts"
14 | }
15 | ]
16 | }
--------------------------------------------------------------------------------
/public/r/variant-color-selector-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "variant-color-selector-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react",
6 | "@radix-ui/react-radio-group",
7 | "motion"
8 | ],
9 | "registryDependencies": [
10 | "https://ui.stackzero.co/r/variant-color-selector-basic.json"
11 | ],
12 | "files": [
13 | {
14 | "type": "registry:example",
15 | "content": "import * as React from \"react\";\nimport VariantColorSelectorBasic, {\n ColorVariantItem,\n} from \"./variant-color-selector-basic\";\n\nconst variants: ColorVariantItem[] = [\n { color: \"#000000\", id: \"color-black\", label: \"Black\", value: \"black\" },\n { color: \"#FFFFFF\", id: \"color-white\", label: \"White\", value: \"white\" },\n { color: \"#FF0000\", id: \"color-red\", label: \"Red\", value: \"red\" },\n { color: \"#0000FF\", id: \"color-blue\", label: \"Blue\", value: \"blue\" },\n { color: \"#00FF00\", id: \"color-green\", label: \"Green\", value: \"green\" },\n { color: \"#FFFF00\", id: \"color-yellow\", label: \"Yellow\", value: \"yellow\" },\n { color: \"#800080\", id: \"color-purple\", label: \"Purple\", value: \"purple\" },\n];\n\nexport default function VariantColorSelectorBasicExample() {\n const [selectedColor, setSelectedColor] = React.useState(\"black\");\n\n return (\n \n
\n \n );\n}\n",
16 | "path": "/components/commerce-ui/components/variant-color-selector/basic/variant-color-selector-basic-ex-01.tsx",
17 | "target": "/components/commerce-ui/variant-color-selector-basic-ex-01.tsx"
18 | }
19 | ]
20 | }
--------------------------------------------------------------------------------
/public/r/variant-selector-basic-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "variant-selector-basic-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react",
6 | "@radix-ui/react-radio-group"
7 | ],
8 | "registryDependencies": [
9 | "https://ui.stackzero.co/r/variant-selector-basic.json"
10 | ],
11 | "files": [
12 | {
13 | "type": "registry:example",
14 | "content": "\"use client\";\n\nimport * as React from \"react\";\nimport VariantSelectorBasic, {\n VariantItem,\n} from \"@/components/commerce-ui/variant-selector-basic\";\n\nconst variants: VariantItem[] = [\n { id: \"variant-xxs\", label: \"XXS\", value: \"variant-xxs\" },\n { id: \"variant-xs\", label: \"XS\", value: \"variant-xs\" },\n { id: \"variant-s\", label: \"S\", value: \"variant-s\" },\n { id: \"variant-m\", label: \"M\", value: \"variant-m\" },\n { id: \"variant-l\", label: \"L\", value: \"variant-l\" },\n { id: \"variant-xl\", label: \"XL\", value: \"variant-xl\" },\n { id: \"variant-xxl\", label: \"XXL\", value: \"variant-xxl\" },\n];\n\nexport default function VariantSelector_Basic_Ex_01() {\n const [selectedVariant, setSelectedVariant] = React.useState(\"variant-m\");\n\n return (\n \n
\n\n setSelectedVariant(\"variant-m\")}\n className=\"bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium\"\n >\n Reset to Medium\n \n \n );\n}\n",
15 | "path": "/components/commerce-ui/components/variant-selector/basic/variant-selector-basic-ex-01.tsx",
16 | "target": "/components/commerce-ui/variant-selector-basic-ex-01.tsx"
17 | }
18 | ]
19 | }
--------------------------------------------------------------------------------
/public/r/variant-selector-images-ex-01.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "variant-selector-images-ex-01",
3 | "type": "registry:example",
4 | "dependencies": [
5 | "lucide-react",
6 | "@radix-ui/react-radio-group"
7 | ],
8 | "registryDependencies": [
9 | "https://ui.stackzero.co/r/variant-selector-images.json"
10 | ],
11 | "files": [
12 | {
13 | "type": "registry:example",
14 | "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport VariantSelectorImages from \"@/components/commerce-ui/variant-selector-images\";\n\nconst variants = [\n {\n id: \"cat-default\",\n label: \"Default Cat\",\n url: \"/placeholders/cat-default.webp\",\n value: \"cat-default\",\n },\n {\n id: \"cat-steampunk\",\n label: \"Steampunk Cat\",\n url: \"/placeholders/cat-steampunk.webp\",\n value: \"cat-steampunk\",\n },\n {\n id: \"cat-cyberpunk\",\n label: \"Cyberpunk Cat\",\n url: \"/placeholders/cat-cyberpunk.webp\",\n value: \"cat-cyberpunk\",\n },\n];\n\nexport default function VariantSelector_Images_Ex_01() {\n const [selected, setSelected] = useState(\"cat-default\");\n\n return (\n \n
\n
\n Selected variant: {selected}\n
\n
\n
\n \n );\n}\n",
15 | "path": "/components/commerce-ui/components/variant-selector/multiple/variant-selector-multiple-ex-01.tsx",
16 | "target": "/components/commerce-ui/variant-selector-multiple-ex-01.tsx"
17 | }
18 | ]
19 | }
--------------------------------------------------------------------------------
/registry/index.ts:
--------------------------------------------------------------------------------
1 | import { lib } from "./registry-lib";
2 | import { components } from "./registry-components";
3 | import { Registry } from "./schema";
4 | import { examples } from "./registry-examples";
5 | import { blocks } from "./registry-blocks";
6 | import { pages } from "./registry-pages";
7 |
8 | // Ensure that the registry always have an array of registry items
9 | const ensureArray = (items: T | T[]): T[] =>
10 | Array.isArray(items) ? items : Object.values(items as object);
11 |
12 | // Combine all registry items into a single array
13 | export const registry: Registry = [
14 | // ...ensureArray(buttons),
15 | // ...ensureArray(input),
16 | ...ensureArray(lib),
17 | // ...ensureArray(ui),
18 | ...ensureArray(components),
19 | ...ensureArray(examples),
20 | ...ensureArray(blocks),
21 | ...ensureArray(pages),
22 | ];
23 |
24 | // Utility functions
25 | export const getComponentByName = (name: string) =>
26 | registry.find((item) => item.name === name);
27 |
28 | export const getComponentsByCategory = (category: string) => {
29 | return ensureArray(registry)
30 | .filter((item) => item.categories?.includes(category))
31 | .map((item) => item.name);
32 | };
33 |
--------------------------------------------------------------------------------
/registry/registry-hooks.ts:
--------------------------------------------------------------------------------
1 | import type { Registry } from "./schema";
2 |
3 | export const hooks: Registry = [
4 | {
5 | name: "use-auto-resize-textarea",
6 | type: "registry:hook",
7 | files: [
8 | {
9 | path: "hooks/use-auto-resize-textarea.ts",
10 | type: "registry:hook",
11 | },
12 | ],
13 | },
14 | ];
15 |
--------------------------------------------------------------------------------
/registry/registry-lib.ts:
--------------------------------------------------------------------------------
1 | import type { Registry } from "@/registry/schema";
2 |
3 | export const lib: Registry = [
4 | {
5 | name: "utils",
6 | type: "registry:lib",
7 | dependencies: ["clsx", "tailwind-merge"],
8 | files: [
9 | {
10 | path: "lib/utils.ts",
11 | type: "registry:lib",
12 | },
13 | ],
14 | },
15 | ];
16 |
--------------------------------------------------------------------------------
/registry/registry-pages.ts:
--------------------------------------------------------------------------------
1 | import type { Registry } from "@/registry/schema";
2 | import * as React from "react";
3 |
4 | export const pages: Registry = [
5 | {
6 | name: "product-01-page",
7 | type: "registry:page",
8 | dependencies: ["lucide-react"],
9 | registryDependencies: [
10 | "accordion",
11 | "breadcrumb",
12 | "button",
13 | "dropdown-menu",
14 | "input",
15 | "https://ui.stackzero.co/r/star-rating-fractions.json",
16 | "https://ui.stackzero.co/r/product-variant-01-block.json",
17 | "https://ui.stackzero.co/r/banner-08-block.json",
18 | "https://ui.stackzero.co/r/review-04-block.json",
19 | ],
20 | files: [
21 | {
22 | path: "@/components/commerce-ui/pages/product-01/page.tsx",
23 | type: "registry:page",
24 | target: "app/product/page.tsx",
25 | },
26 | {
27 | path: "@/components/commerce-ui/pages/product-01/components/product.tsx",
28 | type: "registry:component",
29 | },
30 | {
31 | path: "@/components/commerce-ui/pages/product-01/components/product-info.tsx",
32 | type: "registry:component",
33 | },
34 | {
35 | path: "@/components/commerce-ui/pages/product-01/components/store-header.tsx",
36 | type: "registry:component",
37 | },
38 | {
39 | path: "@/components/commerce-ui/pages/product-01/components/store-navigation.tsx",
40 | type: "registry:component",
41 | },
42 | ],
43 | component: React.lazy(
44 | () => import("../components/commerce-ui/pages/product-01/page")
45 | ),
46 | },
47 | ];
48 |
--------------------------------------------------------------------------------
/registry/schema.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const registryItemTypeSchema = z.enum([
4 | "registry:lib",
5 | "registry:block",
6 | "registry:element",
7 | "registry:component",
8 | "registry:showcase",
9 | "registry:ui",
10 | "registry:hook",
11 | "registry:page",
12 |
13 | // Internal use only
14 | "registry:example",
15 | "registry:theme",
16 | "registry:style",
17 |
18 | "registry:internal",
19 | ]);
20 |
21 | export const registryItemFileSchema = z.object({
22 | path: z.string(),
23 | content: z.string().optional(),
24 | type: registryItemTypeSchema,
25 | target: z.string().optional(),
26 | });
27 |
28 | export const registryItemTailwindSchema = z.object({
29 | config: z.object({
30 | content: z.array(z.string()).optional(),
31 | theme: z.record(z.string(), z.any()).optional(),
32 | plugins: z.array(z.string()).optional(),
33 | }),
34 | });
35 |
36 | export const registryItemCssVarsSchema = z.object({
37 | light: z.record(z.string(), z.string()).optional(),
38 | dark: z.record(z.string(), z.string()).optional(),
39 | });
40 |
41 | export const registryItemSchema = z.object({
42 | name: z.string(),
43 | description: z.string().optional(),
44 | type: registryItemTypeSchema,
45 | dependencies: z.array(z.string()).optional(),
46 | registryDependencies: z.array(z.string()).optional(),
47 | files: z.array(registryItemFileSchema).optional(),
48 | component: z.function().args(z.any()).returns(z.any()).optional(),
49 | tailwind: registryItemTailwindSchema.optional(),
50 | cssVars: registryItemCssVarsSchema.optional(),
51 | meta: z.record(z.string(), z.any()).optional(),
52 | docs: z.string().optional(),
53 | categories: z.array(z.string()).optional(),
54 | });
55 |
56 | export const registrySchema = z.array(registryItemSchema);
57 |
58 | export type Registry = z.infer;
59 |
--------------------------------------------------------------------------------
/scripts/sort-registry.ts:
--------------------------------------------------------------------------------
1 | import * as fs from "fs";
2 | import * as path from "path";
3 |
4 | const REGISTRY_FILE = path.join(
5 | process.cwd(),
6 | "registry",
7 | "registry-components.ts"
8 | );
9 |
10 | async function sortRegistry() {
11 | try {
12 | // Read the file
13 | const fileContent = fs.readFileSync(REGISTRY_FILE, "utf8");
14 |
15 | // Extract the components array content
16 | const startMarker = "export const components: Registry = [";
17 | const endMarker = "];";
18 |
19 | const startIndex = fileContent.indexOf(startMarker) + startMarker.length;
20 | const endIndex = fileContent.lastIndexOf(endMarker);
21 |
22 | const beforeComponents = fileContent.slice(0, startIndex);
23 | const afterComponents = fileContent.slice(endIndex);
24 |
25 | // Split into individual component objects
26 | const componentsString = fileContent.slice(startIndex, endIndex);
27 | const componentBlocks = componentsString
28 | .split(/},\s*{/)
29 | .map((block) => block.trim().replace(/^\[?\{?|\}?\]?$/g, ""));
30 |
31 | // Parse and sort components
32 | const components = componentBlocks.map((block) => ({
33 | content: block,
34 | name: block.match(/name:\s*"([^"]+)"/)?.[1] ?? "",
35 | }));
36 |
37 | components.sort((a, b) => a.name.localeCompare(b.name));
38 |
39 | // Rebuild the sorted content
40 | const sortedContent = components
41 | .map(({ content }, index) => {
42 | const prefix = index === 0 ? "\n {" : " {";
43 | const suffix = index === components.length - 1 ? "}" : "},";
44 | return `${prefix}${content}${suffix}\n`;
45 | })
46 | .join("\n");
47 |
48 | // Combine all parts
49 | const newContent = `${beforeComponents}${sortedContent}${afterComponents}`;
50 |
51 | // Write back to file
52 | fs.writeFileSync(REGISTRY_FILE, newContent);
53 |
54 | console.log("✅ Registry components sorted successfully!");
55 | } catch (error) {
56 | console.error("❌ Error sorting registry:", error);
57 | process.exit(1);
58 | }
59 | }
60 |
61 | sortRegistry();
62 |
--------------------------------------------------------------------------------
/source.config.ts:
--------------------------------------------------------------------------------
1 | import {
2 | defineDocs,
3 | defineConfig,
4 | defineCollections,
5 | frontmatterSchema,
6 | metaSchema,
7 | } from "fumadocs-mdx/config";
8 | import { z } from "zod";
9 |
10 | export const { docs, meta } = defineDocs({
11 | dir: "content/docs",
12 | });
13 |
14 | export const blog = defineCollections({
15 | dir: "content/blog",
16 | schema: frontmatterSchema.extend({
17 | author: z.string(),
18 | date: z.string().date().or(z.date()).optional(),
19 | tags: z.array(z.string()).optional(),
20 | }),
21 | type: "doc",
22 | });
23 |
24 | export default defineConfig();
25 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "ESNext",
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "moduleResolution": "bundler",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "preserve",
17 | "incremental": true,
18 | "paths": {
19 | "@/*": ["./*"]
20 | },
21 | "plugins": [
22 | {
23 | "name": "next"
24 | }
25 | ]
26 | },
27 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
28 | "exclude": ["node_modules"]
29 | }
30 |
--------------------------------------------------------------------------------
/types/component.ts:
--------------------------------------------------------------------------------
1 | export type SourceCodes = Record<
2 | string,
3 | {
4 | code: string;
5 | highlightedCode: string;
6 | fileName?: string; // Optional file name for better context
7 | isMainFile?: boolean; // Optional flag to indicate if this is the main file
8 | }
9 | >;
10 |
11 | export type ComponentPreviewProps = {
12 | name: string;
13 | displayExampleName?: string;
14 | hasReTrigger?: boolean;
15 | classNameComponentContainer?: string;
16 | codeRendererFiles?: string[];
17 | source: SourceCodes;
18 | };
19 |
20 | export type PagePreviewProps = {
21 | name: string;
22 | hasReTrigger?: boolean;
23 | classNameComponentContainer?: string;
24 | source: SourceCodes;
25 | };
26 |
27 | export type ComponentDisplayProps = {
28 | component: React.ReactElement;
29 | hasReTrigger: boolean;
30 | className?: string;
31 | reTriggerKey: number;
32 | reTrigger: () => void;
33 | isPreview?: boolean;
34 | };
35 |
36 | export type CodePreviewProps = {
37 | code: string;
38 | highlightedCode: string;
39 | };
40 |
--------------------------------------------------------------------------------