DEV Community

Cover image for ✨ Make Hanko Components Shine 💫
Esther-Lita for Hanko.io

Posted on

✨ Make Hanko Components Shine 💫

welcome back

TL;DR

In this tutorial, we will customize the Hanko Web Components, drawing inspiration from the following themes:


Hanko Components

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 ⭐️⭐️⭐️
call to action

ℹ️ 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.


Custom CSS Variables 🎨

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 Variables
When 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.

Google Style

Hanko-Auth component:

google inspired hanko-aut

Hanko-Profile component, renaming passkey:

google inspired hanko-profile

You can get the Google inspired UI by changing the value of the following CSS variables in your styles:

:root {
  --color: #424c55;
  --color-shade-1: #d6d6d6;
  --brand-color: #568aed;
  --background-color: #ffffff;
  --border-radius: 4px;
  --font-size: 14px;
  --item-height: 44px;
  --headline1-font-size: 28px;
  --headline1-font-weight: 450;
  --container-padding: 40px;
  --container-max-width: 410px;
}

hanko-profile {
  --container-padding: 20px;
  --container-max-width: 600px;
}
Enter fullscreen mode Exit fullscreen mode

CSS Shadow Parts

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 Parts
When 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; }).

Barbie Style 👱🏻‍♀️

Hanko-Auth component:

barbie inspired hanko-auth

Hanko-Profile component:

barbie inspired hanko-profile

You can get the Barbie inspired UI by targeting and styling the following ::part selectors in your styles:

hanko-auth::part(container),
hanko-profile::part(container) {
  max-width: 550px;
  padding: 50px 30px;
  border: solid 1px #dd9dbf;
  border-radius: 60px;
}

hanko-profile::part(form-item) {
  background-color: #fceff6;
}

hanko-auth::part(divider-line) {
  border-color: #dc9ebe;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1),
hanko-auth::part(headline2),
hanko-profile::part(headline2),
hanko-auth::part(divider-text),
hanko-auth::part(secondary-button) {
  color: #e0218a;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1),
hanko-auth::part(headline2),
hanko-profile::part(headline2) {
  font-family: "Galada", cursive;
}

hanko-auth::part(input),
hanko-profile::part(input) {
  border-radius: 20px;
  border-color: #dc9ebe;
}

hanko-auth::part(input)::placeholder,
hanko-profile::part(input)::placeholder {
  color: #f2a2ae;
}

hanko-auth::part(button),
hanko-profile::part(button) {
  border-color: #e0218a;
  border-radius: 20px;
}

hanko-auth::part(primary-button),
hanko-profile::part(primary-button) {
  background-color: #e0218a;
}

hanko-auth::part(secondary-button) {
  color: #d8038d;
}

hanko-profile::part(paragraph) {
  color: #dc9ebe;
  font-family: "IBM Plex Serif", serif;
}
Enter fullscreen mode Exit fullscreen mode

Combining CSS Variables & Shadow Parts

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.

GitHub Style

Hanko-Auth component:

github inspired hanko-auth

Hanko-Profile component, adding a secondary email address:

github inspired hanko-profile

You can apply the following styles to get the GitHub inspired UI:

:root {
  --color-shade-1: #d0d7dd;
  --brand-color: #1b7f36;
  --background-color: #f5f8fa;
  --headline1-font-size: 24px;
  --headline1-font-weight: 300;
  --headline1-margin: 10px 40px;
  --border-radius: 6px;
  --font-size: 14px;
  --item-height: 32px;
  --font-weight: 500;
  --link-color: #0969da;
  --divider-padding: 0 20px;
}

hanko-auth {
  --container-max-width: 320px;
  --container-padding: 16px;
  --color: #0969da;
}

hanko-profile {
  --container-max-width: 550px;
  --container-padding: 30px;
  --color: #1f2328;
}

hanko-auth::part(container),
hanko-profile::part(container) {
  border: solid 1px #d8dee3;
  border-radius: 6px;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1) {
  color: #1f2328;
}

hanko-auth::part(input),
hanko-profile::part(input) {
  background-color: #ffffff;
}

hanko-auth::part(secondary-button) {
  border: none;
  margin: 0 0 0 20px;
}

hanko-auth::part(divider-text) {
  color: #1f2328;
}
Enter fullscreen mode Exit fullscreen mode

Cal.com

Hanko-Auth component:

cal.com inspired hanko-auth

Hanko-Profile component:

cal.com inspired hanko-profile

You can apply the following styles to get the Cal.com inspired UI:

:root {
  --color: #111827;
  --color-shade-1: #d1d5db;
  --brand-color: #111827;
  --background-color: #ffffff;
  --headline1-font-size: 29px;
  --headline2-font-size: 16px;
  --headline1-margin: 10px 40px;
  --border-radius: 6px;
  --font-size: 14px;
  --item-height: 36px;
  --link-color: #1c73e8;
  --divider-padding: 0 15px;
}

hanko-auth {
  --container-max-width: 640px;
  --container-padding: 40px;
}

hanko-profile {
  --container-max-width: 550px;
  --container-padding: 30px;
}

hanko-auth::part(container),
hanko-profile::part(container) {
  border: solid 1px #d8dee3;
  border-radius: 6px;
}

hanko-auth::part(headline1),
hanko-profile::part(headline1),
hanko-auth::part(headline2),
hanko-profile::part(headline2) {
  color: #1f2328;
  line-height: 36px;
  font-family: Cal Sans;
}

hanko-auth::part(form-item) {
  min-width: 100%;
}

hanko-auth::part(input),
hanko-profile::part(input) {
  background-color: #ffffff;
  margin-bottom: 12px;
}

hanko-auth::part(secondary-button) {
  border-color: var(--color-shade-1);
}

hanko-auth::part(divider) {
  margin: 24px 0;
}

Enter fullscreen mode Exit fullscreen mode

Customization through CSS Classes

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:

register("https://hanko.yourdomain.com", { shadow: false });
Enter fullscreen mode Exit fullscreen mode

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:

.hanko_container {
  background-color: blue !important;
}
Enter fullscreen mode Exit fullscreen mode

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:

register("https://hanko.yourdomain.com", {
  shadow: false,
  injectStyles: false,
});
Enter fullscreen mode Exit fullscreen mode

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.

you don't have to do that gif

Instagram Style

Hanko-Auth component:

instagram inspired hanko-auth

Hanko-Profile component:

instagram inspired hanko-profile

You can see the code for this themed UI here

Spooky Style

Hanko-Auth component:

spooky inspired hanko-auth

Hanko-Profile component:

spooky inspired hanko-profile

You can see the code for this themed UI here


If 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 ⭐️⭐️⭐️
call to action

Top comments (4)

Collapse
 
davimirjuma profile image
Davimir Abiezer Juma García

Great tutorial! Your clear and concise instructions made it a breeze to follow along. Thanks for sharing!

Collapse
 
estherlita profile image
Esther-Lita

Thank sou for reading! ❤️

Collapse
 
adrianarroyo profile image
Adrián Arroyo

Waitting for more great tutorials!!

Collapse
 
estherlita profile image
Esther-Lita

Thanks for the support! ❤️