;
8 |
9 | const AppSidebarMenuButton = ({
10 | url,
11 | ...props
12 | }: AppSidebarMenuButtonProps & { url: string }) => {
13 | const pathname = usePathname();
14 |
15 | return ;
16 | };
17 |
18 | export default AppSidebarMenuButton;
19 |
--------------------------------------------------------------------------------
/src/components/blocks/block-intsall-command-copy-button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
4 | import { absoluteUrl } from "@/lib/utils";
5 | import { Check, Terminal } from "lucide-react";
6 | import { Button } from "../ui/button";
7 |
8 | export const BlockInstallCommandCopyButton = ({ block }: { block: string }) => {
9 | const { isCopied, copyToClipboard } = useCopyToClipboard();
10 |
11 | const installCommand = `npx shadcn add ${absoluteUrl(`/r/${block}.json`)}`;
12 |
13 | return (
14 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/blocks/category/preview-list-filter.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ColumnsFilter from "./columns-filter";
3 | import PreviewListSearch from "./preview-list-search";
4 | import CategoryFilter from "./category-filter";
5 |
6 | const PreviewListFilter = () => {
7 | return (
8 |
15 | );
16 | };
17 |
18 | export default PreviewListFilter;
19 |
--------------------------------------------------------------------------------
/src/components/blocks/file-explorer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { getFileTree } from "@/lib/blocks";
4 | import { BlockFile } from "@/types/blocks";
5 | import { FileTree } from "./file-tree";
6 | import { FilePreview } from "./file-preview";
7 |
8 | const FileExplorer = ({ files }: { files: BlockFile[] }) => {
9 | const fileTree = getFileTree(files);
10 |
11 | return (
12 |
13 |
14 |
15 |
16 | Explorer
17 |
18 |
19 |
20 |
21 |
22 |
Open in v0
26 |
27 |
28 | );
29 | };
30 |
31 | export default V0Button;
32 |
--------------------------------------------------------------------------------
/src/components/copy-to-clipboard-button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
4 | import { Button, ButtonProps } from "./ui/button";
5 | import { Check } from "lucide-react";
6 |
7 | export const CopyToClipboardButton = ({
8 | content,
9 | children,
10 | ...props
11 | }: ButtonProps & { content: string }) => {
12 | const { copyToClipboard, isCopied } = useCopyToClipboard();
13 |
14 | return (
15 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/customized/alert/alert-01.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2 | import { CircleFadingArrowUpIcon } from "lucide-react";
3 |
4 | export default function AlertDemo() {
5 | return (
6 |
7 |
8 | Update Available
9 |
10 | A new version of the app is now available.
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/customized/alert/alert-02.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2 | import { OctagonAlertIcon } from "lucide-react";
3 |
4 | export default function DestructiveAlertDemo() {
5 | return (
6 |
7 |
8 | Something Went Wrong
9 |
10 | An error occurred while processing your request.
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/customized/alert/alert-03.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2 | import { CircleCheckBigIcon } from "lucide-react";
3 |
4 | export default function AlertSuccessDemo() {
5 | return (
6 |
7 |
8 | Operation Successful
9 |
10 | Your action has been completed successfully
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/customized/alert/alert-04.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2 | import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
3 |
4 | export default function AlertWarningDemo() {
5 | return (
6 |
7 |
8 | Proceed with Caution
9 |
10 | This action might have unintended consequences.
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/customized/alert/alert-05.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2 | import { InfoIcon } from "lucide-react";
3 |
4 | export default function AlertInfoDemo() {
5 | return (
6 |
7 |
8 | Important Information
9 |
10 | Make sure to review the recent updates before proceeding.
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/customized/alert/alert-06.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2 | import { OctagonAlertIcon } from "lucide-react";
3 |
4 | export default function AlertWithBackgroundDemo() {
5 | return (
6 |
10 |
11 | Something Went Wrong
12 |
13 | An error occurred while processing your request.
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/customized/avatar/avatar-01.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2 |
3 | export default function AvatarDemo() {
4 | return (
5 |
6 |
7 | CN
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/customized/avatar/avatar-02.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2 | import Link from "next/link";
3 |
4 | export default function ClickableAvatarDemo() {
5 | return (
6 |
7 |
8 |
9 | CN
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/customized/avatar/avatar-03.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2 | import {
3 | Tooltip,
4 | TooltipContent,
5 | TooltipTrigger,
6 | } from "@/components/ui/tooltip";
7 |
8 | export default function AvatarWithTooltipDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 | CN
15 |
16 |
17 | shadcn
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/customized/avatar/avatar-04.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2 |
3 | export default function AvatarDemo() {
4 | return (
5 |
6 |
7 |
8 | CN
9 |
10 |
11 | shadcn
12 |
13 | Shadcn UI
14 |
15 |
16 |
7 |
8 | Gradient Outline
9 |
10 |
11 | );
12 | };
13 |
14 | export default BadgeGradientOutlineDemo;
15 |
--------------------------------------------------------------------------------
/src/components/customized/badge/badge-08.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/components/ui/badge";
2 |
3 | const SoftBadgeDemo = () => {
4 | return (
5 |
6 |
7 | In
8 | Progress
9 |
10 |
11 | Blocked
12 |
13 |
14 | Done
15 |
16 |
6 |
7 | In
8 | Progress
9 |
10 |
11 | Blocked
12 |
13 |
14 | Done
15 |
16 |
7 |
8 |
15 | shadcn
16 |
17 |
18 | shadcn
19 |
26 |
27 |
28 | );
29 | };
30 |
31 | export default BadgeWithImageDemo;
32 |
--------------------------------------------------------------------------------
/src/components/customized/badge/badge-11.tsx:
--------------------------------------------------------------------------------
1 | import { Badge } from "@/components/ui/badge";
2 | import { ArrowLeftIcon, ArrowRightIcon, XIcon } from "lucide-react";
3 |
4 | const BadgeWithIconDemo = () => {
5 | return (
6 |
7 |
8 |
9 | Left
10 |
11 |
12 | Right
13 |
14 |
15 |
16 | Remove
17 |
18 |
19 |
7 |
10 |
13 |
16 |
7 |
10 |
13 |
14 | );
15 | };
16 |
17 | export default LoadingButtonDemo;
18 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-08.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 |
3 | const GhostButtonDemo = () => ;
4 |
5 | export default GhostButtonDemo;
6 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-09.tsx:
--------------------------------------------------------------------------------
1 | import { Button, ButtonProps } from "@/components/ui/button";
2 | import { cn } from "@/lib/utils";
3 | import { StarIcon } from "lucide-react";
4 |
5 | const ButtonGradient = ({ className, ...props }: ButtonProps) => (
6 |
13 | );
14 |
15 | const GradientButtonDemo = () => (
16 |
17 | Gradient
18 |
19 |
20 |
21 |
22 | Star
23 |
24 |
25 | );
26 |
27 | export default GradientButtonDemo;
28 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-10.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 |
3 | const LinkButtonDemo = () => (
4 |
5 |
6 |
9 |
10 | );
11 |
12 | export default LinkButtonDemo;
13 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-11.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Instagram, Twitch, Twitter } from "lucide-react";
3 | import React from "react";
4 |
5 | const SocialButtonDemo = () => {
6 | return (
7 |
8 |
11 |
14 |
17 |
18 | );
19 | };
20 |
21 | export default SocialButtonDemo;
22 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-13.tsx:
--------------------------------------------------------------------------------
1 | import { Button, ButtonProps } from "@/components/ui/button";
2 | import { cn } from "@/lib/utils";
3 | import { StarIcon } from "lucide-react";
4 |
5 | const ButtonNeon = ({ className, ...props }: ButtonProps) => (
6 |
13 | );
14 |
15 | const NeonButtonDemo = () => (
16 |
17 | Neon
18 |
19 |
20 |
21 |
22 | Star
23 |
24 |
25 | );
26 |
27 | export default NeonButtonDemo;
28 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-14.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { StarIcon } from "lucide-react";
3 |
4 | const RoundedButtonDemo = () => (
5 |
6 |
7 |
10 |
13 |
14 | );
15 |
16 | export default RoundedButtonDemo;
17 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-15.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import { cn } from "@/lib/utils";
5 | import { Heart } from "lucide-react";
6 | import React from "react";
7 |
8 | const ToggleButton = () => {
9 | const [isLiked, setIsLiked] = React.useState(false);
10 |
11 | return (
12 |
26 | );
27 | };
28 |
29 | export default ToggleButton;
30 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-16.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import { MoonIcon, SunIcon } from "lucide-react";
5 | import { useTheme } from "next-themes";
6 | import { useEffect, useState } from "react";
7 |
8 | const ThemeToggleButton = () => {
9 | const [mounted, setMounted] = useState(false);
10 | const { resolvedTheme, setTheme } = useTheme();
11 |
12 | const toggleTheme = () => {
13 | setTheme(resolvedTheme === "dark" ? "light" : "dark");
14 | };
15 |
16 | useEffect(() => {
17 | setMounted(true);
18 | }, []);
19 |
20 | // Prevent SSR flicker and hydration mismatch
21 | if (!mounted) {
22 | return ;
23 | }
24 |
25 | return (
26 |
29 | );
30 | };
31 |
32 | export default ThemeToggleButton;
33 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-17.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { StarIcon } from "lucide-react";
3 |
4 | const FullWidthButtonDemo = () => (
5 |
8 | );
9 |
10 | export default FullWidthButtonDemo;
11 |
--------------------------------------------------------------------------------
/src/components/customized/button/button-18.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 |
3 | const GroupButtonDemo = () => (
4 |
5 |
6 |
9 |
12 |
15 |
16 |
6 |
12 |
19 |
6 |
7 |
10 |
11 | 2
12 |
13 |
14 |
7 |
10 |
15 |
20 |
21 | );
22 |
23 | export default ButtonsWithTapAnimation;
24 |
--------------------------------------------------------------------------------
/src/components/customized/card/card-04.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Card,
4 | CardContent,
5 | CardDescription,
6 | CardHeader,
7 | CardTitle,
8 | } from "@/components/ui/card";
9 |
10 | export default function CardBanner() {
11 | return (
12 |
13 |
14 |
15 | Power up your scheduling
16 |
17 |
18 | Get started with the world's leading Scheduling Automation
19 | Platform in seconds – for free.
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/customized/carousel/carousel-01.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { Card, CardContent } from "@/components/ui/card";
4 | import {
5 | Carousel,
6 | CarouselContent,
7 | CarouselItem,
8 | CarouselNext,
9 | CarouselPrevious,
10 | } from "@/components/ui/carousel";
11 |
12 | export default function CarouselDemo() {
13 | return (
14 |
15 |
16 | {Array.from({ length: 5 }).map((_, index) => (
17 |
18 |
19 |
20 |
21 | {index + 1}
22 |
23 |
24 |
25 |
26 | ))}
27 |
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/customized/checkbox/checkbox-01.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/components/ui/checkbox";
2 |
3 | export default function CheckboxWithTextDemo() {
4 | return (
5 |
6 |
7 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/customized/checkbox/checkbox-02.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/components/ui/checkbox";
2 |
3 | export default function DisabledCheckboxDemo() {
4 | return (
5 |
6 |
7 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/customized/checkbox/checkbox-06.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Checkbox } from "@/components/ui/checkbox";
4 | import { CheckedState } from "@radix-ui/react-checkbox";
5 | import { useState } from "react";
6 |
7 | export default function ControlledCheckboxDemo() {
8 | const [checked, setChecked] = useState(false);
9 |
10 | return (
11 |
12 |
17 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/customized/checkbox/checkbox-07.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/components/ui/checkbox";
2 |
3 | export default function CheckboxColorsDemo() {
4 | return (
5 |
6 |
7 |
11 |
15 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/customized/checkbox/checkbox-08.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox } from "@/components/ui/checkbox";
2 |
3 | export default function CheckboxSizesDemo() {
4 | return (
5 |
6 |
7 |
11 |
15 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/customized/dropdown-menu/dropdown-menu-01.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | DropdownMenu,
4 | DropdownMenuContent,
5 | DropdownMenuItem,
6 | DropdownMenuLabel,
7 | DropdownMenuSeparator,
8 | DropdownMenuTrigger,
9 | } from "@/components/ui/dropdown-menu";
10 |
11 | export default function DropdownMenuDemo() {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 | My Account
19 |
20 | Profile
21 | Settings
22 | Logout
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/customized/input-otp/input-otp-01.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSeparator,
5 | InputOTPSlot,
6 | } from "@/components/ui/input-otp";
7 |
8 | export default function InputOTPDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/customized/input-otp/input-otp-02.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSlot,
5 | } from "@/components/ui/input-otp";
6 |
7 | export default function InputOTPDemo() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/customized/input-otp/input-otp-03.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSlot,
5 | } from "@/components/ui/input-otp";
6 |
7 | export default function InputOTPDemo() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/customized/input-otp/input-otp-04.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSeparator,
5 | InputOTPSlot,
6 | } from "@/components/ui/input-otp";
7 |
8 | export default function InputOTPDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/customized/input-otp/input-otp-05.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSlot,
5 | } from "@/components/ui/input-otp";
6 |
7 | export default function InputOTPDemo() {
8 | return (
9 |
10 |
11 |
15 |
19 |
23 |
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/customized/input-otp/input-otp-06.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSlot,
5 | } from "@/components/ui/input-otp";
6 | import { Dot } from "lucide-react";
7 |
8 | export default function InputOTPDemo() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/customized/input-otp/input-otp-07.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | InputOTP,
3 | InputOTPGroup,
4 | InputOTPSlot,
5 | } from "@/components/ui/input-otp";
6 |
7 | export default function InputOTPDemo() {
8 | return (
9 |
10 |
11 |
15 |
19 |
23 |
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/customized/input/input-01.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 |
3 | export default function InputDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/customized/input/input-02.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 |
3 | export default function InputRingDemo() {
4 | return (
5 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/customized/input/input-03.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 |
3 | export default function FilledInputDemo() {
4 | return (
5 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/customized/input/input-04.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 |
3 | export default function DisabledInputDemo() {
4 | return (
5 |
6 | );
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/customized/input/input-05.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 |
4 | export default function InputWithLabelDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/customized/input/input-06.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Input } from "@/components/ui/input";
3 |
4 | export default function InputWithButtonDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/customized/input/input-08.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 |
4 | export default function InputWithHelperTextDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 | We'll never share your email with anyone else.
11 |
12 |
7 |
10 |
16 |
This email is invalid.
17 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/customized/navigation-menu/navigation-menu-01.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NavigationMenu,
3 | NavigationMenuItem,
4 | NavigationMenuLink,
5 | NavigationMenuList,
6 | navigationMenuTriggerStyle,
7 | } from "@/components/ui/navigation-menu";
8 | import Link from "next/link";
9 |
10 | const navigationMenuItems = [
11 | { title: "Home", href: "#" },
12 | { title: "Blog", href: "#blog" },
13 | { title: "Docs", href: "#docs" },
14 | ];
15 |
16 | export default function NavigationMenuDemo() {
17 | return (
18 |
19 |
20 | {navigationMenuItems.map((item) => (
21 |
22 |
26 | {item.title}
27 |
28 |
29 | ))}
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/customized/pagination/pagination-01.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Pagination,
3 | PaginationContent,
4 | PaginationItem,
5 | PaginationLink,
6 | PaginationNext,
7 | PaginationPrevious,
8 | } from "@/components/ui/pagination";
9 |
10 | export default function PaginationDemo() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 | 1
19 |
20 |
21 |
22 | 2
23 |
24 |
25 |
26 | 3
27 |
28 |
29 |
30 |
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/customized/pagination/pagination-04.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Pagination,
3 | PaginationContent,
4 | PaginationItem,
5 | PaginationLink,
6 | PaginationNext,
7 | PaginationPrevious,
8 | } from "@/components/ui/pagination";
9 |
10 | const pages = [1, 2, 3];
11 |
12 | export default function PaginationWithRoundedButton() {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 | {pages.map((page) => (
20 |
21 |
26 | {page}
27 |
28 |
29 | ))}
30 |
31 |
32 |
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/customized/pagination/pagination-11.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Pagination,
3 | PaginationContent,
4 | PaginationItem,
5 | PaginationNext,
6 | PaginationPrevious,
7 | } from "@/components/ui/pagination";
8 |
9 | export default function PaginationNumberless() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/customized/pagination/pagination-12.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Pagination,
3 | PaginationContent,
4 | PaginationItem,
5 | PaginationNext,
6 | PaginationPrevious,
7 | } from "@/components/ui/pagination";
8 |
9 | export default function PaginationNumberless() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Page 1 of 21
19 |
20 |
21 |
22 |
23 |
24 |
25 |
17 |
18 |
{progress}%
19 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/customized/radio-group/radio-group-02.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
3 |
4 | export default function RadioGroupOrientationDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/customized/radio-group/radio-group-03.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
3 |
4 | export default function RadioGroupDisabledDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/customized/select/select-01.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import {
4 | Select,
5 | SelectContent,
6 | SelectGroup,
7 | SelectItem,
8 | SelectLabel,
9 | SelectTrigger,
10 | SelectValue,
11 | } from "@/components/ui/select";
12 |
13 | export default function SelectDemo() {
14 | return (
15 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/customized/select/select-03.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectContent,
4 | SelectGroup,
5 | SelectItem,
6 | SelectLabel,
7 | SelectTrigger,
8 | SelectValue,
9 | } from "@/components/ui/select";
10 |
11 | export default function SelectGhostDemo() {
12 | return (
13 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/customized/separator/separator-01.tsx:
--------------------------------------------------------------------------------
1 | import { Separator } from "@/components/ui/separator";
2 |
3 | export default function SeparatorDemo() {
4 | return (
5 |
6 |
7 |
Radix Primitives
8 |
9 | An open-source UI component library.
10 |
11 |
12 |
13 |
14 |
Blog
15 |
16 |
Docs
17 |
18 |
Source
19 |
20 |
11 |
12 | {progress[0]}%
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/customized/slider/slider-08.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Slider } from "@/components/ui/slider";
4 | import * as React from "react";
5 |
6 | const formatDuration = (duration: number) => {
7 | const minutes = Math.floor(duration / 60);
8 | const seconds = duration % 60;
9 |
10 | return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
11 | };
12 |
13 | export default function AudioSliderDemo() {
14 | const duration = 145;
15 | const [playbackTime, setPlaybackTime] = React.useState([78]);
16 |
17 | return (
18 |
19 |
25 |
26 | {formatDuration(playbackTime[0])}
27 | {formatDuration(duration)}
28 |
29 |
8 |
9 |
10 | {ramExpansions.map((expansion) => (
11 | {expansion}
12 | ))}
13 |
14 |
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/customized/spinner/spinner-05.tsx:
--------------------------------------------------------------------------------
1 | import { Loader2Icon } from "lucide-react";
2 |
3 | export default function SpinnerSizesDemo() {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/customized/spinner/spinner-07.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SpinnerCircle1 = () => (
4 |
5 | );
6 |
7 | export default SpinnerCircle1;
8 |
--------------------------------------------------------------------------------
/src/components/customized/spinner/spinner-08.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SpinnerCircle2 = () => (
4 |
5 | );
6 |
7 | export default SpinnerCircle2;
8 |
--------------------------------------------------------------------------------
/src/components/customized/spinner/spinner-09.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SpinnerCircle3 = () => (
4 |
5 | );
6 |
7 | export default SpinnerCircle3;
8 |
--------------------------------------------------------------------------------
/src/components/customized/spinner/spinner-10.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SpinnerCircle4 = () => (
4 |
5 | );
6 |
7 | export default SpinnerCircle4;
8 |
--------------------------------------------------------------------------------
/src/components/customized/spinner/spinner-11.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SpinnerCircle5 = () => (
4 |
5 | );
6 |
7 | export default SpinnerCircle5;
8 |
--------------------------------------------------------------------------------
/src/components/customized/switch/switch-01.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from "@/components/ui/switch";
2 | import React from "react";
3 |
4 | const SwitchDemo = () => {
5 | return ;
6 | };
7 |
8 | export default SwitchDemo;
9 |
--------------------------------------------------------------------------------
/src/components/customized/switch/switch-02.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { Switch } from "@/components/ui/switch";
3 | import React from "react";
4 |
5 | const SwitchWithLabelDemo = () => {
6 | return (
7 |
8 |
9 |
10 |
11 | );
12 | };
13 |
14 | export default SwitchWithLabelDemo;
15 |
--------------------------------------------------------------------------------
/src/components/customized/switch/switch-03.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { Switch } from "@/components/ui/switch";
3 | import React from "react";
4 |
5 | const DisabledSwitchDemo = () => {
6 | return (
7 |
8 |
9 |
10 |
11 | );
12 | };
13 |
14 | export default DisabledSwitchDemo;
15 |
--------------------------------------------------------------------------------
/src/components/customized/switch/switch-04.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from "@/components/ui/switch";
2 | import * as React from "react";
3 |
4 | const SwitchColorsDemo = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | );
13 | };
14 |
15 | export default SwitchColorsDemo;
16 |
--------------------------------------------------------------------------------
/src/components/customized/switch/switch-06.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Switch } from "@/components/ui/switch";
4 | import React, { useState } from "react";
5 |
6 | const ControlledSwitchDemo = () => {
7 | const [checked, setChecked] = useState();
8 |
9 | return ;
10 | };
11 |
12 | export default ControlledSwitchDemo;
13 |
--------------------------------------------------------------------------------
/src/components/customized/textarea/textarea-01.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/components/ui/textarea";
2 |
3 | export default function TextareaDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/customized/textarea/textarea-02.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/components/ui/textarea";
2 |
3 | export default function TextareaWithBackgroundColorDemo() {
4 | return (
5 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/customized/textarea/textarea-03.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/components/ui/textarea";
2 |
3 | export default function TextareaDisabledDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/customized/textarea/textarea-04.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { Textarea } from "@/components/ui/textarea";
3 |
4 | export default function TextareaWithLabelDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/customized/textarea/textarea-05.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/components/ui/textarea";
2 |
3 | export default function TextareaRowsDemo() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/customized/textarea/textarea-06.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { Textarea } from "@/components/ui/textarea";
3 |
4 | export default function TextareaWithHelperTextDemo() {
5 | return (
6 |
7 |
8 |
9 |
10 | Your message will be copied to the support team.
11 |
12 |
Default Tooltip
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/customized/tooltip/tooltip-02.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Tooltip,
4 | TooltipContent,
5 | TooltipProvider,
6 | TooltipTrigger,
7 | } from "@/components/ui/tooltip";
8 | import { TooltipArrow } from "@radix-ui/react-tooltip";
9 |
10 | export default function WithArrowTooltipDemo() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 | Tooltip with arrow
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/customized/tooltip/tooltip-04.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Tooltip,
4 | TooltipContent,
5 | TooltipProvider,
6 | TooltipTrigger,
7 | } from "@/components/ui/tooltip";
8 |
9 | export default function TooltipWithDisabledHoverableContentDemo() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 | You can't hover over me
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/customized/tooltip/tooltip-07.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Tooltip,
4 | TooltipContent,
5 | TooltipProvider,
6 | TooltipTrigger,
7 | } from "@/components/ui/tooltip";
8 |
9 | export default function TooltipPortalDemo() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 | I'm in a Portal
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/github-star-button.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { Button } from "./ui/button";
3 | import { GithubLogo } from "./ui/icons";
4 |
5 | const OWNER = "akash3444";
6 | const REPO = "shadcn-ui-blocks";
7 |
8 | export const GithubStarButton = async () => {
9 | return (
10 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/home/background-pattern.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import DotPattern from "@/components/ui/dot-pattern";
4 | import Particles from "@/components/ui/particles";
5 | import { cn } from "@/lib/utils";
6 | import { useTheme } from "next-themes";
7 |
8 | export const BackgroundPattern = () => {
9 | const { resolvedTheme } = useTheme();
10 | const isLightTheme = resolvedTheme === "light";
11 |
12 | return (
13 | <>
14 |
25 |
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/components/home/faq.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Accordion,
3 | AccordionContent,
4 | AccordionItem,
5 | AccordionTrigger,
6 | } from "@/components/ui/accordion";
7 | import { faq } from "@/description/faq";
8 |
9 | export function FAQ() {
10 | return (
11 | <>
12 |
13 | Frequently Asked Questions
14 |
15 |
16 | {faq.map(({ title, content }, index) => (
17 |
18 |
19 | {title}
20 |
21 | {content}
22 |
23 | ))}
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/home/index.ts:
--------------------------------------------------------------------------------
1 | export { BackgroundPattern } from "./background-pattern";
2 | export { Hero } from "./hero";
3 | export { Features } from "./features";
4 |
--------------------------------------------------------------------------------
/src/components/logo.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { Shapes } from "lucide-react";
5 |
6 | export const Logo = ({ className, ...props }: React.ComponentProps<"div">) => {
7 | return (
8 |
15 |
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/components/typography.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { ComponentProps } from "react";
3 |
4 | export const MainHeading = ({ className, ...props }: ComponentProps<"h1">) => (
5 |
9 | );
10 |
11 | export const SubHeading = ({ className, ...props }: ComponentProps<"h2">) => (
12 |
16 | );
17 |
18 | export const DescriptionText = ({
19 | className,
20 | ...props
21 | }: ComponentProps<"p">) => (
22 |
26 | );
27 |
--------------------------------------------------------------------------------
/src/components/ui/code-block.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { getHighlightedCodeNodes } from "@/lib/shiki";
3 | import { Loader2Icon } from "lucide-react";
4 | import { useLayoutEffect, useState, type JSX } from "react";
5 |
6 | export function CodeBlock({
7 | initial,
8 | code,
9 | }: {
10 | initial?: JSX.Element;
11 | code: string;
12 | }) {
13 | const [nodes, setNodes] = useState(initial);
14 |
15 | useLayoutEffect(() => {
16 | getHighlightedCodeNodes(code).then(setNodes);
17 | }, [code]);
18 |
19 | return (
20 | nodes ?? (
21 |
22 |
23 |
24 | )
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4 |
5 | const Collapsible = CollapsiblePrimitive.Root
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | )
21 | }
22 | )
23 | Input.displayName = "Input"
24 |
25 | export { Input }
26 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
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 |
--------------------------------------------------------------------------------
/src/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 | const Progress = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, value, ...props }, ref) => (
12 |
20 |
24 |
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 |
28 | export { Progress }
29 |
--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Separator = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(
12 | (
13 | { className, orientation = "horizontal", decorative = true, ...props },
14 | ref
15 | ) => (
16 |
27 | )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 |
31 | export { Separator }
32 |
--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils"
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | )
13 | }
14 |
15 | export { Skeleton }
16 |
--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Textarea = React.forwardRef<
6 | HTMLTextAreaElement,
7 | React.ComponentProps<"textarea">
8 | >(({ className, ...props }, ref) => {
9 | return (
10 |
18 | )
19 | })
20 | Textarea.displayName = "Textarea"
21 |
22 | export { Textarea }
23 |
--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | export const config = {
2 | appUrl:
3 | process.env.NODE_ENV === "production"
4 | ? process.env.VERCEL_PROJECT_PRODUCTION_URL ??
5 | process.env.NEXT_PUBLIC_APP_URL!
6 | : "localhost:3000",
7 | social: {
8 | github: "https://github.com/akash3444/shadcn-ui-blocks",
9 | twitter: "https://twitter.com/akash_3444",
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/src/config/app.ts:
--------------------------------------------------------------------------------
1 | export const app = {
2 | domain: "https://www.shadcnui-blocks.com",
3 | };
4 |
--------------------------------------------------------------------------------
/src/description/blocks.tsx:
--------------------------------------------------------------------------------
1 | import { BlockScreenSize } from "@/types/blocks";
2 | import { DesktopIcon, MobileIcon } from "@radix-ui/react-icons";
3 | import { TabletIcon } from "lucide-react";
4 |
5 | export const blockScreens = [
6 | {
7 | name: BlockScreenSize.mobile,
8 | icon: MobileIcon,
9 | size: 30,
10 | },
11 | {
12 | name: BlockScreenSize.tablet,
13 | icon: TabletIcon,
14 | size: 70,
15 | },
16 | {
17 | name: BlockScreenSize.desktop,
18 | icon: DesktopIcon,
19 | size: 100,
20 | },
21 | ];
22 |
23 | export const BLOCK_SCREENSHOT_WIDTH = 1366;
24 | export const BLOCK_SCREENSHOT_HEIGHT = 768;
25 | export const BLOCK_SCREENSHOT_EXTENSION = "webp";
26 |
--------------------------------------------------------------------------------
/src/hooks/use-copy-to-clipboard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | export function useCopyToClipboard({
6 | timeout = 2000,
7 | onCopy,
8 | }: {
9 | timeout?: number;
10 | onCopy?: () => void;
11 | } = {}) {
12 | const [isCopied, setIsCopied] = React.useState(false);
13 |
14 | const copyToClipboard = (value: string) => {
15 | if (typeof window === "undefined" || !navigator.clipboard.writeText) {
16 | return;
17 | }
18 |
19 | if (!value) return;
20 |
21 | navigator.clipboard.writeText(value).then(() => {
22 | setIsCopied(true);
23 |
24 | if (onCopy) {
25 | onCopy();
26 | }
27 |
28 | setTimeout(() => {
29 | setIsCopied(false);
30 | }, timeout);
31 | }, console.error);
32 | };
33 |
34 | return { isCopied, copyToClipboard };
35 | }
36 |
--------------------------------------------------------------------------------
/src/hooks/use-debounce.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export function useDebounce(value: T, delay: number = 300) {
4 | const [debouncedValue, setDebouncedValue] = React.useState(value);
5 |
6 | React.useEffect(() => {
7 | const handler = setTimeout(() => {
8 | setDebouncedValue(value);
9 | }, delay);
10 |
11 | return () => {
12 | clearTimeout(handler);
13 | };
14 | }, [value, delay]);
15 |
16 | return debouncedValue;
17 | }
18 |
--------------------------------------------------------------------------------
/src/hooks/use-mobile.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | const MOBILE_BREAKPOINT = 768
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(undefined)
7 |
8 | React.useEffect(() => {
9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
10 | const onChange = () => {
11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
12 | }
13 | mql.addEventListener("change", onChange)
14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15 | return () => mql.removeEventListener("change", onChange)
16 | }, [])
17 |
18 | return !!isMobile
19 | }
20 |
--------------------------------------------------------------------------------
/src/lib/file.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import path from "path";
4 | import fs from "fs";
5 |
6 | export const getNumberOfFilesInsideDirectory = async (
7 | directoryPath: string
8 | ) => {
9 | try {
10 | const directoryFullPath = path.join(process.cwd(), directoryPath);
11 |
12 | const files = fs.readdirSync(directoryFullPath);
13 | const fileCount = files.filter((file) =>
14 | fs.statSync(path.join(directoryFullPath, file)).isFile()
15 | ).length;
16 |
17 | return fileCount;
18 | } catch (error) {
19 | console.error("error :", error);
20 | return 0;
21 | }
22 | };
23 |
24 | export const getFileContent = async (filePath: string) => {
25 | const joinedPath = path.relative(process.cwd(), filePath);
26 | const content = fs.readFileSync(joinedPath, "utf8");
27 |
28 | return content;
29 | };
30 |
--------------------------------------------------------------------------------
/src/lib/metadata.ts:
--------------------------------------------------------------------------------
1 | import { Metadata } from "next";
2 |
3 | export const constructMetadata = (metadata: Metadata): Metadata => {
4 | return {
5 | title: metadata.title,
6 | description: metadata.description,
7 | openGraph: {
8 | title: metadata.title!,
9 | description: metadata.description!,
10 | siteName: "Shadcn UI Blocks",
11 | type: "website",
12 | images: [
13 | {
14 | url: "/images/og-image.png",
15 | height: 630,
16 | width: 1200,
17 | alt: "Customized Shadcn UI Blocks & Components",
18 | },
19 | ],
20 | locale: "en_US",
21 | ...metadata.openGraph,
22 | },
23 | authors: [
24 | {
25 | name: "Akash Moradiya",
26 | url: "https://twitter.com/akash_3444",
27 | },
28 | ],
29 | manifest: "/site.webmanifest",
30 | ...metadata,
31 | };
32 | };
33 |
--------------------------------------------------------------------------------
/src/lib/og.ts:
--------------------------------------------------------------------------------
1 | export const generateOgImageUrl = ({
2 | title,
3 | type,
4 | mode = "light",
5 | }: {
6 | title: string;
7 | type: string;
8 | mode?: "light" | "dark";
9 | }) => {
10 | const url = process.env.NEXT_PUBLIC_APP_URL
11 | ? `https://${process.env.NEXT_PUBLIC_APP_URL}`
12 | : "http://localhost:3000";
13 |
14 | const ogUrl = new URL(`${url}/api/og`);
15 | ogUrl.searchParams.set("heading", title);
16 | ogUrl.searchParams.set("type", type);
17 | ogUrl.searchParams.set("mode", mode);
18 |
19 | return ogUrl.toString();
20 | };
21 |
--------------------------------------------------------------------------------
/src/lib/shadcn-registry.ts:
--------------------------------------------------------------------------------
1 | export const getInstallationCommand = (
2 | packageManager: string,
3 | registryUrl: string
4 | ) => {
5 | switch (packageManager) {
6 | case "npm":
7 | case "yarn":
8 | return `npx shadcn@latest add ${registryUrl}`;
9 | case "pnpm":
10 | return `pnpm dlx shadcn@latest add ${registryUrl}`;
11 | case "bun":
12 | return `bunx --bun shadcn@latest add ${registryUrl}`;
13 | default:
14 | throw new Error(`Unsupported package manager: ${packageManager}`);
15 | }
16 | };
17 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { config } from "@/config";
2 | import { clsx, type ClassValue } from "clsx";
3 | import { twMerge } from "tailwind-merge";
4 |
5 | export function cn(...inputs: ClassValue[]) {
6 | return twMerge(clsx(inputs));
7 | }
8 |
9 | export function capitalize(str: string) {
10 | return str.charAt(0).toUpperCase() + str.slice(1);
11 | }
12 |
13 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
14 | type GroupBy = Record;
15 |
16 | export function groupBy(
17 | array: T[],
18 | key: K
19 | ): GroupBy {
20 | return array.reduce((acc, item) => {
21 | const keyValue = String(item[key]);
22 | if (!acc[keyValue]) {
23 | acc[keyValue] = [];
24 | }
25 | acc[keyValue].push(item);
26 | return acc;
27 | }, {} as GroupBy);
28 | }
29 |
30 | export function absoluteUrl(path: string) {
31 | return process.env.NODE_ENV === "development"
32 | ? `http://localhost:3000${path}`
33 | : `https://${config.appUrl}${path}`;
34 | }
35 |
--------------------------------------------------------------------------------
/src/lib/validations/og.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const ogImageSchema = z.object({
4 | heading: z.string(),
5 | type: z.string(),
6 | mode: z.enum(["light", "dark"]).default("dark"),
7 | });
8 |
--------------------------------------------------------------------------------
/src/providers/posthog-provider.tsx:
--------------------------------------------------------------------------------
1 | // app/providers.js
2 | "use client";
3 | import posthog from "posthog-js";
4 | import { PostHogProvider } from "posthog-js/react";
5 |
6 | if (typeof window !== "undefined" && process.env.NODE_ENV !== "development") {
7 | posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
8 | api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
9 | person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
10 | });
11 | }
12 | export function CSPostHogProvider({ children }: { children: React.ReactNode }) {
13 | return {children};
14 | }
15 |
--------------------------------------------------------------------------------
/src/registry/complex-component/components/pokemon-card.tsx:
--------------------------------------------------------------------------------
1 | import { cache } from "react"
2 | import { getPokemon } from "@/registry/complex-component/lib/pokemon"
3 | import { Card, CardContent } from "@/components/ui/card"
4 | import { PokemonImage } from "@/registry/complex-component/components/pokemon-image"
5 |
6 | const cachedGetPokemon = cache(getPokemon)
7 |
8 | export async function PokemonCard({ name }: { name: string }) {
9 | const pokemon = await cachedGetPokemon(name)
10 |
11 | if (!pokemon) {
12 | return null
13 | }
14 |
15 | return (
16 |
17 |
18 |
21 | {pokemon.name}
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/registry/complex-component/components/pokemon-image.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | /* eslint-disable @next/next/no-img-element */
4 | import { usePokemonImage } from "@/registry/complex-component/hooks/use-pokemon"
5 |
6 | export function PokemonImage({
7 | name,
8 | number,
9 | }: {
10 | name: string
11 | number: number
12 | }) {
13 | const imageUrl = usePokemonImage(number)
14 |
15 | if (!imageUrl) {
16 | return null
17 | }
18 |
19 | return 
20 | }
21 |
--------------------------------------------------------------------------------
/src/registry/complex-component/hooks/use-pokemon.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | // Totally unnecessary hook, but it's a good example of how to use a hook in a custom registry.
4 |
5 | export function usePokemonImage(number: number) {
6 | return `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${number}.png`
7 | }
8 |
--------------------------------------------------------------------------------
/src/registry/complex-component/page.tsx:
--------------------------------------------------------------------------------
1 | import { cache } from "react"
2 | import { PokemonCard } from "@/registry/complex-component/components/pokemon-card"
3 | import { getPokemonList } from "@/registry/complex-component/lib/pokemon"
4 |
5 | const getCachedPokemonList = cache(getPokemonList)
6 |
7 | export default async function Page() {
8 | const pokemons = await getCachedPokemonList({ limit: 12 })
9 |
10 | if (!pokemons) {
11 | return null
12 | }
13 |
14 | return (
15 |
16 |
17 | {pokemons.results.map((p) => (
18 |
19 | ))}
20 |
21 |
Hello World
3 | }
4 |
--------------------------------------------------------------------------------
/src/registry/layout.tsx:
--------------------------------------------------------------------------------
1 | import "@/app/globals.css"
2 |
3 | export default function Layout({ children }: { children: React.ReactNode }) {
4 | return <>{children}
5 | }
6 |
--------------------------------------------------------------------------------
/src/types/blocks.ts:
--------------------------------------------------------------------------------
1 | import type { JSX } from "react";
2 | type TreeItem = {
3 | name: string;
4 | children?: TreeItem[];
5 | } & (
6 | | { type: "file"; path: string; target: string }
7 | | { type: "folder"; children: TreeItem[] }
8 | );
9 |
10 | export type FileTree = TreeItem[];
11 |
12 | export interface BlockFile {
13 | path: string;
14 | target?: string;
15 | }
16 |
17 | export interface Block {
18 | name: string;
19 | title: string;
20 | description?: string;
21 | category: string;
22 | component: React.LazyExoticComponent<() => JSX.Element>;
23 | files: BlockFile[];
24 | }
25 |
26 | export type BlockScreenSizeUnion = `${BlockScreenSize}`;
27 |
28 | export enum BlockScreenSize {
29 | desktop = "desktop",
30 | tablet = "tablet",
31 | mobile = "mobile",
32 | }
33 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "dom.iterable",
6 | "esnext"
7 | ],
8 | "allowJs": true,
9 | "skipLibCheck": true,
10 | "strict": true,
11 | "noEmit": true,
12 | "esModuleInterop": true,
13 | "module": "esnext",
14 | "moduleResolution": "bundler",
15 | "allowImportingTsExtensions": true,
16 | "resolveJsonModule": true,
17 | "isolatedModules": true,
18 | "jsx": "preserve",
19 | "incremental": true,
20 | "plugins": [
21 | {
22 | "name": "next"
23 | }
24 | ],
25 | "paths": {
26 | "@/*": [
27 | "./src/*"
28 | ]
29 | },
30 | "target": "ES2017"
31 | },
32 | "include": [
33 | "next-env.d.ts",
34 | "**/*.ts",
35 | "**/*.tsx",
36 | ".next/types/**/*.ts"
37 | ],
38 | "exclude": [
39 | "node_modules"
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------