[ { "path": ".changeset/README.md", "content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)\n" }, { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@2.3.0/schema.json\",\n \"changelog\": [\"@changesets/changelog-github\", { \"repo\": \"shadcn-ui/ui\" }],\n \"commit\": false,\n \"fixed\": [],\n \"linked\": [],\n \"access\": \"public\",\n \"baseBranch\": \"main\",\n \"updateInternalDependencies\": \"patch\",\n \"ignore\": [\"v4\", \"tests\"]\n}\n" }, { "path": ".claude/settings.local.json", "content": "{\n \"permissions\": {\n \"allow\": [\n \"Bash(npm test:*)\",\n \"Bash(npm run typecheck:*)\",\n \"Bash(ls:*)\",\n \"Bash(cat:*)\",\n \"WebSearch\",\n \"WebFetch(domain:github.com)\"\n ],\n \"deny\": []\n }\n}\n" }, { "path": ".commitlintrc.json", "content": "{\n \"extends\": [\"@commitlint/config-conventional\"]\n}\n" }, { "path": ".cursor/rules/registry-bases-parity.mdc", "content": "---\ndescription: Keep registry base and radix trees in sync when editing shared UI\nglobs: apps/v4/registry/bases/**/*\nalwaysApply: false\n---\n\n# Registry bases: Base UI ↔ Radix parity\n\n`apps/v4/registry/bases/base` and `apps/v4/registry/bases/radix` are **parallel registries**. Anything that exists in both trees for the same purpose (preview blocks, mirrored examples, shared card layouts, etc.) **must stay in sync**.\n\n## When editing\n\n- If you change a file under **`bases/base/...`**, apply the **same behavioral and visual change** to the matching path under **`bases/radix/...`** (and the reverse).\n- Only diverge where APIs differ (e.g. import paths like `@/registry/bases/base/ui/*` vs `@/registry/bases/radix/ui/*`, or Base UI vs Radix component props).\n- Do **not** update only one side unless the user explicitly asks for a single-base change.\n\n## Typical mirrored paths\n\n- `blocks/preview/**` — preview cards and blocks\n- Parallel `ui/*` components when both exist for the same component\n\nAfter edits, briefly confirm both trees were updated (or state why one side is intentionally unchanged).\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": ".github/DISCUSSION_TEMPLATE/blocks-request.yml", "content": "title: \"[blocks]: \"\nlabels: [\"Blocks Request\"]\nbody:\n - type: markdown\n attributes:\n value: |\n ### Thanks for taking the time to create a block request! Please search open/closed requests before submitting, as the block or a similar one may have already been requested.\n\n - type: textarea\n id: block-description\n attributes:\n label: Description\n description: Tell us about your block request\n placeholder: \"A dashboard for an e-commerce website showing sales, orders, and customers...\"\n validations:\n required: true\n\n - type: input\n id: block-example-url\n attributes:\n label: Example\n description: Link to an example of the block\n placeholder: ex. https://example.com\n validations:\n required: false\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: [shadcn]\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: \"Bug report\"\ndescription: Report an issue\ntitle: '[bug]: '\nlabels: [\"bug\"]\nbody:\n - type: markdown\n attributes:\n value: |\n ### Thanks for taking the time to create a bug report. Please search open/closed issues before submitting, as the issue may have already been reported/addressed.\n \n - type: markdown\n attributes:\n value: |\n #### If you aren't sure this is a bug or not, please open a discussion instead:\n - [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)\n\n - type: textarea\n id: bug-description\n attributes:\n label: Describe the bug\n description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us how in the description. Thanks!\n placeholder: Bug description\n validations:\n required: true\n\n - type: input\n id: components-affected\n attributes:\n label: Affected component/components\n description: Which shadcn/ui components are affected?\n placeholder: ex. Button, Checkbox...\n validations:\n required: true\n\n - type: textarea\n id: reproduction\n attributes:\n label: How to reproduce\n description: A step-by-step description of how to reproduce the bug.\n placeholder: |\n 1. Go to '...'\n 2. Click on '....'\n 3. See error\n validations:\n required: true\n\n - type: input\n id: codesandbox-stackblitz\n attributes:\n label: Codesandbox/StackBlitz link\n description: | \n A link to a CodeSandbox or StackBlitz that includes a minimal reproduction of the problem. In rare cases when not applicable, you can link to a GitHub repository that we can easily run to recreate the issue. If a report is vague and does not have a reproduction, it will be closed without warning. \n\n > [!CAUTION]\n > If you skip this step, this issue might be **labeled** with `please add a reproduction` and **closed**.\n validations:\n required: false\n\n - type: textarea\n id: logs\n attributes:\n label: Logs\n description: \"Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.\"\n render: bash\n\n - type: textarea\n id: system-info\n attributes:\n label: System Info\n description: Information about browsers, system or binaries that's relevant.\n render: bash\n placeholder: System, Binaries, Browsers\n validations:\n required: true\n\n - type: checkboxes\n id: terms\n attributes:\n label: Before submitting\n description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).\n options:\n - label: I've made research efforts and searched the documentation\n required: true\n - label: I've searched for existing issues\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Get Help\n url: https://github.com/shadcn-ui/ui/discussions/new?category=general\n about: If you can't get something to work the way you expect, open a question in our discussion forums." }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: \"Feature request\"\ndescription: Create a feature request for shadcn/ui\ntitle: '[feat]: '\nlabels: ['area: request']\nbody:\n - type: markdown\n attributes:\n value: |\n ### Thanks for taking the time to create a feature request! Please search open/closed issues before submitting, as the issue may have already been reported/addressed.\n \n - type: markdown\n attributes:\n value: |\n #### If you aren't sure this is a bug or not, please open a discussion instead:\n - [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)\n\n - type: textarea\n id: feature-description\n attributes:\n label: Feature description\n description: Tell us about your feature request\n placeholder: 'I think this feature would be great because...'\n value: 'Describe your feature request...'\n validations:\n required: true\n\n - type: input\n id: components-affected\n attributes:\n label: Affected component/components\n description: Is this feature request relevant to any of the already existing components?\n placeholder: ex. Button, Checkbox...\n validations:\n required: false\n\n - type: textarea\n id: context\n attributes:\n label: Additional Context\n description: Add any other context about the feature here.\n placeholder: ex. screenshots, Stack Overflow links, forum links, etc.\n value: 'Additional details here...'\n validations:\n required: false\n\n - type: checkboxes\n id: terms\n attributes:\n label: Before submitting\n description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).\n options:\n - label: I've made research efforts and searched the documentation\n required: true\n - label: I've searched for existing issues and PRs\n required: true\n" }, { "path": ".github/changeset-version.js", "content": "// ORIGINALLY FROM CLOUDFLARE WRANGLER:\n// https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js\n\nimport { execSync } from \"child_process\"\n\n// This script is used by the `release.yml` workflow to update the version of the packages being released.\n// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.\n// So we also run `pnpm install`, which does this update.\n// This is a workaround until this is handled automatically by `changeset version`.\n// See https://github.com/changesets/changesets/issues/421.\nexecSync(\"npx changeset version\", { stdio: \"inherit\" })\nexecSync(\"pnpm install --lockfile-only\", { stdio: \"inherit\" })\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n - package-ecosystem: \"npm\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/astro-app\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/astro-monorepo\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/next-app\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/next-monorepo\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/react-router-app\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/react-router-monorepo\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/start-app\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/start-monorepo\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/vite-app\"\n schedule:\n interval: \"weekly\"\n - package-ecosystem: \"npm\"\n directory: \"/templates/vite-monorepo\"\n schedule:\n interval: \"weekly\"\n" }, { "path": ".github/version-script-beta.js", "content": "// ORIGINALLY FROM CLOUDFLARE WRANGLER:\n// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js\n\nimport { exec } from \"child_process\"\nimport fs from \"fs\"\n\nconst pkgJsonPath = \"packages/shadcn/package.json\"\ntry {\n const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))\n exec(\"git rev-parse --short HEAD\", (err, stdout) => {\n if (err) {\n console.log(err)\n process.exit(1)\n }\n pkg.version = \"0.0.0-beta.\" + stdout.trim()\n fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, \"\\t\") + \"\\n\")\n })\n} catch (error) {\n console.error(error)\n process.exit(1)\n}\n" }, { "path": ".github/version-script-next.js", "content": "// ORIGINALLY FROM CLOUDFLARE WRANGLER:\n// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js\n\nimport { exec } from \"child_process\"\nimport fs from \"fs\"\n\nconst pkgJsonPath = \"packages/shadcn/package.json\"\ntry {\n const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))\n exec(\"git rev-parse --short HEAD\", (err, stdout) => {\n if (err) {\n console.log(err)\n process.exit(1)\n }\n pkg.version = \"0.0.0-next.\" + stdout.trim()\n fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, \"\\t\") + \"\\n\")\n })\n} catch (error) {\n console.error(error)\n process.exit(1)\n}\n" }, { "path": ".github/workflows/code-check.yml", "content": "name: Code check\n\non:\n pull_request:\n branches: [\"*\"]\n\njobs:\n lint:\n runs-on: ubuntu-latest\n name: pnpm lint\n steps:\n - uses: actions/checkout@v3\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.0.6\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - run: pnpm lint\n\n format:\n runs-on: ubuntu-latest\n name: pnpm format:check\n steps:\n - uses: actions/checkout@v3\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.0.6\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build packages\n run: pnpm --filter=shadcn build\n\n - run: pnpm format:check\n\n tsc:\n runs-on: ubuntu-latest\n name: pnpm typecheck\n steps:\n - uses: actions/checkout@v3\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.0.6\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - name: Build packages\n run: pnpm --filter=shadcn build\n\n - run: pnpm typecheck\n" }, { "path": ".github/workflows/issue-stale.yml", "content": "# Adapted from vercel/next.js\nname: \"Stale issue handler\"\non:\n workflow_dispatch:\n schedule:\n # This runs every day 20 minutes before midnight: https://crontab.guru/#40_23_*_*_*\n - cron: \"40 23 * * *\"\n\njobs:\n stale:\n runs-on: ubuntu-latest\n if: github.repository_owner == 'shadcn-ui'\n steps:\n - uses: actions/stale@v9\n id: issue-stale\n name: \"Mark stale issues, close stale issues\"\n with:\n repo-token: ${{ secrets.STALE_TOKEN }}\n ascending: true\n days-before-issue-close: 7\n days-before-issue-stale: 365\n days-before-pr-stale: -1\n days-before-pr-close: -1\n remove-issue-stale-when-updated: true\n stale-issue-label: \"stale?\"\n exempt-issue-labels: \"roadmap,next\"\n stale-issue-message: \"This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)\"\n close-issue-message: \"This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)\"\n operations-per-run: 300\n - uses: actions/stale@v9\n id: pr-state\n name: \"Mark stale PRs, close stale PRs\"\n with:\n repo-token: ${{ secrets.STALE_TOKEN }}\n ascending: true\n days-before-issue-close: -1\n days-before-issue-stale: -1\n days-before-pr-close: 7\n days-before-pr-stale: 365\n remove-pr-stale-when-updated: true\n exempt-pr-labels: \"roadmap,next,bug\"\n stale-pr-label: \"stale?\"\n stale-pr-message: \"This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)\"\n close-pr-message: \"This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)\"\n operations-per-run: 300\n" }, { "path": ".github/workflows/prerelease-comment.yml", "content": "# Adapted from create-t3-app.\nname: Write Beta Release comment\n\non:\n workflow_run:\n workflows: [\"Release - Beta\"]\n types:\n - completed\n\njobs:\n comment:\n if: |\n github.repository_owner == 'shadcn-ui' &&\n ${{ github.event.workflow_run.conclusion == 'success' }}\n runs-on: ubuntu-latest\n name: Write comment to the PR\n steps:\n - name: \"Comment on PR\"\n uses: actions/github-script@v6\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n script: |\n const allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({\n owner: context.repo.owner,\n repo: context.repo.repo,\n run_id: context.payload.workflow_run.id,\n });\n\n for (const artifact of allArtifacts.data.artifacts) {\n // Extract the PR number and package version from the artifact name\n const match = /^npm-package-shadcn@(.*?)-pr-(\\d+)/.exec(artifact.name);\n\n if (match) {\n require(\"fs\").appendFileSync(\n process.env.GITHUB_ENV,\n `\\nBETA_PACKAGE_VERSION=${match[1]}` +\n `\\nWORKFLOW_RUN_PR=${match[2]}` +\n `\\nWORKFLOW_RUN_ID=${context.payload.workflow_run.id}`\n );\n break;\n }\n }\n\n - name: \"Comment on PR with Link\"\n uses: marocchino/sticky-pull-request-comment@v2\n with:\n number: ${{ env.WORKFLOW_RUN_PR }}\n message: |\n A new prerelease is available for testing:\n\n ```sh\n pnpm dlx shadcn@${{ env.BETA_PACKAGE_VERSION }}\n ```\n\n - name: \"Remove the autorelease label once published\"\n uses: actions/github-script@v6\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n script: |\n github.rest.issues.removeLabel({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: '${{ env.WORKFLOW_RUN_PR }}',\n name: '🚀 autorelease',\n });\n" }, { "path": ".github/workflows/prerelease.yml", "content": "# Adapted from create-t3-app.\n\nname: Release - Beta\n\non:\n pull_request:\n types: [labeled]\n branches:\n - main\n\npermissions:\n id-token: write\n contents: read\n\njobs:\n prerelease:\n if: |\n github.repository_owner == 'shadcn-ui' &&\n contains(github.event.pull_request.labels.*.name, '🚀 autorelease')\n name: Build & Publish a beta release to NPM\n runs-on: ubuntu-latest\n environment: Preview\n\n steps:\n - name: Checkout Repo\n uses: actions/checkout@v4\n with:\n fetch-depth: 0\n\n - name: Use PNPM\n uses: pnpm/action-setup@v4\n with:\n version: 9.0.6\n\n - name: Use Node.js 20\n uses: actions/setup-node@v4\n with:\n node-version: 20\n registry-url: \"https://registry.npmjs.org\"\n cache: \"pnpm\"\n\n - name: Update npm for OIDC support\n run: npm install -g npm@latest\n\n - name: Install NPM Dependencies\n run: pnpm install\n\n - name: Modify package.json version\n run: node .github/version-script-beta.js\n\n - name: Publish Beta to NPM\n run: pnpm pub:beta\n\n - name: get-npm-version\n id: package-version\n uses: martinbeentjes/npm-get-version-action@main\n with:\n path: packages/shadcn\n\n - name: Upload packaged artifact\n uses: actions/upload-artifact@v4\n with:\n name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name\n path: packages/shadcn/dist/index.js\n" }, { "path": ".github/workflows/release.yml", "content": "# Adapted from create-t3-app.\n\nname: Release\n\non:\n push:\n branches:\n - main\n\npermissions:\n id-token: write\n contents: write\n pull-requests: write\n\njobs:\n release:\n if: ${{ github.repository_owner == 'shadcn-ui' }}\n name: Create a PR for release workflow\n runs-on: ubuntu-latest\n steps:\n - name: Checkout Repo\n uses: actions/checkout@v3\n with:\n fetch-depth: 0\n\n - name: Use PNPM\n uses: pnpm/action-setup@v4\n with:\n version: 9.0.6\n\n - name: Use Node.js 20\n uses: actions/setup-node@v4\n with:\n node-version: 20\n registry-url: \"https://registry.npmjs.org\"\n cache: \"pnpm\"\n\n - name: Update npm for OIDC support\n run: npm install -g npm@latest\n\n - name: Install NPM Dependencies\n run: pnpm install\n\n # - name: Check for errors\n # run: pnpm check\n\n - name: Build the package\n run: pnpm shadcn:build\n\n - name: Create Version PR or Publish to NPM\n id: changesets\n uses: changesets/action@v1\n with:\n commit: \"chore(release): version packages\"\n title: \"chore(release): version packages\"\n version: node .github/changeset-version.js\n publish: npx changeset publish\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n NODE_ENV: \"production\"\n" }, { "path": ".github/workflows/test.yml", "content": "name: Test\n\non:\n pull_request:\n branches: [\"*\"]\n\njobs:\n test:\n runs-on: ubuntu-latest\n name: pnpm test\n env:\n NEXT_PUBLIC_APP_URL: http://localhost:4000\n NEXT_PUBLIC_V0_URL: https://v0.dev\n steps:\n - uses: actions/checkout@v3\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 22\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.0.6\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - run: pnpm test\n" }, { "path": ".github/workflows/validate-registries.yml", "content": "name: Validate Registries\n\non:\n pull_request:\n paths:\n - \"apps/v4/public/r/registries.json\"\n - \"apps/v4/registry/directory.json\"\n push:\n branches:\n - main\n paths:\n - \"apps/v4/public/r/registries.json\"\n - \"apps/v4/registry/directory.json\"\n\njobs:\n check-registry-sync:\n if: github.event_name == 'pull_request'\n runs-on: ubuntu-latest\n name: check-registry-sync\n permissions:\n contents: read\n pull-requests: write\n steps:\n - name: Check changed files\n id: changed\n env:\n GH_TOKEN: ${{ github.token }}\n run: |\n CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --name-only)\n\n DIRECTORY_CHANGED=false\n REGISTRIES_CHANGED=false\n\n if echo \"$CHANGED_FILES\" | grep -q \"^apps/v4/registry/directory.json$\"; then\n DIRECTORY_CHANGED=true\n fi\n\n if echo \"$CHANGED_FILES\" | grep -q \"^apps/v4/public/r/registries.json$\"; then\n REGISTRIES_CHANGED=true\n fi\n\n echo \"directory_changed=$DIRECTORY_CHANGED\" >> $GITHUB_OUTPUT\n echo \"registries_changed=$REGISTRIES_CHANGED\" >> $GITHUB_OUTPUT\n\n - name: Flag missing registries.json update\n if: steps.changed.outputs.directory_changed == 'true' && steps.changed.outputs.registries_changed == 'false'\n env:\n GH_TOKEN: ${{ github.token }}\n run: |\n gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --add-label \"registries: invalid\"\n gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body \"can you run \\`pnpm registry:build\\` and commit the json files please?\"\n exit 1\n\n validate:\n runs-on: ubuntu-latest\n name: pnpm validate:registries\n permissions:\n contents: read\n steps:\n - uses: actions/checkout@v4\n with:\n fetch-depth: 0\n\n - name: Install Node.js\n uses: actions/setup-node@v3\n with:\n node-version: 20\n\n - name: Block reserved registry namespaces\n env:\n RESERVED_NAMESPACES: \"@shadcn,@ui,@blocks,@components,@block,@component,@util,@utils,@registry,@lib,@hook,@hooks,@theme,@themes,@chart,@charts\"\n run: |\n node <<'EOF'\n const fs = require(\"node:fs\")\n\n const files = [\n \"apps/v4/public/r/registries.json\",\n \"apps/v4/registry/directory.json\",\n ]\n const reservedNamespaces = new Set(\n process.env.RESERVED_NAMESPACES.split(\",\").filter(Boolean)\n )\n\n function readNames(filePath) {\n return JSON.parse(fs.readFileSync(filePath, \"utf8\")).map(\n (entry) => entry.name\n )\n }\n\n const violations = files.flatMap((filePath) => {\n return readNames(filePath)\n .filter((name) => reservedNamespaces.has(name))\n .map((name) => `${filePath}: ${name}`)\n })\n\n if (violations.length > 0) {\n console.error(\"Reserved registry namespaces are not allowed:\")\n\n for (const violation of violations) {\n console.error(`- ${violation}`)\n }\n\n process.exit(1)\n }\n EOF\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n id: pnpm-install\n with:\n version: 9.0.6\n run_install: false\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n - uses: actions/cache@v3\n name: Setup pnpm cache\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n - name: Install dependencies\n run: pnpm install\n\n - name: Validate registries\n run: pnpm --filter=v4 validate:registries\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\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\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\n.notes\n.playwright-mcp\nshadcn-workspace\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": ".npmrc", "content": "auto-install-peers=true\nlink-workspace-packages=true\n" }, { "path": ".nvmrc", "content": "v20.5.1\n" }, { "path": ".prettierignore", "content": "dist\nnode_modules\n.next\nbuild\n.contentlayer\n**/fixtures\ndeprecated\napps/v4/registry/styles/**/*.css\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\nThanks for your interest in contributing to ui.shadcn.com. We're happy to have you here.\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 [@shadcn](https://twitter.com/shadcn).\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- We use [changesets](https://github.com/changesets/changesets) for managing releases.\n\n## Structure\n\nThis repository is structured as follows:\n\n```\napps\n└── v4\n ├── app\n ├── components\n ├── content\n └── registry\n └── new-york-v4\n ├── example\n └── ui\npackages\n└── shadcn\n```\n\n| Path | Description |\n| -------------------- | ---------------------------------------- |\n| `apps/v4/app` | The Next.js application for the website. |\n| `apps/v4/components` | The React components for the website. |\n| `apps/v4/content` | The content for the website. |\n| `apps/v4/registry` | The registry for the components. |\n| `packages/shadcn` | The `shadcn` package. |\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/your-username/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 `ui.shadcn.com` website:\n\n```bash\npnpm --filter=v4 dev\n```\n\n2. To run the `shadcn` package:\n\n```bash\npnpm --filter=shadcn dev\n```\n\n## Running the CLI Locally\n\nTo run the CLI locally, you can follow the workflow:\n\n1. Start by running the dev server:\n\n ```bash\n pnpm dev\n ```\n\n2. In another terminal tab, test the CLI by running:\n\n ```bash\n pnpm shadcn\n ```\n\n To test the CLI in a specific app, use a command like:\n\n ```bash\n pnpm shadcn -c ~/Desktop/my-app\n ```\n\nThis workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.\n\n## Documentation\n\nThe documentation for this project is located in the `v4` workspace. You can run the documentation locally by running the following command:\n\n```bash\npnpm --filter=v4 dev\n```\n\nDocumentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/v4/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/v4/registry`. The components are organized by styles.\n\n```bash\napps\n└── v4\n └── registry\n └── new-york-v4\n ├── example\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 registry:build` 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.\n\n## CLI\n\nThe `shadcn` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).\n\nAny changes to the CLI should be made in the `packages/shadcn` directory. If you can, it would be great if you could add tests for your changes.\n\n## Testing\n\nTests are written using [Vitest](https://vitest.dev). You can run all the tests from the root of the repository.\n\n```bash\npnpm test\n```\n\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) 2023 shadcn\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": "# shadcn/ui\n\nA set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. **Use this to build your own component library**.\n\n![hero](apps/v4/public/opengraph-image.png)\n\n## Documentation\n\nVisit https://ui.shadcn.com/docs to view the documentation.\n\n## Contributing\n\nPlease read the [contributing guide](/CONTRIBUTING.md).\n\n## License\n\nLicensed under the [MIT license](./LICENSE.md).\n" }, { "path": "SECURITY.md", "content": "# Security Policy\n\nIf you believe you have found a security vulnerability, we encourage you to let us know right away.\n\nWe will investigate all legitimate reports and do our best to quickly fix the problem.\n\nOur preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software. \n\nTo do this, please visit the security tab of the repository and click the [Report a vulnerability](https://github.com/shadcn-ui/ui/security/advisories/new) button.\n" }, { "path": "apps/v4/.env.example", "content": "NEXT_PUBLIC_V0_URL=https://v0.dev\nNEXT_PUBLIC_APP_URL=http://localhost:4000" }, { "path": "apps/v4/.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/v4/.prettierignore", "content": "dist\nnode_modules\n.next\nbuild\n.contentlayer\nregistry/__index__.tsx\ncontent/docs/components/calendar.mdx\nregistry/styles/**/*.css\n" }, { "path": "apps/v4/README.md", "content": "This is a wip registry for the `shadcn` canary version. It has React 19 and Tailwind v4 components.\n" }, { "path": "apps/v4/app/(app)/(root)/components/appearance-settings.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } from \"@/examples/radix/ui/button-group\"\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldTitle,\n} from \"@/examples/radix/ui/field\"\nimport { Input } from \"@/examples/radix/ui/input\"\nimport { RadioGroup, RadioGroupItem } from \"@/examples/radix/ui/radio-group\"\nimport { Switch } from \"@/examples/radix/ui/switch\"\nimport { IconMinus, IconPlus } from \"@tabler/icons-react\"\n\nexport function AppearanceSettings() {\n const [gpuCount, setGpuCount] = React.useState(8)\n\n const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n setGpuCount((prevCount) =>\n Math.max(1, Math.min(99, prevCount + adjustment))\n )\n }, [])\n\n const handleGpuInputChange = React.useCallback(\n (e: React.ChangeEvent) => {\n const value = parseInt(e.target.value, 10)\n if (!isNaN(value) && value >= 1 && value <= 99) {\n setGpuCount(value)\n }\n },\n []\n )\n\n return (\n
\n \n
\n Compute Environment\n \n Select the compute environment for your cluster.\n \n \n \n \n \n Kubernetes\n \n Run GPU workloads on a K8s configured cluster. This is the\n default.\n \n \n \n \n \n \n \n \n Virtual Machine\n \n Access a VM configured cluster to run workloads. (Coming\n soon)\n \n \n \n \n \n \n
\n \n \n \n Number of GPUs\n You can add more later.\n \n \n \n handleGpuAdjustment(-1)}\n disabled={gpuCount <= 1}\n >\n \n \n handleGpuAdjustment(1)}\n disabled={gpuCount >= 99}\n >\n \n \n \n \n \n \n \n Wallpaper Tinting\n \n Allow the wallpaper to be tinted.\n \n \n \n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/button-group-demo.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } from \"@/examples/radix/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/examples/radix/ui/dropdown-menu\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nexport function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Mark as Read\n \n \n \n Archive\n \n \n \n \n \n \n Snooze\n \n \n \n Add to Calendar\n \n \n \n Add to List\n \n \n \n \n Label As...\n \n \n \n \n Personal\n \n \n Work\n \n \n Other\n \n \n \n \n \n \n \n \n \n Trash\n \n \n \n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/button-group-input-group.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } from \"@/examples/radix/ui/button-group\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/examples/radix/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/examples/radix/ui/tooltip\"\nimport { AudioLinesIcon, PlusIcon } from \"lucide-react\"\n\nexport function ButtonGroupInputGroup() {\n const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n return (\n \n \n \n \n \n \n \n \n \n \n setVoiceEnabled(!voiceEnabled)}\n data-active={voiceEnabled}\n className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n aria-pressed={voiceEnabled}\n size=\"icon-xs\"\n aria-label=\"Voice Mode\"\n >\n \n \n \n Voice Mode\n \n \n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/button-group-nested.tsx", "content": "\"use client\"\n\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } from \"@/examples/radix/ui/button-group\"\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\"\n\nexport function ButtonGroupNested() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/button-group-popover.tsx", "content": "import { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } from \"@/examples/radix/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/examples/radix/ui/popover\"\nimport { Separator } from \"@/examples/radix/ui/separator\"\nimport { Textarea } from \"@/examples/radix/ui/textarea\"\nimport { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nexport function ButtonGroupPopover() {\n return (\n \n \n \n \n \n \n \n
\n
Agent Tasks
\n
\n \n
\n \n

