Models
Specs
Reviews
Browse through a wide selection of car models from various manufacturers and price ranges.
"use client"
import {
Tab,
TabList,
TabPanel,
Tabs,
} from "@/components/ui/preskok-ui/tabs"
export function TabsDemo() {
return (
<Tabs aria-label="Car Marketplace" className={"w-full"}>
<TabList>
<Tab id="m">Models</Tab>
<Tab id="s">Specs</Tab>
<Tab id="r">Reviews</Tab>
</TabList>
<TabPanel id="m">
Browse through a wide selection of car models from various manufacturers
and price ranges.
</TabPanel>
<TabPanel id="s">
Check detailed specifications including engine, performance, and
features for each vehicle.
</TabPanel>
<TabPanel id="r">
Read reviews and ratings from experts and owners to help make your
decision.
</TabPanel>
</Tabs>
)
}
Installation
CLI
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add tabs
Usage
import { Tabs } from "@/registry/preskok/ui/preskok-ui/tabs"
export function TabsDemo() {
return (
<Tabs defaultSelectedKey="1" items={[{ id: "1", title: "Tab 1" }]}>
{(item) => <div>{item.title}</div>}
</Tabs>
)
}