ui - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #go #android #deep-learning #macos #java #windows #cli #vue #security #mcp #open-source

ui

(★ 12,000)

워크플로우를 가속화하도록 설계된 오픈소스 컴포넌트, 블록, AI 에이전트입니다. Registry와 MCP를 통해 선호하는 도구로 원활하게 가져오세요.

파일 탐색기

최종 버전 다운로드 (.zip)

- - .env.example
  - .gitignore
  - .prettierignore
  - components.json
  - eslint.config.mjs
  - mdx-components.tsx
  - middleware.ts
  - next.config.mjs
  - package.json
  - postcss.config.mjs
  - registry.json
  - source.config.ts
  - tsconfig.json
  - tsconfig.scripts.json
- auth.login.spec.ts
- auth.logout.spec.ts
- auth.password.spec.ts
- auth.redirects.spec.ts
- auth.refresh-singleton.spec.ts
- auth.register.spec.ts
- helpers.ts
- .env
- db.json
- package.json
- routes.json
- server.js
- - AGENTS.md
  - SKILL.md
- README.md
.commitlintrc.json
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
.kodiak.toml
.prettierignore
CONTRIBUTING.md
LICENSE.md
package.json
playwright.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
postcss.config.cjs
prettier.config.cjs
README.md
tsconfig.json
turbo.json
vitest.config.ts
vitest.workspace.ts

🚀 설치 가이드

1. 코드 내려받기

git clone https://github.com/creativetimofficial/ui

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ui

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