Start a new task with Copilot

\n

\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n

\n
\n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx", "content": "import {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarImage,\n} from \"@/examples/radix/ui/avatar\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/examples/radix/ui/empty\"\nimport { PlusIcon } from \"lucide-react\"\n\nexport function EmptyAvatarGroup() {\n return (\n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n No Team Members\n \n Invite your team to collaborate on this project.\n \n \n \n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/empty-input-group.tsx", "content": "import { SearchIcon } from \"lucide-react\"\n\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyTitle,\n} from \"@/registry/new-york-v4/ui/empty\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Kbd } from \"@/registry/new-york-v4/ui/kbd\"\n\nexport function EmptyInputGroup() {\n return (\n \n \n 404 - Not Found\n \n The page you're looking for doesn't exist. Try searching for\n what you need below.\n \n \n \n \n \n \n \n \n \n /\n \n \n \n Need help? Contact support\n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/field-checkbox.tsx", "content": "import { Checkbox } from \"@/examples/radix/ui/checkbox\"\nimport { Field, FieldLabel } from \"@/examples/radix/ui/field\"\n\nexport function FieldCheckbox() {\n return (\n \n \n \n \n I agree to the terms and conditions\n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/field-choice-card.tsx", "content": "import {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSet,\n FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n RadioGroup,\n RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nexport function FieldChoiceCard() {\n return (\n
\n \n
\n \n Compute Environment\n \n \n Select the compute environment for your cluster.\n \n \n \n \n \n \n Kubernetes\n \n Run GPU workloads on a K8s configured cluster.\n \n \n \n \n \n \n \n \n Virtual Machine\n \n Access a VM configured cluster to run workloads.\n \n \n \n \n \n
\n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/field-demo.tsx", "content": "import { Button } from \"@/examples/radix/ui/button\"\nimport { Checkbox } from \"@/examples/radix/ui/checkbox\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n} from \"@/examples/radix/ui/field\"\nimport { Input } from \"@/examples/radix/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/examples/radix/ui/select\"\nimport { Textarea } from \"@/examples/radix/ui/textarea\"\n\nexport function FieldDemo() {\n return (\n
\n
\n \n
\n Payment Method\n \n All transactions are secure and encrypted\n \n \n \n \n Name on Card\n \n \n \n
\n \n \n Card Number\n \n \n \n Enter your 16-digit number.\n \n \n \n CVV\n \n \n
\n
\n \n \n Month\n \n \n \n \n \n Year\n \n \n \n
\n \n
\n \n
\n Billing Address\n \n The billing address associated with your payment method\n \n \n \n \n \n Same as shipping address\n \n \n \n
\n \n
\n \n \n \n Comments\n \n \n \n \n
\n \n \n \n \n \n
\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/field-hear.tsx", "content": "import { Card, CardContent } from \"@/examples/radix/ui/card\"\nimport { Checkbox } from \"@/examples/radix/ui/checkbox\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldLegend,\n FieldSet,\n FieldTitle,\n} from \"@/examples/radix/ui/field\"\n\nconst options = [\n {\n label: \"Social Media\",\n value: \"social-media\",\n },\n\n {\n label: \"Search Engine\",\n value: \"search-engine\",\n },\n {\n label: \"Referral\",\n value: \"referral\",\n },\n {\n label: \"Other\",\n value: \"other\",\n },\n]\n\nexport function FieldHear() {\n return (\n \n \n
\n \n
\n How did you hear about us?\n \n Select the option that best describes how you heard about us.\n \n \n {options.map((option) => (\n \n \n \n {option.label}\n \n \n ))}\n \n
\n \n
\n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/field-slider.tsx", "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Field, FieldDescription, FieldTitle } from \"@/examples/radix/ui/field\"\nimport { Slider } from \"@/examples/radix/ui/slider\"\n\nexport function FieldSlider() {\n const [value, setValue] = useState([200, 800])\n return (\n
\n \n Price Range\n \n Set your budget range ($\n {value[0]} -{\" \"}\n {value[1]}).\n \n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/index.tsx", "content": "import { FieldSeparator } from \"@/examples/radix/ui/field\"\n\nimport { AppearanceSettings } from \"./appearance-settings\"\nimport { ButtonGroupDemo } from \"./button-group-demo\"\nimport { ButtonGroupInputGroup } from \"./button-group-input-group\"\nimport { ButtonGroupNested } from \"./button-group-nested\"\nimport { ButtonGroupPopover } from \"./button-group-popover\"\nimport { EmptyAvatarGroup } from \"./empty-avatar-group\"\nimport { FieldCheckbox } from \"./field-checkbox\"\nimport { FieldDemo } from \"./field-demo\"\nimport { FieldHear } from \"./field-hear\"\nimport { FieldSlider } from \"./field-slider\"\nimport { InputGroupButtonExample } from \"./input-group-button\"\nimport { InputGroupDemo } from \"./input-group-demo\"\nimport { ItemDemo } from \"./item-demo\"\nimport { NotionPromptForm } from \"./notion-prompt-form\"\nimport { SpinnerBadge } from \"./spinner-badge\"\nimport { SpinnerEmpty } from \"./spinner-empty\"\n\nexport function RootComponents() {\n return (\n
\n
\n \n
\n
\n \n \n \n \n \n
\n
\n \n \n Appearance Settings\n \n
\n
\n \n \n \n
\n \n \n
\n \n \n
\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/input-group-button.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/examples/radix/ui/input-group\"\nimport { Label } from \"@/examples/radix/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/examples/radix/ui/popover\"\nimport { IconInfoCircle, IconStar } from \"@tabler/icons-react\"\n\nexport function InputGroupButtonExample() {\n const [isFavorite, setIsFavorite] = React.useState(false)\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n

Your connection is not secure.

\n

You should not enter any sensitive information on this site.

\n \n \n \n https://\n \n \n setIsFavorite(!isFavorite)}\n size=\"icon-xs\"\n aria-label=\"Favorite\"\n >\n \n \n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/input-group-demo.tsx", "content": "import {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/examples/radix/ui/dropdown-menu\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/examples/radix/ui/input-group\"\nimport { Separator } from \"@/examples/radix/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/examples/radix/ui/tooltip\"\nimport { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nexport function InputGroupDemo() {\n return (\n
\n \n \n \n \n \n 12 results\n \n \n \n \n https://\n \n \n \n \n \n \n \n \n This is content in a tooltip.\n \n \n \n \n \n \n \n \n \n \n \n Auto\n \n \n Auto\n Agent\n Manual\n \n \n 52% used\n \n \n \n Send\n \n \n \n \n \n \n
\n \n
\n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/input-group-textarea.tsx", "content": "import {\n IconBrandJavascript,\n IconCopy,\n IconCornerDownLeft,\n IconRefresh,\n} from \"@tabler/icons-react\"\n\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nexport function InputGroupTextareaExample() {\n return (\n
\n \n \n \n Line 1, Column 1\n \n Run \n \n \n \n \n \n script.js\n \n \n \n \n \n \n \n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/item-avatar.tsx", "content": "import { Plus } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/new-york-v4/ui/item\"\n\nexport function ItemAvatar() {\n return (\n
\n \n \n \n \n LR\n \n \n \n Max Leiter\n Last seen 5 months ago\n \n \n \n \n \n \n \n \n \n
\n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n
\n \n \n No Team Members\n Invite your team to collaborate.\n \n \n \n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/item-demo.tsx", "content": "import { Button } from \"@/examples/radix/ui/button\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/examples/radix/ui/item\"\nimport { BadgeCheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nexport function ItemDemo() {\n return (\n
\n \n \n Two-factor authentication\n \n Verify via email or phone number.\n \n \n \n \n \n \n \n \n \n \n \n \n Your profile has been verified.\n \n \n \n \n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx", "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/examples/radix/ui/avatar\"\nimport { Badge } from \"@/examples/radix/ui/badge\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/examples/radix/ui/command\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/examples/radix/ui/dropdown-menu\"\nimport { Field, FieldLabel } from \"@/examples/radix/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupTextarea,\n} from \"@/examples/radix/ui/input-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/examples/radix/ui/popover\"\nimport { Switch } from \"@/examples/radix/ui/switch\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/examples/radix/ui/tooltip\"\nimport {\n IconApps,\n IconArrowUp,\n IconAt,\n IconBook,\n IconCircleDashedPlus,\n IconPaperclip,\n IconPlus,\n IconWorld,\n IconX,\n} from \"@tabler/icons-react\"\n\nconst SAMPLE_DATA = {\n mentionable: [\n {\n type: \"page\",\n title: \"Meeting Notes\",\n image: \"📝\",\n },\n {\n type: \"page\",\n title: \"Project Dashboard\",\n image: \"📊\",\n },\n {\n type: \"page\",\n title: \"Ideas & Brainstorming\",\n image: \"💡\",\n },\n {\n type: \"page\",\n title: \"Calendar & Events\",\n image: \"📅\",\n },\n {\n type: \"page\",\n title: \"Documentation\",\n image: \"📚\",\n },\n {\n type: \"page\",\n title: \"Goals & Objectives\",\n image: \"🎯\",\n },\n {\n type: \"page\",\n title: \"Budget Planning\",\n image: \"💰\",\n },\n {\n type: \"page\",\n title: \"Team Directory\",\n image: \"👥\",\n },\n {\n type: \"page\",\n title: \"Technical Specs\",\n image: \"🔧\",\n },\n {\n type: \"page\",\n title: \"Analytics Report\",\n image: \"📈\",\n },\n {\n type: \"user\",\n title: \"shadcn\",\n image: \"https://github.com/shadcn.png\",\n workspace: \"Workspace\",\n },\n {\n type: \"user\",\n title: \"maxleiter\",\n image: \"https://github.com/maxleiter.png\",\n workspace: \"Workspace\",\n },\n {\n type: \"user\",\n title: \"evilrabbit\",\n image: \"https://github.com/evilrabbit.png\",\n workspace: \"Workspace\",\n },\n ],\n models: [\n {\n name: \"Auto\",\n },\n {\n name: \"Agent Mode\",\n badge: \"Beta\",\n },\n {\n name: \"Plan Mode\",\n },\n ],\n}\n\nfunction MentionableIcon({\n item,\n}: {\n item: (typeof SAMPLE_DATA.mentionable)[0]\n}) {\n return item.type === \"page\" ? (\n \n {item.image}\n \n ) : (\n \n \n {item.title[0]}\n \n )\n}\n\nexport function NotionPromptForm() {\n const [mentions, setMentions] = useState([])\n const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)\n const [modelPopoverOpen, setModelPopoverOpen] = useState(false)\n const [selectedModel, setSelectedModel] = useState<\n (typeof SAMPLE_DATA.models)[0]\n >(SAMPLE_DATA.models[0])\n const [scopeMenuOpen, setScopeMenuOpen] = useState(false)\n\n const grouped = useMemo(() => {\n return SAMPLE_DATA.mentionable.reduce(\n (acc, item) => {\n const isAvailable = !mentions.includes(item.title)\n\n if (isAvailable) {\n if (!acc[item.type]) {\n acc[item.type] = []\n }\n acc[item.type].push(item)\n }\n return acc\n },\n {} as Record\n )\n }, [mentions])\n\n const hasMentions = mentions.length > 0\n\n return (\n
\n \n \n Prompt\n \n \n \n \n \n \n e.stopPropagation()}\n >\n \n \n {!hasMentions && \"Add context\"}\n \n \n \n Mention a person, page, or date\n \n \n \n \n \n No pages found\n {Object.entries(grouped).map(([type, items]) => (\n \n {items.map((item) => (\n {\n setMentions((prev) => [...prev, currentValue])\n setMentionPopoverOpen(false)\n }}\n className=\"rounded-lg\"\n >\n \n {item.title}\n \n ))}\n \n ))}\n \n \n \n \n
\n {mentions.map((mention) => {\n const item = SAMPLE_DATA.mentionable.find(\n (item) => item.title === mention\n )\n\n if (!item) {\n return null\n }\n\n return (\n {\n setMentions((prev) => prev.filter((m) => m !== mention))\n }}\n >\n \n {item.title}\n \n \n )\n })}\n
\n \n \n \n \n \n \n \n \n Attach file\n \n \n \n \n \n \n {selectedModel.name}\n \n \n \n Select AI model\n \n \n \n \n Select Agent Mode\n \n {SAMPLE_DATA.models.map((model) => (\n {\n if (checked) {\n setSelectedModel(model)\n }\n }}\n className=\"pl-2 *:[span:first-child]:right-2 *:[span:first-child]:left-auto\"\n >\n {model.name}\n {model.badge && (\n \n {model.badge}\n \n )}\n \n ))}\n \n \n \n \n \n \n All Sources\n \n \n \n \n e.preventDefault()}\n >\n \n \n \n \n \n e.preventDefault()}\n >\n \n \n \n All Sources I can access\n \n \n \n \n \n CN\n \n shadcn\n \n \n \n \n \n No knowledge found\n \n {SAMPLE_DATA.mentionable\n .filter((item) => item.type === \"user\")\n .map((user) => (\n {\n // Handle user selection here\n console.log(\"Selected user:\", user.title)\n }}\n >\n \n \n \n {user.title[0]}\n \n \n {user.title}{\" \"}\n \n - {user.workspace}\n \n \n ))}\n \n \n \n \n \n \n Help Center\n \n \n \n \n \n Connect Apps\n \n \n We'll only search in the sources selected here.\n \n \n \n \n \n \n \n \n \n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/spinner-badge.tsx", "content": "import { Badge } from \"@/examples/radix/ui/badge\"\nimport { Spinner } from \"@/examples/radix/ui/spinner\"\n\nexport function SpinnerBadge() {\n return (\n
\n \n \n Syncing\n \n \n \n Updating\n \n \n \n Loading\n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/components/spinner-empty.tsx", "content": "import { Button } from \"@/examples/radix/ui/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/examples/radix/ui/empty\"\nimport { Spinner } from \"@/examples/radix/ui/spinner\"\n\nexport function SpinnerEmpty() {\n return (\n \n \n \n \n \n Processing your request\n \n Please wait while we process your request. Do not refresh the page.\n \n \n \n \n \n \n )\n}\n" }, { "path": "apps/v4/app/(app)/(root)/page.tsx", "content": "import { type Metadata } from \"next\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announcement\"\nimport { ExamplesNav } from \"@/components/examples-nav\"\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 \"@/registry/new-york-v4/ui/button\"\n\nimport { RootComponents } from \"./components\"\n\nconst title = \"The Foundation for your Design System\"\nconst description =\n \"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.\"\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 return (\n
\n \n \n {title}\n {description}\n \n \n \n \n \n \n a:first-child]:text-primary\" />\n \n
\n
\n
\n \n \n
\n
\n \n
\n
\n
\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/blocks/[...categories]/page.tsx", "content": "import { getAllBlockIds } from \"@/lib/blocks\"\nimport { registryCategories } from \"@/lib/categories\"\nimport { BlockDisplay } from \"@/components/block-display\"\nimport { getActiveStyle } from \"@/registry/_legacy-styles\"\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 = [] }, activeStyle] = await Promise.all([\n params,\n getActiveStyle(),\n ])\n const blocks = await getAllBlockIds([\"registry:block\"], categories)\n\n return (\n
\n {blocks.map((name) => (\n \n ))}\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/blocks/layout.tsx", "content": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announcement\"\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 \"@/registry/new-york-v4/ui/button\"\n\nconst title = \"Building Blocks for the Web\"\nconst description =\n \"Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.\"\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 \n {title}\n {description}\n \n \n \n \n \n \n \n \n
\n
{children}
\n
\n \n )\n}\n" }, { "path": "apps/v4/app/(app)/blocks/page.tsx", "content": "import Link from \"next/link\"\n\nimport { BlockDisplay } from \"@/components/block-display\"\nimport { getActiveStyle } from \"@/registry/_legacy-styles\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nexport const dynamic = \"force-static\"\nexport const revalidate = false\n\nconst FEATURED_BLOCKS = [\n \"dashboard-01\",\n \"sidebar-07\",\n \"sidebar-03\",\n \"login-03\",\n \"login-04\",\n]\n\nexport default async function BlocksPage() {\n const activeStyle = await getActiveStyle()\n\n return (\n
\n {FEATURED_BLOCKS.map((name) => (\n \n ))}\n
\n
\n \n
\n
\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/charts/[type]/page.tsx", "content": "import * as React from \"react\"\nimport { notFound } from \"next/navigation\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n ChartDisplay,\n getCachedRegistryItem,\n getChartHighlightedCode,\n} from \"@/components/chart-display\"\nimport { getActiveStyle } from \"@/registry/_legacy-styles\"\nimport { charts } from \"@/app/(app)/charts/charts\"\n\nexport const revalidate = false\nexport const dynamic = \"force-static\"\nexport const dynamicParams = false\n\ninterface ChartPageProps {\n params: Promise<{\n type: string\n }>\n}\n\nconst chartTypes = [\n \"area\",\n \"bar\",\n \"line\",\n \"pie\",\n \"radar\",\n \"radial\",\n \"tooltip\",\n] as const\ntype ChartType = (typeof chartTypes)[number]\n\nexport async function generateStaticParams() {\n return chartTypes.map((type) => ({\n type,\n }))\n}\n\nexport default async function ChartPage({ params }: ChartPageProps) {\n const { type } = await params\n\n if (!chartTypes.includes(type as ChartType)) {\n return notFound()\n }\n\n const chartType = type as ChartType\n const chartList = charts[chartType]\n const activeStyle = await getActiveStyle()\n\n // Prefetch all chart data in parallel for better performance.\n // Charts are rendered via iframes, so we only need the metadata and highlighted code.\n const chartDataPromises = chartList.map(async (chart) => {\n const registryItem = await getCachedRegistryItem(chart.id, activeStyle.name)\n if (!registryItem) return null\n\n const highlightedCode = await getChartHighlightedCode(\n registryItem.files?.[0]?.content ?? \"\"\n )\n if (!highlightedCode) return null\n\n return {\n ...registryItem,\n highlightedCode,\n fullWidth: chart.fullWidth,\n }\n })\n\n const prefetchedCharts = await Promise.all(chartDataPromises)\n\n return (\n
\n

