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 ⭐️⭐️⭐️
ℹ️ 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:
Hanko-Profile component, renaming passkey:
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;
}
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 apart
attribute to the element. Similar to aclass
selector in CSS (class="hanko_container"), apart
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:
Hanko-Profile component:
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;
}
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:
Hanko-Profile component, adding a secondary email address:
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;
}
Cal.com
Hanko-Auth component:
Hanko-Profile component:
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;
}
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 });
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;
}
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,
});
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.
Instagram Style
Hanko-Auth component:
Hanko-Profile component:
You can see the code for this themed UI here
Spooky Style
Hanko-Auth component:
Hanko-Profile component:
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 ⭐️⭐️⭐️
Top comments (4)
Great tutorial! Your clear and concise instructions made it a breeze to follow along. Thanks for sharing!
Thank sou for reading! ❤️
Waitting for more great tutorials!!
Thanks for the support! ❤️