cd apps/www

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Creative Tim UI](https://raw.githubusercontent.com/creativetimofficial/ui/refs/heads/main/apps/www/public/opengraph-image.png)](https://creative-tim.com/ui)
# Creative Tim UI
[Creative Tim UI](https://creative-tim.com/ui)는 [shadcn/ui](https://ui.shadcn.com/)를 기반으로 구축된 포괄적인 컴포넌트 라이브러리로, 현대적인 웹 애플리케이션을 더 빠르게 구축할 수 있도록 도와줍니다.
## 개요
Creative Tim UI는 아름답고 프로덕션 환경에 바로 사용할 수 있는 웹 애플리케이션을 구축하도록 설계된 미리 구축되고 사용자 정의 가능한 React 컴포넌트와 블록을 제공합니다.
CLI를 사용하면 Next.js 프로젝트에 이러한 컴포넌트를 쉽게 추가할 수 있습니다.
## 설치
npx를 사용하여 Creative Tim UI CLI를 직접 사용하거나 전역으로 설치할 수 있습니다:
```bash
# Use directly (recommended)
npx @creative-tim/ui@latest add 
# Or using shadcn cli
npx shadcn@latest add https://creative-tim.com/ui/r/all.json
```
## 사전 요구 사항
Creative Tim UI를 사용하기 전에 Next.js 프로젝트가 다음 요구 사항을 충족하는지 확인하세요:
- \*\*Node.js 18\*\* 이상
- 프로젝트에 초기화된 \*\*shadcn/ui\*\* (npx shadcn@latest init)
- 구성된 \*\*Tailwind CSS\*\*
## 사용법
### 모든 컴포넌트 설치
사용 가능한 모든 Creative Tim UI 컴포넌트를 한 번에 설치합니다:
```bash
npx @creative-tim/ui@latest add all
```
이 명령어는 다음 작업을 수행합니다:
- 아직 구성되지 않은 경우 shadcn/ui 설정
- 구성된 컴포넌트 디렉토리에 모든 Creative Tim UI 컴포넌트 설치
- 프로젝트에 필요한 종속성 추가
### 특정 컴포넌트 설치
`components add` 명령어를 사용하여 개별 컴포넌트를 설치합니다:
```bash
npx @creative-tim/ui@latest add 
```
예시:
```bash
# Install the orb component
npx @creative-tim/ui@latest add card
```
### 대안: shadcn CLI 사용
표준 shadcn/ui CLI를 사용하여 컴포넌트를 설치할 수도 있습니다:
```bash
# Install all components
npx shadcn@latest add https://creative-tim.com/ui/r/all.json
# Install a specific component
npx shadcn@latest add https://creative-tim.com/ui/r/button.json
```
사용 가능한 모든 컴포넌트는 [여기](https://creative-tim.com/ui/docs/components)에서 확인하거나, [여기](https://creative-tim.com/ui/blocks)에서 예시 블록 목록을 탐색할 수 있습니다.
## 블록
카테고리별로 정리된 즉시 사용 가능한 블록 컬렉션을 살펴보세요. 각 블록은 완전히 사용자 정의가 가능하며 단일 명령어로 프로젝트에 추가할 수 있습니다.
### 애플리케이션 UI

|  |  |  |
| --- | --- | --- |
| [Modals   **Modals**  *5 Blocks*](https://creative-tim.com/ui/blocks/modals) | [Account   **Account**  *7 Blocks*](https://creative-tim.com/ui/blocks/account) | [Billing   **Billing**  *5 Blocks*](https://creative-tim.com/ui/blocks/billing) |

### 마케팅

|  |  |  |
| --- | --- | --- |
| [Testimonial Sections   **Testimonial Sections**  *17 Blocks*](https://creative-tim.com/ui/blocks/testimonials) | [Contact Sections   **Contact Sections**  *15 Blocks*](https://creative-tim.com/ui/blocks/contact) | [Footers   **Footers**  *16 Blocks*](https://creative-tim.com/ui/blocks/footers) |
| [FAQs   **FAQs**  *6 Blocks*](https://creative-tim.com/ui/blocks/faqs) | [Blog   **Blog**  *15 Blocks*](https://creative-tim.com/ui/blocks/blog) |

### 이커머스 UI
제품 목록, 쇼핑 카트 및 체크아웃 플로우를 위한 즉시 사용 가능한 블록입니다.

|  |
| --- |
| [Ecommerce Sections   **Ecommerce Sections**  *14 Blocks*](https://creative-tim.com/ui/blocks/ecommerce) |

### 웹 3.0
탈중앙화 애플리케이션, 블록체인 프로젝트, 암호화폐 플랫폼을 위해 혁신적으로 구축된 섹션입니다.

|  |
| --- |
| [Web 3.0 Cards   **Web 3.0 Cards**  *5 Blocks*](https://creative-tim.com/ui/blocks/web3) |

## 기여하기
Creative Tim UI에 기여하고 싶으시다면 다음 단계를 따라주세요:
1. 리포지토리를 포크(Fork)합니다.
2. 새 브랜치를 생성합니다.
3. 레지스트리의 컴포넌트에 변경 사항을 적용합니다.
4. main 브랜치로 PR을 요청합니다.
[기여 가이드](/CONTRIBUTING.md)를 읽어주세요.

## 저작권 및 라이선스
Creative Tim UI는 오픈소스 커뮤니티의 훌륭한 결과물을 바탕으로 제작되었습니다:
- \*\*[shadcn/ui](https://ui.shadcn.com/)\*\* - 문서 구조, 레지스트리 시스템 및 기본(원자) 컴포넌트는 shadcn/ui의 오픈소스 작업물을 기반으로 합니다. [MIT License](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md)
- Creative Tim의 \*\*[Material Tailwind](https://material-tailwind.com/v3)\*\* - 블록 및 컴포넌트 디자인은 Material Tailwind 프레임워크에서 영감을 받았으며 이를 기반으로 합니다. [MIT License](https://github.com/creativetimofficial/material-tailwind/blob/main/LICENSE.md)
- \*\*[Eleven Labs UI](https://github.com/elevenlabs/elevenlabs-ui)\*\* - 문서 구조 및 블록 접근 방식에 대한 전반적인 영감을 주었습니다. [MIT License](https://github.com/elevenlabs/ui/blob/main/LICENSE.md)
- Vercel의 \*\*[Geist Font](https://vercel.com/font)\*\* - 인터페이스 전반에 사용된 아름다운 서체입니다. [SIL Open Font License 1.1](https://github.com/vercel/geist-font/blob/main/LICENSE.txt)

오픈소스 라이선스로 작업물을 공개해 주신 이러한 프로젝트들에 감사드립니다.

## 라이선스
[MIT license](https://github.com/creativetimofficial/ui/blob/main/LICENSE.md)에 따라 라이선스가 부여됩니다.
Made with love by [Creative Tim](https://creative-tim.com).