├── .eslintrc.json ├── .example.env ├── .gitignore ├── README.md ├── app ├── (docs-page) │ ├── components │ │ ├── [...slug] │ │ │ └── page.tsx │ │ └── page.tsx │ ├── get-started │ │ ├── layout.tsx │ │ └── page.mdx │ └── layout.tsx ├── favicon.ico ├── globals.css ├── layout.tsx ├── live-example │ └── page.tsx └── page.tsx ├── assets └── logo.svg ├── components └── website │ ├── background.tsx │ ├── code-components │ ├── component-block.tsx │ ├── component-code-preview.tsx │ ├── component-preview.tsx │ ├── copy-button.tsx │ ├── copy-npm-button.tsx │ ├── pagination.tsx │ ├── pre-code.tsx │ └── pre-coded.tsx │ ├── constant.tsx │ ├── dropdown-menu.tsx │ ├── footer.tsx │ ├── github-btn.tsx │ ├── header.tsx │ ├── hero-sec.tsx │ ├── icons │ ├── github.tsx │ └── x.tsx │ ├── searchbar.tsx │ ├── sidebar.tsx │ ├── tableof-compoents.tsx │ ├── theme-provider.tsx │ ├── theme-switch.tsx │ └── ui │ ├── button.tsx │ ├── dialog.tsx │ ├── dropdown.tsx │ ├── liquide-gradient.tsx │ ├── navigation-menu.tsx │ ├── scroll-area.tsx │ ├── spotlight.tsx │ └── tabs.tsx ├── configs ├── docs.json └── docs.ts ├── content └── components │ ├── 3d-cursor.mdx │ ├── arrow-cursor.mdx │ ├── blob-cursor.mdx │ ├── bubble-cursor.mdx │ ├── canvas-cursor.mdx │ ├── character-cursor.mdx │ ├── clickeffect-cursor.mdx │ ├── fairydust-cursor.mdx │ ├── fluid-cursor.mdx │ ├── follow-cursor.mdx │ ├── glitch-cursor.mdx │ ├── gradient-cursor.mdx │ ├── magnetic-cursor.mdx │ ├── multi-cursor.mdx │ ├── neon-cursor.mdx │ ├── rainbow-cursor.mdx │ ├── ripple-cursor.mdx │ ├── scaling-cursor.mdx │ ├── smooth-follower.mdx │ ├── snowflake-cursor.mdx │ ├── spotlight-cursor.mdx │ ├── springy-cursor.mdx │ ├── textflag-cursor.mdx │ ├── texticon-cursor.mdx │ └── trail-cursor.mdx ├── custom.d.ts ├── hooks ├── use-FluidCursor.ts ├── use-canvasCursor.ts ├── use-media-query.tsx ├── use-mouse-move.tsx ├── use-mouse.ts ├── use-spotlight.ts ├── useClickOutside.tsx ├── useClipBoarard.tsx └── useZustStore.tsx ├── lib ├── code.ts ├── docs.tsx ├── progressbar.tsx ├── toc.ts └── utils.ts ├── mdx-components.tsx ├── next.config.mjs ├── package.json ├── pnpm-lock.yaml ├── postcss.config.mjs ├── prettier.config.js ├── preview.png ├── public ├── apple-touch-icon.png ├── bob.gif ├── bob2.gif ├── favicon-16x16.png ├── favicon.ico ├── gallery.svg ├── globe.svg ├── grid.svg ├── image-masking.svg ├── image-mousetrail.svg ├── og.jpg ├── tabs.svg └── ui-layouts-logos.png ├── registry └── components │ └── cursor │ ├── blob-cursor │ ├── BlobCursor.css │ └── index.tsx │ ├── common │ ├── arrow-cursor.tsx │ ├── bubble-cursor.tsx │ ├── canvas-cursor.tsx │ ├── character-cursor.tsx │ ├── clickeffect-cursor.tsx │ ├── fluid-cursor.tsx │ ├── follow-cursor.tsx │ ├── glitch-cursor.tsx │ ├── gradient-cursor.tsx │ ├── magnetic-cursor.tsx │ ├── multi-cursor.tsx │ ├── rainbow-cursor.tsx │ ├── ripple-cursor.tsx │ ├── scaling-cursor.tsx │ ├── smooth-following-cursor.tsx │ ├── snowflake-cursor.tsx │ ├── spotlight-cursor.tsx │ ├── springy-cursor.tsx │ ├── swirl-cursor.tsx │ ├── text-icon-cursor.tsx │ ├── threed-cursor.tsx │ └── trail-cursor.tsx │ ├── fairydust │ ├── FairyDustCursor.tsx │ └── index.tsx │ ├── neoncursor │ ├── NeonCursor.css │ └── index.tsx │ └── text-flag │ ├── TextFlagCursor.tsx │ └── index.tsx ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.example.env: -------------------------------------------------------------------------------- 1 | 2 | 3 | NEXT_PUBLIC_CLIENT_URL = http://localhost:3000 4 | NEXT_PUBLIC_ANIMATION_URL= https://ui-layout-animation.vercel.app -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | .env 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ui-layouts/cursify/9b3f9882792d220eccb095af0ae43ce0d5cab595/README.md -------------------------------------------------------------------------------- /app/(docs-page)/components/[...slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import { notFound } from 'next/navigation'; 2 | import { Metadata } from 'next'; 3 | import { getDocBySlug, getAllDocs } from '@/lib/docs'; 4 | import { cn } from '@/lib/utils'; 5 | import { Component } from 'lucide-react'; 6 | import TableOfContents from '@/components/website/tableof-compoents'; 7 | import { ComponentPagination } from '@/components/website/code-components/pagination'; 8 | import Footer from '@/components/website/footer'; 9 | 10 | export async function generateStaticParams() { 11 | const docs = await getAllDocs(); 12 | console.log(docs); 13 | 14 | return docs.map((doc) => ({ 15 | slug: doc.slug === 'index' ? [] : doc.slug.split('/'), 16 | })); 17 | } 18 | 19 | export async function generateMetadata( 20 | props: { 21 | params: Promise<{ slug?: string[] }>; 22 | } 23 | ): Promise { 24 | const params = await props.params; 25 | const slug = params.slug?.join('/') || ''; 26 | const doc = await getDocBySlug(slug); 27 | if (!doc) { 28 | return {}; 29 | } 30 | return { 31 | title: `${doc.content.metadata.title}`, 32 | description: doc.content.metadata.description, 33 | }; 34 | } 35 | 36 | export default async function DocPage( 37 | props: { 38 | params: Promise<{ slug?: string[] }>; 39 | } 40 | ) { 41 | const params = await props.params; 42 | const slug = params.slug?.join('/') || ''; 43 | const doc = await getDocBySlug(slug); 44 | // console.log(doc); 45 | 46 | if (!doc) { 47 | notFound(); 48 | } 49 | 50 | const { default: Content } = doc.content; 51 | 52 | 53 | return ( 54 | <> 55 |
56 |
57 |
58 |
59 |
60 |

