Components
Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.
npx @21st-dev/cli add reshaped/reshaped-tabsLoading preview...
import { Divider, Reshaped, View } from "reshaped/bundle";
import Tabs from "@/components/ui/reshaped-tabs";
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ maxWidth: 480, width: "100%", margin: "0 auto", padding: 24 }}>
<>
<View paddingInline={8}>
<Tabs variant="borderless" defaultValue="1">
<Tabs.List>
<Tabs.Item value="1">Item 1</Tabs.Item>
<Tabs.Item value="2">Long item 2</Tabs.Item>
<Tabs.Item value="3">Very long item 3</Tabs.Item>
</Tabs.List>
</Tabs>
</View>
<Divider blank />
</>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...