Tab

A series of interactive headings arranged vertically, each revealing a section of content when clicked.

Installation

Install the package

npm i @start-base/start-ui

Add the styles

To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.

app/layout.tsx

import "@start-base/start-ui/styles.css";

Import the component

import Tab from '@start-base/start-ui/Tab';

Usages

Tab allows you to display a set of content one at a time

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra felis sem, faucibus consectetur nunc ultrices id. Quisque sit amet elementum eros. Donec vestibulum, ligula quis aliquam porttitor, orci massa feugiat lacus, quis sagittis nisi libero id felis. Suspendisse consectetur sem eu faucibus aliquam. Proin consequat, purus a lobortis volutpat, nulla nisi tempor dui, ut placerat mi nisl at felis. Nulla dapibus commodo velit, nec consequat lorem tristique nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut tincidunt bibendum placerat. Maecenas in massa in nisi blandit lacinia ut congue ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Tab Open on Page Load

Tabs with 'open' set true will be open on page load. Only the first 'open' tab will be open if multiple tabs have 'open'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget neque vestibulum, varius lorem at, luctus quam. Donec interdum molestie risus, nec iaculis nisi. Donec fermentum felis sit amet urna convallis, ut finibus lectus elementum. In dignissim turpis varius libero dapibus, sed ultricies ante suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim vestibulum justo, vel cursus purus luctus non. Vivamus lectus enim, venenatis vel nibh eget, pharetra gravida mi. Donec dignissim auctor risus, ac tempus sem tristique ac. Fusce nisl dolor, ornare a massa non, mollis accumsan velit. Vivamus at maximus dolor, vel posuere nulla. Proin eget ipsum libero. Nunc nec mauris eu lorem tristique tristique. Sed scelerisque massa nec odio pretium pulvinar. Pellentesque id ligula efficitur erat ullamcorper suscipit at eu nisi. Integer rhoncus bibendum libero.

Tab Disabled

Disabled buttons won't display their content even if it is 'open'

Tab Ghost Variant

The 'ghost' variant offers a different look and styling.

API

Name	Type	Default	Variants	Description
tabs	`array`			Tabs of the tab
variant	`string`	`default`	`default` `ghost`	Variant of the tab
disabled	`boolean`	`false`		Disabled of the tab
open	`boolean`	`false`		Open of the tab

Stepper Table