Components / Layout

Tabs

Underlined sub-page tabs. Pass the current pathname, or use NavTabs from @somnia-chain/ui/next to read it from the router.

Extracted fromExplorer

Import

tsx

import { Tabs, NavTabs, isActive } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Tabs, NavTabs, isActive } from "@somnia-chain/ui/next"

Examples

Tabs

Pressing a tab switches it in place. In an app each one is a page and current is the route.

examples/tabs/default.tsxShow code

tsx

"use client"

import { Tabs } from "@somnia-chain/ui"

import { useInPlaceTabs } from "@/components/use-in-place-tabs"

export default function TabsExample() {
  // In an app, `current` is the route and each href a page. Here pressing a tab just makes it current.
  const { current, linkAs } = useInPlaceTabs("#perps")
  return (
    <div className="border-line border-b">
      <Tabs
        label="Market types"
        current={current}
        linkAs={linkAs}
        links={[
          { href: "#spot", label: "Spot" },
          { href: "#perps", label: "Perps" },
          { href: "#binary", label: "Binary" },
          { href: "#series", label: "Series" },
        ]}
      />
    </div>
  )
}

Props

Tabs

Prop	Type	Default	Description
links	{ href, label }[]	—	Tabs in order.
current	string	—	Current pathname; the exact match is active.
label	string	—	Accessible name of the <nav>, so a page with two sets of tabs can tell them apart. NavTabs takes it too.
linkAs	LinkComponent	<a>	Component for internal links. @somnia-chain/ui/next sets it to next/link.