Tabs

Interfaz de pestañas para cambiar entre vistas

Componente tabs construido con Ark UI, con API conveniente (pasar items) y API compuesta para control total del marcado.

Cambia la configuración de tu cuenta aquí.

import { Tabs } from "@/components/ui/tabs";

export default function Example() {
  return (
    <Tabs
      defaultValue="account"
      items={[
        { value: "account", label: "Cuenta", content: <p>Cambia la configuración de tu cuenta aquí.</p> },
        { value: "password", label: "Contraseña", content: <p>Cambia tu contraseña aquí.</p> },
      ]}
    />
  );
}

View Code

Instalación

bash

liminal add tabs

Uso

Cambia la configuración de tu cuenta aquí.

import { Tabs } from "@/components/ui/tabs";

export default function Example() {
  return (
    <Tabs
      defaultValue="account"
      items={[
        { value: "account", label: "Cuenta", content: <p>Cambia la configuración de tu cuenta aquí.</p> },
        { value: "password", label: "Contraseña", content: <p>Cambia tu contraseña aquí.</p> },
      ]}
    />
  );
}

View Code

Ejemplos

API conveniente

Pasa un array items con value, label y content. Por defecto una pestaña abierta a la vez.

Cambia la configuración de tu cuenta aquí.

<Tabs
  defaultValue="account"
  items={[
    { value: "account", label: "Cuenta", content: <p>Cambia la configuración de tu cuenta aquí.</p> },
    { value: "password", label: "Contraseña", content: <p>Cambia tu contraseña aquí.</p> },
  ]}
/>

View Code

API compuesta

Usa TabsRoot, TabsList, TabsTrigger y TabsContent para layout o estilos personalizados.

Cambia la configuración de tu cuenta aquí.

import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/tabs";

export default function Example() {
  return (
    <TabsRoot defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Cuenta</TabsTrigger>
        <TabsTrigger value="password">Contraseña</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Cambia la configuración de tu cuenta aquí.
      </TabsContent>
      <TabsContent value="password">
        Cambia tu contraseña aquí.
      </TabsContent>
    </TabsRoot>
  );
}

View Code

API

Prop	Type	Default	Description
items	TabsItem[]	-	Array de { value, label, content, disabled? }. Usado por la API conveniente.
defaultValue	string	-	Valor de la pestaña activa inicial (no controlado).
value	string	-	Valor de la pestaña activa (controlado).
onValueChange	(details: { value: string }) => void	-	Callback cuando cambia la pestaña activa.