\n {type.charAt(0).toUpperCase() + type.slice(1)} Charts\n

\n
\n {Array.from({ length: 12 }).map((_, index) => {\n const chart = prefetchedCharts[index]\n return chart ? (\n \n ) : (\n \n )\n })}\n
\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/charts/charts.tsx", "content": "import type * as React from \"react\"\n\nimport { ChartAreaAxes } from \"@/registry/new-york-v4/charts/chart-area-axes\"\nimport { ChartAreaDefault } from \"@/registry/new-york-v4/charts/chart-area-default\"\nimport { ChartAreaGradient } from \"@/registry/new-york-v4/charts/chart-area-gradient\"\nimport { ChartAreaIcons } from \"@/registry/new-york-v4/charts/chart-area-icons\"\nimport { ChartAreaInteractive } from \"@/registry/new-york-v4/charts/chart-area-interactive\"\nimport { ChartAreaLegend } from \"@/registry/new-york-v4/charts/chart-area-legend\"\nimport { ChartAreaLinear } from \"@/registry/new-york-v4/charts/chart-area-linear\"\nimport { ChartAreaStacked } from \"@/registry/new-york-v4/charts/chart-area-stacked\"\nimport { ChartAreaStackedExpand } from \"@/registry/new-york-v4/charts/chart-area-stacked-expand\"\nimport { ChartAreaStep } from \"@/registry/new-york-v4/charts/chart-area-step\"\nimport { ChartBarActive } from \"@/registry/new-york-v4/charts/chart-bar-active\"\nimport { ChartBarDefault } from \"@/registry/new-york-v4/charts/chart-bar-default\"\nimport { ChartBarHorizontal } from \"@/registry/new-york-v4/charts/chart-bar-horizontal\"\nimport { ChartBarInteractive } from \"@/registry/new-york-v4/charts/chart-bar-interactive\"\nimport { ChartBarLabel } from \"@/registry/new-york-v4/charts/chart-bar-label\"\nimport { ChartBarLabelCustom } from \"@/registry/new-york-v4/charts/chart-bar-label-custom\"\nimport { ChartBarMixed } from \"@/registry/new-york-v4/charts/chart-bar-mixed\"\nimport { ChartBarMultiple } from \"@/registry/new-york-v4/charts/chart-bar-multiple\"\nimport { ChartBarNegative } from \"@/registry/new-york-v4/charts/chart-bar-negative\"\nimport { ChartBarStacked } from \"@/registry/new-york-v4/charts/chart-bar-stacked\"\nimport { ChartLineDefault } from \"@/registry/new-york-v4/charts/chart-line-default\"\nimport { ChartLineDots } from \"@/registry/new-york-v4/charts/chart-line-dots\"\nimport { ChartLineDotsColors } from \"@/registry/new-york-v4/charts/chart-line-dots-colors\"\nimport { ChartLineDotsCustom } from \"@/registry/new-york-v4/charts/chart-line-dots-custom\"\nimport { ChartLineInteractive } from \"@/registry/new-york-v4/charts/chart-line-interactive\"\nimport { ChartLineLabel } from \"@/registry/new-york-v4/charts/chart-line-label\"\nimport { ChartLineLabelCustom } from \"@/registry/new-york-v4/charts/chart-line-label-custom\"\nimport { ChartLineLinear } from \"@/registry/new-york-v4/charts/chart-line-linear\"\nimport { ChartLineMultiple } from \"@/registry/new-york-v4/charts/chart-line-multiple\"\nimport { ChartLineStep } from \"@/registry/new-york-v4/charts/chart-line-step\"\nimport { ChartPieDonut } from \"@/registry/new-york-v4/charts/chart-pie-donut\"\nimport { ChartPieDonutActive } from \"@/registry/new-york-v4/charts/chart-pie-donut-active\"\nimport { ChartPieDonutText } from \"@/registry/new-york-v4/charts/chart-pie-donut-text\"\nimport { ChartPieInteractive } from \"@/registry/new-york-v4/charts/chart-pie-interactive\"\nimport { ChartPieLabel } from \"@/registry/new-york-v4/charts/chart-pie-label\"\nimport { ChartPieLabelCustom } from \"@/registry/new-york-v4/charts/chart-pie-label-custom\"\nimport { ChartPieLabelList } from \"@/registry/new-york-v4/charts/chart-pie-label-list\"\nimport { ChartPieLegend } from \"@/registry/new-york-v4/charts/chart-pie-legend\"\nimport { ChartPieSeparatorNone } from \"@/registry/new-york-v4/charts/chart-pie-separator-none\"\nimport { ChartPieSimple } from \"@/registry/new-york-v4/charts/chart-pie-simple\"\nimport { ChartPieStacked } from \"@/registry/new-york-v4/charts/chart-pie-stacked\"\nimport { ChartRadarDefault } from \"@/registry/new-york-v4/charts/chart-radar-default\"\nimport { ChartRadarDots } from \"@/registry/new-york-v4/charts/chart-radar-dots\"\nimport { ChartRadarGridCircle } from \"@/registry/new-york-v4/charts/chart-radar-grid-circle\"\nimport { ChartRadarGridCircleFill } from \"@/registry/new-york-v4/charts/chart-radar-grid-circle-fill\"\nimport { ChartRadarGridCircleNoLines } from \"@/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines\"\nimport { ChartRadarGridCustom } from \"@/registry/new-york-v4/charts/chart-radar-grid-custom\"\nimport { ChartRadarGridFill } from \"@/registry/new-york-v4/charts/chart-radar-grid-fill\"\nimport { ChartRadarGridNone } from \"@/registry/new-york-v4/charts/chart-radar-grid-none\"\nimport { ChartRadarIcons } from \"@/registry/new-york-v4/charts/chart-radar-icons\"\nimport { ChartRadarLabelCustom } from \"@/registry/new-york-v4/charts/chart-radar-label-custom\"\nimport { ChartRadarLegend } from \"@/registry/new-york-v4/charts/chart-radar-legend\"\nimport { ChartRadarLinesOnly } from \"@/registry/new-york-v4/charts/chart-radar-lines-only\"\nimport { ChartRadarMultiple } from \"@/registry/new-york-v4/charts/chart-radar-multiple\"\nimport { ChartRadarRadius } from \"@/registry/new-york-v4/charts/chart-radar-radius\"\nimport { ChartRadialGrid } from \"@/registry/new-york-v4/charts/chart-radial-grid\"\nimport { ChartRadialLabel } from \"@/registry/new-york-v4/charts/chart-radial-label\"\nimport { ChartRadialShape } from \"@/registry/new-york-v4/charts/chart-radial-shape\"\nimport { ChartRadialSimple } from \"@/registry/new-york-v4/charts/chart-radial-simple\"\nimport { ChartRadialStacked } from \"@/registry/new-york-v4/charts/chart-radial-stacked\"\nimport { ChartRadialText } from \"@/registry/new-york-v4/charts/chart-radial-text\"\nimport { ChartTooltipAdvanced } from \"@/registry/new-york-v4/charts/chart-tooltip-advanced\"\nimport { ChartTooltipDefault } from \"@/registry/new-york-v4/charts/chart-tooltip-default\"\nimport { ChartTooltipFormatter } from \"@/registry/new-york-v4/charts/chart-tooltip-formatter\"\nimport { ChartTooltipIcons } from \"@/registry/new-york-v4/charts/chart-tooltip-icons\"\nimport { ChartTooltipIndicatorLine } from \"@/registry/new-york-v4/charts/chart-tooltip-indicator-line\"\nimport { ChartTooltipIndicatorNone } from \"@/registry/new-york-v4/charts/chart-tooltip-indicator-none\"\nimport { ChartTooltipLabelCustom } from \"@/registry/new-york-v4/charts/chart-tooltip-label-custom\"\nimport { ChartTooltipLabelFormatter } from \"@/registry/new-york-v4/charts/chart-tooltip-label-formatter\"\nimport { ChartTooltipLabelNone } from \"@/registry/new-york-v4/charts/chart-tooltip-label-none\"\n\ntype ChartComponent = React.ComponentType\n\ninterface ChartItem {\n id: string\n component: ChartComponent\n fullWidth?: boolean\n}\n\ninterface ChartGroups {\n area: ChartItem[]\n bar: ChartItem[]\n line: ChartItem[]\n pie: ChartItem[]\n radar: ChartItem[]\n radial: ChartItem[]\n tooltip: ChartItem[]\n}\n\nexport const charts: ChartGroups = {\n area: [\n {\n id: \"chart-area-interactive\",\n component: ChartAreaInteractive,\n fullWidth: true,\n },\n { id: \"chart-area-default\", component: ChartAreaDefault },\n { id: \"chart-area-linear\", component: ChartAreaLinear },\n { id: \"chart-area-step\", component: ChartAreaStep },\n { id: \"chart-area-legend\", component: ChartAreaLegend },\n { id: \"chart-area-stacked\", component: ChartAreaStacked },\n { id: \"chart-area-stacked-expand\", component: ChartAreaStackedExpand },\n { id: \"chart-area-icons\", component: ChartAreaIcons },\n { id: \"chart-area-gradient\", component: ChartAreaGradient },\n { id: \"chart-area-axes\", component: ChartAreaAxes },\n ],\n bar: [\n {\n id: \"chart-bar-interactive\",\n component: ChartBarInteractive,\n fullWidth: true,\n },\n { id: \"chart-bar-default\", component: ChartBarDefault },\n { id: \"chart-bar-horizontal\", component: ChartBarHorizontal },\n { id: \"chart-bar-multiple\", component: ChartBarMultiple },\n { id: \"chart-bar-stacked\", component: ChartBarStacked },\n { id: \"chart-bar-label\", component: ChartBarLabel },\n { id: \"chart-bar-label-custom\", component: ChartBarLabelCustom },\n { id: \"chart-bar-mixed\", component: ChartBarMixed },\n { id: \"chart-bar-active\", component: ChartBarActive },\n { id: \"chart-bar-negative\", component: ChartBarNegative },\n ],\n line: [\n {\n id: \"chart-line-interactive\",\n component: ChartLineInteractive,\n fullWidth: true,\n },\n { id: \"chart-line-default\", component: ChartLineDefault },\n { id: \"chart-line-linear\", component: ChartLineLinear },\n { id: \"chart-line-step\", component: ChartLineStep },\n { id: \"chart-line-multiple\", component: ChartLineMultiple },\n { id: \"chart-line-dots\", component: ChartLineDots },\n { id: \"chart-line-dots-custom\", component: ChartLineDotsCustom },\n { id: \"chart-line-dots-colors\", component: ChartLineDotsColors },\n { id: \"chart-line-label\", component: ChartLineLabel },\n { id: \"chart-line-label-custom\", component: ChartLineLabelCustom },\n ],\n pie: [\n { id: \"chart-pie-simple\", component: ChartPieSimple },\n { id: \"chart-pie-separator-none\", component: ChartPieSeparatorNone },\n { id: \"chart-pie-label\", component: ChartPieLabel },\n { id: \"chart-pie-label-custom\", component: ChartPieLabelCustom },\n { id: \"chart-pie-label-list\", component: ChartPieLabelList },\n { id: \"chart-pie-legend\", component: ChartPieLegend },\n { id: \"chart-pie-donut\", component: ChartPieDonut },\n { id: \"chart-pie-donut-active\", component: ChartPieDonutActive },\n { id: \"chart-pie-donut-text\", component: ChartPieDonutText },\n { id: \"chart-pie-stacked\", component: ChartPieStacked },\n { id: \"chart-pie-interactive\", component: ChartPieInteractive },\n ],\n radar: [\n { id: \"chart-radar-default\", component: ChartRadarDefault },\n { id: \"chart-radar-dots\", component: ChartRadarDots },\n { id: \"chart-radar-lines-only\", component: ChartRadarLinesOnly },\n { id: \"chart-radar-label-custom\", component: ChartRadarLabelCustom },\n { id: \"chart-radar-grid-custom\", component: ChartRadarGridCustom },\n { id: \"chart-radar-grid-none\", component: ChartRadarGridNone },\n { id: \"chart-radar-grid-circle\", component: ChartRadarGridCircle },\n {\n id: \"chart-radar-grid-circle-no-lines\",\n component: ChartRadarGridCircleNoLines,\n },\n { id: \"chart-radar-grid-circle-fill\", component: ChartRadarGridCircleFill },\n { id: \"chart-radar-grid-fill\", component: ChartRadarGridFill },\n { id: \"chart-radar-multiple\", component: ChartRadarMultiple },\n { id: \"chart-radar-legend\", component: ChartRadarLegend },\n { id: \"chart-radar-icons\", component: ChartRadarIcons },\n { id: \"chart-radar-radius\", component: ChartRadarRadius },\n ],\n radial: [\n { id: \"chart-radial-simple\", component: ChartRadialSimple },\n { id: \"chart-radial-label\", component: ChartRadialLabel },\n { id: \"chart-radial-grid\", component: ChartRadialGrid },\n { id: \"chart-radial-text\", component: ChartRadialText },\n { id: \"chart-radial-shape\", component: ChartRadialShape },\n { id: \"chart-radial-stacked\", component: ChartRadialStacked },\n ],\n tooltip: [\n { id: \"chart-tooltip-default\", component: ChartTooltipDefault },\n {\n id: \"chart-tooltip-indicator-line\",\n component: ChartTooltipIndicatorLine,\n },\n {\n id: \"chart-tooltip-indicator-none\",\n component: ChartTooltipIndicatorNone,\n },\n { id: \"chart-tooltip-label-custom\", component: ChartTooltipLabelCustom },\n {\n id: \"chart-tooltip-label-formatter\",\n component: ChartTooltipLabelFormatter,\n },\n { id: \"chart-tooltip-label-none\", component: ChartTooltipLabelNone },\n { id: \"chart-tooltip-formatter\", component: ChartTooltipFormatter },\n { id: \"chart-tooltip-icons\", component: ChartTooltipIcons },\n { id: \"chart-tooltip-advanced\", component: ChartTooltipAdvanced },\n ],\n}\n\n// Export individual components for backward compatibility\nexport {\n ChartAreaDefault,\n ChartAreaLinear,\n ChartAreaStep,\n ChartAreaLegend,\n ChartAreaStacked,\n ChartAreaStackedExpand,\n ChartAreaIcons,\n ChartAreaGradient,\n ChartAreaAxes,\n ChartAreaInteractive,\n ChartBarDefault,\n ChartBarHorizontal,\n ChartBarMultiple,\n ChartBarStacked,\n ChartBarLabel,\n ChartBarLabelCustom,\n ChartBarMixed,\n ChartBarActive,\n ChartBarNegative,\n ChartBarInteractive,\n ChartLineDefault,\n ChartLineLinear,\n ChartLineStep,\n ChartLineMultiple,\n ChartLineDots,\n ChartLineDotsCustom,\n ChartLineDotsColors,\n ChartLineLabel,\n ChartLineLabelCustom,\n ChartLineInteractive,\n ChartPieSimple,\n ChartPieSeparatorNone,\n ChartPieLabel,\n ChartPieLabelCustom,\n ChartPieLabelList,\n ChartPieLegend,\n ChartPieDonut,\n ChartPieDonutActive,\n ChartPieDonutText,\n ChartPieStacked,\n ChartPieInteractive,\n ChartRadarDefault,\n ChartRadarDots,\n ChartRadarLinesOnly,\n ChartRadarLabelCustom,\n ChartRadarGridCustom,\n ChartRadarGridNone,\n ChartRadarGridCircle,\n ChartRadarGridCircleNoLines,\n ChartRadarGridCircleFill,\n ChartRadarGridFill,\n ChartRadarMultiple,\n ChartRadarLegend,\n ChartRadarIcons,\n ChartRadarRadius,\n ChartRadialSimple,\n ChartRadialLabel,\n ChartRadialGrid,\n ChartRadialText,\n ChartRadialShape,\n ChartRadialStacked,\n ChartTooltipDefault,\n ChartTooltipIndicatorLine,\n ChartTooltipIndicatorNone,\n ChartTooltipLabelCustom,\n ChartTooltipLabelFormatter,\n ChartTooltipLabelNone,\n ChartTooltipFormatter,\n ChartTooltipIcons,\n ChartTooltipAdvanced,\n}\n" }, { "path": "apps/v4/app/(app)/charts/layout.tsx", "content": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announcement\"\nimport { ChartsNav } from \"@/components/charts-nav\"\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 \"@/registry/new-york-v4/ui/button\"\n\nconst title = \"Beautiful Charts & Graphs\"\nconst description =\n \"A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps.\"\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 ChartsLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n <>\n \n \n {title}\n {description}\n \n \n \n \n \n \n \n \n
\n
\n
{children}
\n
\n
\n \n )\n}\n" }, { "path": "apps/v4/app/(app)/colors/layout.tsx", "content": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announcement\"\nimport { ColorsNav } from \"@/components/colors-nav\"\nimport {\n PageActions,\n PageHeader,\n PageHeaderDescription,\n PageHeaderHeading,\n} from \"@/components/page-header\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nconst title = \"Tailwind Colors in Every Format\"\nconst description =\n \"The complete Tailwind color palette in HEX, RGB, HSL, CSS variables, and classes. Ready to copy and paste into your project.\"\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 ColorsLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n
\n \n \n {title}\n {description}\n \n \n \n \n \n
\n
\n
\n a:first-child]:text-primary\" />\n
\n
\n
\n
\n
\n
\n {children}\n
\n
\n
\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/colors/page.tsx", "content": "import { getColors } from \"@/lib/colors\"\nimport { ColorPalette } from \"@/components/color-palette\"\n\nexport const dynamic = \"force-static\"\nexport const revalidate = false\n\nexport default function ColorsPage() {\n const colors = getColors()\n\n return (\n
\n {colors.map((colorPalette) => (\n \n ))}\n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/docs/[[...slug]]/page.tsx", "content": "import Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { mdxComponents } from \"@/mdx-components\"\nimport { IconArrowLeft, IconArrowRight } from \"@tabler/icons-react\"\nimport { findNeighbour } from \"fumadocs-core/page-tree\"\n\nimport { source } from \"@/lib/source\"\nimport { absoluteUrl } from \"@/lib/utils\"\nimport { DocsBaseSwitcher } from \"@/components/docs-base-switcher\"\nimport { DocsCopyPage } from \"@/components/docs-copy-page\"\nimport { DocsTableOfContents } from \"@/components/docs-toc\"\nimport { OpenInV0Cta } from \"@/components/open-in-v0-cta\"\nimport { Button } from \"@/registry/new-york-v4/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: \"@shadcn\",\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 const MDX = doc.body\n const isChangelog = params.slug?.[0] === \"changelog\"\n const neighbours = isChangelog\n ? { previous: null, next: null }\n : findNeighbour(source.pageTree, page.url)\n const raw = await page.data.getText(\"raw\")\n\n return (\n \n
\n
\n
\n
\n
\n
\n

