Link

설치 확인

본문 링크와 버튼 모양 링크

1. 목적과 출처

본문 링크와 버튼 모양 링크

출처: 기존 컴포넌트 조합
프로젝트: src/components/ui/link.tsx
Registry: @adcapsule/link

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Link 변형
variant	본문 안	외부 링크
강조 default	설정은 테마 적용에서	shadcn/ui(새 탭에서 열림)
흐림 muted	설정은 테마 적용에서	shadcn/ui(새 탭에서 열림)
본문 색 inherit	설정은 테마 적용에서	shadcn/ui(새 탭에서 열림)

3. 속성 바꿔 보기

자세한 순서는 Registry 연결에 있습니다.

variant

외부 링크(external)

import NextLink from "next/link"
import { Link } from "@/components/ui/link"

<Link render={<NextLink href="/develop/registry" />}>Registry 연결</Link>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/link

npm 패키지: @base-ui/react, class-variance-authority, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import NextLink from "next/link"
import { Link } from "@/components/ui/link"

<Link render={<NextLink href="/settings" />}>설정</Link>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

variant: default·muted·inherit
external: 새 탭 + 표시
render로 next/link 등 다른 요소
버튼 모양은 buttonVariants 사용

공통으로 유지할 토큰

accent.default (default, --color-brand)
text.secondary (muted)
accent.default (포커스 링)

Link

설치 확인

본문 링크와 버튼 모양 링크

1. 목적과 출처

본문 링크와 버튼 모양 링크

출처: 기존 컴포넌트 조합
프로젝트: src/components/ui/link.tsx
Registry: @adcapsule/link

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Link 변형
variant	본문 안	외부 링크
강조 default	설정은 테마 적용에서	shadcn/ui(새 탭에서 열림)
흐림 muted	설정은 테마 적용에서	shadcn/ui(새 탭에서 열림)
본문 색 inherit	설정은 테마 적용에서	shadcn/ui(새 탭에서 열림)

3. 속성 바꿔 보기

자세한 순서는 Registry 연결에 있습니다.

variant

외부 링크(external)

import NextLink from "next/link"
import { Link } from "@/components/ui/link"

<Link render={<NextLink href="/develop/registry" />}>Registry 연결</Link>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/link

npm 패키지: @base-ui/react, class-variance-authority, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import NextLink from "next/link"
import { Link } from "@/components/ui/link"

<Link render={<NextLink href="/settings" />}>설정</Link>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