Clerk Shadcn Theme

Seamless Clerk and Shadcn/ui Styling with clerk-shadcn-theme

clerk-shadcn-theme offers a straightforward CSS solution for developers looking to harmonize the appearance of their Clerk authentication components with the popular shadcn/ui design system. By providing a set of pre-defined CSS classes, this theme ensures that components like SignIn, SignUp, UserButton, and UserProfile adopt your shadcn/ui styles, maintaining visual consistency across your application. This eliminates the need for extensive custom styling, saving development time and effort.

Features:

• SignIn Styling: Applies shadcn/ui aesthetics to the Clerk <SignIn /> component.
• SignUp Styling: Ensures the Clerk <SignUp /> component matches your shadcn/ui theme.
• UserButton Styling: Styles the Clerk <UserButton /> for consistent user menu appearance.
• UserProfile Styling: Integrates shadcn/ui styles with the Clerk <UserProfile /> component.
• Primary Color Configuration: Easy setup of the primary theme color via ClerkProvider's appearance.variables.colorPrimary.
• Simple CSS Integration: Requires only copying provided CSS into a global stylesheet for setup.
• Extensive Clerk Class Targeting: Styles a wide array of Clerk's default CSS classes for buttons, cards, inputs, text, and other UI elements.
• Dark Mode Compatibility: Includes specific styles like .dark:text-foreground for enhanced dark mode appearance.
• Shadcn/ui Aligned Input Fields: Styles text, email, password, OTP, and country code select inputs to match shadcn/ui conventions.
• Uniform Card & Popover Aesthetics: Applies shadcn/ui's bordered and rounded look to cards, social buttons, alerts, and popovers.
• Styled Badges and Alerts: Provides theming for Clerk badges (e.g., 'unverified') and alert messages.
• File Drop Area Theming: Styles the file upload components, including considerations for dark mode.
• Cohesive Navigation Elements: Themes navbars, menu buttons, and menu lists for visual consistency.
• Support for Clerk Core 1 & 2: Provides separate, optimized CSS for both current (Core 2) and older (Core 1) versions of Clerk.
• Tailwind CSS Utility Application: Leverages Tailwind CSS @apply to mirror shadcn/ui's utility-first styling for Clerk components.

Summary:

clerk-shadcn-theme provides a ready-to-use CSS stylesheet that bridges the visual gap between Clerk's authentication components and the shadcn/ui design system. Developers can quickly achieve a cohesive look and feel by configuring a primary color and including the provided CSS. This theme supports key Clerk components like SignIn, SignUp, UserButton, and UserProfile, and offers styling for various UI elements, including inputs, buttons, cards, and dark mode, for both Clerk Core 2 and Core 1.