[ { "path": ".commitlintrc.json", "content": "{\n \"extends\": [\"@commitlint/config-conventional\"]\n}\n" }, { "path": ".editorconfig", "content": "# editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".eslintignore", "content": "node_modules/\ntarget/\n.next/\nbuild/\ndist/\n\n/templates/\n/fixtures/\n" }, { "path": ".eslintrc.json", "content": "{\n \"$schema\": \"https://json.schemastore.org/eslintrc\",\n \"root\": true,\n \"extends\": [\n \"next/core-web-vitals\",\n \"turbo\",\n \"prettier\",\n \"plugin:tailwindcss/recommended\"\n ],\n \"plugins\": [\"tailwindcss\"],\n \"ignorePatterns\": [\"**/fixtures/**\"],\n \"rules\": {\n \"@next/next/no-html-link-for-pages\": \"off\",\n \"tailwindcss/no-custom-classname\": \"off\",\n \"tailwindcss/classnames-order\": \"error\"\n },\n \"settings\": {\n \"tailwindcss\": {\n \"callees\": [\"cn\", \"cva\"],\n \"config\": \"tailwind.config.cjs\"\n },\n \"next\": {\n \"rootDir\": [\"apps/*/\"]\n }\n },\n \"overrides\": [\n {\n \"files\": [\"*.ts\", \"*.tsx\"],\n \"parser\": \"@typescript-eslint/parser\"\n }\n ]\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnpm-store\n.pnp\n.pnp.js\n\n# testing\ncoverage\n\n# next.js\n.next/\nout/\nbuild\n\n# misc\n.DS_Store\n*.pem\n.bmad-core/\n.claude/\n.cursor/\nweb-bundles/\n.replit \nreplit.md \n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# turbo\n.turbo\n\n.contentlayer\ntsconfig.tsbuildinfo\n\n# ide\n.idea\n.fleet\n.vscode\n\nREGISTRY_STRUCTURE.md\npackages/*\n" }, { "path": ".kodiak.toml", "content": "# .kodiak.toml\nversion = 1\n\n[merge]\nautomerge_label = \"automerge\"\nrequire_automerge_label = true\nmethod = \"squash\"\ndelete_branch_on_merge = true\noptimistic_updates = false\nprioritize_ready_to_merge = true\nnotify_on_conflict = true\n\n[merge.message]\ntitle = \"pull_request_title\"\nbody = \"pull_request_body\"\ninclude_pr_number = true\nbody_type = \"markdown\"\nstrip_html_comments = true\n" }, { "path": ".prettierignore", "content": "dist\nnode_modules\n.next\nbuild\n.contentlayer\napps/www/pages/api/registry.json\n**/fixtures\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\nThanks for your interest in contributing to ui.creative-tim.com.\n\nPlease take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.\n\nIf you need any help, feel free to reach out to [Creative Tim](https://creative-tim.com/contact).\n\n## About this repository\n\nThis repository is a monorepo.\n\n- We use [pnpm](https://pnpm.io) and [`workspaces`](https://pnpm.io/workspaces) for development.\n- We use [Turborepo](https://turbo.build/repo) as our build system.\n\n## Structure\n\nThis repository is structured as follows:\n\n```\napps\n└── www\n ├── app\n ├── components\n ├── content\n └── registry\n └── creative-tim-ui\n ├── example\n └── ui\n```\n\n| Path | Description |\n| --------------------- | ---------------------------------------- |\n| `apps/www/app` | The Next.js application for the website. |\n| `apps/www/components` | The React components for the website. |\n| `apps/www/content` | The content for the website. |\n| `apps/www/registry` | The registry for the components. |\n\n## Development\n\n### Fork this repo\n\nYou can fork this repo by clicking the fork button in the top right corner of this page.\n\n### Clone on your local machine\n\n```bash\ngit clone https://github.com/creative-tim/ui.git\n```\n\n### Navigate to project directory\n\n```bash\ncd ui\n```\n\n### Create a new Branch\n\n```bash\ngit checkout -b my-new-branch\n```\n\n### Install dependencies\n\n```bash\npnpm install\n```\n\n### Run a workspace\n\nYou can use the `pnpm --filter=[WORKSPACE]` command to start the development process for a workspace.\n\n#### Examples\n\n1. To run the `creative-tim.com/ui` website:\n\n```bash\npnpm dev\n```\n## Documentation\n\nThe documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:\n\n```bash\npnpm dev\n```\n\nDocumentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/www/content/docs` directory.\n\n## Components\n\nWe use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.\n\n```bash\napps\n└── www\n └── registry\n └── creative-tim\n ├── blocks\n └── ui\n```\n\nWhen adding or modifying components, please ensure that:\n\n1. You make the changes for every style.\n2. You update the documentation.\n3. You run `pnpm build:registry` to update the registry.\n\n## Commit Convention\n\nBefore you create a Pull Request, please check whether your commits comply with\nthe commit conventions used in this repository.\n\nWhen you create a commit we kindly ask you to follow the convention\n`category(scope or module): message` in your commit message while using one of\nthe following categories:\n\n- `feat / feature`: all changes that introduce completely new code or new\n features\n- `fix`: changes that fix a bug (ideally you will additionally reference an\n issue if present)\n- `refactor`: any code related change that is not a fix nor a feature\n- `docs`: changing existing or creating new documentation (i.e. README, docs for\n usage of a lib or cli usage)\n- `build`: all changes regarding the build of the software, changes to\n dependencies or the addition of new dependencies\n- `test`: all changes regarding tests (adding new tests or changing existing\n ones)\n- `ci`: all changes regarding the configuration of continuous integration (i.e.\n github actions, ci system)\n- `chore`: all changes to the repository that do not fit into any of the above\n categories\n\n e.g. `feat(components): add new prop to the avatar component`\n\nIf you are interested in the detailed specification you can visit\nhttps://www.conventionalcommits.org/ or check out the\n[Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).\n\n## Requests for new components\n\nIf you have a request for a new component, please open a discussion on GitHub. We'll be happy to help you out.\nPlease ensure that the tests are passing when submitting a pull request. If you're adding new features, please include tests.\n" }, { "path": "LICENSE.md", "content": "MIT License\n\nCopyright (c) 2025 [Creative Tim](https://www.creative-tim.com/)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software \"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "[![Creative Tim UI](https://raw.githubusercontent.com/creativetimofficial/ui/refs/heads/main/apps/www/public/opengraph-image.png)](https://creative-tim.com/ui)\n\n# Creative Tim UI\n\n[Creative Tim UI](https://creative-tim.com/ui) is a comprehensive component library built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build modern web applications faster.\n\n## Overview\n\nCreative Tim UI provides pre-built, customizable React components and blocks designed for building beautiful, production-ready web applications. \nThe CLI makes it easy to add these components to your Next.js project.\n\n## Installation\nYou can use the Creative Tim UI CLI directly with npx, or install it globally:\n```bash\n# Use directly (recommended)\nnpx @creative-tim/ui@latest add \n\n# Or using shadcn cli\nnpx shadcn@latest add https://creative-tim.com/ui/r/all.json\n```\n\n## Prerequisites\nBefore using Creative Tim UI, ensure your Next.js project meets these requirements:\n- **Node.js 18** or later\n- **shadcn/ui** initialized in your project (npx shadcn@latest init)\n- **Tailwind CSS** configured\n\n## Usage\n\n### Install All Components\nInstall all available Creative Tim UI components at once:\n```bash\nnpx @creative-tim/ui@latest add all\n```\nThis command will:\n- Set up shadcn/ui if not already configured\n- Install all Creative Tim UI components to your configured components directory\n- Add necessary dependencies to your project\n\n### Install Specific Components\nInstall individual components using the `components add` command:\n```bash\nnpx @creative-tim/ui@latest add \n```\nExamples:\n```bash\n# Install the orb component\nnpx @creative-tim/ui@latest add card\n```\n\n### Alternative: Use with shadcn CLI\nYou can also install components using the standard shadcn/ui CLI:\n```bash\n# Install all components\nnpx shadcn@latest add https://creative-tim.com/ui/r/all.json\n\n# Install a specific component\nnpx shadcn@latest add https://creative-tim.com/ui/r/button.json\n```\n\nAll available components can be found [here](https://creative-tim.com/ui/docs/components) or explore a list of example blocks [here](https://creative-tim.com/ui/blocks).\n\n## Blocks\n\nExplore our collection of ready-to-use blocks organized by category. Each block is fully customizable and can be added to your project with a single command.\n\n### Application UI\n\n\n\n\n\n\n\n
\n\n\"Modals\"\n
\nModals
\n5 Blocks\n\n		\n\n\"Account\"\n
\nAccount
\n7 Blocks\n\n		\n\n\"Billing\"\n
\nBilling
\n5 Blocks\n\n
\n\n### Marketing\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\"Testimonial\n
\nTestimonial Sections
\n17 Blocks\n\n		\n\n\"Contact\n
\nContact Sections
\n15 Blocks\n\n		\n\n\"Footers\"\n
\nFooters
\n16 Blocks\n\n
\n\n\"FAQs\"\n
\nFAQs
\n6 Blocks\n\n		\n\n\"Blog\"\n
\nBlog
\n15 Blocks\n\n
\n\n### Ecommerce UI\nReady-to-use blocks for product listings, shopping carts, and checkout flows.\n\n\n\n\n\n
\n\n\"Ecommerce\n
\nEcommerce Sections
\n14 Blocks\n\n
\n\n### Web 3.0\nInnovative sections built for decentralized applications, blockchain projects, and crypto platforms.\n\n\n\n\n\n
\n\n\"Web\n
\nWeb 3.0 Cards
\n5 Blocks\n\n
\n\n## Contributing\n\nIf you'd like to contribute to Creative Tim UI, please follow these steps:\n\n1. Fork the repository\n2. Create a new branch\n3. Make your changes to the components in the registry.\n4. Open a PR to the main branch.\n\nPlease read the [contributing guide](/CONTRIBUTING.md).\n\n## Copyrights and Licenses\n\nCreative Tim UI is built upon the incredible work of the open source community:\n\n- **[shadcn/ui](https://ui.shadcn.com/)** - The documentation structure, registry system, and foundational (atomic) components are from the open source work in shadcn/ui. [MIT License](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md)\n- **[Material Tailwind](https://material-tailwind.com/v3)** by Creative Tim - The blocks and component designs are inspired by and based on Material Tailwind Framework. [MIT License](https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE.md)\n- **[Eleven Labs UI](https://github.com/elevenlabs/elevenlabs-ui)** - General inspiration for the documentation structure and approach of blocks. [MIT License](https://github.com/elevenlabs/ui/blob/main/LICENSE.md)\n- **[Geist Font](https://vercel.com/font)** by Vercel - The beautiful typeface used throughout the interface. [SIL Open Font License 1.1](https://github.com/vercel/geist-font/blob/main/LICENSE.txt)\n\nWe are grateful to these projects for making their work available under open source licenses.\n\n## License\n\nLicensed under the [MIT license](https://github.com/creativetimofficial/ui/blob/main/LICENSE.md).\n\nMade with love by [Creative Tim](https://creative-tim.com).\n" }, { "path": "apps/www/.env.example", "content": "# Private Registry Authentication\n# Set your API key to access private components (testimonials-03, testimonials-04)\n# Get your API key from: https://creative-tim.com/ui\nAPI_KEY=your_api_key_here\n\nNEXT_PUBLIC_V0_URL=https://v0.app\nNEXT_PUBLIC_APP_URL=http://localhost:5000\n\nNEXT_PUBLIC_ASSET_PREFIX = \"/ui\"\nNEXT_PUBLIC_VIEW_PATH = \"/ui/view\"" }, { "path": "apps/www/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.*\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/versions\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# env files (can opt-in for committing if needed)\n.env*\n!.env.example\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n\n# generated content\n.contentlayer\n.content-collections\n.source\n" }, { "path": "apps/www/.prettierignore", "content": "dist\nnode_modules\n.next\nbuild\n.contentlayer\nregistry/__index__.tsx\ncontent/docs/components/calendar.mdx\n" }, { "path": "apps/www/app/(app)/(root)/page.tsx", "content": "import { Metadata } from \"next\"\nimport Link from \"next/link\"\nimport { Download, Package, Star, Users } from \"lucide-react\"\n\nimport { ExamplesNav } from \"@/components/examples-nav\"\nimport { ExamplesPreview } from \"@/components/examples-preview\"\nimport { ShowcaseMasonry } from \"@/components/showcase-masonry\"\nimport { TestimonialsSection } from \"@/components/testimonials-section\"\nimport {\n PageActions,\n PageHeader,\n PageHeaderDescription,\n PageHeaderHeading,\n} from \"@/components/page-header\"\nimport { PageNav } from \"@/components/page-nav\"\nimport { ThemeSelector } from \"@/components/theme-selector\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\nconst title = \"Creative Tim UI\"\nconst description =\n \"Open-source components, blocks, and AI agents designed to speed up your workflow. Import them seamlessly into your favorite tools through Registry and MCPs.\"\n\nexport const dynamic = \"force-static\"\nexport const revalidate = false\n\nexport const metadata: Metadata = {\n title,\n description,\n openGraph: {\n images: [\n {\n url: `/og?title=${encodeURIComponent(\n title\n )}&description=${encodeURIComponent(description)}`,\n },\n ],\n },\n twitter: {\n card: \"summary_large_image\",\n images: [\n {\n url: `/og?title=${encodeURIComponent(\n title\n )}&description=${encodeURIComponent(description)}`,\n },\n ],\n },\n}\n\nexport default function IndexPage() {\n\n const assetPrefix = process.env.NEXT_PUBLIC_ASSET_PREFIX \n\n return (\n
\n
\n \n \n \n \n \n Creative Tim\n \n \n UI\n \n \n \n {description}\n \n \n \n \n\n {/* Logo Section */}\n
\n
\n {/* OpenAI */}\n
\n \n
\n\n {/* Claude */}\n
\n \n
\n\n {/* v0 */}\n
\n \n
\n\n {/* Replit */}\n
\n \n
\n\n {/* Bolt */}\n
\n \n
\n\n {/* Lovable */}\n
\n \n
\n
\n
\n \n
\n\n \n \n\n {/* Achievements Section */}\n
\n
\n

\n Remarkable Achievements\n

\n

\n Discover how our UI Tools have transformed web development. These\n achievements showcase our dedication to innovation and our\n community's growth.\n

\n\n
\n \n \n
2.6M+
\n
Community Members
\n

\n Join our community of developers and designers\n

\n \n\n \n \n
8.6M+
\n
\n Cumulative Downloads\n
\n

\n Based on Material Tailwind and Creative Tim Products\n

\n \n\n \n \n
48,000+
\n
\n Github Cumulative Stars\n
\n

\n On 100+ Open Source Repositories and Projects\n

\n \n\n \n \n
280,000+
\n
\n Monthly NPM Downloads\n
\n

\n Including React, HTML, Tailwind CSS and more.\n

\n \n
\n
\n
\n\n {/* Examples Preview Section */}\n \n\n {/* Testimonials Section */}\n \n\n \n a:first-child]:text-primary flex-1 overflow-hidden\" />\n \n
\n )\n}\n" }, { "path": "apps/www/app/(app)/blocks/[...categories]/page.tsx", "content": "import { getAllBlockIds } from \"@/lib/blocks\"\nimport { BlockDisplay } from \"@/components/block-display\"\nimport { registryCategories } from \"@/registry/registry-categories\"\n\nexport const revalidate = false\nexport const dynamic = \"force-static\"\nexport const dynamicParams = false\n\nexport async function generateStaticParams() {\n return registryCategories.map((category) => ({\n categories: [category.slug],\n }))\n}\n\nexport default async function BlocksPage({\n params,\n}: {\n params: Promise<{ categories?: string[] }>\n}) {\n const { categories = [] } = await params\n const blocks = await getAllBlockIds([\"registry:block\"], categories)\n\n return (\n
\n {blocks.map((name) => (\n \n ))}\n
\n )\n}\n" }, { "path": "apps/www/app/(app)/blocks/layout.tsx", "content": "import { Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { BlocksNav } from \"@/components/blocks-nav\"\nimport {\n PageActions,\n PageHeader,\n PageHeaderDescription,\n PageHeaderHeading,\n} from \"@/components/page-header\"\nimport { PageNav } from \"@/components/page-nav\"\nimport { Button } from \"@/components/ui/button\"\n\nconst title = \"Blocks\"\nconst description =\n \"A collection of building blocks and components made by Creative Tim on top of shadcn/ui.\"\n\nexport const metadata: Metadata = {\n title,\n description,\n openGraph: {\n images: [\n {\n url: `/og?title=${encodeURIComponent(\n title\n )}&description=${encodeURIComponent(description)}`,\n },\n ],\n },\n twitter: {\n card: \"summary_large_image\",\n images: [\n {\n url: `/og?title=${encodeURIComponent(\n title\n )}&description=${encodeURIComponent(description)}`,\n },\n ],\n },\n}\n\nexport default function BlocksLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <>\n \n {title}\n {description}\n \n \n \n \n \n \n \n \n
\n
{children}
\n
\n \n )\n}\n" }, { "path": "apps/www/app/(app)/blocks/page.tsx", "content": "import { BlockDisplay } from \"@/components/block-display\"\n\nexport const dynamic = \"force-static\"\nexport const revalidate = false\n\nconst FEATURED_BLOCKS = [\n \"software-purchase-01\",\n \"dark-product-overview-01\",\n \"web3-04\",\n \"account-basic-info-01\",\n \"cruds-01\",\n \"testimonials-03\",\n]\n\nexport default async function BlocksPage() {\n return (\n
\n {FEATURED_BLOCKS.map((name) => (\n \n ))}\n
\n )\n}\n" }, { "path": "apps/www/app/(app)/docs/[[...slug]]/page.tsx", "content": "import Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { mdxComponents } from \"@/mdx-components\"\nimport {\n IconArrowLeft,\n IconArrowRight,\n IconArrowUpRight,\n} from \"@tabler/icons-react\"\nimport { findNeighbour } from \"fumadocs-core/server\"\n\nimport { source } from \"@/lib/source\"\nimport { absoluteUrl } from \"@/lib/utils\"\nimport { DocsCopyPage } from \"@/components/docs-copy-page\"\nimport { DocsSidebarCta } from \"@/components/docs-sidebar-cta\"\nimport { DocsTableOfContents } from \"@/components/docs-toc\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nexport const revalidate = false\nexport const dynamic = \"force-static\"\nexport const dynamicParams = false\n\nexport function generateStaticParams() {\n return source.generateParams()\n}\n\nexport async function generateMetadata(props: {\n params: Promise<{ slug?: string[] }>\n}) {\n const params = await props.params\n const page = source.getPage(params.slug)\n\n if (!page) {\n notFound()\n }\n\n const doc = page.data\n\n if (!doc.title || !doc.description) {\n notFound()\n }\n\n return {\n title: doc.title,\n description: doc.description,\n openGraph: {\n title: doc.title,\n description: doc.description,\n type: \"article\",\n url: absoluteUrl(page.url),\n images: [\n {\n url: `/og?title=${encodeURIComponent(\n doc.title\n )}&description=${encodeURIComponent(doc.description)}`,\n },\n ],\n },\n twitter: {\n card: \"summary_large_image\",\n title: doc.title,\n description: doc.description,\n images: [\n {\n url: `/og?title=${encodeURIComponent(\n doc.title\n )}&description=${encodeURIComponent(doc.description)}`,\n },\n ],\n creator: \"@creativetim\",\n },\n }\n}\n\nexport default async function Page(props: {\n params: Promise<{ slug?: string[] }>\n}) {\n const params = await props.params\n const page = source.getPage(params.slug)\n if (!page) {\n notFound()\n }\n\n const doc = page.data\n // @ts-expect-error - revisit fumadocs types.\n const MDX = doc.body\n const neighbours = await findNeighbour(source.pageTree, page.url)\n\n // @ts-expect-error - revisit fumadocs types.\n const links = doc.links\n\n return (\n \n
\n
\n
\n
\n
\n
\n

