Tabs

Active tab is ink with a 1.5px underline.

Install

npx raster add tabs

Markup

<div class="rs-tabs"><span class="rs-tab rs-tab-active">Overview</span><span class="rs-tab">Activity</span></div>

React

import { Tab, TabList, TabPanel, Tabs } from "@/components/raster/tabs";

<Tabs defaultValue="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="activity">Activity</Tab>
  </TabList>
  <TabPanel value="overview">…</TabPanel>
  <TabPanel value="activity">…</TabPanel>
</Tabs>

Classes

.rs-tabs.rs-tab.rs-tab-active