65 |
66 | 67 |
68 | {doc.content.metadata.title} 69 |

70 |

{doc.content.metadata.description}

71 |
72 |
73 | 74 | 75 |
76 |
77 | 78 |
79 |
80 | 81 | ); 82 | } 83 | -------------------------------------------------------------------------------- /app/(docs-page)/components/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { useState } from 'react'; 3 | import { motion } from 'motion/react'; 4 | import Link from 'next/link'; 5 | import { AllComponens } from '@/configs/docs'; 6 | import { Spotlight, SpotLightItem } from '@/components/website/ui/spotlight'; 7 | import { ArrowRight } from 'lucide-react'; 8 | import Footer from '@/components/website/footer'; 9 | import CanvasCursor from '@/registry/components/cursor/common/canvas-cursor'; 10 | 11 | export default function Home() { 12 | return ( 13 | <> 14 | 15 |
16 |

19 | Components 20 |

21 | 22 |

23 | Beautifully designed components that you can copy and paste into your 24 | apps. Accessible. Customizable. Open Source. 25 |

26 | <> 27 | 28 | {AllComponens.map((component, index) => ( 29 | 30 | <> 31 | 35 |
36 |

37 | {component.componentName} 38 |

39 |
40 | 43 | 44 | 45 | 46 | ))} 47 | 48 | 49 |
50 |