Tile UI Vue
Source code

Components

Tabs

Tabs navigation primitives.

Use Tabs to switch between panes of content.

Account preferences live here.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@tile-ui/vue';
 
export default function TabsDemo() {
	return (
		<Tabs defaultValue="account">
			<TabsList>

Registry install

pnpm dlx shadcn@latest add @tile-ui/tabs

Package usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@tile-ui/vue';
 
<Tabs defaultValue="account">
	<TabsList>
		<TabsTrigger value="account">Account</TabsTrigger>
		<TabsTrigger value="settings">Settings</TabsTrigger>
	</TabsList>
	<TabsContent value="account">Account content.</TabsContent>
	<TabsContent value="settings">Settings content.</TabsContent>
</Tabs>

Highlights

  • List, trigger, and content
  • Controlled and uncontrolled
  • Horizontal and vertical

Registry dependencies

Item Purpose
tabs Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Tabs

Prop Type Default
value string —
defaultValue string —
onValueChange (value: string) => void —
orientation 'horizontal' | 'vertical' —

TabsList

Prop Type Default
variant 'default' | 'line' —

TabsTrigger

Prop Type Default
value string —
disabled boolean —

TabsContent

Prop Type Default
value string —
PreviousTableNextTextarea