✨ Make Hanko Components Shine 💫
Tags: programming, design, ui, tutorial
Published: 2023-10-16 09:15:24

![welcome back](https://media.giphy.com/media/pWgFOQfuKULADAaM3y/giphy.gif)

## TL;DR
In this tutorial, we will customize the Hanko Web Components, drawing inspiration from the following themes:
* [Google ](#google)
* [Barbie](#barbie)
* [GitHub](#github-style)
* [Cal.com](#black&white)
* [Instagram](#instagram)
* [Spooky Season](#spooky)

---

## Hanko Components
Hanko is an easiest-to-use authentication solution that provides two web components: the [Hanko-Auth](https://www.hanko.io/features/auth-component), dedicated to streamlining the user authentication process, and the [Hanko-Profile](https://www.hanko.io/features/profile-component), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tu9vbnkn0ma1qo0j5av.png)](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](https://docs.hanko.io/).

---

## 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](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#css-variables) and the default values. 

 

>**CSS Variables**
When the Hanko Web Components were created, a selection of properties ([CSS Custom Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)) 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  <a name="google"></a>

Hanko-Auth component:

![google inspired hanko-aut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldak7642vs6odzuoc7k3.png)

Hanko-Profile component, renaming passkey:

![google inspired hanko-profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epm5swsdyojbmkr7losm.png)

You can get the [Google](https://www.google.com/) inspired UI by changing the value of the following CSS variables in your `styles`:


```css
: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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_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](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#list-of-all-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 👱🏻‍♀️  <a name="barbie"></a>

Hanko-Auth component:

![barbie inspired hanko-auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz5reo7xdhsa9tors41u.png)

Hanko-Profile component:

![barbie inspired hanko-profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6gf356o92m6dflysyk8.png)

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

```css
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  <a name="###github-style"></a>

Hanko-Auth component:

![github inspired hanko-auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8zllis1mjs941zd0vkt.png)

Hanko-Profile component, adding a secondary email address:

![github inspired hanko-profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i24bctm6ozlo0t5qwnzp.png)

You can apply the following styles to get the [GitHub](https://github.com/) inspired UI:

```css
: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  <a name="black&white"></a>

Hanko-Auth component:

![cal.com inspired hanko-auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49xi2t2pgwt8ul88gwai.png)

Hanko-Profile component:

![cal.com inspired hanko-profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wn2bfov4hm2e15ch6qsc.png)
 
You can apply the following styles to get the [Cal.com](https://cal.com/) inspired UI:

```css
: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:

```javascript
register("https://hanko.yourdomain.com", { shadow: false });
```
You can use this [CSS example](https://raw.githubusercontent.com/teamhanko/hanko/main/frontend/elements/example.css) file as a reference. To change a specific property you need to override the predefined ones, as shown below:

```css
.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:

```javascript
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. 
 
![you don't have to do that gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeXh3eWg3cHNuN21uNHFsNWYyMDY3ajlqa2FpaDY5bmN0ZHM2ZWl6OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Da94onydqxxHTkMr5T/giphy.gif)

### Instagram Style  <a name="instagram"></a>

Hanko-Auth component:

![instagram inspired hanko-auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqnj10nxz6qrs6ywv0xl.png)

Hanko-Profile component:

![instagram inspired hanko-profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlhutxu8mi9uh0tajg6f.png)

You can see the code for this themed UI [here](https://gist.github.com/Esther-Lita/791aeaab38f4f957985674633818e2ff)

### Spooky Style  <a name="spooky"></a>

Hanko-Auth component:

![spooky inspired hanko-auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y5o5sdlab3l9vbbcx1k.png)

Hanko-Profile component:

![spooky inspired hanko-profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnn565vsa8l98pz946ui.png)

You can see the code for this themed UI [here](https://gist.github.com/Esther-Lita/99a4388d97dc7d6e6b7e71e954c89501)

---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okmxj15cfmohy3w55db7.png)]()