├── .changeset ├── README.md ├── config.json └── wet-eagles-leave.md ├── .commitlintrc.json ├── .editorconfig ├── .env ├── .eslintrc.js ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ ├── feature_request.yml │ └── generic_issue.yml ├── changeset-version.js ├── version-script-beta.js ├── version-script-next.js └── workflows │ ├── code-check.yml │ ├── issue-stale.yml │ ├── prerelease-comment.yml │ ├── prerelease.yml │ ├── release.yml │ └── test.yml ├── .gitignore ├── .husky └── commit-msg ├── .kodiak.toml ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── apps └── www │ ├── .env.example │ ├── .gitignore │ ├── .prettierignore │ ├── __registry__ │ ├── .autogenerated │ ├── .gitkeep │ ├── README.md │ └── index.tsx │ ├── app │ ├── docs │ │ ├── [[...slug]] │ │ │ └── page.tsx │ │ └── layout.tsx │ ├── layout.tsx │ ├── page.tsx │ └── themes │ │ ├── page.tsx │ │ └── tabs.tsx │ ├── assets │ └── fonts │ │ ├── Inter-Bold.ttf │ │ └── Inter-Regular.ttf │ ├── components │ ├── analytics.tsx │ ├── announcement.tsx │ ├── callout.tsx │ ├── code-block-wrapper.tsx │ ├── command-menu.tsx │ ├── component-card.tsx │ ├── component-example.tsx │ ├── component-preview.tsx │ ├── component-source.tsx │ ├── copy-button.tsx │ ├── drawer.tsx │ ├── examples-nav.tsx │ ├── framework-docs.tsx │ ├── icons.tsx │ ├── main-nav.tsx │ ├── mdx-components.tsx │ ├── mobile-nav.tsx │ ├── mode-toggle.tsx │ ├── page-header.tsx │ ├── pager.tsx │ ├── promo-video.tsx │ ├── providers.tsx │ ├── sidebar-nav.tsx │ ├── site-footer.tsx │ ├── site-header.tsx │ ├── style-switcher.tsx │ ├── style-wrapper.tsx │ ├── tailwind-indicator.tsx │ ├── theme-component.tsx │ ├── theme-customizer.tsx │ ├── theme-switcher.tsx │ ├── theme-wrapper.tsx │ └── toc.tsx │ ├── config │ ├── docs.ts │ └── site.ts │ ├── content │ └── docs │ │ ├── about.mdx │ │ ├── changelog.mdx │ │ ├── cli.mdx │ │ ├── components-json.mdx │ │ ├── components │ │ ├── collection-stats.mdx │ │ ├── collection.mdx │ │ ├── nft-card.mdx │ │ ├── nfts-by-account.mdx │ │ └── trade-ranking.mdx │ │ ├── dark-mode │ │ ├── astro.mdx │ │ ├── index.mdx │ │ ├── next.mdx │ │ ├── remix.mdx │ │ └── vite.mdx │ │ ├── figma.mdx │ │ ├── index.mdx │ │ ├── installation │ │ ├── astro.mdx │ │ ├── gatsby.mdx │ │ ├── index.mdx │ │ ├── laravel.mdx │ │ ├── manual.mdx │ │ ├── next.mdx │ │ ├── remix.mdx │ │ └── vite.mdx │ │ └── theming.mdx │ ├── contentlayer.config.js │ ├── hooks │ ├── use-config.ts │ ├── use-lock-body.ts │ ├── use-media-query.tsx │ ├── use-mounted.ts │ └── use-mutation-observer.ts │ ├── lib │ ├── events.ts │ ├── fonts.ts │ ├── rehype-component.ts │ ├── rehype-npm-command.ts │ ├── themes │ │ ├── dark.json │ │ └── light.json │ ├── toc.ts │ ├── utils.ts │ └── validations │ │ ├── log.ts │ │ └── og.ts │ ├── next-env.d.ts │ ├── next.config.mjs │ ├── package.json │ ├── pages │ ├── .gitkeep │ └── api │ │ ├── .gitkeep │ │ ├── components.json │ │ └── components.ts │ ├── postcss.config.cjs │ ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── avatars │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ ├── 04.png │ │ └── 05.png │ ├── examples │ │ ├── authentication-dark.png │ │ ├── authentication-light.png │ │ ├── cards-dark.png │ │ ├── cards-light.png │ │ ├── dashboard-dark.png │ │ ├── dashboard-light.png │ │ ├── forms-dark.png │ │ ├── forms-light.png │ │ ├── mail-dark.png │ │ ├── mail-light.png │ │ ├── music-dark.png │ │ ├── music-light.png │ │ ├── playground-dark.png │ │ ├── playground-light.png │ │ ├── tasks-dark.png │ │ └── tasks-light.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── images │ │ ├── style-with-theming.jpg │ │ └── style.jpg │ ├── og.jpg │ ├── registry │ │ ├── colors │ │ │ ├── gray.json │ │ │ ├── index.json │ │ │ ├── neutral.json │ │ │ ├── slate.json │ │ │ ├── stone.json │ │ │ └── zinc.json │ │ ├── index.json │ │ ├── styles │ │ │ ├── default │ │ │ │ ├── accordion.json │ │ │ │ ├── alert-dialog.json │ │ │ │ ├── alert.json │ │ │ │ ├── aspect-ratio.json │ │ │ │ ├── avatar.json │ │ │ │ ├── badge.json │ │ │ │ ├── breadcrumb.json │ │ │ │ ├── button.json │ │ │ │ ├── calendar.json │ │ │ │ ├── card.json │ │ │ │ ├── carousel.json │ │ │ │ ├── checkbox.json │ │ │ │ ├── collapsible.json │ │ │ │ ├── collection-stats.json │ │ │ │ ├── collection.json │ │ │ │ ├── command.json │ │ │ │ ├── context-menu.json │ │ │ │ ├── dialog.json │ │ │ │ ├── drawer.json │ │ │ │ ├── dropdown-menu.json │ │ │ │ ├── form.json │ │ │ │ ├── hover-card.json │ │ │ │ ├── input-otp.json │ │ │ │ ├── input.json │ │ │ │ ├── label.json │ │ │ │ ├── loading.json │ │ │ │ ├── menubar.json │ │ │ │ ├── navigation-menu.json │ │ │ │ ├── nft-card.json │ │ │ │ ├── nftcard.json │ │ │ │ ├── nfts-by-account.json │ │ │ │ ├── pagination.json │ │ │ │ ├── popover.json │ │ │ │ ├── progress.json │ │ │ │ ├── radio-group.json │ │ │ │ ├── resizable.json │ │ │ │ ├── scroll-area.json │ │ │ │ ├── select.json │ │ │ │ ├── separator.json │ │ │ │ ├── sheet.json │ │ │ │ ├── skeleton.json │ │ │ │ ├── slider.json │ │ │ │ ├── sonner.json │ │ │ │ ├── switch.json │ │ │ │ ├── table.json │ │ │ │ ├── tabs.json │ │ │ │ ├── textarea.json │ │ │ │ ├── toast.json │ │ │ │ ├── toggle-group.json │ │ │ │ ├── toggle.json │ │ │ │ ├── tooltip.json │ │ │ │ └── trade-ranking.json │ │ │ ├── index.json │ │ │ └── new-york │ │ │ │ ├── accordion.json │ │ │ │ ├── alert-dialog.json │ │ │ │ ├── alert.json │ │ │ │ ├── aspect-ratio.json │ │ │ │ ├── avatar.json │ │ │ │ ├── badge.json │ │ │ │ ├── breadcrumb.json │ │ │ │ ├── button.json │ │ │ │ ├── calendar.json │ │ │ │ ├── card.json │ │ │ │ ├── carousel.json │ │ │ │ ├── checkbox.json │ │ │ │ ├── collapsible.json │ │ │ │ ├── command.json │ │ │ │ ├── context-menu.json │ │ │ │ ├── dialog.json │ │ │ │ ├── drawer.json │ │ │ │ ├── dropdown-menu.json │ │ │ │ ├── form.json │ │ │ │ ├── hover-card.json │ │ │ │ ├── input-otp.json │ │ │ │ ├── input.json │ │ │ │ ├── label.json │ │ │ │ ├── menubar.json │ │ │ │ ├── navigation-menu.json │ │ │ │ ├── pagination.json │ │ │ │ ├── popover.json │ │ │ │ ├── progress.json │ │ │ │ ├── radio-group.json │ │ │ │ ├── resizable.json │ │ │ │ ├── scroll-area.json │ │ │ │ ├── select.json │ │ │ │ ├── separator.json │ │ │ │ ├── sheet.json │ │ │ │ ├── skeleton.json │ │ │ │ ├── slider.json │ │ │ │ ├── sonner.json │ │ │ │ ├── switch.json │ │ │ │ ├── table.json │ │ │ │ ├── tabs.json │ │ │ │ ├── textarea.json │ │ │ │ ├── toast.json │ │ │ │ ├── toggle-group.json │ │ │ │ ├── toggle.json │ │ │ │ └── tooltip.json │ │ ├── themes.css │ │ └── themes │ │ │ ├── gray.json │ │ │ ├── neutral.json │ │ │ ├── slate.json │ │ │ ├── stone.json │ │ │ └── zinc.json │ ├── schema.json │ └── site.webmanifest │ ├── registry │ ├── .eslintrc.json │ ├── colors.ts │ ├── default │ │ ├── example │ │ │ ├── card-demo.tsx │ │ │ ├── collection-demo.tsx │ │ │ ├── collection-stats-demo.tsx │ │ │ ├── nft-card-demo.tsx │ │ │ ├── nfts-by-account-collection-demo.tsx │ │ │ ├── nfts-by-account-demo.tsx │ │ │ ├── skeleton-card.tsx │ │ │ ├── skeleton-demo.tsx │ │ │ └── trade-ranking-demo.tsx │ │ └── ui │ │ │ ├── accordion.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── alert.tsx │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumb.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── card.tsx │ │ │ ├── carousel.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── collection-stats.tsx │ │ │ ├── collection.tsx │ │ │ ├── command.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── dialog.tsx │ │ │ ├── drawer.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── form.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── input-otp.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── loading.tsx │ │ │ ├── menubar.tsx │ │ │ ├── navigation-menu.tsx │ │ │ ├── nft-card.tsx │ │ │ ├── nfts-by-account.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── resizable.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── sonner.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── textarea.tsx │ │ │ ├── toast.tsx │ │ │ ├── toaster.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── trade-ranking.tsx │ │ │ └── use-toast.ts │ ├── registry.ts │ ├── schema.ts │ ├── styles.ts │ └── themes.ts │ ├── scripts │ └── build-registry.ts │ ├── styles │ ├── globals.css │ └── mdx.css │ ├── tailwind.config.cjs │ ├── tsconfig.json │ ├── tsconfig.scripts.json │ └── types │ ├── nav.ts │ └── unist.ts ├── package.json ├── packages └── cli │ ├── .env │ ├── .gitignore │ ├── .prettierignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ ├── commands │ │ ├── add.ts │ │ ├── diff.ts │ │ └── init.ts │ ├── index.ts │ └── utils │ │ ├── get-config.ts │ │ ├── get-package-info.ts │ │ ├── get-package-manager.ts │ │ ├── get-project-info.ts │ │ ├── handle-error.ts │ │ ├── logger.ts │ │ ├── registry │ │ ├── index.ts │ │ └── schema.ts │ │ ├── resolve-import.ts │ │ ├── templates.ts │ │ └── transformers │ │ ├── index.ts │ │ ├── transform-css-vars.ts │ │ ├── transform-import.ts │ │ ├── transform-jsx.ts │ │ ├── transform-rsc.ts │ │ └── transform-tw-prefix.ts │ ├── test │ ├── commands │ │ └── init.test.ts │ ├── fixtures │ │ ├── colors │ │ │ ├── neutral.json │ │ │ ├── slate.json │ │ │ ├── stone.json │ │ │ └── zinc.json │ │ ├── config-full │ │ │ ├── components.json │ │ │ ├── package.json │ │ │ └── tsconfig.json │ │ ├── config-invalid │ │ │ ├── components.json │ │ │ └── package.json │ │ ├── config-jsx │ │ │ ├── components.json │ │ │ ├── jsconfig.json │ │ │ └── package.json │ │ ├── config-none │ │ │ └── package.json │ │ ├── config-partial │ │ │ ├── components.json │ │ │ ├── package.json │ │ │ └── tsconfig.json │ │ ├── config-ui │ │ │ ├── components.json │ │ │ ├── package.json │ │ │ └── tsconfig.json │ │ ├── next-app-js │ │ │ ├── app │ │ │ │ ├── favicon.ico │ │ │ │ ├── globals.css │ │ │ │ ├── layout.js │ │ │ │ └── page.js │ │ │ ├── jsconfig.json │ │ │ ├── next.config.js │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ └── tailwind.config.js │ │ ├── next-app-src │ │ │ ├── next-env.d.ts │ │ │ ├── next.config.js │ │ │ ├── other.css │ │ │ ├── package.json │ │ │ ├── pnpm-lock.yaml │ │ │ ├── postcss.config.js │ │ │ ├── src │ │ │ │ ├── app │ │ │ │ │ ├── favicon.ico │ │ │ │ │ ├── layout.tsx │ │ │ │ │ ├── other.css │ │ │ │ │ ├── page.tsx │ │ │ │ │ └── styles.css │ │ │ │ └── other.css │ │ │ ├── tailwind.config.ts │ │ │ └── tsconfig.json │ │ ├── next-app │ │ │ ├── app │ │ │ │ ├── favicon.ico │ │ │ │ ├── globals.css │ │ │ │ ├── layout.tsx │ │ │ │ ├── other.css │ │ │ │ └── page.tsx │ │ │ ├── next-env.d.ts │ │ │ ├── next.config.js │ │ │ ├── package.json │ │ │ ├── pnpm-lock.yaml │ │ │ ├── postcss.config.js │ │ │ ├── tailwind.config.ts │ │ │ └── tsconfig.json │ │ ├── next-pages-src │ │ │ ├── next-env.d.ts │ │ │ ├── next.config.js │ │ │ ├── other.css │ │ │ ├── package.json │ │ │ ├── pnpm-lock.yaml │ │ │ ├── postcss.config.js │ │ │ ├── src │ │ │ │ ├── other.css │ │ │ │ ├── pages │ │ │ │ │ ├── _app.tsx │ │ │ │ │ ├── _document.tsx │ │ │ │ │ ├── api │ │ │ │ │ │ └── hello.ts │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── other.css │ │ │ │ └── styles │ │ │ │ │ ├── globals.css │ │ │ │ │ └── other.css │ │ │ ├── tailwind.config.ts │ │ │ └── tsconfig.json │ │ ├── next-pages │ │ │ ├── next.config.js │ │ │ ├── package.json │ │ │ ├── pages │ │ │ │ ├── _app.tsx │ │ │ │ ├── _document.tsx │ │ │ │ ├── api │ │ │ │ │ └── hello.ts │ │ │ │ ├── index.tsx │ │ │ │ └── other.css │ │ │ ├── pnpm-lock.yaml │ │ │ ├── postcss.config.js │ │ │ ├── styles │ │ │ │ ├── globals.css │ │ │ │ └── other.css │ │ │ ├── tailwind.config.ts │ │ │ └── tsconfig.json │ │ ├── next-src │ │ │ ├── .gitignore │ │ │ ├── next.config.js │ │ │ ├── package.json │ │ │ ├── src │ │ │ │ └── app │ │ │ │ │ └── globals.css │ │ │ ├── tailwind.config.js │ │ │ └── tsconfig.json │ │ ├── next │ │ │ ├── .gitignore │ │ │ ├── app │ │ │ │ └── globals.css │ │ │ ├── next.config.js │ │ │ ├── package.json │ │ │ ├── pnpm-lock.yaml │ │ │ ├── tailwind.config.js │ │ │ └── tsconfig.json │ │ ├── project-bun │ │ │ ├── bun.lockb │ │ │ └── package.json │ │ ├── project-npm │ │ │ ├── package-lock.json │ │ │ └── package.json │ │ ├── project-pnpm │ │ │ ├── package.json │ │ │ └── pnpm-lock.yaml │ │ ├── project-src │ │ │ ├── components.json │ │ │ ├── package-lock.json │ │ │ └── package.json │ │ ├── project-yarn │ │ │ ├── package.json │ │ │ └── yarn.lock │ │ ├── project │ │ │ ├── components.json │ │ │ ├── package.json │ │ │ └── pnpm-lock.yaml │ │ ├── t3-app │ │ │ ├── .eslintrc.cjs │ │ │ ├── .gitignore │ │ │ ├── next.config.mjs │ │ │ ├── package.json │ │ │ ├── src │ │ │ │ ├── env.mjs │ │ │ │ ├── pages │ │ │ │ │ ├── _app.tsx │ │ │ │ │ └── index.tsx │ │ │ │ └── styles │ │ │ │ │ └── globals.css │ │ │ ├── tailwind.config.ts │ │ │ └── tsconfig.json │ │ ├── with-base-url │ │ │ └── tsconfig.json │ │ └── without-base-url │ │ │ └── tsconfig.json │ └── utils │ │ ├── __snapshots__ │ │ ├── transform-css-vars.test.ts.snap │ │ ├── transform-import.test.ts.snap │ │ ├── transform-rsc.test.ts.snap │ │ └── transform-tw-prefix.test.ts.snap │ │ ├── apply-color-mapping.test.ts │ │ ├── apply-prefix.test.ts │ │ ├── get-config.test.ts │ │ ├── get-item-target-path.test.ts │ │ ├── get-package-manager.test.ts │ │ ├── get-project-type.test.ts │ │ ├── get-tailwind-css-file.test.ts │ │ ├── get-ts-config-alias-prefix.test.ts │ │ ├── is-typescript-project.test.ts │ │ ├── registry.test.ts │ │ ├── resolve-import.test.ts │ │ ├── transform-css-vars.test.ts │ │ ├── transform-import.test.ts │ │ ├── transform-rsc.test.ts │ │ └── transform-tw-prefix.test.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── postcss.config.cjs ├── prettier.config.cjs ├── scripts └── sync-templates.sh ├── tailwind.config.cjs ├── templates └── next-template │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.json │ ├── .gitignore │ ├── .prettierignore │ ├── .vscode │ └── settings.json │ ├── README.md │ ├── app │ ├── layout.tsx │ └── page.tsx │ ├── components.json │ ├── components │ ├── icons.tsx │ ├── main-nav.tsx │ ├── site-header.tsx │ ├── tailwind-indicator.tsx │ ├── theme-provider.tsx │ ├── theme-toggle.tsx │ └── ui │ │ └── button.tsx │ ├── config │ └── site.ts │ ├── lib │ ├── fonts.ts │ └── utils.ts │ ├── next-env.d.ts │ ├── next.config.mjs │ ├── package.json │ ├── postcss.config.js │ ├── prettier.config.js │ ├── public │ ├── favicon.ico │ ├── next.svg │ ├── thirteen.svg │ └── vercel.svg │ ├── styles │ └── globals.css │ ├── tailwind.config.js │ ├── tsconfig.json │ └── types │ └── nav.ts ├── tsconfig.json ├── turbo.json └── vitest.config.ts /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json", 3 | "changelog": ["@changesets/changelog-github", { "repo": "code100x/ui" }], 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["www", "**-template"] 11 | } 12 | -------------------------------------------------------------------------------- /.changeset/wet-eagles-leave.md: -------------------------------------------------------------------------------- 1 | --- 2 | "code100x-ui": patch 3 | --- 4 | 5 | update zod imports 6 | -------------------------------------------------------------------------------- /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | COMPONENTS_REGISTRY_URL=http://localhost:3001 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // This configuration only applies to the package manager root. 2 | /** @type {import("eslint").Linter.Config} */ 3 | module.exports = { 4 | ignorePatterns: ["apps/**", "packages/**"], 5 | extends: ["@repo/eslint-config/library.js"], 6 | parser: "@typescript-eslint/parser", 7 | parserOptions: { 8 | project: true, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/eslintrc", 3 | "root": true, 4 | "extends": [ 5 | "next/core-web-vitals", 6 | "turbo", 7 | "prettier", 8 | "plugin:tailwindcss/recommended" 9 | ], 10 | "plugins": ["tailwindcss"], 11 | "rules": { 12 | "@next/next/no-html-link-for-pages": "off", 13 | "tailwindcss/no-custom-classname": "off", 14 | "tailwindcss/classnames-order": "error" 15 | }, 16 | "settings": { 17 | "tailwindcss": { 18 | "callees": ["cn", "cva"], 19 | "config": "tailwind.config.cjs" 20 | }, 21 | "next": { 22 | "rootDir": ["apps/*/"] 23 | } 24 | }, 25 | "overrides": [ 26 | { 27 | "files": ["*.ts", "*.tsx"], 28 | "parser": "@typescript-eslint/parser" 29 | } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Get Help 4 | url: https://github.com/code100x/ui/discussions/new?category=general 5 | about: If you can't get something to work the way you expect, open a question in our discussion forums. -------------------------------------------------------------------------------- /.github/changeset-version.js: -------------------------------------------------------------------------------- 1 | // ORIGINALLY FROM CLOUDFLARE WRANGLER: 2 | // https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js 3 | 4 | import { exec } from "child_process" 5 | 6 | // This script is used by the `release.yml` workflow to update the version of the packages being released. 7 | // The standard step is only to run `changeset version` but this does not update the package-lock.json file. 8 | // So we also run `npm install`, which does this update. 9 | // This is a workaround until this is handled automatically by `changeset version`. 10 | // See https://github.com/changesets/changesets/issues/421. 11 | exec("npx changeset version") 12 | exec("npm install") 13 | -------------------------------------------------------------------------------- /.github/version-script-beta.js: -------------------------------------------------------------------------------- 1 | // ORIGINALLY FROM CLOUDFLARE WRANGLER: 2 | // https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js 3 | 4 | import { exec } from "child_process" 5 | import fs from "fs" 6 | 7 | const pkgJsonPath = "packages/cli/package.json" 8 | try { 9 | const pkg = JSON.parse(fs.readFileSync(pkgJsonPath)) 10 | exec("git rev-parse --short HEAD", (err, stdout) => { 11 | if (err) { 12 | console.log(err) 13 | process.exit(1) 14 | } 15 | pkg.version = "0.0.0-beta." + stdout.trim() 16 | fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n") 17 | }) 18 | } catch (error) { 19 | console.error(error) 20 | process.exit(1) 21 | } 22 | -------------------------------------------------------------------------------- /.github/version-script-next.js: -------------------------------------------------------------------------------- 1 | // ORIGINALLY FROM CLOUDFLARE WRANGLER: 2 | // https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js 3 | 4 | import { exec } from "child_process" 5 | import fs from "fs" 6 | 7 | const pkgJsonPath = "packages/cli/package.json" 8 | try { 9 | const pkg = JSON.parse(fs.readFileSync(pkgJsonPath)) 10 | exec("git rev-parse --short HEAD", (err, stdout) => { 11 | if (err) { 12 | console.log(err) 13 | process.exit(1) 14 | } 15 | pkg.version = "0.0.0-next." + stdout.trim() 16 | fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n") 17 | }) 18 | } catch (error) { 19 | console.error(error) 20 | process.exit(1) 21 | } 22 | -------------------------------------------------------------------------------- /.github/workflows/issue-stale.yml: -------------------------------------------------------------------------------- 1 | # Adapted from vercel/next.js 2 | name: Issue Stale 3 | on: 4 | workflow_dispatch: 5 | schedule: 6 | # This runs every day 20 minutes before midnight: https://crontab.guru/#40_23_*_*_* 7 | - cron: "40 23 * * *" 8 | 9 | jobs: 10 | stale: 11 | runs-on: ubuntu-latest 12 | if: github.repository_owner == 'code100x' 13 | steps: 14 | - uses: actions/stale@v4 15 | id: stale-no-repro 16 | name: "Close stale issues with no reproduction" 17 | with: 18 | repo-token: ${{ secrets.STALE_TOKEN }} 19 | close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you." 20 | days-before-issue-close: 7 21 | days-before-issue-stale: 15 22 | stale-pr-label: "stale?" 23 | days-before-pr-close: -1 24 | days-before-pr-stale: -1 25 | exempt-issue-labels: "roadmap,next,bug" 26 | operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close 27 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | # Adapted from create-t3-app. 2 | 3 | name: Release 4 | 5 | on: 6 | push: 7 | branches: 8 | - main 9 | 10 | jobs: 11 | release: 12 | if: ${{ github.repository_owner == 'code100x' }} 13 | name: Create a PR for release workflow 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout Repo 17 | uses: actions/checkout@v3 18 | with: 19 | fetch-depth: 0 20 | 21 | - name: Use PNPM 22 | uses: pnpm/action-setup@v2.2.4 23 | with: 24 | version: 8.6.1 25 | 26 | - name: Use Node.js 18 27 | uses: actions/setup-node@v3 28 | with: 29 | version: 8.6.1 30 | node-version: 18 31 | cache: "pnpm" 32 | 33 | - name: Install NPM Dependencies 34 | run: pnpm install 35 | 36 | # - name: Check for errors 37 | # run: pnpm check 38 | 39 | - name: Build the package 40 | run: pnpm build:cli 41 | 42 | - name: Create Version PR or Publish to NPM 43 | id: changesets 44 | uses: changesets/action@v1.4.1 45 | with: 46 | commit: "chore(release): version packages" 47 | title: "chore(release): version packages" 48 | version: node .github/changeset-version.js 49 | publish: npx changeset publish 50 | env: 51 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 52 | NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }} 53 | NODE_ENV: "production" 54 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | pull_request: 5 | branches: ["*"] 6 | 7 | jobs: 8 | test: 9 | runs-on: ubuntu-latest 10 | name: pnpm test 11 | steps: 12 | - uses: actions/checkout@v3 13 | with: 14 | fetch-depth: 0 15 | 16 | - name: Install Node.js 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: 18 20 | 21 | - uses: pnpm/action-setup@v2.2.4 22 | name: Install pnpm 23 | id: pnpm-install 24 | with: 25 | version: 8.6.1 26 | run_install: false 27 | 28 | - name: Get pnpm store directory 29 | id: pnpm-cache 30 | run: | 31 | echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT 32 | - uses: actions/cache@v3 33 | name: Setup pnpm cache 34 | with: 35 | path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} 36 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 37 | restore-keys: | 38 | ${{ runner.os }}-pnpm-store- 39 | - name: Install dependencies 40 | run: pnpm install 41 | 42 | - run: pnpm test 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .pnpm-debug.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | 32 | # turbo 33 | .turbo 34 | 35 | .contentlayer 36 | tsconfig.tsbuildinfo -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.kodiak.toml: -------------------------------------------------------------------------------- 1 | # .kodiak.toml 2 | version = 1 3 | 4 | [merge] 5 | automerge_label = "automerge" 6 | require_automerge_label = true 7 | method = "squash" 8 | delete_branch_on_merge = true 9 | optimistic_updates = false 10 | prioritize_ready_to_merge = true 11 | notify_on_conflict = true 12 | 13 | [merge.message] 14 | title = "pull_request_title" 15 | body = "pull_request_body" 16 | include_pr_number = true 17 | body_type = "markdown" 18 | strip_html_comments = true 19 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | auto-install-peers=true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18.17.0 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .next 4 | build 5 | .contentlayer 6 | apps/www/pages/api/registry.json -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.workingDirectories": [ 3 | { "pattern": "apps/*/" }, 4 | { "pattern": "packages/*/" } 5 | ], 6 | "tailwindCSS.experimental.classRegex": [ 7 | ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], 8 | ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 code100x 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # code100x/ui 2 | 3 | Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**. 4 | 5 | ![hero](apps/www/public/og.jpg) 6 | 7 | ## Documentation 8 | 9 | Visit http://ui.code100x.com/docs to view the documentation. 10 | 11 | ## Contributing 12 | 13 | Please read the [contributing guide](/CONTRIBUTING.md). 14 | 15 | ## License 16 | 17 | Licensed under the [MIT license](https://github.com/code100x/ui/blob/main/LICENSE.md). 18 | -------------------------------------------------------------------------------- /apps/www/.env.example: -------------------------------------------------------------------------------- 1 | # ----------------------------------------------------------------------------- 2 | # App 3 | # ----------------------------------------------------------------------------- 4 | NEXT_PUBLIC_APP_URL=http://localhost:3001 5 | NEXT_PUBLIC_NFTSCAN_KEY= -------------------------------------------------------------------------------- /apps/www/.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .env -------------------------------------------------------------------------------- /apps/www/.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .next 4 | build 5 | .contentlayer 6 | __registry__/index.tsx 7 | app/examples/mail/components/mail.tsx 8 | -------------------------------------------------------------------------------- /apps/www/__registry__/.autogenerated: -------------------------------------------------------------------------------- 1 | // The content of this directory is autogenerated by the registry server. 2 | -------------------------------------------------------------------------------- /apps/www/__registry__/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code100x/web3-frontends/f396856a1637e9ff0444fa5fc3aa03c7126a8070/apps/www/__registry__/.gitkeep -------------------------------------------------------------------------------- /apps/www/__registry__/README.md: -------------------------------------------------------------------------------- 1 | > Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - code100x 2 | -------------------------------------------------------------------------------- /apps/www/app/docs/layout.tsx: -------------------------------------------------------------------------------- 1 | import { docsConfig } from "@/config/docs" 2 | import { DocsSidebarNav } from "@/components/sidebar-nav" 3 | import { ScrollArea } from "@/registry/default/ui/scroll-area" 4 | 5 | interface DocsLayoutProps { 6 | children: React.ReactNode 7 | } 8 | 9 | export default function DocsLayout({ children }: DocsLayoutProps) { 10 | return ( 11 |
12 |
13 | 18 | {children} 19 |
20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /apps/www/app/themes/page.tsx: -------------------------------------------------------------------------------- 1 | import { Metadata } from "next" 2 | 3 | import "public/registry/themes.css" 4 | import { Announcement } from "@/components/announcement" 5 | import { 6 | PageActions, 7 | PageHeader, 8 | PageHeaderDescription, 9 | PageHeaderHeading, 10 | } from "@/components/page-header" 11 | import { ThemeCustomizer } from "@/components/theme-customizer" 12 | import { ThemeWrapper } from "@/components/theme-wrapper" 13 | import { ThemesTabs } from "@/app/themes/tabs" 14 | 15 | export const metadata: Metadata = { 16 | title: "Themes", 17 | description: "Hand-picked themes that you can copy and paste into your apps.", 18 | } 19 | 20 | export default function ThemesPage() { 21 | return ( 22 |
23 | 27 | 28 | {/* */} 29 | 30 | Add colors. Make it yours. 31 | 32 | 33 | Make it yours 34 | 35 | 36 | Hand-picked themes that you can copy and paste into your apps. 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /apps/www/assets/fonts/Inter-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code100x/web3-frontends/f396856a1637e9ff0444fa5fc3aa03c7126a8070/apps/www/assets/fonts/Inter-Bold.ttf -------------------------------------------------------------------------------- /apps/www/assets/fonts/Inter-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code100x/web3-frontends/f396856a1637e9ff0444fa5fc3aa03c7126a8070/apps/www/assets/fonts/Inter-Regular.ttf -------------------------------------------------------------------------------- /apps/www/components/analytics.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { Analytics as VercelAnalytics } from "@vercel/analytics/react" 4 | 5 | export function Analytics() { 6 | return 7 | } 8 | -------------------------------------------------------------------------------- /apps/www/components/announcement.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link" 2 | import { ArrowRightIcon } from "@radix-ui/react-icons" 3 | 4 | import { Separator } from "@/registry/default/ui/separator" 5 | 6 | export function Announcement() { 7 | return ( 8 | 12 | 🎉 {" "} 13 | New components and more. 14 | 15 | New components, breadcrumb and input otp. 16 | 17 | 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /apps/www/components/callout.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Alert, 3 | AlertDescription, 4 | AlertTitle, 5 | } from "@/registry/default/ui/alert" 6 | 7 | interface CalloutProps { 8 | icon?: string 9 | title?: string 10 | children?: React.ReactNode 11 | } 12 | 13 | export function Callout({ title, children, icon, ...props }: CalloutProps) { 14 | return ( 15 | 16 | {icon && {icon}} 17 | {title && {title}} 18 | {children} 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /apps/www/components/component-card.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | import { AspectRatio } from "@/registry/default/ui/aspect-ratio" 5 | 6 | export function ComponentCard({ 7 | className, 8 | ...props 9 | }: React.HTMLAttributes) { 10 | return ( 11 | 12 |
19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /apps/www/components/component-source.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | 5 | import { cn } from "@/lib/utils" 6 | import { CodeBlockWrapper } from "@/components/code-block-wrapper" 7 | 8 | interface ComponentSourceProps extends React.HTMLAttributes { 9 | src: string 10 | } 11 | 12 | export function ComponentSource({ 13 | children, 14 | className, 15 | ...props 16 | }: ComponentSourceProps) { 17 | return ( 18 | 22 | {children} 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /apps/www/components/drawer.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { forwardRef } from "react" 4 | import { Drawer as DrawerPrimitive } from "vaul" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const DrawerTrigger = DrawerPrimitive.Trigger 9 | 10 | const DrawerContent = forwardRef< 11 | React.ElementRef, 12 | React.ComponentPropsWithoutRef 13 | >(({ className, children, ...props }, ref) => ( 14 | 15 | 16 | 24 |
25 | {children} 26 | 27 | 28 | )) 29 | DrawerContent.displayName = "DrawerContent" 30 | 31 | export { DrawerTrigger, DrawerContent } 32 | -------------------------------------------------------------------------------- /apps/www/components/framework-docs.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { allDocs } from "contentlayer/generated" 5 | 6 | import { Mdx } from "./mdx-components" 7 | 8 | interface FrameworkDocsProps extends React.HTMLAttributes { 9 | data: string 10 | } 11 | 12 | export function FrameworkDocs({ ...props }: FrameworkDocsProps) { 13 | const frameworkDoc = allDocs.find( 14 | (doc) => doc.slug === `/docs/installation/${props.data}` 15 | ) 16 | 17 | if (!frameworkDoc) { 18 | return null 19 | } 20 | 21 | return 22 | } 23 | -------------------------------------------------------------------------------- /apps/www/components/mode-toggle.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { MoonIcon, SunIcon } from "@radix-ui/react-icons" 5 | import { useTheme } from "next-themes" 6 | 7 | import { Button } from "@/registry/default/ui/button" 8 | import { 9 | DropdownMenu, 10 | DropdownMenuContent, 11 | DropdownMenuItem, 12 | DropdownMenuTrigger, 13 | } from "@/registry/default/ui/dropdown-menu" 14 | 15 | export function ModeToggle() { 16 | const { setTheme } = useTheme() 17 | 18 | return ( 19 | 20 | 21 | 26 | 27 | 28 | setTheme("light")}> 29 | Light 30 | 31 | setTheme("dark")}> 32 | Dark 33 | 34 | setTheme("system")}> 35 | System 36 | 37 | 38 | 39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /apps/www/components/promo-video.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { AspectRatio } from "@/registry/default/ui/aspect-ratio" 4 | 5 | export function PromoVideo() { 6 | return ( 7 | 11 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /apps/www/components/providers.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { ThemeProvider as NextThemesProvider } from "next-themes" 5 | import { ThemeProviderProps } from "next-themes/dist/types" 6 | 7 | import { TooltipProvider } from "@/registry/default/ui/tooltip" 8 | 9 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 10 | return ( 11 | 12 | {children} 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /apps/www/components/site-footer.tsx: -------------------------------------------------------------------------------- 1 | import { siteConfig } from "@/config/site" 2 | 3 | export function SiteFooter() { 4 | return ( 5 | 30 | ) 31 | } 32 | -------------------------------------------------------------------------------- /apps/www/components/style-switcher.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { type SelectTriggerProps } from "@radix-ui/react-select" 5 | 6 | import { cn } from "@/lib/utils" 7 | import { useConfig } from "@/hooks/use-config" 8 | import { 9 | Select, 10 | SelectContent, 11 | SelectItem, 12 | SelectTrigger, 13 | SelectValue, 14 | } from "@/registry/default/ui/select" 15 | import { Style, styles } from "@/registry/styles" 16 | 17 | export function StyleSwitcher({ className }: SelectTriggerProps) { 18 | const [config, setConfig] = useConfig() 19 | 20 | return ( 21 | 47 | ) 48 | } 49 | -------------------------------------------------------------------------------- /apps/www/components/style-wrapper.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | 5 | import { useConfig } from "@/hooks/use-config" 6 | import { Style } from "@/registry/styles" 7 | 8 | interface StyleWrapperProps extends React.HTMLAttributes { 9 | styleName?: Style["name"] 10 | } 11 | 12 | export function StyleWrapper({ styleName, children }: StyleWrapperProps) { 13 | const [config] = useConfig() 14 | 15 | if (!styleName || config.style === styleName) { 16 | return <>{children} 17 | } 18 | 19 | return null 20 | } 21 | -------------------------------------------------------------------------------- /apps/www/components/tailwind-indicator.tsx: -------------------------------------------------------------------------------- 1 | export function TailwindIndicator() { 2 | if (process.env.NODE_ENV === "production") return null 3 | 4 | return ( 5 |
6 |
xs
7 |
sm
8 |
md
9 |
lg
10 |
xl
11 |
2xl
12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /apps/www/components/theme-component.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { Index } from "@/__registry__" 5 | 6 | import { cn } from "@/lib/utils" 7 | import { useConfig } from "@/hooks/use-config" 8 | import { Icons } from "@/components/icons" 9 | 10 | interface ThemeComponentProps extends React.HTMLAttributes { 11 | name: string 12 | extractClassname?: boolean 13 | extractedClassNames?: string 14 | align?: "center" | "start" | "end" 15 | } 16 | 17 | export function ThemeComponent({ name, ...props }: ThemeComponentProps) { 18 | const [config] = useConfig() 19 | 20 | const Preview = React.useMemo(() => { 21 | const Component = Index[config.style][name]?.component 22 | 23 | if (!Component) { 24 | return ( 25 |

26 | Component{" "} 27 | 28 | {name} 29 | {" "} 30 | not found in registry. 31 |

32 | ) 33 | } 34 | 35 | return 36 | }, [name, config.style]) 37 | 38 | return ( 39 |
40 | 43 | 44 | Loading... 45 |
46 | } 47 | > 48 | {Preview} 49 | 50 |
51 | ) 52 | } 53 | -------------------------------------------------------------------------------- /apps/www/components/theme-switcher.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { useSelectedLayoutSegment } from "next/navigation" 5 | 6 | import { useConfig } from "@/hooks/use-config" 7 | 8 | export function ThemeSwitcher() { 9 | const [config] = useConfig() 10 | const segment = useSelectedLayoutSegment() 11 | 12 | React.useEffect(() => { 13 | document.body.classList.forEach((className) => { 14 | if (className.match(/^theme.*/)) { 15 | document.body.classList.remove(className) 16 | } 17 | }) 18 | 19 | const theme = segment === "themes" ? config.theme : null 20 | if (theme) { 21 | return document.body.classList.add(`theme-${theme}`) 22 | } 23 | }, [segment, config]) 24 | 25 | return null 26 | } 27 | -------------------------------------------------------------------------------- /apps/www/components/theme-wrapper.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { cn } from "@/lib/utils" 4 | import { useConfig } from "@/hooks/use-config" 5 | 6 | interface ThemeWrapperProps extends React.ComponentProps<"div"> { 7 | defaultTheme?: string 8 | } 9 | 10 | export function ThemeWrapper({ 11 | defaultTheme, 12 | children, 13 | className, 14 | }: ThemeWrapperProps) { 15 | const [config] = useConfig() 16 | 17 | return ( 18 |
30 | {children} 31 |
32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /apps/www/config/site.ts: -------------------------------------------------------------------------------- 1 | export const siteConfig = { 2 | name: "code100x/ui", 3 | url: "https://ui.code100x.com", 4 | ogImage: "https://ui.code100x.com/og.jpg", 5 | description: 6 | "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.", 7 | links: { 8 | twitter: "https://twitter.com/code100x", 9 | github: "https://github.com/code100x/ui", 10 | }, 11 | } 12 | 13 | export type SiteConfig = typeof siteConfig 14 | -------------------------------------------------------------------------------- /apps/www/content/docs/about.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | description: Powered by amazing open source projects. 4 | --- 5 | 6 | ## About 7 | 8 | [ui.code100x.com](https://ui.code100x.com) is a project by [code100x](https://code100x.com). 9 | 10 | ## Credits 11 | 12 | - [Radix UI](https://radix-ui.com) - For the primitives. 13 | - [Vercel](https://vercel.com) - Where I host all my projects. 14 | - [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra. 15 | - [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`. 16 | - [cmdk](https://cmdk.paco.me) - For the `` component. 17 | 18 | ## License 19 | 20 | MIT © [code100x](https://code100x.com) 21 | -------------------------------------------------------------------------------- /apps/www/content/docs/figma.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Figma 3 | description: Every component recreated in Figma. With customizable props, typography and icons. 4 | --- 5 | 6 | The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skirano). 7 | 8 | 9 |