Posted on Oct 16 In this tutorial, we will customize the Hanko Web Components, drawing inspiration from the following themes:Hanko is an easiest-to-use authentication solution that provides two web components: the Hanko-Auth, dedicated to streamlining the user authentication process, and the Hanko-Profile, where users can manage their account information. We know how important first impressions are, so we want to show you how to customize the components from Hanko to flash your users with a shiny user interface.⭐️⭐️⭐️ https://github.com/teamhanko/hanko ⭐️⭐️⭐️ℹ️ Before we start with the styling process we suggest you to take a look at the guide on how to implement the components in your project, click here.Using CSS variables is one of our recommended approaches to style the hanko-auth and hanko-profile components. You can take a look at the list of CSS variables and the default values. CSS VariablesWhen the Hanko Web Components were created, a selection of properties (CSS Custom Variables) was chosen to rule the design and harmony of the elements inside them. By changing the default value of the specific custom variable all the elements that are styled with the same variable will be updated.Hanko-Auth component:Hanko-Profile component, renaming passkey:You can get the Google inspired UI by changing the value of the following CSS variables in your styles:The use of Shadow Parts is also recommended to style the hanko-auth and hanko-profile components. You can add customization to a specific element inside the components utilizing the ::part selector. The default behavior of the Hanko Web Components is to be attached to the Shadow DOM, which is useful for preventing styles from leaking out of components and applying to other elements. Here is the list of the shadow parts that you can use to style the Hanko Web Components.CSS Shadow PartsWhen the Hanko Web Components were created, a part was added inside some elements by assigning a part attribute to the element. Similar to a class selector in CSS (class="hanko_container"), a part is specified in the HTML element (part="container"). Then the element can be styled using the root name and the ::part selector (hanko-auth::part(container){ background: black; }).Hanko-Auth component:Hanko-Profile component:You can get the Barbie inspired UI by targeting and styling the following ::part selectors in your styles:The best way to achieve amazing results is by combining both suggested approach. Changing the values of the CSS Variables and using the ::part selectors to style the elements is the best way to transform the components at a deeper level.Hanko-Auth component:Hanko-Profile component, adding a secondary email address:You can apply the following styles to get the GitHub inspired UI:Hanko-Auth component:Hanko-Profile component:You can apply the following styles to get the Cal.com inspired UI:This last approach is not recommended by the Hanko team. In order to use this approach, the web components must not be attached to the shadow DOM. You need to manually detach the web components from the Shadow DOM when you register the component:You can use this CSS example file as a reference. To change a specific property you need to override the predefined ones, as shown below:Or you can bring all the styles from scratch by also preventing injecting styles on the component and modifying the value of the CSS classes:This last approach will be tested by styling the following inspired themes, removing all the default styles and bringing our own. We will use the CSS custom classes provided by Hanko to target and style the elements. Hanko-Auth component:Hanko-Profile component:You can see the code for this themed UI hereHanko-Auth component:Hanko-Profile component:You can see the code for this themed UI hereIf you want us to keep creating this type of content for you, please don't forget to leave a star on GitHub for the team!⭐️⭐️⭐️ https://github.com/teamhanko/hanko ⭐️⭐️⭐️Templates let you quickly answer FAQs or store snippets for re-use.Waitting for more great tutorials!! Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse alakkadshaw - Oct 5 Guillaume Duboc - Oct 11 Fady GA 😎 - Oct 5 Mark Edosa - Oct 5 As an open source project, we thrive on your support. Please visit the Hanko project on GitHub and leave a star if you like what we do. Once suspended, hanko will not be able to comment or publish posts until their suspension is removed. Once unsuspended, hanko will be able to comment and publish posts again. Once unpublished, all posts by hanko will become hidden and only accessible to themselves. If hanko is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Esther-Lita. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag hanko: hanko consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging hanko will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.