npm - pi-design-deck - Versions diffs - 0.1.1 → 0.3.0 - Mend

pi-design-deck 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/README.md +54 -13
package/deck-schema.ts +30 -0
package/deck-server.ts +76 -19
package/export-html.ts +329 -0
package/form/css/controls.css +171 -0
package/form/css/layout.css +56 -0
package/form/css/preview.css +60 -6
package/form/deck.html +2 -0
package/form/js/deck-core.js +60 -2
package/form/js/deck-interact.js +63 -19
package/form/js/deck-render.js +95 -6
package/form/js/deck-session.js +140 -27
package/generate-prompts.ts +18 -12
package/index.ts +364 -66
package/package.json +2 -1
package/prompts/deck-discover.md +3 -1
package/prompts/deck-plan.md +3 -1
package/prompts/deck.md +3 -1
package/skills/design-deck/SKILL.md +44 -8
package/skills/design-deck/references/component-gallery/INDEX.md +88 -0
package/skills/design-deck/references/component-gallery/LOOKUP.md +592 -0
package/skills/design-deck/references/component-gallery/components/INDEX.md +106 -0
package/skills/design-deck/references/component-gallery/components/actions.md +354 -0
package/skills/design-deck/references/component-gallery/components/data-display.md +812 -0
package/skills/design-deck/references/component-gallery/components/feedback.md +513 -0
package/skills/design-deck/references/component-gallery/components/inputs.md +921 -0
package/skills/design-deck/references/component-gallery/components/layout.md +167 -0
package/skills/design-deck/references/component-gallery/components/navigation.md +350 -0
package/skills/design-deck/references/component-gallery/components/overlays.md +208 -0
package/skills/design-deck/references/component-gallery/components/utilities.md +29 -0
package/skills/design-deck/references/component-gallery/components.md +1383 -0

package/skills/design-deck/references/component-gallery/components/navigation.md ADDED Viewed

