NxtGenNxtGenDesign v0/Components
Navigation

Tabs

같은 영역에서 다른 콘텐츠를 전환하는 탭.

페이지 안 섹션 전환에 적합. 페이지 자체 전환은 Link를 사용. Radix Tabs 기반 — 화살표 키 네비, focus 관리 표준.

import { Tabs } from "@nxtgen-org/react";

Basic

언더라인 인디케이터

시스템 프롬프트 정의.

tsx
<Tabs defaultValue="prompt">
  <Tabs.List>
    <Tabs.Trigger value="prompt">Prompt</Tabs.Trigger>
    <Tabs.Trigger value="tools">Tools</Tabs.Trigger>
    <Tabs.Trigger value="memory">Memory</Tabs.Trigger>
    <Tabs.Trigger value="logs" disabled>Logs</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="prompt">...</Tabs.Content>
  <Tabs.Content value="tools">...</Tabs.Content>
  <Tabs.Content value="memory">...</Tabs.Content>

API

NameTypeDefaultDescription
TabsRadix Root—value/defaultValue/onValueChange.
Tabs.List / .Trigger / .Content———
Trigger disabledboolean——