---
layout: pattern
title: Tabs
description: |
  This pattern shows how to create a tab component with grid and scroll snap points.
  <br><br>
  Note: this component uses a polyfill for <a href="https://github.com/flackr/scroll-timeline">Scroll Timeline</a> to create the scroll linked animation underline.
  <br><br>
  <a href="/building-a-tabs-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=mMBcHcvxuuA">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/tabs">Source on Github</a>
date: 2022-06-01
height: 600
---

This pattern shows how to create a tab component with grid and scroll snap points.

<a href="/building-a-tabs-component/">Full article</a> · <a href="https://www.youtube.com/watch?v=mMBcHcvxuuA">Video on YouTube</a> · <a href="https://github.com/argyleink/gui-challenges/tree/main/tabs">Source on Github</a>