@@ -0,0 +1,350 @@
+# Navigation
+Components for moving between pages or sections.
+---
+## Breadcrumbs
+**Also known as:** Breadcrumb trail · Breadcrumb nav
+[Browse all 55 examples →](https://component.gallery/components/breadcrumbs/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-breadcrumbs) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/oMlfTfz564h6YmMPjyjqZoVB-XnQ-uexUG5B3cmKHz8_1oaswI.webp)
+- [Breadcrumb](https://ant.design/components/breadcrumb) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/B025UN2eJJcm4toMd_Wg4DHJ1C3aVkTlt0rEfxlcXIE_ZNfgUS.webp)
+- [Atlassian Design System](https://atlassian.design/components/breadcrumbs/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/LEhoJYCsZ2q26a9E6I2tFJfm68DEJeyCDSV32M2VfyI_2enXcL.webp)
+- [Aurora](https://design.gccollab.ca/component/breadcrumbs) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/-luqpRWFtVXJ2-ekmdh6PSGG_WIpCqHEN3gByyVpWhg_XXEcH.webp)
+- [Breadcrumb](https://www.skyscanner.design/latest/components/breadcrumb/web-rxEpDVCn) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/xuA6wRuJK6B81YtlHPVGJe6BhQUoa-SAf3leZJu9zCg_1D1tOF.webp)
+- [Base Web](https://baseweb.design/components/breadcrumbs/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/FHJN5vfKQsH22axF3Shc1CGGZo5ZO0exW2NIRitbpJ0_RprnL.webp)
+- [Blueprint](https://blueprintjs.com/docs/#core/components/breadcrumbs) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/EA7nx8T-szb4LxP2RoL8QK32WzKuBqrfDBj56Xu6wEA_mBF0A.webp)
+- [Breadcrumb](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-breadcrumb) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/NsMX7A_l0DOxU9dM-iWlrVcy49vUMZ9WH_chuYhcsc0_Z7nHXI.webp)
+- [Breadcrumb](https://getbootstrap.com/docs/4.3/components/breadcrumb/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/WnRnMBoL3Ch698AtuOFWsbqxsh9aIOe5qEPboF1RDuo_ZzKmIj.webp)
+- [Breadcrumb](https://bulma.io/documentation/components/breadcrumb/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/pyNOSP3rNqfn2_nr5nmlTyLm2tSSpdH9HePPfztCdi4_m8YGM.webp)
+- [Breadcrumb](https://carbondesignsystem.com/components/breadcrumb/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/kB4qlorkPS93yQsgEeyD0y8FyMOdcuwOuwO5TdIRlq4_ZiuS8C.webp)
+- [Breadcrumb](https://cauldron.dequelabs.com/components/Breadcrumb) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/2ipDeXglIk0KM-sJWKMVUP5iHr93wVMX8E9Gui6QwoM_Z25sOoI.webp)
+- [Breadcrumb](https://cedar.rei.com/components/breadcrumb) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/mgw6AjoLKJUs52GhkKwAD9q5mN5od3t8D0NxxtQ_ZNw_ZzFdhD.webp)
+- [Breadcrumb](https://chakra-ui.com/docs/components/breadcrumb) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/4rxMD487P9r5MbHk-gBejeOSagWXfAyMw2JIw3XylbA_1HCCPz.webp)
+- [Coral](https://design.talend.com/?path=/docs/navigation-breadcrumbs--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/jJS3OnXkNUYWEJegubJ1Tio-harAtV5TuxhZk7oOCN0_Z4s09w.webp)
+- [Breadcrumb](https://www.decathlon.design/726f8c765/p/95fc13-breadcrumb/b/0027e1) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/FDTJA8ZBE_x0VXyqEO_UVihJsAnliDP-gQPjgatE-MU_Z1JbJqG.webp)
+- [Breadcrumb](https://www.delldesignsystem.com/components/breadcrumb/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/aTLe5QNm_iaI5eT7eZ-vs7EFFjh3Wbxv-Rx0ugw_XlA_Z4vD7.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/navigation/breadcrumbs) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/QpN_7DyUOWpPnVAUQ5umls-UcxkuSGVivH_B-WqcszE_Z1LoMWE.webp)
+- [Breadcrumb](https://playbook.ebay.com/design-system/components/breadcrumb) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/qIrdDid_zHNCdbp32y68-zBh_hVbDSHWwOxTDs1HZZI_1HQxsQ.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/navigation/breadcrumbs/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/dHcIPVpbEZKAUIOKR9BscCJ3b7lzn6S03EFzOV_3HRM_Z2a8dPS.webp)
+- [Breadcrumbs (You are here)](https://designsystem.elisa.fi/9b207b2c3/p/717203-breadcrumbs-you-are-here) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/5_8vblN6Dy-POCRykd6jw52aS6kahpZOaGDvZU3N5FQ_Z1I7hYx.webp)
+- [Breadcrumb](https://flowbite.com/docs/components/breadcrumb/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/D9rIkSAlMBUnMSopPUSn7vfxo2AghiUSaVefqr2j5_c_Z1d9RxW.webp)
+- [Breadcrumb](https://developer.microsoft.com/en-us/fluentui#/controls/web/breadcrumb) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/3ZAAstiGk1QeK2kqEy5TqClQ9FM_270ZgfBzzDgT9As_2MIRr.webp)
+- [giffgaff design system](https://www.giffgaff.design/components/for-web/breadcrumbs/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/aYZYoF5O1WhLYh5MZFgeLq2aU-gWl7CrH4c_6eVhdlQ_1sgy5z.webp)
+- [GOLD Design System](https://gold.designsystemau.org/components/breadcrumbs/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/P6ZqLPGfmdwkldNTzz92i4JH9ZQSUraxUzQOlGnbbsA_ZHCIQd.webp)
+- [GOV.UK Design System](https://design-system.service.gov.uk/components/breadcrumbs/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/-LViG6F7-qUdz48hPWJN5W3pRhpHwdD_0EFBhXHPVec_ZfTzWa.webp)
+- [Breadcrumb](https://helios.hashicorp.design/components/breadcrumb) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/lUPMAftxhlSfe9SdZOE0gdzCyRJ5aW_XlxN-Gz2mOlg_1qklI.webp)
+- [HeroUI](https://www.heroui.com/docs/components/breadcrumbs) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/KbZsHTWkjYHrBwNyFsGchnhLSH1KLDN8JKTMZjeC4hI_Z1DJRGI.webp)
+- [Breadcrumb](https://instructure.design/#Breadcrumb) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/2io_aEZRn5Zi47zjJP7opwfK0jhFiR6zN11mvi6IAk0_ZITrek.webp)
+- [Breadcrumb](https://jokul.fremtind.no/komponenter/breadcrumb) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/k2HOlxs7YfXSVpPyDwYnv5OKk_xx6JmnJvkBQL1dnBw_2cd0GI.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/breadcrumbs/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/WfuJ7zMr6hXMfI_7fKWvlxoTcYMO3hVRXqZVBwNgAI0_Z1wRicA.webp)
+- [Breadcrumb](https://protocol.mozilla.org/components/detail/breadcrumb.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/N88zIZ8y52JK9PLY07PhjcGEBcSCJs4xIPElURLb68E_Z1dx2AA.webp)
+- [Nessie](https://design.ns.nl/4a05a30ad/p/3007f8-breadcrumbs) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/pfoalzZKklI-FkRrkG3ptpcj3pQoNKsna_D13Qxa7FE_Z2mvuxC.webp)
+- [NewsKit](https://www.newskit.co.uk/components/breadcrumbs/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/-dOsE0eaOQwiKHnOrqcN4sFeSitzSnPJ9JmL795SixQ_1TAskh.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/breadcrumbs) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/DjsbZLtOx7M3gjFhhiyjypDtt3bXNCcvj05c3eUOAS0_2i2ztJ.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/breadcrumbs/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/HrZ-zWFDIM5_qwUrf1ijaRkUKqYgx6GJnR497oqOR1o_2ortp3.webp)
+- [Orbit](https://orbit.kiwi/components/breadcrumbs) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/2ltnjsCbxVXqsbVW2xb0vmzTayHfEDGwOrOhmIt2Izc_Z1KicBF.webp)
+- [Breadcrumb](https://design.gitlab.com/components/breadcrumb) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/pGzkKYX2nzvqMefovID27xWHuzhhGWcTsoLV3gPdcPU_ZS7Uuw.webp)
+- [Breadcrumb](https://www.patternfly.org/components/breadcrumb) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/IWxawLPdsTF-D86rUPI9I_p14nWYnxinr3z7_RymX1M_1vqVzU.webp)
+- [Breadcrumb](https://pharos.jstor.org/components/breadcrumb) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/o9U7XQFw6YsyrwcItc-TuMRp-tftr6Qc_kKD7HDbsvo_1IbUv8.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/breadcrumbs) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/e-NvkOEZfLCh-1p6ncSzNidfHoZ-f68U3FbOkr5kTx8_IxrWB.webp)
+- [Breadcrumb](https://ux.redhat.com/elements/breadcrumb/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/FYDrEe-WyU1iuGvy4zauocpgBR5mZwvb_k3-r_JbuEE_Z2dUdrm.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Navigation/Breadcrumbs) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/ZS2HctKrqhGJik00XZaUlYhSviyENShrlEIvnBBLbGo_ZlCX0K.webp)
+- [Breadcrumb](https://design-systems.sainsburys.co.uk/components/breadcrumb/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/Pew6U8uj7mKnm3KUfU1--p5v4eq-1XBd56k_oQjBVPA_Uf3dm.webp)
+- [SEB Design Library](https://designlibrary.sebgroup.com/components/breadcrumbs/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/y2wGxYxyAAP8PyHC-usLgJ4P4GhYuam-DLHArJ6nzMI_ZO2lFH.webp)
+- [Breadcrumb](https://ui.shadcn.com/docs/components/breadcrumb) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/vGemxlGd9toW80-evW4CeFsxDxdzoI3Gkn7IMTrmX6I_Z1Si5Uy.webp)
+- [Spectrum](https://spectrum.adobe.com/page/breadcrumbs/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/ZLH7pijwX9x5FHWb4V07Z_5ry2LEw7_pip-smXirhSA_1KwMGy.webp)
+- [Stacks](https://stackoverflow.design/product/components/breadcrumbs) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/S98eHOh8E_yn6GBxlg0Qff1L2xAY_TQ46b2JmWumi7U_Z1krM6P.webp)
+- [Breadcrumb](https://www.subzero.axis.bank.in/components/breadcrumb) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/Vvodtq0hJXKCd7zuYaZARLq_f_oUa2iA_2LdkaoMihs_Z1JOjal.webp)
+- [uStyle](https://ustyle.guide/pattern-library/components.html#breadcrumbs) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/UUMIbTTlKwBW9b8coVC7sSpBsArL9GDKvoipObQWc9w_Z1lbo75.webp)
+- [Visa Product Design System](https://design.visa.com/components/breadcrumbs/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/ySJNKnwPV2K5UJK3UYOiVPlW1RYy65C9jdN92PiBMAo_Z1sc30N.webp)
+- [W3C design system](https://design-system.w3.org/components/breadcrumbs.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/TZH9ID96KEpXq7CRliwaa0sdleIUI2B2-X3R6ppoYqw_23ygFG.webp)
+- [Breadcrumb](https://webawesome.com/docs/components/breadcrumb/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/4HEgX6-xbVR0MN2_AggxtHbo9m58DwvaUSeMOZkkFp4_Z2jGJ3p.webp)
+- [Breadcrumb](https://designsystem.tfwm.org.uk/components/breadcrumb/) — West Midlands Network Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/qs6H-PBoAHusc3BqFRzXU-wcATI7T2M0RB77gDZPSAk_2wLuDP.webp)
+- [Workday Canvas Design System](https://canvas.workday.com/components/navigation/breadcrumbs) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/leChFv8MuQp6HWPb9qoNgXEEzT5d0W7qHyluLlCEdnU_Z27kcSo.webp)
+---
+## Navigation
+**Also known as:** Nav · Menu
+[Browse all 63 examples →](https://component.gallery/components/navigation/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-navigation-basic) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/ARAm_g4VEH0hbT31S9UTOJ0g0g1Dcdztf_iVffZNdbg_qcaWl.webp)
+- [Menu](https://ant.design/components/menu) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/-rvd010ofQ7S_Wst4k3HC8A6x88HfzNBePA4_Ec4dxU_2jTKsb.webp)
+- [Horizontal navigation](https://www.skyscanner.design/latest/components/horizontal-navigation/web-xkQUB1Vp) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/1G-eqs52cwN9V0yEJJUc-i-fCyvWV9VRT52wONJ6T0o_Z28Sj9j.webp)
+- [Navigation bar](https://www.skyscanner.design/latest/components/navigation-bar/web-nBmynYpE) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/tjZfDTgBb3Ex12Nu4kuMYFiQuPCpe8kRjqMbsB-zBPM_Z1fmdXi.webp)
+- [Application navigation bar](https://baseweb.design/components/app-nav-bar/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/5TPLV6yjcEEEdwZT_EmT_osAtLkYuNyhjhrU4rDGx8I_6qJnk.webp)
+- [Header navigation](https://baseweb.design/components/header-navigation/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/BEu0tVxgUL-9QtzElqL6aa6rQQj77zw6MsXSvRAevGw_wqIny.webp)
+- [Side Navigation](https://baseweb.design/components/side-nav/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/Ex0cdzu0N9n50ysiLtYhxTNGcdNiSv2iSGZiEMm0ZD4_21c1MG.webp)
+- [Bottom Navigation](https://baseweb.design/components/bottom-navigation/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/x3nCZNgmxLFqZiz1BJN9sL5iR9JUe4V1jWV1gQTEzz4_20ymDS.webp)
+- [Navbar](https://blueprintjs.com/docs/#core/components/navbar) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/-HplcQ32fdo4eqlrHGsDEEmSGYUB7DI4zBWRKRlE5yQ_Z2EeSx.webp)
+- [Navbar](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-navbar) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/kLHTckEMtL2NH0j0VZDbLzIvtY374kiRYJ_fis4w9zA_Z2h5dGy.webp)
+- [Nav](https://getbootstrap.com/docs/4.3/components/navs/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/WhQyHmzKV2MQbkG9M03yR6inzNSoDqpfP_RV7oCRBj0_7AKuw.webp)
+- [Navbar](https://getbootstrap.com/docs/4.3/components/navbar/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/B8UjU2dsdCDCW3XAky1vyKBMeO5i_IDiGBAwJRwBRh8_2jI7C3.webp)
+- [Menu](https://bulma.io/documentation/components/menu/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/ER1KsDyVfGYwZ77rnsIdKh3fnu-X0bELEPyUM0IfLo8_1h19x4.webp)
+- [Navbar](https://bulma.io/documentation/components/navbar/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/0URhoMZERLKjKNz2UpbgE6EBtK67sCcHoVjzddo563g_Z1RuFLt.webp)
+- [NavBar](https://cauldron.dequelabs.com/components/NavBar) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/3K5e-6oMZjZ6ojKpTf9_VkKdKgyDBJh91Sdg3nMWSmE_qX5LX.webp)
+- [Vertical nav](https://clarity.design/documentation/vertical-nav) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/JAwFeSf9-Mci9D0om2Mkj5ffa48-8diY3BGzKKNBgtY_Z1AHuMP.webp)
+- [Bar](https://www.decathlon.design/726f8c765/p/165aa1-bar/b/0027e1) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/RerQuABHbF9qsV-MqRdJLcpCq4M7R35QJffbSBoXCvM_Z2fQC5A.webp)
+- [Side navigation](https://www.delldesignsystem.com/components/side-navigation/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/daD6cJCnZtBX0v04lRAuS_xuDNxhvn5P8kFst1Q-OUw_DinD6.webp)
+- [Fake Menu](https://ebay.gitbook.io/mindpatterns/navigation/fake-menu) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/GUeT0RQwaOBm73jZT42TqBQvg-NYKl8lyGKiwlUiuZs_ZgUClg.webp)
+- [Fake Tabs](https://ebay.gitbook.io/mindpatterns/navigation/fake-tabs) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/VxsLhsZrzgqBHl4DXYRdrM1RdzKdiNpMG3ZT65FxgOo_h5W09.webp)
+- [Bottom navigation](https://flowbite.com/docs/components/bottom-navigation/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/ZfMuDoQOT4S_GFJeNSC4V6pwqaKc3VsKU9kgSzA7kbY_Z1ytdk1.webp)
+- [Mega menu](https://flowbite.com/docs/components/mega-menu/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/O1zLr6DxXpc0k8imlwkYTdqCZDnOX4TkPNBCva_a4B0_NGErj.webp)
+- [Nav](https://developer.microsoft.com/en-us/fluentui#/controls/web/nav) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/i2lYccp25Cww2Pyq6hVbAkLYMTAoy2gj60xLkf6k3w8_ZtclYp.webp)
+- [SideNavigation](https://gestalt.pinterest.systems/web/sidenavigation) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/hZgi2LW261FUEVVA1Ma9bcDUhIgI1BZJMEWgAt8A3Cw_pXGRc.webp)
+- [Side nav](https://www.giffgaff.design/components/for-web/side-nav/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/3pSZeGLKY3TnUwnMBqt8BKo4qaNe_1Tzny5pJTRfiGo_1NxSWO.webp)
+- [Main nav](https://gold.designsystemau.org/components/main-nav/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/Dw16J6PqtKs_XAYD0zq24Ag3MIzTkMF0vhIyjeX9z0Y_1y8Nxv.webp)
+- [Side nav](https://gold.designsystemau.org/components/side-nav/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/ELhjBiNma644a0PaELCk2qzb1eaxYjpJzGC5ULljmnA_1A2gE4.webp)
+- [Inpage nav](https://gold.designsystemau.org/components/inpage-nav/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/LTCZQEV66Iqwr1ZutPnZhUHjI2zDnArP5icbTCNki0s_wADWn.webp)
+- [Menu](https://inclusive-components.design/menus-menu-buttons/) — Inclusive Components — Code examples, Accessibility, Unmaintained · [preview](https://component.gallery/_astro/4RA-0Zht_XIjgDskg5abMO2_7kxy-Ka5eN0oNAIKKtg_ercT2.webp)
+- [AppNav](https://instructure.design/#AppNav) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/4dGnFB878V219C8Hkcwl4TWcb5oQfAVqbPWh0XeAPFo_Z1qQdsL.webp)
+- [Global Navigation](https://www.lightningdesignsystem.com/components/global-navigation/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/zD5J-fieEma9jLv3cABYHjtwEQlSI2paQaW8pUYuBs0_12M0hR.webp)
+- [Vertical Navigation](https://www.lightningdesignsystem.com/components/vertical-navigation/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/toH3DvSIyh9566HlYyHSDRaerE57NSTsdwyTOF8CdKs_9jYV3.webp)
+- [Navigation bar](https://m3.material.io/components/navigation-bar/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/PbuGQRj_FvErGT-xCgKVVaJYhYtDUNq7Wn9wnWDy1Fw_Z5kJmq.webp)
+- [Navigation rail](https://m3.material.io/components/navigation-rail/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/yywKyyF1zrZXAlJiJW5r3t1Ka_pmn_3MLInJEjPYpsc_1DVN2m.webp)
+- [Morningstar Product System](https://design.morningstar.com/systems/product/components/navigation) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/Mds_WGRITzcAE-7T9z2nzX4rAQoe99J4ZUDmQxYSfXU_Z1J0SVm.webp)
+- [Mozilla Protocol](https://protocol.mozilla.org/components/detail/navigation--default.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/StdhLdFX1eF1-GVNnJIXKB6dj0W0ZNURG9uVR7t8HeI_Z1ezRJx.webp)
+- [Menu](https://protocol.mozilla.org/components/detail/menu.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/qOQh2zyjNj8jQykhsQo5tSqCWSlRO1tCSyCj9dWB7I4_ZUbPjN.webp)
+- [Sidebar menu](https://protocol.mozilla.org/components/detail/sidebar-menu.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/GLtZFMmn0ge3DYjkmLqFTRzvsC5r3zhMI6jT_xjbLgE_1CQeOY.webp)
+- [Menu](https://www.newskit.co.uk/components/menu/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/tqPPlAC5pOGLjFSQhOcd2dqDM2Uma4uZunRemTi5gmY_Zwxcrf.webp)
+- [Menu](https://nostyle.onrender.com/components/menu) — No Style Design System · Sass, jQuery — Open source, Unmaintained · [preview](https://component.gallery/_astro/DZmSwevk76Ss-dUfb2g0tzlT1YkNBPg_78h5nUALlic_1Tn7iu.webp)
+- [Nord Design System](https://nordhealth.design/components/navigation/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/VsHqrI-NUcl9PN-rLoni7etl5p4ElO3J1dx4Ud9cJpE_Z2uRcw3.webp)
+- [Section navigation](https://ons-design-system.netlify.app/components/section-navigation/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/1gjj_1a5TMi1rpbp4_AsbbKH1My-bd_lZqlDzeIt8v0_Z1R1WCc.webp)
+- [PatternFly](https://www.patternfly.org/components/navigation) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/YTRuU1GfYbEzn-yltkct_nf3TVfsZbyefBar5rVuVKc_Z18nM6w.webp)
+- [Dropdown menu](https://pharos.jstor.org/components/dropdown-menu) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/3UPFKwp40kEN5rsJIuMN55JjdBPdhY8rV-6FVkWN_n8_Z1fh9TO.webp)
+- [Dropdown menu nav](https://pharos.jstor.org/components/dropdown-menu-nav) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/Aqp6HqE_PC3jddOLbhsEvvO4tyDZAaLssWBDr9PqozA_uFSwv.webp)
+- [Sidenav](https://pharos.jstor.org/components/sidenav) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/hScO-bPPOk70PZNBP04APgDlaWPBGr03qZ-RWE1W95A_tyBsk.webp)
+- [Polaris](https://polaris.shopify.com/components/navigation/navigation) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/qCed0uJ8E6xQpo55IjYQyPBL5KZmfvsdVEtMbwKae9I_1zSU0C.webp)
+- [Nav list](https://primer.style/design/components/nav-list) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/0JTBwyzOGqB_GydMKjzGtxYucDds-w7FOr70T9UyKv8_1uai7X.webp)
+- [Underline nav](https://primer.style/design/components/underline-nav) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/GPTFZU6K495OxSE_PMjCvsfxrAn1J_IigjDD2u-ygpI_1kaTxY.webp)
+- [Jump links](https://ux.redhat.com/elements/jump-links/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/u-Ya1x0CyXxgdU_STvNj95aCLHGOMXega10-nKcRNj4_jjc2M.webp)
+- [Navigation (primary)](https://ux.redhat.com/elements/navigation-primary/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/f_Bfi8veq57Dk-Vfnd6ko02YLNHmpS3dzDDvY9RB-M4_160MJB.webp)
+- [Navigation (secondary)](https://ux.redhat.com/elements/navigation-secondary/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/mD5Lm1aop80258HVBUUvyuouyUs6gEP2P6FdudOkk-0_1kqYvv.webp)
+- [Subnavigation](https://ux.redhat.com/elements/subnavigation/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/mMsEanDccFYp6bo2A7EqSTVo7YsiruCe-pVhkptFSGo_Z1WdJ3.webp)
+- [Menu](https://design-systems.sainsburys.co.uk/components/menu/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/_VvI7rUXnxfw92lf5UmXiP3Xeac5rgDCgbLmr5JCyro_Z27yyXw.webp)
+- [Navigation Menu](https://ui.shadcn.com/docs/components/menubar) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/CZIA6Aa7yZfqXipsGBN8SnKPKSkgkwAYXNRj3MlqAyU_1gPJlC.webp)
+- [Side navigation](https://spectrum.adobe.com/page/side-navigation/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/8yl42Brrd71FfEFDHKCY7bAtbPU6OVzxB0PCgBbcGoA_Z29CEQ6.webp)
+- [Bottom Navigation](https://www.subzero.axis.bank.in/components/bottom-navigation) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/7qV5FnAZyspGwJQc8Wkda6AKFr1kIqri5UfvcuqSKwU_twr8h.webp)
+- [Side navigation](https://designsystem.digital.gov/components/sidenav/) — United States Web Design System · Nunjucks — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/EKLe7RVMlklLwKU3WXXhaAeDaxUesRsVCJCgSOGYa1w_ZtadKN.webp)
+- [Anchor link menu](https://design.visa.com/components/anchor-link-menu/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/ONngJnGbkpsYtFA7MQnZusv9_2RTAgNvyGNAAgzIs0U_Z4LdfJ.webp)
+- [Horizontal navigation](https://design.visa.com/components/horizontal-navigation) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/xgczYJa8HYA9yLe17rFA6HPaSmW47oaRCiPqpT_JzPs_2fPRTJ.webp)
+- [Tab bar](https://design.visa.com/components/tab-bar/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/SqBI2N_oQdtcOXb6YkIs0JVskyH4bFSp7MX84ciooMo_Z2qlBFu.webp)
+- [Vertical navigation](https://design.visa.com/components/vertical-navigation) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/wzRn-zNS_LVvyCthiJZ0TJDNWGO_-D0gDaY8AyyT0d8_Z4kjLt.webp)
+- [W3C design system](https://design-system.w3.org/components/navigation.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/iLtcTvgL2GrI2ZlxgOYUP2FlYn70AHPp7sP7OqCZD8U_Z184Ts0.webp)
+---
+## Pagination
+[Browse all 49 examples →](https://component.gallery/components/pagination/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/4j_dG83175WKmWHnNBTXVCVSg-W-IDXjFoW0G_tlVNo_20s2NJ.webp)
+- [Ant Design](https://ant.design/components/pagination) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/XLDuO6FaScWGknry0DkapRPp3vLV909S8GTiIVIzdmo_npIwS.webp)
+- [Atlassian Design System](https://atlassian.design/components/pagination/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/J60jY3lV7dUygbn2ahTRgzL_EXP3y1iT5Hn8EXde5dg_Z2jCmO8.webp)
+- [Aurora](https://design.gccollab.ca/component/pagination-scrolling) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/Vuor-_k9-8sPeOS5Hhuk_XunI0WBetJO-DAmoVATUdo_Z29Yv4w.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/pagination/web-5nr2G0qU) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/LW8nj-rnvjVQCtkOWdi1wyk55mgeGfeblrnud9JPMQA_ZFAa4E.webp)
+- [Base Web](https://baseweb.design/components/pagination/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/7MiM_UAhKeDj5fSlznDPpDa7MvDTblaumFJTuxKoyXk_L2GEG.webp)
+- [Numbered pagination](https://www.bbc.co.uk/gel/guidelines/numbered-pagination) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/dVf_6ReIxkQs-4F1jE8UDah2Nsy5TtqnBcuAyjgPy1s_Z2oX9Fc.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-pagination) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/y3e72ljTEuiuPEbeVUx2fnNsRoXvT9aUT1shimFQ0rc_BDhJ2.webp)
+- [Content pagination](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-content-pagination) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/3OUyFRqBf-XNn6cAsV7XmAvd1s451xtywatZQ8cmP-8_ZBagXg.webp)
+- [Bootstrap](https://getbootstrap.com/docs/4.3/components/pagination/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/2KPzNMoadou1TNO7NqiQSg4xW1i58Bx6IosTOlKorHU_Z7PsYR.webp)
+- [Bulma](https://bulma.io/documentation/components/pagination/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/LC8RXQDyc-21Vf4AOY1FZTzJxw33o9tWc5ybQzNL84s_Z1zOYk8.webp)
+- [Carbon Design System](https://carbondesignsystem.com/components/pagination/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/e5OAFE3rLEhgBdFNmL5Tx9__CicwbpzwKbm9FrMIPdY_IFdMs.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Pagination) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/XpYk_mihpNEHVUqFYk_A1Q_acsIc4QKsnEXelVuID5o_1gx39g.webp)
+- [Cedar](https://cedar.rei.com/components/pagination) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/_gXi-fBQ5KFVpqVEBzwMgQ7OcxyHm1Jg2Vpiyd83MYE_ZEGlx1.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/pagination) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/RvVmdMIcdAsIPVef83ylmMV8zvxfbjvBdIZMUesfX28_ZC4Fjc.webp)
+- [Crayons](https://crayons.freshworks.com/components/core/pagination/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/E0kNm7PWLL-2pezv3PVrjkMucVGwKE0JFq-IbZUPdWw_Z2muNTF.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/pagination/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/wl3-3hKuYmCNZAOFD7IchLfZtLnUffh3Pwrg1YMnCpc_Z1wTmlt.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/navigation/pagination) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/ELYVbR55ya6Jx5o6GEvHDOV43Jnor3_PpprHyLXYHP8_1nVPud.webp)
+- [eBay Playbook](https://playbook.ebay.com/design-system/components/pagination) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/ff7HsU9vF7RZ3WlvyKWPl1x8pzxXrNqvgtuB7iUPTkE_ZbJxnz.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/navigation/pagination/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/lKWhPCLHOPEKifxUefknAFxGnFmfLaok5sU-EukTeJ8_Z1WezQs.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/53e53e-pagination) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/Scp1AR4yv6fV2xPZlwluKZ6tfoAQu9oSoRNL7exWmdA_21Kqdd.webp)
+- [PaginationNav](https://designsystem.elisa.fi/9b207b2c3/p/500154-paginationnav) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/EamY1GXEV-NkETXrZ7jFdFtqW9DpuSPji79WXA23238_lttbU.webp)
+- [Evergreen](https://evergreen.segment.com/components/pagination) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/1HJZOqn4r4RVHcSplIUOu85ELFWv5OMcOPwMzKJJiuc_1MMPHp.webp)
+- [Flowbite](https://flowbite.com/docs/components/pagination/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/uWxZBXOt7GgIqLh199sSxGlcMQvQcruMqxoEVq6iNC0_9Oyum.webp)
+- [Geist Design System](https://vercel.com/geist/pagination) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/MbTIn2PvCCG82xs0CqDA1IwP4vzb0CENt8dhZKGQjQc_1TQOP.webp)
+- [giffgaff design system](https://www.giffgaff.design/components/for-web/pagination/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/gBGMk1DZGt88HL1QO2oGElitcLgo3eZicB7LJ7ZKpbU_Z4oiEV.webp)
+- [Helios](https://helios.hashicorp.design/components/pagination) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/W9yXiLqiLs43hkaUPcAd1LHR2Hh1-Vhu6W2YZkBZhV4_Z1oJKYI.webp)
+- [HeroUI](https://www.heroui.com/docs/components/pagination) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/hBEprmKQIX1ADwb4Ubldzt7DNiDkzuqIoEWrsGGWsq4_169iVr.webp)
+- [Instructure-UI](https://instructure.design/#Pagination) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/5Qx8tOuh6cyO3WNZ71M9THpI3TARWXVeXtYDu46knmQ_1j9NYW.webp)
+- [Morningstar Product System](https://design.morningstar.com/systems/product/components/pagination) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/TxuSrm_hhJJFCSNV_XY3ZDQtzFWRLPjMpyDQd0IPtGk_Z22KYxU.webp)
+- [NewsKit](https://www.newskit.co.uk/components/pagination/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/kugqtDcsLNlu3itynDzYsyjjd767OH1iYBoIH52bx3o_Z1Ni7S8.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/pagination) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/A1e7NB9u_A6GPiaid7jsRgfNsvX_krd76X1efS93-dM_2kCh3L.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/pagination/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/-_kqw8cJdRAHttJtZfX5BdBxW405SwK6_kLudJJ7uOg_Z15x3cQ.webp)
+- [Orbit](https://orbit.kiwi/components/pagination/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/DokCFENTcvA3TiAaXxSymALP06AlepOnkjCkDnpfLDU_2kOS2x.webp)
+- [Pajamas](https://design.gitlab.com/components/pagination) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/3ZIbhPFq67Yf9PFxv3tpvYsxDf0DHGz8j0etnaIhTXY_Z1twlVt.webp)
+- [PatternFly](https://www.patternfly.org/components/pagination) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/y3tGLkNvn5CJSB5aKH8ChUr-_bwEnIvJDxopII8H84Q_ZIxEl.webp)
+- [Pharos](https://pharos.jstor.org/components/pagination) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/YCN3lUql88_1dfH3t91mkQMH1w2MNjwh3kKvoYaRSRo_1iQuyS.webp)
+- [Polaris](https://polaris.shopify.com/components/navigation/pagination) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/QKEzVJ5PTSUt3qKszRYEVNX3Rf9YrLMmyg1u4nv3ulw_ZnDOiM.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/pagination/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/dZpOX61djjiewx8Rzssd8AuPnt9NyXh77rgqcr5cXcs_Z2ngbvY.webp)
+- [Primer](https://primer.style/design/components/pagination) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/GMrlaiArFTzpylt-OWFQSSJX9X8XUVm05VoYCLp9IUI_Z1KGQv6.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/pagination) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/mEg30aMFuk6ulxrpElRRWmZHKCgWmaik-eMYCK96VRk_ZFa6m3.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/pagination/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/sBd-GjtddgyKpDiZV5w8kPYKtRjgxwgsaftaMFjo53c_Z2lO3CX.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Navigation/Pagination) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/GWtb3nBWjy7Ln6TIrzGqHivyL5UMNIFvI8VlU9wjSbo_1Cfimq.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/pagination/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/L70M9r34gAnLEGzmtkMy78_oXbpPoV7KOMwU-px6b8Y_2eVqhH.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/pagination) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/ZRPahkD3eqD0QaXmu0x_T3374WdTNswL-CSUy92p7gY_ZTDsTW.webp)
+- [Stacks](https://stackoverflow.design/product/components/pagination) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/GBHwAzUpHWfbm-wQp6oxYBKG08EQhsDhRVNuS_-nsMU_ZExRSo.webp)
+- [W3C design system](https://design-system.w3.org/components/pagination.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/AfAGPlcp0QPBPrwjNiwi9H3NuR-2leOGJ0K33JWvCO0_2Rwpy.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/navigation/pagination) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/qrAbSxS12o6dYHEBcjIY9SPsxVJXKRT6T_VSU5BHSzY_CAsmH.webp)
+- [Workday Canvas Design System](https://canvas.workday.com/components/navigation/pagination) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/r6jLiXmaqMA6qngwk5nZin9hYGOw5Yc0wUQz-DTjRzI_1Tuwmj.webp)
+---
+## Skip link
+[Browse all 14 examples →](https://component.gallery/components/skip-link/)
+### Design System Implementations
+- [Skip links](https://a11y-style-guide.com/style-guide/section-general.html#kssref-general-skip-links) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source
+- [Backpack](https://www.skyscanner.design/latest/components/skip-link/web-xYpbV1AB) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/FVe2KploTTXKaVyhpckm4djneaAv3AzYcgZwL-YTzJU_Z1OWtNt.webp)
+- [SkipLink](https://cauldron.dequelabs.com/components/SkipLink) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/KTeAZLtj4mwxuzXdeD1_BB7-A0OrEn7BeT_a0SeK_14_1Cb4t2.webp)
+- [Skip Navigation](https://ebay.gitbook.io/mindpatterns/navigation/skip-navigation) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source
+- [Skiplink](https://designsystem.elisa.fi/9b207b2c3/p/578182-skiplink) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/hhvWosHX-rFdJ7d9E26Q8jLhrGzFW-VOey0QPjToQgY_Z1krSo.webp)
+- [Skiplink](https://genericcomponents.netlify.app/generic-skiplink/demo/index.html) — generic-components · Web Components — Code examples, Accessibility, Open source
+- [GOLD Design System](https://gold.designsystemau.org/components/skip-link/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/1KmwuHH1mcNbgHn5SUmVIi0A63KMVMqDMT10gjH99fk_Z1UrLBf.webp)
+- [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/jGOkV7sbG_edIctkmD892NSMSH20QF0QVrgjV42yXeo_2bTfRN.webp)
+- [SkipLinks](https://v2.grommet.io/skiplinks) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/PktheMM6wpCOEgNWXNnSCZRl0udJWJRSw1X2hjXYlaE_Z2mgNxc.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/skip-link) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/wgvHUXmzK32P8Cyjbe25k4gALPbjWFu6DtB_YmdZK9c_Z1irnuo.webp)
+- [Skip to content](https://ons-design-system.netlify.app/components/skip-to-content/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/n3UntdcSbk3_lU_Ay04dLdL6aFiS2BWWG4q7SiCswIA_1piBRm.webp)
+- [Skip to content](https://www.patternfly.org/components/skip-to-content) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/KcenoLAZbXCeE4lCHn7bZNsJSs83XF8RtnRQME3IgsM_Z1ok9zT.webp)
+- [SkipNav](https://reach.tech/skip-nav) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/De-tin4HWAZ59RuAfemwWF0pAZpC965N17ZTjw1QitY_R1SF0.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/skip-link/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/XeXM3dFTRgg1Jeq0Bbd8BnG8Zt-Ak3w-UDxHBWcQQLc_2icAw6.webp)
+---
+## Stepper
+**Also known as:** Nudger · Quantity · Counter
+[Browse all 19 examples →](https://component.gallery/components/stepper/)
+### Design System Implementations
+- [Nudger](https://www.skyscanner.design/latest/components/nudger/android-NCHOiJ2T) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/w3OU6c2Nl4pJeqehL4gKL5-ZCu3q_3g4A_SXkNRUV90_ZmUYm5.webp)
+- [Base Web](https://baseweb.design/components/stepper/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/xio59kvqnY52BLc7wZmdTiNaxvMmJwlIQKH69pUXgzo_1cwBTC.webp)
+- [Numeric input](https://blueprintjs.com/docs/#core/components/numeric-input) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/THPrh5dvg1SdGoKbWOioP_wec4Fjc9AjvpCyql4vYXw_Z2pnIq8.webp)
+- [Number input](https://carbondesignsystem.com/components/number-input/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/3yOhzd-5RZTlEnllSO3b8cRNQ5j_x9mi-xgEjxVv250_1o6w80.webp)
+- [Quantity](https://www.decathlon.design/726f8c765/p/207abd-quantity/b/75bea6) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/d_Xc4brkh2O9WVz-DdzpuRWGWwvsSbbVHHaWgahHvcs_ZtAUPL.webp)
+- [Number field](https://eui.elastic.co/docs/components/forms/numeric/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/PPSMNPBRbd--djZ4HyYNxdPNVTQnFO1qjYDgxF8qTSs_Z2tR8kz.webp)
+- [Quantity](https://designsystem.elisa.fi/9b207b2c3/p/05b495-quantity) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/G354RpFsxwxbMCx0tSh3zpZMom00x8gLik5IdZ0NOh8_Z1UkwQs.webp)
+- [Number input](https://flowbite.com/docs/forms/number-input/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/QJiCCzceWouKZ78Kz0Rkz5NMfe6Z84ER5GeekkdOxpM_IpruU.webp)
+- [SpinButton](https://developer.microsoft.com/en-us/fluentui#/controls/web/spinbutton) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/0iHy7xmxx7bqFF8D1nBCKAcxBhBVEud6cxErF8QfhUs_29B8mL.webp)
+- [NumberField](https://gestalt.pinterest.systems/web/numberfield) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/UL4mWgo5RRqf73BaCZGdOCJnnHXfivYfhBPiP87Xsa4_YWayd.webp)
+- [Number input](https://www.heroui.com/docs/components/number-input) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/itUHXQ3eK6Kru2Shg3EmWT3PY5cy9EiadJQL9K-FIZw_TCSfc.webp)
+- [Nessie](https://design.ns.nl/4a05a30ad/p/834ea3-stepper) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/hMx6TIx82ESAyInlBvJ-GDad94ZYLLxCfmUZ0KGcGSs_Z1yQVVS.webp)
+- [No Style Design System](https://nostyle.onrender.com/components/stepper) — No Style Design System · Sass, jQuery — Open source, Unmaintained · [preview](https://component.gallery/_astro/Jl7MtIYNpuVFSSv2bI359c_giwedStfRm9w-QUHk5Hk_26JWon.webp)
+- [Orbit](https://orbit.kiwi/components/stepper/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/iMieIXuh6sHqPVhkntWYXXTQzwJv5Qv8SVK7vlHJ3yE_1AAI8W.webp)
+- [Number input](https://www.patternfly.org/components/number-input) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/oc28GFuXOVnSVFVM5LHqtweQz-GlXypC4Kq8fHfVcRg_16wVka.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Forms/Stepper) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/_xrcVZkfeai1NYJW7DvcYvO9aSFRVHjCeOb7i5iPXEg_2sdsIr.webp)
+- [Input Stepper](https://components.ruter.as/#/Components/Forms/InputStepper) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/8daSBnRQ-fKlcj-i08aRgvqlwtig0Ilgb3TKA5wDzRY_2irSXU.webp)
+- [Counter](https://design-systems.sainsburys.co.uk/components/counter/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/IzB6bmljp8nhagAJOT96nel3DDHiLT7CuvL2ZEZIUy8_1sG2az.webp)
+- [SEB Design Library](https://designlibrary.sebgroup.com/components/forms/stepper/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/g0havNe5vWtgePUQd2AgJBu_FC2Khog77wvbhLeIqqw_Z2mhNkT.webp)
+---
+## Tabs
+**Also known as:** Tabbed interface
+[Browse all 81 examples →](https://component.gallery/components/tabs/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-tabs) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/qruxAkv6vj8E57VLlIxXX0z6C8ZY6zjQsMIx9jHU6R0_Z23S3gW.webp)
+- [Ant Design](https://ant.design/components/tabs) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/UdAT3D_eMXhkHlKJa8nxGwgy2JQ9uma4HPk7X1nuhwE_ZOuJJv.webp)
+- [Tab](https://ariakit.org/components/tab) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/nUHgXykUlVUM1UoISN7P9Jxzi5L72TNmyWf9FQiWOYI_Z110dm6.webp)
+- [Atlassian Design System](https://atlassian.design/components/tabs/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/ZE_GPXacP0URZnYsPiFdXFUSDiOS7bjJeJt77JZ-kPE_152b8p.webp)
+- [Base Web](https://baseweb.design/components/tabs/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/_BQvBwtDGbX6vL2eCaTlmPyFhcbuRSL5TdgBrpJUQYs_eSiqy.webp)
+- [Tabs (Motion)](https://baseweb.design/components/tabs-motion/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/8rEMMFXqRMgdYF434zzKS-jOlCN7y03PWVORsDVBC9c_ZgS4Lk.webp)
+- [BBC Global Experience Language](https://www.bbc.co.uk/gel/guidelines/tabs) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/YeLyzWvxVvmHT80FsJWd4o7-sI9AUA2rYdh3gAY3XeI_Z1mNJf2.webp)
+- [Blueprint](https://blueprintjs.com/docs/#core/components/tabs) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/mgo7nrE87wovEQf-pfY78voR9uumzly0x1-eLrtSYF8_Z1IbzE3.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-tabs) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/IRwcl6tOkKWwrZizBN-CYEILDoicflT3CHPkt3Rt3dk_kd6T8.webp)
+- [Bulma](https://bulma.io/documentation/components/tabs/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/x7H44BaJrKYXmbnT05lW94KDl4g3985Q5eJuHTbyhCA_1tYGBy.webp)
+- [Carbon Design System](https://carbondesignsystem.com/components/tabs/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/4qtMgc0ZTC-37zZIj4QEIl580Y0nI0Og7DXS0y4wqEE_17nnSF.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Tabs) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/lzRppup__j5AwSKN-jjv2TV1yQaPe9VYklUtJTLYdOQ_t6nXq.webp)
+- [Cedar](https://cedar.rei.com/components/tab) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/GPDZWBb2DYYmjL87eufhZrNfYe0ey3AU_Hwb73g38Y8_1kqDVc.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/tabs) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/tYbevkU_aMNUUTfeKRqVGs7lNO6szokGD6qHB3vBOSU_11VsCl.webp)
+- [Clarity Design System](https://clarity.design/documentation/tabs) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/B-KwNiR8InBb-hRim3S_7eYVO3XG1X-7Uum2wzQPu9k_7m8Jt.webp)
+- [Coral](https://design.talend.com/?path=/docs/navigation-tabs--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/zeq3xMvkAyDHfIv-_ck379F9dnOYyXQm4MHueo2tgBU_1FrhkI.webp)
+- [Tab](https://crayons.freshworks.com/components/core/tabs/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/An-ibKD1uvDB_wl9pg6tBNhzhVK2wDf5DlhDuSqNNiU_lVEg7.webp)
+- [Decathlon Design System](https://www.decathlon.design/726f8c765/p/705308-tabs/b/4177c3) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/G2DDiDHJTfm37IibbegmcPxSWbGe282lmFDEYJHTKas_bkHCe.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/tabs/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/gd4IBLep2ZaVnXcORlVtTA4NMZv1KSdBZw-SLAgBP9s_Z1KUQgo.webp)
+- [Tab](https://www.duetds.com/components/tab/) — Duet Design System · Angular, Vue, React — Code examples
+- [Tab Group](https://www.duetds.com/components/tab-group/) — Duet Design System · Angular, Vue, React — Code examples · [preview](https://component.gallery/_astro/kJt7eWg76zZc3-7IfHlVsjpR7tTrG6Zrq5F7GBiKy5k_2ahvIb.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/disclosure/tabs) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/lxjX9VddQKwXoUnBSo7_1Heq-o5_nZN3czcz6-TfO3w_1q8OS8.webp)
+- [Tab](https://playbook.ebay.com/design-system/components/tab) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/yKWGQag9SnpIEtlnYKwQ4Y3NfR7Y1-d8GWnhsOJXDqo_Z1eNwvm.webp)
+- [TabNavigation](https://designsystem.elisa.fi/9b207b2c3/p/56306b-tabnavigation) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/ZX5nMlD1PI03shOqH759_BX8iIi4bF4VFSeX1cQPnCQ_ZqYMc8.webp)
+- [Tab](https://evergreen.segment.com/components/tabs) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/vq6r4HLb_GReVSOZ3KvXdAR9jo7loNGDTRcf3qA90TA_yQY0w.webp)
+- [Flowbite](https://flowbite.com/docs/components/tabs/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/3bRuSSt_EQ7HmzxqrRRwtYIo6WUpUrjqOodmU1FJ3Z0_2bLgKi.webp)
+- [Pivot](https://developer.microsoft.com/en-us/fluentui#/controls/web/pivot) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/afwfiskYrwW1vejVTeWel6sbpRkAm_IE2X-LTQ6yy3s_1PqoVx.webp)
+- [Forma 36](https://f36.contentful.com/components/tabs) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/FWDCYziHMUM_gZtGDgoVR4FLDzJEsRE_wJ-D1EgueaY_Z2tR1bo.webp)
+- [Geist Design System](https://vercel.com/geist/tabs) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/yGMQ-_3AvzAYDbTQWfIzY6PkIZC7Crjx_XzfHK4al5E_le4TA.webp)
+- [generic-components](https://genericcomponents.netlify.app/generic-tabs/demo/index.html) — generic-components · Web Components — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/-MPxUzpxcNi34WrziYvDRXKStPxead7GL2zY4S5CcVw_Z2o9jWa.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/tabs) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/cQUbcevcTeYuHGKb-zgNTWyHuuifBnEOIvBD4vozaJg_Z1AvQlh.webp)
+- [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/gvkTLQFN-_puo8tfQADN13RMWRydRfuOImpBnFm2qD0_ZlMpVU.webp)
+- [Grommet](https://v2.grommet.io/tabs) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/SKFRBEsMdQanruNOvgijs-DxcsF7ytkde2xCodkAXwM_Z19dBlA.webp)
+- [Headless UI](https://headlessui.com/react/tabs) — Headless UI · React, Vue — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/YF-53neqfywKjN6R0YctncZagoZ7KxRZ0tngmJDM3MY_Z1FfzSI.webp)
+- [Helios](https://helios.hashicorp.design/components/tabs) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/FxGnBJ0OrtScZrMUpHegpJr3gk7It8-ODpsdvyL7wLA_2uG0yO.webp)
+- [Helsinki Design System](https://hds.hel.fi/components/tabs) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/8dd2dtQPBfdb59gaTZIRS1HHJBrXPvv5pA8pCqvfiPc_1neN9G.webp)
+- [HeroUI](https://www.heroui.com/docs/components/tabs) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/1Sosqx15ay0avDxOHY6EnNaUM8Pq0qC1CkDmcA6rWBI_1qG1lr.webp)
+- [Inclusive Components](https://inclusive-components.design/tabbed-interfaces/) — Inclusive Components — Code examples, Accessibility, Unmaintained · [preview](https://component.gallery/_astro/SCG-vtc69jMbeS-ROx7wirJxiglFjZYsNYn6k3dbRWU_ZHOOfF.webp)
+- [Instructure-UI](https://instructure.design/#Tabs) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/fJ-Hpu5MzouJLPyjZXjjiHEeUWLM5XX2qJd62kNUsZo_Z2rgnh3.webp)
+- [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/tabs) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/QJTuvtTjMa6-LYsEf2XU7XWADkr3fFrLUI2gpSGyDmw_Zm5JNJ.webp)
+- [Scoped Tabs](https://www.lightningdesignsystem.com/components/scoped-tabs/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/4A0CbUhDe9ITPeUGf5DbCUil4YiiJXTbzuylB2HYB_Q_yHJ21.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/tabs/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/RSNfNLx00dfKK1F-5WBKfZzebMuBvw3R7-rIjCU8SX4_WFYDl.webp)
+- [Vertical Tabs](https://www.lightningdesignsystem.com/components/vertical-tabs/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/RPCxHoidZ4ZwS1crd9kDgk9TbEk_3ezv0boMxf4kP8g_Z1zSROR.webp)
+- [Material Design](https://m3.material.io/components/tabs/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/gnPH5vJcyHVMHftDhIPFcsRYv0HPVhfl4p4TnqCNUvU_7EMvK.webp)
+- [Tab](https://momentum.design/components/tab) — Momentum Design · React, Web Components — Usage guidelines, Open source · [preview](https://component.gallery/_astro/_unP4YDkzjiZcWof26bgI_WkIMSAxPR3lC4ql_tNFe0_EQJxI.webp)
+- [Morningstar Product System](https://design.morningstar.com/systems/product/components/tabs) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/H1-71HVaJ-22KY_SO-0HjpURbL2RjaOpP7Yadz-USfo_ZzGubV.webp)
+- [Nessie](https://design.ns.nl/4a05a30ad/p/9298c6-tabs) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/4NohbXlf_UBVZeDXUw7pRCIEnhU2g-MZZy0NrCwGass_XJtmg.webp)
+- [NewsKit](https://www.newskit.co.uk/components/tabs/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/2AesDygNor5HoL1h_cm5EHI7GmOq_0qwLDlJCK9OZWk_Z2jPqBK.webp)
+- [Tab group](https://nordhealth.design/components/tab-group/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/TkGRAWSydbQP8OXNwFRUBWJPtIO8eg9BuVnCjqN6xeg_1oDTnU.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-tabs) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/Rm2LLnSgC5zk4ZbK0OQp7GsL_efIyUHYL1YeShLkZTw_1vgiuK.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/tabs/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Gu3Ozui53JxIpCTJTykQhws5xasaCHxfGn37Wr0dmlw_pUcpI.webp)
+- [Orbit](https://orbit.kiwi/components/tabs/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/vCnIl2Bp0xXL2aRDgz_9kHwj4kmV-OkeDGzkfPefX3A_1fPTYW.webp)
+- [Pajamas](https://design.gitlab.com/components/tabs) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/jQs3f9TCx45Qn0hA5KHq9__JZMntQV6jow_G6UJIhe0_2iQ5mP.webp)
+- [Paste](https://paste.twilio.design/components/tabs) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/Wd-ZKTbcpwzgpxIkvBqDAZobSYEMV3fbe05S6sypdec_Z2jRGwl.webp)
+- [PatternFly](https://www.patternfly.org/components/tabs) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/zjNnCWbjNn_b3-osMs6xMjI8QA5y26z-xA52qR6CcTQ_tyujn.webp)
+- [Pharos](https://pharos.jstor.org/components/tabs) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/xO5q1DquQm_IuUBx0-0dCM0mt3NtR7DplPDEAL_8Nx0_ZQLF1Q.webp)
+- [Polaris](https://polaris.shopify.com/components/navigation/tabs) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/cQhIbENk_KWFFGdjJkKHZEciyXHP7Wnv2XfORqiE0fk_Z1EHqUe.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/tabs/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/KfJ-LlUoNunrl18s1Sc0-m7KsXiqD8ItwQ1nZOztvWQ_Z1D8dob.webp)
+- [Tabs Bar](https://designsystem.porsche.com/v3/components/tabs-bar/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/ZSo3XdgwBJ_dNf1TuqCQSb-ISpNK9tSENrs9sUOanLE_Z2DfqM.webp)
+- [Tab panels](https://primer.style/design/components/tab-panels) — Primer · React — Code examples, Open source
+- [Purple3](https://design.herokai.com/purple3/docs/#tabs) — Purple3 · CSS — Code examples, Unmaintained · [preview](https://component.gallery/_astro/AWYBOdm8auwNApuabY1wyCgabSVBCzM3Th5nQADW-Fk_Z1PsuIJ.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/tabs) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/f1IFH27M6zf8tCeLnwAITttleCBXqVgz08oZ9WrmWv0_ZMNYPP.webp)
+- [Radix Primitives](https://radix-ui.com/primitives/docs/components/tabs) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/W0u4auKehD_Gb2pc91r-NiWB1jYWBPSAxuM5PP8TVPw_Z2bx4y3.webp)
+- [Reach UI](https://reach.tech/tabs) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/k7s9ywc42kPnHdpTZh_munhS0ooXeLtQSPnEYQ4YF0A_Z1YAInq.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/tabs/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/pFLGrOreWNMb9I0AsssRavlWbZh08-4pOL3nHGYYK0U_vMRpk.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Interactive/Tabs) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/mC6RViQE_LJD59tCAL4sVIYbaUYiev0nqDnL4-i0riI_1avPTP.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/tabs/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/ZAUTXnLaTwxSGceWtgDPndy3C9OV5ure-DrJx7ZZBbE_mOEV4.webp)
+- [Tab](https://designlibrary.sebgroup.com/components/tab/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/tDARMe2PtF95YaH8qeJbyqISePPX0kf7cv1HO0_4JmQ_Z1li3a2.webp)
+- [Seeds](https://sproutsocial.com/seeds/components/tabs) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/8-zP3EXrDRpqCjUfnj6QukM-1-UCyuJ_emERh4zEIRA_1g5iIl.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/tabs) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/FTEzZ0J0vMk11YkBQq18504x6tTHuAiQ0xoMwJ90XWs_Z1nKjk6.webp)
+- [Tab group](https://shoelace.style/components/tab-group) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/WPfJYxdllCh0ATZmZg1R3CCkcANNqxKmE-_OTVvjc_c_Z1hgjIq.webp)
+- [Tab](https://shoelace.style/components/tab) — Shoelace · Web Components — Code examples, Open source
+- [Tab panel](https://shoelace.style/components/tab-panel) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/cKW40ivTya9UVoTA0j8188N1pZ1XdHp48pKygkQ_Xz4_ODBTv.webp)
+- [Spectrum](https://spectrum.adobe.com/page/tabs/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/571HVXua7k40UQpxjk1vYgksH-ABxVdjUJw6hYwyW3w_Z1tlS8D.webp)
+- [SubZero](https://www.subzero.axis.bank.in/components/tabs) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/XuhwdwS45S1ME1Tc-UKRLxJKXNF11zkCaNKUCxxydb0_1u32P6.webp)
+- [uStyle](https://ustyle.guide/pattern-library/javascript.html#tabs) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/vHan049vyKicS5XwatHNaeBZycuNss9P8tcv809EQgY_GGChD.webp)
+- [Visa Product Design System](https://design.visa.com/components/tabs/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/FBczoTJ7ag_Yrp8We0_S7dXyc7FKoCAKW4Pr9T3W9gU_Z2pxLR2.webp)
+- [Tab](https://design.wonderflow.ai/get-started/components/navigation/tab) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/ipW1nju-xN9b8jiG75-w2ReGjr0EeIAKq9NIAYblP9M_ZT6za.webp)
+- [Tab Group](https://webawesome.com/docs/components/tab-group/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/7AHDbuuuaZ_mvrukOuQUfeKwszRxb7nuHAkfotl4wqs_Z1Qp2jn.webp)
+- [Wise Design](https://wise.design/components/tabs) — Wise Design · Mobile — Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/-Pr3nS2U-pj8LU3pbkoAQBYP78cdBaWhzdEJnM5zmd8_Z11l182.webp)
+- [Workday Canvas Design System](https://canvas.workday.com/components/containers/tabs) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/swjcSBYP8fB7ahbgBjAAwfRrnioBaSH01xKvP4Epp_Q_1sbFyf.webp)
+---
+*Data from [component.gallery](https://component.gallery) by [Iain Bean](https://iainbean.com). 281 examples across 6 components.*