tweakcn
shadcn/ui 컴포넌트를 위한 비주얼 노코드 테마 편집기
파일 탐색기
최종 버전 다운로드 (.zip)- bug_report.md
- feature_request.md
- FUNDING.yml
- pre-commit
- account.ts
- ai-usage.ts
- checkout.ts
- community-themes.ts
- customer.ts
- themes.ts
- auth-dialog.tsx
- page.tsx
- layout.tsx
- ai-announcement.tsx
- ai-chat-form.tsx
- ai-chat-hero.tsx
- chat-heading.tsx
- community-theme-card.tsx
- community-themes.tsx
- suggested-pill-actions.tsx
- layout.tsx
- loading.tsx
- page.tsx
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- route.ts
- community-sidebar.tsx
- community-theme-card.tsx
- community-theme-preview-dialog.tsx
- community-themes-content.tsx
- layout.tsx
- page.tsx
- layout.tsx
- loading.tsx
- page.tsx
- layout.tsx
- loading.tsx
- page.tsx
- layout.tsx
- page.tsx
- page.tsx
- checkout-button.tsx
- layout.tsx
- page.tsx
- route.ts
- route.ts
- delete-account-section.tsx
- page.tsx
- customer-portal-link.tsx
- settings-header.tsx
- settings-sidebar.tsx
- theme-card.tsx
- themes-list.tsx
- usage-stats.tsx
- user-info.tsx
- route.ts
- page.tsx
- page.tsx
- layout.tsx
- page.tsx
- layout.tsx
- page.tsx
- error.tsx
- layout.tsx
- loading.tsx
- not-found.tsx
- opengraph-image.alt.txt
- opengraph-image.tsx
- page.tsx
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- globals.css
- layout.tsx
- loaders.css
- not-found.tsx
- page.tsx
- sitemap.ts
- buymeacoffee.svg
- discord.svg
- figma.svg
- github.svg
- google.svg
- heart.svg
- logo.svg
- mcp.svg
- og-image.png
- shadcn.svg
- shadcnblocks.svg
- shadcncraft.svg
- shadcraft.svg
- twitter.svg
- code-block.tsx
- conversation.tsx
- response.tsx
- action-bar-buttons.tsx
- ai-generate-button.tsx
- code-button.tsx
- import-button.tsx
- mcp-dialog.tsx
- more-options.tsx
- publish-button.tsx
- reset-button.tsx
- save-button.tsx
- share-button.tsx
- theme-toggle.tsx
- undo-redo-buttons.tsx
- action-bar.tsx
- ai-chat-form-body.tsx
- alert-banner.tsx
- chat-image-preview.tsx
- chat-input.tsx
- chat-interface.tsx
- chat-theme-preview.tsx
- closeable-suggested-pill-actions.tsx
- drag-and-drop-image-uploader.tsx
- enhance-prompt-button.tsx
- image-uploader.tsx
- loading-logo.tsx
- message-actions.tsx
- message-edit-form.tsx
- message.tsx
- messages.tsx
- no-messages-placeholder.tsx
- pill-action-button.tsx
- stream-text.tsx
- uploaded-image-preview.tsx
- color-preview.tsx
- components-showcase.tsx
- examples-preview-container.tsx
- tabs-trigger-pill.tsx
- code-panel-dialog.tsx
- code-panel.tsx
- color-picker.tsx
- color-selector-popover.tsx
- colors-tab-content.tsx
- contrast-checker.tsx
- control-section.tsx
- css-import-dialog.tsx
- custom-textarea.tsx
- editor.tsx
- font-picker.tsx
- hsl-adjustment-controls.tsx
- hsl-preset-button.tsx
- inspector-class-item.tsx
- inspector-overlay.tsx
- mention-list.tsx
- mention-suggestion.ts
- section-context.tsx
- shadow-control.tsx
- share-dialog.tsx
- slider-with-input.tsx
- theme-control-actions.tsx
- theme-control-panel.tsx
- theme-font-select.tsx
- theme-preset-select.tsx
- theme-preview-panel.tsx
- theme-save-dialog.tsx
- frame-highlight.tsx
- noise-effect.tsx
- spotlight.tsx
- activity-feed.tsx
- featured-icon.tsx
- index.tsx
- messaging.tsx
- stock-market.tsx
- ticker.tsx
- transactions.tsx
- activity-goal.tsx
- calendar.tsx
- chat.tsx
- cookie-settings.tsx
- create-account.tsx
- date-picker-with-range.tsx
- exercise-minutes.tsx
- forms.tsx
- github-card.tsx
- index.tsx
- payment-method.tsx
- payments.tsx
- report-issue.tsx
- share.tsx
- stats.tsx
- team-members.tsx
- index.tsx
- app-sidebar.tsx
- chart-area-interactive.tsx
- chart-bar-mixed.tsx
- chart-pie-donut.tsx
- data-table.tsx
- nav-documents.tsx
- nav-main.tsx
- nav-secondary.tsx
- nav-user.tsx
- section-cards.tsx
- site-header.tsx
- data.json
- index.tsx
- account-switcher.tsx
- mail-display.tsx
- mail-list.tsx
- mail.tsx
- nav.tsx
- data.tsx
- index.tsx
- use-mail.ts
- benefits.tsx
- faq.tsx
- footer.tsx
- hero.tsx
- index.tsx
- insights.tsx
- logo-strip.tsx
- metrics.tsx
- nav.tsx
- newsletter.tsx
- pricing.tsx
- section-heading.tsx
- testimonials.tsx
- album-artwork.tsx
- menu.tsx
- podcast-empty-placeholder.tsx
- sidebar.tsx
- albums.ts
- playlists.ts
- index.tsx
- columns.tsx
- data-table-column-header.tsx
- data-table-faceted-filter.tsx
- data-table-pagination.tsx
- data-table-row-actions.tsx
- data-table-toolbar.tsx
- data-table-view-options.tsx
- data-table.tsx
- user-nav.tsx
- data.tsx
- schema.ts
- tasks.json
- index.tsx
- blog-post.tsx
- font-showcase.tsx
- typography-demo.tsx
- ai-chat-demo.tsx
- ai-generation-cta.tsx
- cta.tsx
- faq.tsx
- features.tsx
- header.tsx
- hero.tsx
- how-it-works.tsx
- testimonials.tsx
- theme-preset-buttons.tsx
- theme-preset-selector.tsx
- tailwind-css.tsx
- accordion.tsx
- alert-dialog.tsx
- alert.tsx
- aspect-ratio.tsx
- avatar.tsx
- badge.tsx
- base-ui-tabs.tsx
- breadcrumb.tsx
- button.tsx
- calendar.tsx
- card.tsx
- carousel.tsx
- chart.tsx
- checkbox.tsx
- collapsible.tsx
- command.tsx
- context-menu.tsx
- dialog.tsx
- drawer.tsx
- dropdown-menu.tsx
- form.tsx
- hover-card.tsx
- input-otp.tsx
- input.tsx
- label.tsx
- menubar.tsx
- navigation-menu.tsx
- pagination.tsx
- popover.tsx
- progress.tsx
- radio-group.tsx
- resizable.tsx
- revola.tsx
- scroll-area.tsx
- select.tsx
- separator.tsx
- sheet.tsx
- sidebar.tsx
- skeleton.tsx
- slider.tsx
- sonner.tsx
- switch.tsx
- table.tsx
- tabs.tsx
- textarea.tsx
- toast.tsx
- toaster.tsx
- toggle-group.tsx
- toggle.tsx
- tooltip.tsx
- use-toast.ts
- auth-dialog-wrapper.tsx
- block-viewer.tsx
- copy-button.tsx
- debug-button.tsx
- dynamic-font-loader.tsx
- dynamic-website-preview.tsx
- error-boundary.tsx
- figma-export-dialog.tsx
- figma-header.tsx
- footer.tsx
- get-pro-cta.tsx
- get-pro-dialog-wrapper.tsx
- header.tsx
- horizontal-scroll-area.tsx
- icons.tsx
- loader.tsx
- loading.tsx
- posthog-init.tsx
- social-link.tsx
- tag-selector.tsx
- theme-preview.tsx
- theme-provider.tsx
- theme-script.tsx
- theme-toggle.tsx
- theme-view.tsx
- tooltip-wrapper.tsx
- user-profile-dropdown.tsx
- theme.ts
- index.ts
- schema.ts
- oauth-api.md
- 0000_snapshot.json
- 0001_snapshot.json
- 0002_snapshot.json
- 0003_snapshot.json
- 0004_snapshot.json
- _journal.json
- 0000_rare_moira_mactaggert.sql
- 0001_late_mikhail_rasputin.sql
- 0002_nebulous_randall.sql
- 0003_bumpy_quasimodo.sql
- 0004_red_monster_badoon.sql
- use-inspector-mouse-events.ts
- use-inspector-scroll.ts
- use-inspector-state.ts
- use-theme-inspector.ts
- index.ts
- use-community-themes.ts
- use-theme-mutations.ts
- use-themes-data.ts
- use-ai-chat-form.ts
- use-ai-enhance-prompt.ts
- use-ai-theme-generation-core.ts
- use-chat-context.tsx
- use-contrast-checker.ts
- use-controls-tab-from-url.ts
- use-copy-to-clipboard.ts
- use-debounced-callback.ts
- use-dialog-actions.tsx
- use-document-drag-and-drop-intent.ts
- use-feedback-text.ts
- use-font-search.ts
- use-fullscreen.ts
- use-github-stars.ts
- use-guards.ts
- use-iframe-theme-injector.ts
- use-image-upload-reducer.ts
- use-image-upload.ts
- use-media-query.tsx
- use-mobile.tsx
- use-mounted.tsx
- use-post-login-action.ts
- use-scroll-start-end.ts
- use-subscription.ts
- use-theme-inspector-classnames.ts
- use-theme-inspector-regex.ts
- use-theme-inspector.ts
- use-theme-preset-from-url.ts
- use-toast.ts
- use-website-preview.ts
- index.ts
- tools.ts
- parse-ai-sdk-transport-error.ts
- prompts.ts
- providers.ts
- class-utils.ts
- inspector-state-utils.ts
- segment-classname.ts
- theme-class-finder.ts
- auth-client.ts
- auth.ts
- checkout.ts
- constants.ts
- error-response.ts
- figma-constants.ts
- oauth.ts
- polar.ts
- posthog.ts
- query-client.tsx
- shared.ts
- subscription.ts
- utils.ts
- cartoon-2.webp
- cartoon-3.webp
- cartoon-4.webp
- person-1.webp
- person-2.webp
- person-3.webp
- person-4.webp
- person-5.webp
- person-6.webp
- benefit-1.webp
- benefit-2.webp
- blog-1.webp
- blog-2.webp
- blog-3.webp
- hero.webp
- metrics.webp
- avatar-1.png
- avatar-2.png
- avatar-3.png
- avatar-4.png
- avatar-5.png
- avatar-6.png
- hero-dashboard.png
- profile-avatar.png
- react-code-preview.png
- shadcraft-preview.jpg
- ui-blocks-grid.png
- registry.json
- file.svg
- globe.svg
- live-preview.js
- live-preview.min.js
- next.svg
- og-image.v050725.png
- placeholder.svg
- vercel.svg
- window.svg
- create-oauth-app.ts
- generate-registry.ts
- generate-theme-registry.ts
- ai-chat-store.ts
- ai-local-draft-store.ts
- auth-store.ts
- color-control-focus-store.ts
- editor-store.ts
- get-pro-dialog-store.ts
- idb-storage.ts
- preferences-store.ts
- theme-preset-store.ts
- website-preview-store.ts
- ai.ts
- community.ts
- editor.ts
- errors.ts
- fonts.ts
- index.ts
- live-preview-embed.ts
- subscription.ts
- theme.ts
- ai-prompt.tsx
- apply-theme.ts
- image-upload.ts
- message-converter.ts
- messages.ts
- prompts.ts
- google-fonts.ts
- index.ts
- tailwind-colors.ts
- themes.ts
- v0.ts
- apply-style-to-element.ts
- apply-theme.ts
- color-converter.ts
- contrast-checker.ts
- debounce.ts
- format.ts
- parse-css-input.ts
- shadows.ts
- subscription.ts
- theme-fonts.ts
- theme-preset-helper.ts
- theme-presets.ts
- theme-style-generator.ts
- theme-styles.ts
- try-catch.ts
- .dockerignore
- .env.example
- .gitignore
- .prettierignore
- .prettierrc
- components.json
- CONTRIBUTING.md
- docker-compose.yml
- Dockerfile
- drizzle.config.ts
- eslint.config.mjs
- LICENSE
- middleware.ts
- next.config.ts
- package-lock.json
- package.json
- pnpm-lock.yaml
- postcss.config.mjs
- README.md
- routes.ts
- tsconfig.json
# 설치 가이드
1. 코드 내려받기
git clone https://github.com/jnsahaj/tweakcn
깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.
cd tweakcn
방금 내려받은 프로젝트 폴더 안으로 이동합니다.
2. Docker
쉬움 추천사전 준비물
- Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
- Docker Desktop 컨테이너를 빌드하고 실행하려면 필요합니다. 설치 후 실행해서 백그라운드에 켜두세요.
docker compose up -d --build
정의된 모든 컨테이너(서버, DB 등)를 한 번에 빌드하고 백그라운드에서 실행합니다.
터미널에 docker compose ps 를 입력해 컨테이너들이 Up 상태인지 확인하세요. README에 포트 번호가 적혀있다면 브라우저에서 http://localhost:포트번호 로 접속해보세요.
3. Node.js
쉬움사전 준비물
npm install
package.json에 명시된 라이브러리들을 내려받아 설치합니다.
npm run dev
개발/실행 서버를 켭니다.
명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.
이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.
// repository documentation
Was this content helpful?
(0 ratings)
