Todos os componentes

Code Tabs

Code Tabs é um componente de navegação para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT navigation

O que é

Code Tabs é um componente de navegação para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Code Tabs

./registry/components/code/code-tabs.tsx
import { CodeTabs } from '@/components/ui/code-tabs';
import React from 'react';

function CodeTabsCompponent() {
  return (
    <div className='w-full dark:bg-black bg-white p-4 rounded-lg'>
      <CodeTabs
        tabs={[
          { id: 'npm', label: 'npm', code: 'npm i thing', lang: 'bash' },
          { id: 'pnpm', label: 'pnpm', code: 'pnpm add thing', lang: 'bash' },
          { id: 'yarn', label: 'yarn', code: 'yarn add thing', lang: 'bash' },
        ]}
        defaultValue='npm'
      />
      <CodeTabs
        tabs={[
          {
            id: 'ui-layouts',
            label: 'ui-layouts',
            code: 'npx ui-layouts add code-tabs',
            lang: 'bash',
          },
          {
            id: 'shadcn',
            label: 'shadcn',
            code: 'npx shadcn@latest add code-tabs',
            lang: 'bash',
          },
        ]}
        isLogos={true}
        defaultValue='ui-layouts'
      />
    </div>
  );
}

export default CodeTabsCompponent;

Componentes parecidos