{"id":13810074,"url":"https://github.com/stormynight9/clerk-shadcn-theme","last_synced_at":"2025-04-05T04:08:46.945Z","repository":{"id":207059007,"uuid":"718331381","full_name":"stormynight9/clerk-shadcn-theme","owner":"stormynight9","description":"Easily synchronize your Clerk components with your shadcn/ui styles.","archived":false,"fork":false,"pushed_at":"2025-02-20T19:46:12.000Z","size":56,"stargazers_count":178,"open_issues_count":6,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T03:03:46.360Z","etag":null,"topics":["clerk","css","shadcn"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stormynight9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-13T21:32:06.000Z","updated_at":"2025-03-29T01:57:33.000Z","dependencies_parsed_at":"2024-02-28T21:30:23.735Z","dependency_job_id":"14472ce4-aa2b-4646-9cf5-77a9e49504dc","html_url":"https://github.com/stormynight9/clerk-shadcn-theme","commit_stats":null,"previous_names":["stormynight9/clerk-shadcn-theme"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stormynight9%2Fclerk-shadcn-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stormynight9%2Fclerk-shadcn-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stormynight9%2Fclerk-shadcn-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stormynight9%2Fclerk-shadcn-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stormynight9","download_url":"https://codeload.github.com/stormynight9/clerk-shadcn-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284943,"owners_count":20913704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clerk","css","shadcn"],"created_at":"2024-08-04T02:00:45.008Z","updated_at":"2025-04-05T04:08:46.889Z","avatar_url":"https://github.com/stormynight9.png","language":"CSS","funding_links":[],"categories":["Libs and Components","Colors And Customizations","Themes \u0026 Customizations"],"sub_categories":[],"readme":"# clerk-shadcn-theme\nEasily synchronize your Clerk components with your Shadcn styles using the provided CSS styles.\n\n![Screenshot_4](https://github.com/stormynight9/clerk-shadcn-theme/assets/81434423/65804b03-cf66-43e0-ab19-9158c6ecf003)\n\n\nThis theme supports:\n* ```\u003cSignIn /\u003e```\n* ```\u003cSignUp /\u003e```\n* ```\u003cUserButton /\u003e```\n* ```\u003cUserProfile /\u003e```\n  \n## Setup\n\n1. Configure your primary color:\n```jsx\n\u003cClerkProvider\n    appearance={{\n        variables: {\n            colorPrimary: 'hsl(263.4, 70%, 50.4%)', // change this value (you can get it from you're css variables, make sure to include 'hsl' and commas)\n                },\n            }}\n\u003e\n...\n\u003c/ClerkProvider\u003e\n```\n# Clerk Core 2\nIf you're using older version of Clerk, scroll down.\n\n2. Copy and paste the following code into your global CSS file, and you're good to go!\n```css\n.cl-formButtonPrimary {\n    @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-primary px-3  font-medium text-primary-foreground !shadow-none ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;\n}\n\n.cl-card,\n.cl-socialButtonsBlockButton,\n.cl-alert,\n.cl-phoneInputBox,\n.cl-userButtonPopoverCard {\n    @apply rounded-lg border border-input bg-background;\n}\n\n.cl-headerTitle,\n.cl-socialButtonsBlockButtonText,\n.cl-loading,\n.cl-formFieldLabel,\n.cl-formHeaderTitle,\n.cl-selectButton__countryCode,\n.cl-selectButton__countryCode p,\n.cl-selectOption p,\n.cl-selectOption div,\n.cl-modalCloseButton,\n.cl-navbarButton,\n.cl-breadcrumbsItem.cl-breadcrumbsItem__currentPage,\n.cl-profileSectionTitle p,\n.cl-userPreviewTextContainer,\n.cl-profileSectionContent p,\n.cl-form p,\n.cl-accordionTriggerButton {\n    @apply dark:text-foreground;\n}\n\n.cl-headerSubtitle,\n.cl-dividerText,\n.cl-footerActionText,\n.cl-alertText,\n.cl-formFieldInfoText,\n.cl-formFieldSuccessText,\n.cl-identityPreviewText,\n.cl-userButtonPopoverActionButton,\n.cl-userButtonPopoverActionButton svg,\n.cl-userButtonPopoverActionButtonText,\n.cl-userButtonPopoverFooter p,\n.cl-userButtonPopoverFooter a,\n.cl-formHeaderSubtitle,\n.cl-breadcrumbsItem,\n.cl-breadcrumbsItemDivider,\n.cl-fileDropAreaHint,\n.cl-fileDropAreaFooterHint,\n.cl-form\n    p[data-localization-key='userProfile.emailAddressPage.emailCode.formHint'],\np[data-localization-key='userProfile.profilePage.successMessage'] {\n    @apply text-muted-foreground;\n}\n\n.cl-dividerLine {\n    @apply bg-border;\n}\n\n.cl-formFieldInput[type='text'],\n.cl-formFieldInput[type='email'],\n.cl-formFieldInput[type='password'] {\n    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;\n}\n\n.cl-footerActionLink {\n    @apply text-accent-foreground underline hover:text-accent-foreground/90;\n}\n\n.cl-otpCodeFieldInput {\n    @apply !border !border-input text-foreground;\n}\n\n.cl-formResendCodeLink {\n    @apply text-primary disabled:opacity-90;\n}\n\n.cl-selectSearchInput__countryCode {\n    @apply flex h-10 w-full rounded-md border border-b border-input bg-background text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;\n}\n\n.cl-selectOptionsContainer__countryCode {\n    @apply border border-input bg-background;\n}\n\n.cl-internal-icon,\n.cl-userPreviewSecondaryIdentifier__userButton {\n    @apply text-foreground;\n}\n\nbutton[data-localization-key='userProfile.start.dangerSection.deleteAccountButton'] {\n    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;\n}\n\n.cl-fileDropAreaBox {\n    @apply dark:bg-gray-900;\n}\n\n.cl-fileDropAreaIconBox {\n    @apply dark:bg-gray-800;\n}\n\n.cl-fileDropAreaIcon {\n    @apply dark:text-gray-400;\n}\n\n.cl-fileDropAreaButtonPrimary {\n    @apply h-10 px-4 py-2 text-foreground transition-colors hover:bg-secondary hover:text-accent-foreground;\n}\n\n.cl-userButtonPopoverActionButton,\n.cl-profileSectionPrimaryButton,\n.cl-accordionTriggerButton,\n.cl-navbarButton {\n    @apply hover:bg-accent hover:text-accent-foreground;\n}\n\n.cl-card {\n    @apply rounded-lg shadow-md;\n}\n\n.cl-userButtonPopoverCard {\n    @apply rounded-md;\n}\n\n.cl-userButtonPopoverFooter a {\n    @apply hover:text-muted-foreground;\n}\n\n.cl-badge {\n    @apply rounded-full border border-input bg-background px-2.5 py-0.5 text-xs text-foreground !shadow-none;\n}\n\n.cl-badge[data-localization-key='badge__unverified'] {\n    @apply border bg-transparent text-destructive dark:text-red-500;\n}\n\n.cl-formButtonReset {\n    @apply text-foreground hover:bg-secondary;\n}\n\n.cl-footer {\n    @apply rounded-b-lg border-x border-b bg-background bg-gradient-to-t from-background to-background  text-muted-foreground;\n}\n.cl-userButtonPopoverFooter {\n    @apply rounded-b-lg bg-gradient-to-t from-background to-background;\n}\n\n.cl-signIn-start,\n.cl-signUp-start,\n.cl-signIn-password,\n.cl-signIn-alternativeMethods,\n.cl-signIn-emailCode {\n    @apply rounded-b-none border-b-0;\n}\n\n.cl-cardBox {\n    @apply rounded-lg shadow-sm;\n}\n\n.cl-socialButtonsBlockButton {\n    @apply h-10 !border;\n}\n\n.cl-alternativeMethods .cl-alternativeMethodsBlockButton {\n    @apply h-10 !border border-input text-muted-foreground;\n}\n\n.cl-alternativeMethodsBlockButton {\n    @apply h-10 !shadow-none;\n}\n\n.cl-navbar {\n    @apply rounded-lg border-y border-l bg-gradient-to-t from-background to-background;\n}\n\n.cl-scrollBox {\n    @apply rounded-lg rounded-l-none border border-input bg-gradient-to-t from-background to-background;\n}\n\nh1[data-localization-key='userProfile.navbar.title'] {\n    @apply text-foreground;\n}\n\n.cl-profilePage \u003e .cl-header {\n    @apply border-b;\n}\n\n.cl-profileSection__profile,\n.cl-profileSection__emailAddresses {\n    @apply border-b;\n}\n\n.cl-menuButton {\n    @apply text-foreground hover:text-foreground;\n}\n\n.cl-menuList {\n    @apply border border-input bg-background;\n}\n\n.cl-actionCard {\n    @apply border border-input bg-background;\n}\n\n.cl-menuItem[data-color='neutral'] {\n    @apply text-foreground hover:bg-muted;\n}\n\n.cl-avatarImageActionsUpload {\n    @apply !border border-input text-foreground;\n}\n\n.cl-userButtonPopoverMain {\n    @apply rounded-lg border-input bg-background;\n}\n\n.cl-navbarMobileMenuRow {\n    @apply rounded-lg border-x border-t bg-gradient-to-t from-background to-background;\n}\n\n.cl-navbarMobileMenuButton {\n    @apply text-foreground;\n}\n\n```\n\n# Clerk Core 1\n### For older version\n2. Copy and paste the following code into your global CSS file, and you're good to go!\n```css\n.cl-formButtonPrimary {\n    @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;\n}\n\n.cl-card,\n.cl-socialButtonsBlockButton,\n.cl-alert,\n.cl-identityPreview,\n.cl-phoneInputBox,\n.cl-userButtonPopoverCard {\n    @apply border border-input bg-background;\n}\n\n.cl-headerTitle,\n.cl-socialButtonsBlockButtonText,\n.cl-loading,\n.cl-formFieldLabel,\n.cl-formHeaderTitle,\n.cl-selectButton__countryCode,\n.cl-selectButton__countryCode p,\n.cl-selectOption p,\n.cl-selectOption div,\n.cl-modalCloseButton,\n.cl-navbarButton,\n.cl-breadcrumbsItem.cl-breadcrumbsItem__currentPage,\n.cl-profileSectionTitle p,\n.cl-userPreviewTextContainer,\n.cl-profileSectionContent p,\n.cl-form p,\n.cl-accordionTriggerButton {\n    @apply dark:text-foreground;\n}\n\n.cl-headerSubtitle,\n.cl-dividerText,\n.cl-footerActionText,\n.cl-alertText,\n.cl-formFieldInfoText,\n.cl-formFieldSuccessText,\n.cl-identityPreviewText,\n.cl-userButtonPopoverActionButton,\n.cl-userButtonPopoverActionButton svg,\n.cl-userButtonPopoverActionButtonText,\n.cl-userButtonPopoverFooter p,\n.cl-userButtonPopoverFooter a,\n.cl-formHeaderSubtitle,\n.cl-breadcrumbsItem,\n.cl-breadcrumbsItemDivider,\n.cl-fileDropAreaHint,\n.cl-fileDropAreaFooterHint,\n.cl-form\n    p[data-localization-key='userProfile.emailAddressPage.emailCode.formHint'],\np[data-localization-key='userProfile.profilePage.successMessage'] {\n    @apply text-muted-foreground;\n}\n\n.cl-dividerLine {\n    @apply bg-border;\n}\n\n.cl-formFieldInput[type='text'],\n.cl-formFieldInput[type='email'],\n.cl-formFieldInput[type='password'] {\n    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;\n}\n\n.cl-footerActionLink {\n    @apply text-accent-foreground underline hover:text-accent-foreground/90;\n}\n\n.cl-otpCodeFieldInput {\n    @apply border border-b-input text-foreground;\n}\n\n.cl-formResendCodeLink {\n    @apply text-primary disabled:opacity-90;\n}\n\n.cl-selectSearchInput__countryCode {\n    @apply flex h-10 w-full rounded-md border border-b border-input bg-background text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;\n}\n\n.cl-selectOptionsContainer__countryCode {\n    @apply border border-input bg-background;\n}\n\n.cl-internal-icon,\n.cl-userPreviewSecondaryIdentifier__userButton {\n    @apply text-foreground;\n}\n\n.cl-profileSectionTitle {\n    @apply border-b border-input;\n}\n\nbutton[data-localization-key='userProfile.start.dangerSection.deleteAccountButton'] {\n    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;\n}\n\n.cl-fileDropAreaBox {\n    @apply dark:bg-gray-900;\n}\n\n.cl-fileDropAreaIconBox {\n    @apply dark:bg-gray-800;\n}\n\n.cl-fileDropAreaIcon {\n    @apply dark:text-gray-400;\n}\n\n.cl-fileDropAreaButtonPrimary {\n    @apply h-10 px-4 py-2 text-foreground transition-colors hover:bg-secondary hover:text-accent-foreground;\n}\n\n.cl-userButtonPopoverActionButton,\n.cl-profileSectionPrimaryButton,\n.cl-accordionTriggerButton,\n.cl-navbarButton {\n    @apply hover:bg-accent hover:text-accent-foreground;\n}\n\n.cl-card {\n    @apply rounded-lg shadow-md;\n}\n\n.cl-userButtonPopoverCard {\n    @apply rounded-md;\n}\n\n.cl-userButtonPopoverFooter a {\n    @apply hover:text-muted-foreground;\n}\n\n.cl-badge {\n    @apply rounded-full px-2.5 py-0.5 text-xs;\n}\n\n.cl-badge[data-localization-key='badge__unverified'] {\n    @apply border bg-transparent text-destructive dark:text-red-500;\n}\n\n.cl-formButtonReset {\n    @apply text-foreground hover:bg-secondary;\n}\n\n\n```\nIf you encounter any issues with the theme, please create an issue, and I'll gladly address it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstormynight9%2Fclerk-shadcn-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstormynight9%2Fclerk-shadcn-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstormynight9%2Fclerk-shadcn-theme/lists"}