\n {doc.title}\n

\n
\n
\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
\n {doc.description && (\n

\n {doc.description}\n

\n )}\n
\n
\n
\n {params.slug &&\n params.slug[0] === \"components\" &&\n params.slug[1] &&\n params.slug[2] && (\n \n )}\n \n
\n
\n {neighbours.previous && (\n \n \n {neighbours.previous.name}\n \n \n )}\n {neighbours.next && (\n \n \n {neighbours.next.name} \n \n \n )}\n
\n
\n
\n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/docs/changelog/page.tsx", "content": "import Link from \"next/link\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { mdxComponents } from \"@/mdx-components\"\nimport { IconRss } from \"@tabler/icons-react\"\n\nimport { getChangelogPages, type ChangelogPageData } from \"@/lib/changelog\"\nimport { absoluteUrl } from \"@/lib/utils\"\nimport { OpenInV0Cta } from \"@/components/open-in-v0-cta\"\n\nexport const revalidate = false\nexport const dynamic = \"force-static\"\n\nexport function generateMetadata() {\n return {\n title: \"Changelog\",\n description: \"Latest updates and announcements.\",\n openGraph: {\n title: \"Changelog\",\n description: \"Latest updates and announcements.\",\n type: \"article\",\n url: absoluteUrl(\"/docs/changelog\"),\n images: [\n {\n url: `/og?title=${encodeURIComponent(\n \"Changelog\"\n )}&description=${encodeURIComponent(\n \"Latest updates and announcements.\"\n )}`,\n },\n ],\n },\n }\n}\n\nexport default function ChangelogPage() {\n const pages = getChangelogPages()\n const latestPages = pages.slice(0, 5)\n const olderPages = pages.slice(5)\n\n return (\n \n
\n
\n
\n
\n
\n

\n Changelog\n

\n \n
\n

\n Latest updates and announcements.\n

\n
\n
\n {latestPages.map((page) => {\n const data = page.data as ChangelogPageData\n const MDX = page.data.body\n\n return (\n
\n

\n {data.title}\n

\n
\n \n
\n
\n )\n })}\n {olderPages.length > 0 && (\n
\n

\n More Updates\n

\n
\n {olderPages.map((page) => {\n const data = page.data as ChangelogPageData\n const [date, ...titleParts] = data.title.split(\" - \")\n const title = titleParts.join(\" - \")\n return (\n \n \n {date}\n \n {title}\n \n )\n })}\n
\n
\n )}\n
\n
\n
\n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/docs/layout.tsx", "content": "import { source } from \"@/lib/source\"\nimport { DocsSidebar } from \"@/components/docs-sidebar\"\nimport { SidebarProvider } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function DocsLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n
\n \n \n
{children}
\n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Field,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Spinner } from \"@/registry/new-york-v4/ui/spinner\"\n\nexport function UserAuthForm({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n const [isLoading, setIsLoading] = React.useState(false)\n\n async function onSubmit(event: React.SyntheticEvent) {\n event.preventDefault()\n setIsLoading(true)\n\n setTimeout(() => {\n setIsLoading(false)\n }, 3000)\n }\n\n return (\n
\n
\n \n \n \n Email\n \n \n \n \n \n \n \n
\n Or continue with\n \n
\n )\n}\n" }, { "path": "apps/v4/app/(app)/examples/authentication/page.tsx", "content": "import { type Metadata } from \"next\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york-v4/ui/button\"\nimport { FieldDescription } from \"@/registry/new-york-v4/ui/field\"\nimport { UserAuthForm } from \"@/app/(app)/examples/authentication/components/user-auth-form\"\n\nexport const metadata: Metadata = {\n title: \"Authentication\",\n description: \"Authentication forms built using the components.\",\n}\n\nexport default function AuthenticationPage() {\n return (\n <>\n
\n \n \n
\n