\n {doc.title}\n

\n
\n \n {neighbours.previous && (\n \n \n \n Previous\n \n \n )}\n {neighbours.next && (\n \n \n Next\n \n \n \n )}\n
\n
\n {doc.description && (\n

\n {doc.description}\n

\n )}\n
\n {links ? (\n
\n {links?.doc && (\n \n \n Docs \n \n \n )}\n {links?.api && (\n \n \n API Reference \n \n \n )}\n
\n ) : null}\n
\n
\n \n
\n
\n \n
\n \n \n )\n}\n\nfunction BlockViewerToolbar() {\n const { setView, view, item, resizablePanelRef, setIframeKey } =\n useBlockViewer()\n const { copyToClipboard, isCopied } = useCopyToClipboard()\n // const viewPath = process.env.NEXT_PUBLIC_VIEW_PATH || \"/view\"\n\n return (\n
\n {/* Title and Description Section */}\n
\n
\n

\n \n {item.description?.replace(/\\.$/, \"\")}\n \n

\n
\n {item.meta?.details && (\n

\n {item.meta.details}\n

\n )}\n
\n\n {/* Controllers Section */}\n
\n {/* {isPro && !hasAccess ? (\n \n \n \n npx @creative-tim/ui@latest add {item.name}\n \n \n ) : ( */}\n {\n copyToClipboard(\n `npx @creative-tim/ui@latest add ${item.name}`\n )\n }}\n >\n {isCopied ? : }\n \n npx @creative-tim/ui@latest add {item.name}\n \n \n {/* )} */}\n \n \n \n
\n
\n {\n setView(\"preview\")\n if (resizablePanelRef?.current) {\n resizablePanelRef.current.resize(parseInt(value))\n }\n }}\n className=\"gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm\"\n >\n \n \n \n \n \n \n \n \n \n \n \n \n Open in New Tab\n \n \n \n \n {\n if (setIframeKey) {\n setIframeKey((k) => k + 1)\n }\n }}\n >\n \n Refresh Preview\n \n \n
\n \n setView(value as \"preview\" | \"code\")}\n >\n \n Preview\n {/* */}\n \n Code\n \n \n \n \n \n \n
\n
\n
\n )\n}\n\nfunction BlockViewerIframe({ className }: { className?: string }) {\n const { item, iframeKey } = useBlockViewer()\n const viewPath = process.env.NEXT_PUBLIC_VIEW_PATH || \"/view\"\n\n return (\n \n )\n}\n\nfunction BlockViewerView() {\n const { resizablePanelRef } = useBlockViewer()\n\n return (\n
\n
\n
\n \n \n \n \n
\n
\n )\n}\n\nfunction BlockViewerMobile({ children }: { children: React.ReactNode }) {\n const { item } = useBlockViewer()\n\n return (\n
\n
\n
\n {item.description}\n
\n
\n {item.name}\n
\n
\n {item.meta?.mobile === \"component\" ? (\n children\n ) : (\n
\n \n \n
\n )}\n
\n )\n}\n\nfunction BlockViewerCode() {\n const { activeFile, highlightedFiles } = useBlockViewer()\n\n const file = React.useMemo(() => {\n return highlightedFiles?.find((file) => file.target === activeFile)\n }, [highlightedFiles, activeFile])\n\n if (!file) {\n return null\n }\n\n const language = file.path.split(\".\").pop() ?? \"tsx\"\n\n // All components are accessible in open source version\n if (false) {\n return (\n
\n
\n \n PRO\n \n

\n This is a PRO component. Upgrade your account to access the source\n code and install this component.\n

\n \n
\n
\n )\n }\n\n return (\n
\n
\n \n
\n \n \n {getIconForLanguageExtension(language)}\n {file.target}\n
\n \n
\n \n \n \n
\n )\n}\n\nexport function BlockViewerFileTree() {\n const { tree } = useBlockViewer()\n\n if (!tree) {\n return null\n }\n\n return (\n \n \n \n Files\n \n \n \n \n {tree.map((file, index) => (\n \n ))}\n \n \n \n \n \n )\n}\n\nfunction Tree({ item, index }: { item: FileTree; index: number }) {\n const { activeFile, setActiveFile } = useBlockViewer()\n\n if (!item.children) {\n return (\n \n item.path && setActiveFile(item.path)}\n className=\"hover:bg-muted-foreground/15 focus:bg-muted-foreground/15 focus-visible:bg-muted-foreground/15 active:bg-muted-foreground/15 data-[active=true]:bg-muted-foreground/15 rounded-none pl-(--index) whitespace-nowrap\"\n data-index={index}\n style={\n {\n \"--index\": `${index * (index === 2 ? 1.2 : 1.3)}rem`,\n } as React.CSSProperties\n }\n >\n \n \n {item.name}\n \n \n )\n }\n\n return (\n \n button>svg:first-child]:rotate-90\"\n defaultOpen\n >\n \n \n \n \n {item.name}\n \n \n \n \n {item.children.map((subItem, key) => (\n \n ))}\n \n \n \n \n )\n}\n\nfunction BlockCopyCodeButton() {\n const { activeFile, item } = useBlockViewer()\n const { copyToClipboard, isCopied } = useCopyToClipboard()\n\n const file = React.useMemo(() => {\n return item.files?.find((file) => file.target === activeFile)\n }, [activeFile, item.files])\n\n const content = file?.content\n\n if (!content) {\n return null\n }\n\n return (\n {\n copyToClipboard(content)\n trackEvent({\n name: \"copy_block_code\",\n properties: {\n name: item.name,\n file: file.path,\n },\n })\n }}\n >\n {isCopied ? : }\n \n )\n}\n\nfunction BlockViewer({\n item,\n tree,\n highlightedFiles,\n children,\n ...props\n}: Pick & {\n children: React.ReactNode\n}) {\n return (\n \n \n \n \n {children}\n \n )\n}\n\nexport { BlockViewer }\n" }, { "path": "apps/www/components/blocks-nav.tsx", "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\n\nimport {\n ScrollArea,\n ScrollBar,\n} from \"@/components/ui/scroll-area\"\nimport { registryCategories } from \"@/registry/registry-categories\"\n\nexport function BlocksNav() {\n const pathname = usePathname()\n\n return (\n
\n \n
\n \n {registryCategories.map((category) => (\n \n ))}\n
\n \n \n
\n )\n}\n\nfunction BlocksNavLink({\n category,\n isActive,\n}: {\n category: (typeof registryCategories)[number]\n isActive: boolean\n}) {\n if (category.hidden) {\n return null\n }\n\n return (\n \n {category.name}\n \n )\n}\n" }, { "path": "apps/www/components/blur-vignette.tsx", "content": "\"use client\"\n\nimport React, { useState } from \"react\"\n\nimport { Switch } from \"@/components/ui/switch\"\n\ninterface BlurVignetteProps {\n children: React.ReactNode\n className?: string\n radius?: string\n inset?: string\n transitionLength?: string\n blur?: string\n switchView?: boolean\n}\n\nconst BlurVignette = ({\n children,\n switchView,\n className = \"\",\n radius = \"24px\",\n inset = \"16px\",\n transitionLength = \"32px\",\n blur = \"21px\",\n}: BlurVignetteProps) => {\n const [isEnabled, setIsEnabled] = useState(true)\n const shouldShowBlur = switchView ? isEnabled : true\n\n const blurStyles: React.CSSProperties = {\n position: \"absolute\",\n inset: 0,\n zIndex: 10,\n pointerEvents: \"none\",\n WebkitBackdropFilter: `blur(${blur})`,\n backdropFilter: `blur(${blur})`,\n opacity: shouldShowBlur ? 1 : 0,\n transition: \"opacity 0.3s ease\",\n [\"--radius\" as string]: radius,\n [\"--inset\" as string]: inset,\n [\"--transition-length\" as string]: transitionLength,\n [\"--blur\" as string]: blur,\n [\"--r\" as string]: `max(${transitionLength}, calc(${radius} - ${inset}))`,\n [\"--corner-size\" as string]: `calc(var(--r) + ${inset}) calc(var(--r) + ${inset})`,\n [\"--corner-gradient\" as string]: `transparent 0px, transparent calc(var(--r) - ${transitionLength}), black var(--r)`,\n [\"--fill-gradient\" as string]: `black, black ${inset}, transparent calc(${inset} + ${transitionLength}), transparent calc(100% - ${transitionLength} - ${inset}), black calc(100% - ${inset})`,\n [\"--fill-narrow-size\" as string]: `calc(100% - (${inset} + var(--r)) * 2)`,\n [\"--fill-farther-position\" as string]: `calc(${inset} + var(--r))`,\n WebkitMaskImage: `linear-gradient(to right, var(--fill-gradient)),\n linear-gradient(to bottom, var(--fill-gradient)),\n radial-gradient(at bottom right, var(--corner-gradient)),\n radial-gradient(at bottom left, var(--corner-gradient)),\n radial-gradient(at top left, var(--corner-gradient)),\n radial-gradient(at top right, var(--corner-gradient))`,\n maskImage: `linear-gradient(to right, var(--fill-gradient)),\n linear-gradient(to bottom, var(--fill-gradient)),\n radial-gradient(at bottom right, var(--corner-gradient)),\n radial-gradient(at bottom left, var(--corner-gradient)),\n radial-gradient(at top left, var(--corner-gradient)),\n radial-gradient(at top right, var(--corner-gradient))`,\n WebkitMaskSize: `100% var(--fill-narrow-size),\n var(--fill-narrow-size) 100%,\n var(--corner-size),\n var(--corner-size),\n var(--corner-size),\n var(--corner-size)`,\n maskSize: `100% var(--fill-narrow-size),\n var(--fill-narrow-size) 100%,\n var(--corner-size),\n var(--corner-size),\n var(--corner-size),\n var(--corner-size)`,\n WebkitMaskPosition: `0 var(--fill-farther-position),\n var(--fill-farther-position) 0,\n 0 0,\n 100% 0,\n 100% 100%,\n 0 100%`,\n maskPosition: `0 var(--fill-farther-position),\n var(--fill-farther-position) 0,\n 0 0,\n 100% 0,\n 100% 100%,\n 0 100%`,\n WebkitMaskRepeat: \"no-repeat\",\n maskRepeat: \"no-repeat\",\n } as React.CSSProperties\n\n return (\n
\n
\n {children}\n {switchView && (\n
\n \n
\n )}\n
\n )\n}\n\nexport default BlurVignette\n" }, { "path": "apps/www/components/callout.tsx", "content": "import { cn } from \"@/lib/utils\"\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/components/ui/alert\"\n\nexport function Callout({\n title,\n children,\n icon,\n className,\n ...props\n}: React.ComponentProps & { icon?: React.ReactNode }) {\n return (\n \n {icon}\n {title && {title}}\n \n {children}\n \n \n )\n}\n" }, { "path": "apps/www/components/cards/activity-goal.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MinusIcon, PlusIcon } from \"lucide-react\"\nimport { Bar, BarChart } from \"recharts\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport {\n ChartConfig,\n ChartContainer,\n} from \"@/components/ui/chart\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nconst chartConfig = {\n goal: {\n label: \"Goal\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nexport function CardsActivityGoal() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n \n \n Move Goal\n Set your daily activity goal.\n \n \n
\n onClick(-10)}\n disabled={goal <= 200}\n >\n \n Decrease\n \n
\n
\n {goal}\n
\n
\n Calories/day\n
\n
\n onClick(10)}\n disabled={goal >= 400}\n >\n \n Increase\n \n
\n
\n \n \n \n \n \n
\n \n \n \n \n \n )\n}\n" }, { "path": "apps/www/components/cards/calendar.tsx", "content": "\"use client\"\n\nimport { addDays } from \"date-fns\"\n\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst start = new Date(2025, 5, 5)\n\nexport function CardsCalendar() {\n return (\n \n \n \n \n \n )\n}\n" }, { "path": "apps/www/components/cards/cookie-settings.tsx", "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nexport function CardsCookieSettings() {\n return (\n \n \n Cookie Settings\n Manage your cookie settings here.\n \n \n
\n \n \n
\n
\n \n \n
\n \n \n \n \n \n )\n}\n" }, { "path": "apps/www/components/cards/create-account.tsx", "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport function CardsCreateAccount() {\n return (\n \n \n Create an account\n \n Enter your email below to create your account\n \n \n \n
\n \n \n
\n
\n
\n \n
\n
\n \n Or continue with\n \n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n \n \n \n )\n}\n" }, { "path": "apps/www/components/cards/forms.tsx", "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n RadioGroup,\n RadioGroupItem,\n} from \"@/components/ui/radio-group\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst plans = [\n {\n id: \"starter\",\n name: \"Starter Plan\",\n description: \"Perfect for small businesses.\",\n price: \"$10\",\n },\n {\n id: \"pro\",\n name: \"Pro Plan\",\n description: \"More features and storage.\",\n price: \"$20\",\n },\n] as const\n\nexport function CardsForms() {\n return (\n \n \n Upgrade your subscription\n \n You are currently on the free plan. Upgrade to the pro plan to get\n access to all features.\n \n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n
\n \n \n \n
\n
\n
\n Plan\n

\n Select the plan that best fits your needs.\n

\n \n {plans.map((plan) => (\n \n \n
\n
{plan.name}
\n
\n {plan.description}\n
\n
\n \n ))}\n \n
\n
\n \n