29 | {/* Header Section */}
30 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/sitemap.ts:
--------------------------------------------------------------------------------
1 | import { MetadataRoute } from "next";
2 |
3 | export default function sitemap(): MetadataRoute.Sitemap {
4 | const baseUrl = "https://karrix.dev";
5 |
6 | return [
7 | {
8 | url: baseUrl,
9 | lastModified: new Date(),
10 | changeFrequency: "monthly",
11 | priority: 1,
12 | },
13 | {
14 | url: `${baseUrl}/components/unsave-popup`,
15 | lastModified: new Date(),
16 | changeFrequency: "monthly",
17 | priority: 0.9,
18 | },
19 | {
20 | url: `${baseUrl}/components/info-card`,
21 | lastModified: new Date(),
22 | changeFrequency: "monthly",
23 | priority: 0.9,
24 | },
25 | {
26 | url: `${baseUrl}/installation`,
27 | lastModified: new Date(),
28 | changeFrequency: "monthly",
29 | priority: 0.8,
30 | },
31 | {
32 | url: `${baseUrl}/changelog`,
33 | lastModified: new Date("2024-02-17"),
34 | changeFrequency: "weekly",
35 | priority: 0.7,
36 | },
37 | {
38 | url: `${baseUrl}/dark-mode`,
39 | lastModified: new Date(),
40 | changeFrequency: "monthly",
41 | priority: 0.6,
42 | },
43 | ];
44 | }
45 |
--------------------------------------------------------------------------------
/public/icons/astro.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider
9 |
10 | const Tooltip = TooltipPrimitive.Root
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 |
14 | const TooltipContent = React.forwardRef<
15 | React.ElementRef
31 |
38 |
39 | {/* Mystery Section */}
40 | 32 | Dark Mode 33 |
34 |35 | Using Dark Mode for the components. 36 |
37 |Toggle theme
34 |
31 |
51 |
39 |
40 |
50 | {username}
41 | 42 |{description}
43 |
44 |
49 |
17 |
44 |
26 |
43 |
27 |
39 | {children}
40 |
41 |
42 |
28 |
36 |
38 | {children}
53 |
25 |
32 | {showAllProps && (
33 |
40 |
63 | )}
64 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/ui/code-snippet.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { motion, AnimatePresence } from "framer-motion";
5 | import { Button } from "./button";
6 | import { Copy, Check } from "lucide-react";
7 | import { cn } from "@/lib/utils";
8 |
9 | interface CodeSnippetProps {
10 | code: string;
11 | className?: string;
12 | layoutId?: string;
13 | }
14 |
15 | export function CodeSnippet({ code, className, layoutId }: CodeSnippetProps) {
16 | const [copied, setCopied] = React.useState(false);
17 |
18 | const handleCopy = React.useCallback(async () => {
19 | try {
20 | await navigator.clipboard.writeText(code);
21 | setCopied(true);
22 | setTimeout(() => setCopied(false), 2000);
23 | } catch (err) {
24 | console.error("Failed to copy:", err);
25 | }
26 | }, [code]);
27 |
28 | return (
29 | setShowAllProps((prev) => !prev)}
28 | >
29 |
31 | {title}
30 |
41 | {props.map((prop) => (
42 |
62 |
43 |
60 | ))}
61 |
44 |
45 | {prop.prop}
46 |
47 |
48 | {prop.type}
49 |
50 |
51 | {prop.default && (
52 |
53 | Default: {prop.default}
54 |
55 | )}
56 | 57 | {prop.description} 58 |
59 |
37 | {code}
38 |
39 |
40 |
70 |
49 |
50 |
67 | );
68 | }
69 |
70 | export default function ChangelogPage() {
71 | return (
72 |
51 |
66 |
52 |
57 | {version}
53 | 54 | {date} 55 | 56 |
58 |
65 | {title}
59 |-
60 | {changes.map((change, index) => (
61 |
- {change} 62 | ))} 63 |
73 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/components/pqoqubbw/search.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion, useAnimation } from "motion/react";
4 | import type { HTMLAttributes } from "react";
5 | import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
6 |
7 | export interface SearchIconHandle {
8 | startAnimation: () => void;
9 | stopAnimation: () => void;
10 | }
11 |
12 | const SearchIcon = forwardRef
74 |
81 |
82 | 75 | Changelog 76 |
77 |78 | Latest updates and improvements to KL UI. 79 |
80 |
83 | {changelogData.map((entry, index) => (
84 |
87 |
55 |
78 |
81 |
82 | );
83 | }
84 | );
85 |
86 | SearchIcon.displayName = "SearchIcon";
87 |
88 | export { SearchIcon };
89 |
--------------------------------------------------------------------------------
/src/components/pqoqubbw/download.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { Variants } from "motion/react";
4 | import { motion, useAnimation } from "motion/react";
5 | import type { HTMLAttributes } from "react";
6 | import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 |
8 | export interface DownloadIconHandle {
9 | startAnimation: () => void;
10 | stopAnimation: () => void;
11 | }
12 |
13 | const arrowVariants: Variants = {
14 | normal: { y: 0 },
15 | animate: {
16 | y: 2,
17 | transition: {
18 | type: "spring",
19 | stiffness: 200,
20 | damping: 10,
21 | mass: 1,
22 | },
23 | },
24 | };
25 |
26 | const DownloadIcon = forwardRef<
27 | DownloadIconHandle,
28 | HTMLAttributes
71 |
88 |
89 | );
90 | });
91 |
92 | DownloadIcon.displayName = "DownloadIcon";
93 |
94 | export { DownloadIcon };
95 |
--------------------------------------------------------------------------------
/src/components/pqoqubbw/moon.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { Transition, Variants } from "motion/react";
4 | import { motion, useAnimation } from "motion/react";
5 | import type { HTMLAttributes } from "react";
6 | import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 |
8 | export interface MoonIconHandle {
9 | startAnimation: () => void;
10 | stopAnimation: () => void;
11 | }
12 |
13 | const svgVariants: Variants = {
14 | normal: {
15 | rotate: 0,
16 | },
17 | animate: {
18 | rotate: [0, -10, 10, -5, 5, 0],
19 | },
20 | };
21 |
22 | const svgTransition: Transition = {
23 | duration: 1.2,
24 | ease: "easeInOut",
25 | };
26 |
27 | const MoonIcon = forwardRef
69 |
83 |
85 |
86 | );
87 | }
88 | );
89 |
90 | MoonIcon.displayName = "MoonIcon";
91 |
92 | export { MoonIcon };
93 |
--------------------------------------------------------------------------------
/src/components/pqoqubbw/book-text.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion, useAnimation } from "motion/react";
4 | import type { HTMLAttributes } from "react";
5 | import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
6 |
7 | export interface BookTextIconHandle {
8 | startAnimation: () => void;
9 | stopAnimation: () => void;
10 | }
11 |
12 | const BookTextIcon = forwardRef<
13 | BookTextIconHandle,
14 | HTMLAttributes
57 |
86 |
90 |
91 | );
92 | });
93 |
94 | BookTextIcon.displayName = "BookTextIcon";
95 |
96 | export { BookTextIcon };
97 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | export default {
4 | darkMode: ["class"],
5 | content: [
6 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
8 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
9 | "./registry/**/*.{js,ts,jsx,tsx,mdx}",
10 | ],
11 | theme: {
12 | extend: {
13 | colors: {
14 | background: 'hsl(var(--background))',
15 | foreground: 'hsl(var(--foreground))',
16 | card: {
17 | DEFAULT: 'hsl(var(--card))',
18 | foreground: 'hsl(var(--card-foreground))'
19 | },
20 | popover: {
21 | DEFAULT: 'hsl(var(--popover))',
22 | foreground: 'hsl(var(--popover-foreground))'
23 | },
24 | primary: {
25 | DEFAULT: 'hsl(var(--primary))',
26 | foreground: 'hsl(var(--primary-foreground))'
27 | },
28 | secondary: {
29 | DEFAULT: 'hsl(var(--secondary))',
30 | foreground: 'hsl(var(--secondary-foreground))'
31 | },
32 | muted: {
33 | DEFAULT: 'hsl(var(--muted))',
34 | foreground: 'hsl(var(--muted-foreground))'
35 | },
36 | accent: {
37 | DEFAULT: 'hsl(var(--accent))',
38 | foreground: 'hsl(var(--accent-foreground))'
39 | },
40 | destructive: {
41 | DEFAULT: 'hsl(var(--destructive))',
42 | foreground: 'hsl(var(--destructive-foreground))'
43 | },
44 | border: 'hsl(var(--border))',
45 | input: 'hsl(var(--input))',
46 | ring: 'hsl(var(--ring))',
47 | chart: {
48 | '1': 'hsl(var(--chart-1))',
49 | '2': 'hsl(var(--chart-2))',
50 | '3': 'hsl(var(--chart-3))',
51 | '4': 'hsl(var(--chart-4))',
52 | '5': 'hsl(var(--chart-5))'
53 | },
54 | sidebar: {
55 | DEFAULT: 'hsl(var(--sidebar-background))',
56 | foreground: 'hsl(var(--sidebar-foreground))',
57 | primary: 'hsl(var(--sidebar-primary))',
58 | 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
59 | accent: 'hsl(var(--sidebar-accent))',
60 | 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
61 | border: 'hsl(var(--sidebar-border))',
62 | ring: 'hsl(var(--sidebar-ring))'
63 | }
64 | },
65 | borderRadius: {
66 | lg: 'var(--radius)',
67 | md: 'calc(var(--radius) - 2px)',
68 | sm: 'calc(var(--radius) - 4px)'
69 | },
70 | fontSize: {
71 | '2xs': '0.625rem'
72 | },
73 | keyframes: {
74 | 'accordion-down': {
75 | from: {
76 | height: '0'
77 | },
78 | to: {
79 | height: 'var(--radix-accordion-content-height)'
80 | }
81 | },
82 | 'accordion-up': {
83 | from: {
84 | height: 'var(--radix-accordion-content-height)'
85 | },
86 | to: {
87 | height: '0'
88 | }
89 | }
90 | },
91 | animation: {
92 | 'accordion-down': 'accordion-down 0.2s ease-out',
93 | 'accordion-up': 'accordion-up 0.2s ease-out'
94 | }
95 | }
96 | },
97 | plugins: [require("tailwindcss-animate")],
98 | } satisfies Config;
99 |
--------------------------------------------------------------------------------
/src/components/demo-ui/info-card/preview-code-tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion } from "motion/react";
4 | import { useState } from "react";
5 | import {
6 | MultiStepContent,
7 | SidebarDemo,
8 | } from "@/components/demo-ui/info-card/demo";
9 | import { CodeBlock } from "@/components/ui/code-block";
10 | import { Button } from "@/components/ui/button";
11 | import { RotateCcw } from "lucide-react";
12 |
13 | interface TabOption {
14 | id: "preview" | "code";
15 | label: string;
16 | }
17 |
18 | export function PreviewCodeTabs({
19 | layoutIdPrefix,
20 | code,
21 | }: {
22 | layoutIdPrefix: string;
23 | code: string;
24 | }) {
25 | const [selected, setSelected] = useState
39 | {/* Tab buttons */}
40 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/command-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import {
5 | CommandDialog,
6 | CommandEmpty,
7 | CommandGroup,
8 | CommandInput,
9 | CommandItem,
10 | CommandList,
11 | } from "@/components/ui/command";
12 | import {
13 | Book,
14 | Clock,
15 | Download,
16 | GalleryVerticalEnd,
17 | Moon,
18 | SaveOff,
19 | } from "lucide-react";
20 | import { useRouter } from "next/navigation";
21 |
22 | export function CommandMenu({
23 | open,
24 | onOpenChange,
25 | }: {
26 | open: boolean;
27 | onOpenChange: (open: boolean) => void;
28 | }) {
29 | const router = useRouter();
30 |
31 | const runCommand = React.useCallback(
32 | (command: () => unknown) => {
33 | onOpenChange(false);
34 | command();
35 | },
36 | [onOpenChange]
37 | );
38 |
39 | React.useEffect(() => {
40 | const down = (e: KeyboardEvent) => {
41 | if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
42 | e.preventDefault();
43 | onOpenChange(!open);
44 | }
45 | };
46 | document.addEventListener("keydown", down);
47 | return () => document.removeEventListener("keydown", down);
48 | }, [onOpenChange, open]);
49 |
50 | return (
51 |
41 | {options.map((option) => (
42 |
65 | ))}
66 |
67 |
68 | {/* Tab content */}
69 |
70 | {selected === "preview" ? (
71 |
85 |
72 |
73 |
75 |
81 | ) : (
82 |
76 |
79 |
80 |
29 |
93 | );
94 | }
95 |
96 | interface StepsProps {
97 | children: React.ReactNode;
98 | className?: string;
99 | }
100 |
101 | export function Steps({ children, className }: StepsProps) {
102 | return (
103 |
30 |
43 |
36 | {isCompleted ? (
37 |
42 |
50 |
57 | {isActive && (
58 |
87 |
89 | )}
90 |
91 |
92 |
51 |
56 | {title}
52 | {description && ( 53 |{description}
54 | )} 55 |{children}
88 |
109 | {children}
110 |
111 | );
112 | }
113 |
--------------------------------------------------------------------------------
/src/components/pqoqubbw/clock.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { Transition, Variants } from "motion/react";
4 | import { motion, useAnimation } from "motion/react";
5 | import type { HTMLAttributes } from "react";
6 | import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 |
8 | export interface ClockIconHandle {
9 | startAnimation: () => void;
10 | stopAnimation: () => void;
11 | }
12 |
13 | const handTransition: Transition = {
14 | duration: 0.6,
15 | ease: [0.4, 0, 0.2, 1],
16 | };
17 |
18 | const handVariants: Variants = {
19 | normal: {
20 | rotate: 0,
21 | originX: "50%",
22 | originY: "50%",
23 | },
24 | animate: {
25 | rotate: 360,
26 | },
27 | };
28 |
29 | const minuteHandTransition: Transition = {
30 | duration: 0.5,
31 | ease: "easeInOut",
32 | };
33 |
34 | const minuteHandVariants: Variants = {
35 | normal: {
36 | rotate: 0,
37 | originX: "50%",
38 | originY: "50%",
39 | },
40 | animate: {
41 | rotate: 45,
42 | },
43 | };
44 |
45 | const ClockIcon = forwardRef
88 |
121 |
122 | );
123 | }
124 | );
125 |
126 | ClockIcon.displayName = "ClockIcon";
127 |
128 | export { ClockIcon };
129 |
--------------------------------------------------------------------------------
/public/r/unsave-popup-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "unsave-popup-demo",
4 | "type": "registry:example",
5 | "description": "Example of the kl-ui unsave-popup component.",
6 | "registryDependencies": [
7 | "https://karrix.dev/r/unsave-popup"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/kl-ui/unsave-popup/unsave-popup-demo.tsx",
12 | "content": "import { Label } from \"@/components/ui/label\";\nimport { X, Info } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { useState, useCallback, useMemo } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { UnsavePopup } from \"@/components/kl-ui/unsave-popup\";\nimport { cn } from \"@/lib/utils\";\n\nexport function UnsavePopupDemo() {\n const [value, setValue] = useState(\"\");\n const [showPopup, setShowPopup] = useState(false);\n const [shouldBlockNav, setShouldBlockNav] = useState(false);\n const [closeForm, setCloseForm] = useState(false);\n const [isSaved, setIsSaved] = useState(false);\n\n const handleInputChange = useCallback(\n (e: React.ChangeEvent\n \n
\n ),\n [value, handleInputChange]\n );\n\n const popupContent = useMemo(\n () => (\n <>\n \n \n
\n \n \n )}\n\n
52 |
55 |
61 |
62 | ),
63 | [value, handleInputChange]
64 | );
65 |
66 | const popupContent = useMemo(
67 | () => (
68 | <>
69 |
82 |
101 | )}
102 |
103 |
88 | {formContent}
89 |
100 |
90 |
98 |
99 |
38 |
87 |
88 |
46 |
86 |
47 | shadcn
48 |
61 | Replying to @me
62 | Amazing!
63 |
64 |
67 |
70 |
73 |
76 |
85 |
77 |
80 |
83 |
84 |
62 |
65 |
71 |
72 | ),
73 | [value, handleInputChange]
74 | );
75 |
76 | const popupContent = useMemo(
77 | () => (
78 | <>
79 |
92 |
111 | )}
112 |
113 |
98 | {formContent}
99 |
110 |
100 |
108 |
109 |
52 |
55 |
61 |
62 | ),
63 | [value, handleInputChange]
64 | );
65 |
66 | const popupContent = useMemo(
67 | () => (
68 | <>
69 |
93 | {formContent}
94 |
105 |
95 |
103 |
104 |
15 |
33 |
95 | ) : (
96 |
101 | );
102 | }
103 |
--------------------------------------------------------------------------------
/public/r/info-card-demo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3 | "name": "info-card-demo",
4 | "type": "registry:example",
5 | "description": "Example of the kl-ui info-card component.",
6 | "registryDependencies": [
7 | "https://karrix.dev/r/info-card"
8 | ],
9 | "files": [
10 | {
11 | "path": "registry/kl-ui/info-card/info-card-demo.tsx",
12 | "content": "import {\n InfoCard,\n InfoCardContent,\n InfoCardTitle,\n InfoCardDescription,\n InfoCardMedia,\n InfoCardFooter,\n InfoCardDismiss,\n InfoCardAction,\n} from \"@/components/kl-ui/info-card\";\nimport {\n Sidebar,\n SidebarProvider,\n SidebarContent,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n SidebarFooter,\n SidebarTrigger,\n} from \"@/components/ui/sidebar\";\nimport {\n ExternalLink,\n User,\n ChevronsUpDown,\n Calendar,\n Home,\n Inbox,\n Search,\n Settings,\n} from \"lucide-react\";\nimport Link from \"next/link\";\n\n// Menu items.\nconst items = [\n {\n title: \"Home\",\n url: \"#\",\n icon: Home,\n },\n {\n title: \"Inbox\",\n url: \"#\",\n icon: Inbox,\n },\n {\n title: \"Calendar\",\n url: \"#\",\n icon: Calendar,\n },\n {\n title: \"Search\",\n url: \"#\",\n icon: Search,\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings,\n },\n];\n\nexport function InfoCardDemo() {\n return (\n
16 | {isDark ? (
17 |
25 |
26 | {isDark ? (
27 | Welcome to the dark mode ...
18 | ) : ( 19 |Click to enter the mystery ...
20 | )} 21 |
22 |
24 | 34 | I just realized that many of you are using dark mode in your site. 35 | Sorry that it came late, but late is better than never - I've 36 | added dark mode support to all components. 37 |
38 |39 | And ngl, dark mode is actually pretty sick lol 🔥 40 |
41 | 42 |
43 |
94 | 44 | Installation Guide 45 | 46 |
47 |48 | The installation is also not that hard, you can follow how shadcn 49 | ui did: 50 |
51 |
52 | {[
53 | {
54 | name: "Next.js",
55 | href: "https://ui.shadcn.com/docs/dark-mode/next",
56 | icon: "/icons/next.svg",
57 | },
58 | {
59 | name: "Vite",
60 | href: "https://ui.shadcn.com/docs/dark-mode/vite",
61 | icon: "/icons/vite.svg",
62 | },
63 | {
64 | name: "Astro",
65 | href: "https://ui.shadcn.com/docs/dark-mode/astro",
66 | icon: "/icons/astro.svg",
67 | },
68 | {
69 | name: "Remix",
70 | href: "https://ui.shadcn.com/docs/dark-mode/remix",
71 | icon: "/icons/remix.svg",
72 | },
73 | ].map((framework) => (
74 |
79 |
93 |
80 | 
85 | {framework.name}
86 |
87 |
88 |
97 | Switch to dark mode to reveal the content...
98 |
99 | )}
100 | \n
\n \n KL\n \n kl@example.com\n \n
\n \n
\n
125 |
133 |
127 | KL
128 |
129 | kl@example.com
130 |
131 |
132 |
139 |
141 |
38 | {/* Tab buttons */}
39 |
127 | );
128 | }
129 |
--------------------------------------------------------------------------------
/src/components/ui/code-block.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "./button";
4 | import { Copy, Check, ChevronDown, ChevronUp } from "lucide-react";
5 | import { useState } from "react";
6 | import { motion, AnimatePresence } from "framer-motion";
7 | import { cn } from "@/lib/utils";
8 | import { ScrollArea } from "./scroll-area";
9 |
10 | interface CodeBlockProps {
11 | html: string;
12 | className?: string;
13 | maxHeight?: number;
14 | expandedHeight?: number;
15 | }
16 |
17 | export function CodeBlock({
18 | html,
19 | className,
20 | maxHeight,
21 | expandedHeight,
22 | }: CodeBlockProps) {
23 | const [copied, setCopied] = useState(false);
24 | const [isExpanded, setIsExpanded] = useState(false);
25 |
26 | const handleCopy = async () => {
27 | // Extract text content from HTML string
28 | const temp = document.createElement("div");
29 | temp.innerHTML = html;
30 | const text = temp.textContent || temp.innerText;
31 |
32 | try {
33 | await navigator.clipboard.writeText(text);
34 | setCopied(true);
35 | setTimeout(() => setCopied(false), 2000);
36 | } catch (err) {
37 | console.error("Failed to copy:", err);
38 | }
39 | };
40 |
41 | const showExpandButton = maxHeight && expandedHeight;
42 |
43 | return (
44 |
40 | {options.map((option) => (
41 |
67 | ))}
68 |
69 |
70 | {/* Tab content */}
71 |
72 | {selected === "cli" ? (
73 |
80 | 1}
85 | isActive={activeStep === 1}
86 | onClick={() => setActiveStep(1)}
87 | >
88 |
94 |
95 | 2}
100 | isActive={activeStep === 2}
101 | onClick={() => setActiveStep(2)}
102 | >
103 |
105 |
106 | 3}
111 | isActive={activeStep === 3}
112 | onClick={() => setActiveStep(3)}
113 | >
114 |
123 |
124 | )}
125 |
126 |
115 | Import and use the component in your project:
116 |
122 |
45 | {/* Copy button */}
46 |
76 |
77 | {/* Code content */}
78 |
88 |
98 |
102 |
103 |
104 | {/* Gradient overlay */}
105 | {showExpandButton && (
106 |
134 | );
135 | }
136 |
--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const Sheet = SheetPrimitive.Root
11 |
12 | const SheetTrigger = SheetPrimitive.Trigger
13 |
14 | const SheetClose = SheetPrimitive.Close
15 |
16 | const SheetPortal = SheetPrimitive.Portal
17 |
18 | const SheetOverlay = React.forwardRef<
19 | React.ElementRef
115 |
131 |
132 | )}
133 |
26 | {/* Header */}
27 |
121 | );
122 | }
123 |
--------------------------------------------------------------------------------
/src/components/ui/package-manager-tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion, AnimatePresence } from "framer-motion";
4 | import { useState } from "react";
5 | import { cn } from "@/lib/utils";
6 | import { Button } from "./button";
7 | import { Copy, Check } from "lucide-react";
8 |
9 | type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
10 | type CommandVariant = "add" | "install" | "dlx";
11 |
12 | interface PackageManagerTabsProps {
13 | command: string;
14 | variant?: CommandVariant;
15 | className?: string;
16 | layoutId?: string;
17 | }
18 |
19 | // Move this outside the component to be shared
20 | const STORAGE_KEY = "preferred-package-manager";
21 |
22 | function getStoredManager(): PackageManager {
23 | if (typeof window === "undefined") return "pnpm";
24 | return (localStorage.getItem(STORAGE_KEY) as PackageManager) || "pnpm";
25 | }
26 |
27 | export function PackageManagerTabs({
28 | command,
29 | variant = "dlx",
30 | className,
31 | layoutId = "package-manager-tab",
32 | }: PackageManagerTabsProps) {
33 | const [selected, setSelected] = useState
28 |
33 |
34 | {/* Prerequisites */}
35 | Installation
29 | 30 | How to install dependencies and structure your app. 31 | 32 |
36 |
91 |
92 | Prerequisites
37 |
38 | {/* Shadcn Installation */}
39 |
90 |
40 |
63 |
64 | {/* Motion Installation */}
65 |
41 |
54 |
42 |
47 |
48 |
52 |
53 | Shadcn UI
43 |44 | Install Shadcn UI CLI to add components 45 |
46 |
55 |
62 |
66 |
89 |
67 |
80 |
68 |
73 |
74 |
78 |
79 | Motion
69 |70 | Install Motion for animations 71 |
72 |
81 |
88 |
93 | ... And you are good to go!
94 |
95 |
96 | {/* Next Steps */}
97 |
98 |
120 | Next Steps
99 |
100 |
119 |
101 |
105 |
118 |
106 |
113 |
116 |
117 | 107 | Check out the components 108 |
109 |110 | Learn how to use the components in your project 111 |
112 |
87 | {/* Tab buttons */}
88 |
152 | );
153 | }
154 |
--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { type DialogProps } from "@radix-ui/react-dialog"
5 | import { Command as CommandPrimitive } from "cmdk"
6 | import { Search } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
10 |
11 | const Command = React.forwardRef<
12 | React.ElementRef
89 | {options.map((option) => (
90 |
113 | ))}
114 |
115 |
116 | {/* Command display */}
117 |
118 |
151 |
119 | {getCommand(selected)}
120 |
121 |
150 |
43 |
53 | ))
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef{children}
;\n }\n);\nUnsavePopupDescription.displayName = \"UnsavePopupDescription\";\n\nconst UnsavePopupAction = memo(\n ({\n children,\n isLoading,\n onClick,\n }: {\n children: React.ReactNode;\n isLoading?: boolean;\n onClick?: () => Promise\n \n \n {isLoading ? (\n \n
\n ),\n [isLoading, handleReset, handleSave]\n );\n\n useEffect(() => {\n if (shouldBlockFn && shouldBlockFn()) {\n triggerShake();\n }\n }, [shouldBlockFn, triggerShake]);\n\n return (\n \n {children}\n
\n {defaultButtons()}\n \n )}\n \n \n )}\n
125 |
216 | );
217 | }
218 |
--------------------------------------------------------------------------------
/registry/kl-ui/unsave-popup/unsave-popup.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Loader2, Save } from "lucide-react";
4 | import { AnimatePresence, easeOut, motion, useAnimation } from "motion/react";
5 | import { Button } from "@/components/ui/button";
6 | import { useState, useEffect, useCallback, useMemo, memo } from "react";
7 | import { cn } from "@/lib/utils";
8 | import React from "react";
9 |
10 | const UnsavePopupDescription = memo(
11 | ({ children }: { children: React.ReactNode }) => {
12 | return
126 | {/* title */}
127 |
210 |
211 | {/* Right-side navigation */}
212 |
128 |
145 |
146 | {/* content */}
147 | Information Card
129 | 130 | Information cards can serve as callout cards, banners, toast 131 | notifications, or announcement boxes to deliver news, updates, and 132 | alerts to your users. 133 | 134 | {/* Quote block */} 135 |
136 |
144 | 138 |143 |139 | It works especially well in sidebars, but you can use it 140 | anywhere too! 141 |
142 |
148 |
156 |
157 |
158 |
159 | {/* Installation */}
160 |
149 |
154 | 150 | Playground 151 |
152 |
161 |
166 |
167 |
168 |
169 | {/* Props and Usage */}
170 | 162 | Installation 163 |
164 |
171 |
209 | 172 | Props and Usage 173 |
174 | 175 | {/* Basic usage example */} 176 |
177 |
208 |
178 |
187 |
188 | {/* Steps usage example */}
189 | 179 | Basic Usage 180 |
181 |
190 |
198 |
199 | {/* Props tables */}
200 | 191 | Steps Usage 192 |
193 |
201 |
207 |
213 |
215 | {children}
;
13 | }
14 | );
15 | UnsavePopupDescription.displayName = "UnsavePopupDescription";
16 |
17 | const UnsavePopupAction = memo(
18 | ({
19 | children,
20 | isLoading,
21 | onClick,
22 | }: {
23 | children: React.ReactNode;
24 | isLoading?: boolean;
25 | onClick?: () => Promise
165 |
168 |
185 |
186 | ),
187 | [isLoading, handleReset, handleSave]
188 | );
189 |
190 | useEffect(() => {
191 | if (shouldBlockFn && shouldBlockFn()) {
192 | triggerShake();
193 | }
194 | }, [shouldBlockFn, triggerShake]);
195 |
196 | return (
197 |
225 | {children}
226 |
227 | {defaultButtons()}
228 |
229 | )}
230 | {children}
;
16 | }
17 | );
18 | UnsavePopupDescription.displayName = "UnsavePopupDescription";
19 |
20 | const UnsavePopupAction = memo(
21 | ({
22 | children,
23 | isLoading,
24 | onClick,
25 | }: {
26 | children: React.ReactNode;
27 | isLoading?: boolean;
28 | onClick?: () => Promise
168 |
171 |
188 |
189 | ),
190 | [isLoading, handleReset, handleSave]
191 | );
192 |
193 | useEffect(() => {
194 | if (shouldBlockFn && shouldBlockFn()) {
195 | triggerShake();
196 | }
197 | }, [shouldBlockFn, triggerShake]);
198 |
199 | return (
200 |
228 | {children}
229 |
230 | {defaultButtons()}
231 |
232 | )}
233 |
45 |
71 |
72 |
46 |
51 | KL
47 | 48 | UI 49 | 50 |52 | Animated UI components and effects with love. Build with{" "} 53 | shadcn/ui and{" "} 54 | Motion. 55 |
56 |
57 |
58 |
62 |
63 |
64 |
68 |
69 |
70 |
75 |
112 |
113 | 76 | So here's the thing - I randomly posted some of my UI work on X 77 | one day and went off to grab dinner. When I came back, my phone was 78 | going crazy with notifications 79 |
80 |81 | And get this - shadcn himself 82 | had commented on my tweet lol. 83 |
84 | 85 |86 | That moment got me thinking - "Hey, why not share these UI 87 | components with everyone?" I mean, I'm still learning and 88 | growing in design, but I feel like that's the motivation for me 89 | to do that. 90 |
91 | 92 |
93 | Btw I've got to mention my buddy{" "}
94 |
105 | Last thing - This is my first repo on GitHub, your support means a lot 106 | to me.{" "} 107 | 108 | I am Karrix - please enjoy the UI components! 109 | 110 |
111 |
114 |
116 |
117 | Can I use this in my project?
118 |
119 | Absolutely! This is an MIT licensed open-source project. Feel free
120 | to use it in any project, commercial or personal. Your feedback
121 | means a lot to me - I'd love to hear about your experience
122 | using these components.
123 |
124 |
125 |
126 |
127 | How's the animation performance?
128 |
129 |
130 |
142 |
143 |
144 | Why is there so little UI here?
145 |
146 |
158 |
159 |
160 |
161 |
166 |
167 |
190 |
191 |
192 |
193 | FAQ
115 |131 | All complex animations are powered by Motion, while simpler UI 132 | interactions use shadcn's built-in transitions. I've 133 | extensively tested each component to ensure optimal performance 134 | and ease of use. 135 |
136 |137 | If you encounter any performance issues, please don't 138 | hesitate to report them - I'm committed to providing the 139 | best possible experience. 140 |
141 |147 | Simple — because I made this with love and interest. I'm 148 | not just throwing in random components for the sake of it. 149 | Everything here is something I genuinely think is the best 150 | I've ever made. 151 |
152 |153 | I'll add more when I feel it's right — when I create 154 | something that truly deserves a spot here. Until then, enjoy 155 | what's here, knowing each piece is built with real care. 156 |
157 |
162 | Please let me credit{" "}
163 |
165 |
168 | Special thanks to{" "}
169 |
179 | Also, a huge shoutout to{" "}
180 |
78 |
79 | {selected === "code" ? (
80 |
87 |
89 | ) : (
90 |
95 |
96 | {/* Bottom tab bar */}
97 |
98 | {isInPlayground && (
99 |
196 |
197 | );
198 | }
199 |
--------------------------------------------------------------------------------
/src/app/components/unsave-popup/page.tsx:
--------------------------------------------------------------------------------
1 | import { UnsavePopupDemo } from "@/components/demo-ui/unsave-popup/demo";
2 | import { PropTable, PropDefinition } from "@/components/ui/prop-table";
3 | import { UnsavePopupDemoCode } from "@/components/demo-ui/unsave-popup/code";
4 | import { NavigationMenu } from "@/components/navigation-menu";
5 | import { UnsavePopupInstallationCode } from "@/components/demo-ui/unsave-popup/installation";
6 | import { CodeBlock } from "@/components/ui/code-block";
7 | import { codeToHtml } from "shiki";
8 | import { AlertTriangle } from "lucide-react";
9 | import { Metadata } from "next";
10 | import { OpenInV0Button } from "@/components/open-in-v0";
11 |
12 | const unsavePopupProps: PropDefinition[] = [
13 | {
14 | prop: "show",
15 | type: "boolean",
16 | description: "Controls the visibility of the popup",
17 | },
18 | {
19 | prop: "children",
20 | type: "React.ReactNode",
21 | description:
22 | "The content to be displayed in the popup. Can be plain text for default usage, or compound components for custom usage",
23 | },
24 | {
25 | prop: "onSave",
26 | type: "() => Promise
91 |
93 | )}
94 |
100 |
106 |
193 |
194 | )}
195 |
107 |
192 |
108 | {options.map((option, index) => (
109 |
110 | {index > 0 && (
111 |
112 | )}
113 |
140 | ))}
141 |
142 |
143 |
114 |
138 |
139 |
144 |
145 |
146 |
147 |
155 |
156 |
157 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
184 |
185 |
186 |
188 |
189 |
190 |
191 | Reset demo
158 |{copied ? "Copied!" : "Copy code"}
187 |
144 |
249 | );
250 | }
251 |
--------------------------------------------------------------------------------
145 | {/* title */}
146 |
243 |
244 | {/* Right-side navigation */}
245 |
147 |
153 |
154 | {/* content */}
155 | Unsave Popup
148 | 149 | A popup component to confirm before discarding changes. Inspired by 150 | Discord, it will shake when the user tries to leave without saving. 151 | 152 |
156 |
164 |
165 |
166 |
167 | {/* Installation */}
168 |
157 |
162 | 158 | Playground 159 |
160 |
169 |
174 |
175 |
176 |
177 | {/* Usage Examples */}
178 | 170 | Installation 171 |
172 |
179 |
226 |
227 |
228 |
229 | {/* Props and Usage */}
230 | 180 | Usage Examples 181 |
182 | 183 | {/* Default Usage */} 184 |
185 |
188 |
189 | {/* Notice for compound components */}
190 | Default Usage
186 |
191 |
219 |
220 | {/* Custom Usage */}
221 | 193 |218 |194 | When using compound components: 195 |
196 |197 |
213 |- 198 |
202 |199 | UnsavePopupDescription 200 |201 |- 203 |
207 |204 | UnsavePopupAction 205 |206 |- 208 |
212 |209 | UnsavePopupDismiss 210 |211 |214 | You must include all three components together. Using them 215 | individually will throw an error. 216 |
217 |
222 |
225 | Customized Usage
223 |
231 |
242 | 232 | Props 233 |
234 |
246 |
248 |