这里放了 Tailwind Plus 所有组件的目录树，便于 AI 使用。
对于 AI，首推 v3 版本。虽然不是最新的，但好在兼容性好，AI 直接就能用，基本不需要怎么改。如果换 v4（25 年新出）的话，那 AI 的知识可能还没跟上，会出现各种各样的问题。
当然，如果你一定要用最新版的话，也不是不行，把下边根目录的版本从 3 改成 4 就成，其他都是一样的。
一般的流程是这样：
- 新建或打开现有项目；
- 把所需语言和版本的组件目录拖入项目（从 这里 获取）；
- 复制目录树让 AI 看看，同时 @组件目录，让它应用（得提需求）；
- 等它编码，预览效果……
玩的愉快，诸位 
React V3
react-v3
├── application-ui
│ ├── application-shells
│ │ ├── multi-column
│ │ │ ├── ConstrainedThreeColumn.jsx
│ │ │ ├── ConstrainedWithStickyColumns.jsx
│ │ │ ├── FullwidthSecondaryColumnOnRight.jsx
│ │ │ ├── FullwidthThreecolumn.jsx
│ │ │ ├── FullwidthWithNarrowSidebar.jsx
│ │ │ └── FullwidthWithNarrowSidebarAndHeader.jsx
│ │ ├── sidebar
│ │ │ ├── BrandSidebar.jsx
│ │ │ ├── BrandSidebarWithHeader.jsx
│ │ │ ├── DarkSidebar.jsx
│ │ │ ├── DarkSidebarWithHeader.jsx
│ │ │ ├── LightSidebar.jsx
│ │ │ ├── LightSidebarWithConstrainedContentArea.jsx
│ │ │ ├── LightSidebarWithHeader.jsx
│ │ │ └── LightSidebarWithOffwhiteBackground.jsx
│ │ └── stacked
│ │ ├── BrandNavWithOverlap.jsx
│ │ ├── BrandedNavWithCompactWhitePageHeader.jsx
│ │ ├── BrandedNavWithWhitePageHeader.jsx
│ │ ├── DarkNavWithCompactWhitePageHeader.jsx
│ │ ├── DarkNavWithOverlap.jsx
│ │ ├── DarkNavWithWhitePageHeader.jsx
│ │ ├── LightNavOnGrayBackground.jsx
│ │ ├── LightNavWithBottomBorder.jsx
│ │ └── TworowNavigationWithOverlap.jsx
│ ├── data-display
│ │ ├── calendars
│ │ │ ├── BorderlessSidebyside.jsx
│ │ │ ├── BorderlessStacked.jsx
│ │ │ ├── DayView.jsx
│ │ │ ├── Double.jsx
│ │ │ ├── MonthView.jsx
│ │ │ ├── SmallWithMeetings.jsx
│ │ │ ├── WeekView.jsx
│ │ │ └── YearView.jsx
│ │ ├── description-lists
│ │ │ ├── Leftaligned.jsx
│ │ │ ├── LeftalignedInCard.jsx
│ │ │ ├── LeftalignedOnDark.jsx
│ │ │ ├── LeftalignedStriped.jsx
│ │ │ ├── LeftalignedWithInlineActions.jsx
│ │ │ ├── NarrowWithHiddenLabels.jsx
│ │ │ └── Twocolumn.jsx
│ │ └── stats
│ │ ├── SimpleInCards.jsx
│ │ ├── SimpleOnDark.jsx
│ │ ├── WithBrandIcon.jsx
│ │ ├── WithSharedBorders.jsx
│ │ └── WithTrending.jsx
│ ├── elements
│ │ ├── avatars
│ │ │ ├── AvatarGroupStackedBottomToTop.jsx
│ │ │ ├── AvatarGroupStackedTopToBottom.jsx
│ │ │ ├── CircularAvatars.jsx
│ │ │ ├── CircularAvatarsWithBottomNotification.jsx
│ │ │ ├── CircularAvatarsWithPlaceholderIcon.jsx
│ │ │ ├── CircularAvatarsWithPlaceholderInitials.jsx
│ │ │ ├── CircularAvatarsWithTopNotification.jsx
│ │ │ ├── RoundedAvatars.jsx
│ │ │ ├── RoundedAvatarsWithBottomNotification.jsx
│ │ │ ├── RoundedAvatarsWithTopNotification.jsx
│ │ │ └── WithText.jsx
│ │ ├── badges
│ │ │ ├── Flat.jsx
│ │ │ ├── FlatPill.jsx
│ │ │ ├── FlatPillWithDot.jsx
│ │ │ ├── FlatWithDot.jsx
│ │ │ ├── FlatWithRemoveButton.jsx
│ │ │ ├── PillWithBorder.jsx
│ │ │ ├── PillWithBorderAndDot.jsx
│ │ │ ├── SmallFlat.jsx
│ │ │ ├── SmallFlatPill.jsx
│ │ │ ├── SmallFlatPillWithDot.jsx
│ │ │ ├── SmallFlatWithDot.jsx
│ │ │ ├── SmallPillWithBorder.jsx
│ │ │ ├── SmallWithBorder.jsx
│ │ │ ├── WithBorder.jsx
│ │ │ ├── WithBorderAndDot.jsx
│ │ │ ├── WithBorderAndDotOnDark.jsx
│ │ │ ├── WithBorderAndRemoveButton.jsx
│ │ │ └── WithBorderOnDark.jsx
│ │ ├── button-groups
│ │ │ ├── Basic.jsx
│ │ │ ├── IconOnly.jsx
│ │ │ ├── WithCheckboxAndDropdown.jsx
│ │ │ ├── WithDropdown.jsx
│ │ │ └── WithStat.jsx
│ │ ├── buttons
│ │ │ ├── ButtonsWithLeadingIcon.jsx
│ │ │ ├── ButtonsWithTrailingIcon.jsx
│ │ │ ├── CircularButtons.jsx
│ │ │ ├── PrimaryButtons.jsx
│ │ │ ├── PrimaryButtonsOnDark.jsx
│ │ │ ├── RoundedPrimaryButtons.jsx
│ │ │ ├── RoundedSecondaryButtons.jsx
│ │ │ ├── SecondaryButtons.jsx
│ │ │ ├── SecondaryButtonsOnDark.jsx
│ │ │ └── SoftButtons.jsx
│ │ └── dropdowns
│ │ ├── Simple.jsx
│ │ ├── WithDividers.jsx
│ │ ├── WithIcons.jsx
│ │ ├── WithMinimalMenuIcon.jsx
│ │ └── WithSimpleHeader.jsx
│ ├── feedback
│ │ ├── alerts
│ │ │ ├── WithAccentBorder.jsx
│ │ │ ├── WithActions.jsx
│ │ │ ├── WithDescription.jsx
│ │ │ ├── WithDismissButton.jsx
│ │ │ ├── WithLinkOnRight.jsx
│ │ │ └── WithList.jsx
│ │ └── empty-states
│ │ ├── Simple.jsx
│ │ ├── WithDashedBorder.jsx
│ │ ├── WithRecommendations.jsx
│ │ ├── WithRecommendationsGrid.jsx
│ │ ├── WithStartingPoints.jsx
│ │ └── WithTemplates.jsx
│ ├── forms
│ │ ├── action-panels
│ │ │ ├── Simple.jsx
│ │ │ ├── SimpleWell.jsx
│ │ │ ├── WithButtonAtTopRight.jsx
│ │ │ ├── WithButtonOnRight.jsx
│ │ │ ├── WithInput.jsx
│ │ │ ├── WithLink.jsx
│ │ │ ├── WithToggle.jsx
│ │ │ └── WithWell.jsx
│ │ ├── checkboxes
│ │ │ ├── ListWithCheckboxOnRight.jsx
│ │ │ ├── ListWithDescription.jsx
│ │ │ ├── ListWithInlineDescription.jsx
│ │ │ └── SimpleListWithHeading.jsx
│ │ ├── comboboxes
│ │ │ ├── Simple.jsx
│ │ │ ├── WithCheckOnLeft.jsx
│ │ │ ├── WithImage.jsx
│ │ │ ├── WithSecondaryText.jsx
│ │ │ └── WithStatusIndicator.jsx
│ │ ├── form-layouts
│ │ │ ├── LabelsOnLeft.jsx
│ │ │ ├── Stacked.jsx
│ │ │ ├── StackedOnDark.jsx
│ │ │ ├── Twocolumn.jsx
│ │ │ └── TwocolumnWithCards.jsx
│ │ ├── input-groups
│ │ │ ├── InputWithAddon.jsx
│ │ │ ├── InputWithCornerHint.jsx
│ │ │ ├── InputWithDisabledState.jsx
│ │ │ ├── InputWithGrayBackgroundAndBottomBorder.jsx
│ │ │ ├── InputWithHiddenLabel.jsx
│ │ │ ├── InputWithInlineAddon.jsx
│ │ │ ├── InputWithInlineLeadingAddonAndTrailingDropdown.jsx
│ │ │ ├── InputWithInlineLeadingAndTrailingAddons.jsx
│ │ │ ├── InputWithInlineLeadingDropdown.jsx
│ │ │ ├── InputWithInsetLabel.jsx
│ │ │ ├── InputWithKeyboardShortcut.jsx
│ │ │ ├── InputWithLabel.jsx
│ │ │ ├── InputWithLabelAndHelpText.jsx
│ │ │ ├── InputWithLeadingIcon.jsx
│ │ │ ├── InputWithLeadingIconAndTrailingButton.jsx
│ │ │ ├── InputWithOverlappingLabel.jsx
│ │ │ ├── InputWithPillShape.jsx
│ │ │ ├── InputWithTrailingIcon.jsx
│ │ │ ├── InputWithValidationError.jsx
│ │ │ ├── InputsWithInsetLabelsAndSharedBorders.jsx
│ │ │ └── InputsWithSharedBorders.jsx
│ │ ├── radio-groups
│ │ │ ├── Cards.jsx
│ │ │ ├── ColorPicker.jsx
│ │ │ ├── ListWithDescription.jsx
│ │ │ ├── ListWithDescriptionsInPanel.jsx
│ │ │ ├── ListWithInlineDescription.jsx
│ │ │ ├── ListWithRadioOnRight.jsx
│ │ │ ├── SimpleInlineList.jsx
│ │ │ ├── SimpleList.jsx
│ │ │ ├── SimpleListWithRadioOnRight.jsx
│ │ │ ├── SimpleTable.jsx
│ │ │ ├── SmallCards.jsx
│ │ │ └── StackedCards.jsx
│ │ ├── select-menus
│ │ │ ├── BrandedWithSupportedText.jsx
│ │ │ ├── CustomWithAvatar.jsx
│ │ │ ├── CustomWithCheckOnLeft.jsx
│ │ │ ├── CustomWithStatusIndicator.jsx
│ │ │ ├── SimpleCustom.jsx
│ │ │ ├── SimpleNative.jsx
│ │ │ └── WithSecondaryText.jsx
│ │ ├── sign-in-forms
│ │ │ ├── Simple.jsx
│ │ │ ├── SimpleCard.jsx
│ │ │ ├── SimpleNoLabels.jsx
│ │ │ ├── SimpleOnDark.jsx
│ │ │ └── SplitScreen.jsx
│ │ ├── textareas
│ │ │ ├── Simple.jsx
│ │ │ ├── WithAvatarAndActions.jsx
│ │ │ ├── WithPreviewButton.jsx
│ │ │ ├── WithTitleAndPillActions.jsx
│ │ │ └── WithUnderlineAndActions.jsx
│ │ └── toggles
│ │ ├── ShortToggle.jsx
│ │ ├── SimpleToggle.jsx
│ │ ├── ToggleWithIcon.jsx
│ │ ├── WithLeftLabelAndDescription.jsx
│ │ └── WithRightLabel.jsx
│ ├── headings
│ │ ├── card-headings
│ │ │ ├── Simple.jsx
│ │ │ ├── WithAction.jsx
│ │ │ ├── WithAvatarAndActions.jsx
│ │ │ ├── WithAvatarMetaAndDropdown.jsx
│ │ │ ├── WithDescription.jsx
│ │ │ └── WithDescriptionAndAction.jsx
│ │ ├── page-headings
│ │ │ ├── CardWithAvatarAndStats.jsx
│ │ │ ├── WithActions.jsx
│ │ │ ├── WithActionsAndBreadcrumbs.jsx
│ │ │ ├── WithActionsAndBreadcrumbsOnDark.jsx
│ │ │ ├── WithActionsOnDark.jsx
│ │ │ ├── WithAvatarAndActions.jsx
│ │ │ ├── WithBannerImage.jsx
│ │ │ ├── WithFiltersAndAction.jsx
│ │ │ ├── WithLogoMetaAndActions.jsx
│ │ │ ├── WithMetaActionsAndBreadcrumbs.jsx
│ │ │ ├── WithMetaActionsAndBreadcrumbsOnDark.jsx
│ │ │ ├── WithMetaAndActions.jsx
│ │ │ └── WithMetaAndActionsOnDark.jsx
│ │ └── section-headings
│ │ ├── Simple.jsx
│ │ ├── WithAction.jsx
│ │ ├── WithActions.jsx
│ │ ├── WithActionsAndTabs.jsx
│ │ ├── WithBadgeAndDropdown.jsx
│ │ ├── WithDescription.jsx
│ │ ├── WithInlineTabs.jsx
│ │ ├── WithInputGroup.jsx
│ │ ├── WithLabel.jsx
│ │ └── WithTabs.jsx
│ ├── layout
│ │ ├── cards
│ │ │ ├── BasicCard.jsx
│ │ │ ├── CardEdgetoedgeOnMobile.jsx
│ │ │ ├── CardWithFooter.jsx
│ │ │ ├── CardWithGrayBody.jsx
│ │ │ ├── CardWithGrayFooter.jsx
│ │ │ ├── CardWithHeader.jsx
│ │ │ ├── CardWithHeaderAndFooter.jsx
│ │ │ ├── Well.jsx
│ │ │ ├── WellEdgetoedgeOnMobile.jsx
│ │ │ └── WellOnGray.jsx
│ │ ├── containers
│ │ │ ├── ConstrainedToBreakpointWithPaddedContent.jsx
│ │ │ ├── ConstrainedWithPaddedContent.jsx
│ │ │ ├── FullwidthOnMobileConstrainedToBreakpointWithPaddedContentAboveMobile.jsx
│ │ │ ├── FullwidthOnMobileConstrainedWithPaddedContentAbove.jsx
│ │ │ └── NarrowConstrainedWithPaddedContent.jsx
│ │ ├── dividers
│ │ │ ├── WithButton.jsx
│ │ │ ├── WithIcon.jsx
│ │ │ ├── WithLabel.jsx
│ │ │ ├── WithLabelOnLeft.jsx
│ │ │ ├── WithTitle.jsx
│ │ │ ├── WithTitleAndButton.jsx
│ │ │ ├── WithTitleOnLeft.jsx
│ │ │ └── WithToolbar.jsx
│ │ ├── list-containers
│ │ │ ├── CardWithDividers.jsx
│ │ │ ├── CardWithDividersFullwidthOnMobile.jsx
│ │ │ ├── FlatCardWithDividers.jsx
│ │ │ ├── SeparateCards.jsx
│ │ │ ├── SeparateCardsFullwidthOnMobile.jsx
│ │ │ ├── SimpleWithDividers.jsx
│ │ │ └── SimpleWithDividersFullwidthOnMobile.jsx
│ │ └── media-objects
│ │ ├── AlignedToBottom.jsx
│ │ ├── AlignedToCenter.jsx
│ │ ├── Basic.jsx
│ │ ├── BasicResponsive.jsx
│ │ ├── MediaOnRight.jsx
│ │ ├── Nested.jsx
│ │ ├── StretchedToFit.jsx
│ │ └── WideResponsive.jsx
│ ├── lists
│ │ ├── feeds
│ │ │ ├── SimpleWithIcons.jsx
│ │ │ ├── WithComments.jsx
│ │ │ └── WithMultipleItemTypes.jsx
│ │ ├── grid-lists
│ │ │ ├── ActionsWithSharedBorders.jsx
│ │ │ ├── ContactCards.jsx
│ │ │ ├── ContactCardsWithSmallPortraits.jsx
│ │ │ ├── HorizontalLinkCards.jsx
│ │ │ ├── ImagesWithDetails.jsx
│ │ │ ├── LogosCardsWithDescriptionList.jsx
│ │ │ └── SimpleCards.jsx
│ │ ├── stacked-lists
│ │ │ ├── FullWidthWithLinks.jsx
│ │ │ ├── FullwidthWithConstrainedContent.jsx
│ │ │ ├── InCardWithLinks.jsx
│ │ │ ├── Narrow.jsx
│ │ │ ├── NarrowWithActions.jsx
│ │ │ ├── NarrowWithBadgesOnDark.jsx
│ │ │ ├── NarrowWithSmallAvatars.jsx
│ │ │ ├── NarrowWithSmallAvatarsOnDark.jsx
│ │ │ ├── NarrowWithStickyHeadings.jsx
│ │ │ ├── NarrowWithTruncatedContent.jsx
│ │ │ ├── Simple.jsx
│ │ │ ├── SimpleOnDark.jsx
│ │ │ ├── TwoColumnsWithLinks.jsx
│ │ │ ├── WithBadgesButtonAndActionsMenu.jsx
│ │ │ ├── WithInlineLinksAndActionsMenu.jsx
│ │ │ ├── WithInlineLinksAndAvatarGroup.jsx
│ │ │ └── WithLinks.jsx
│ │ └── tables
│ │ ├── FullWidth.jsx
│ │ ├── FullWidthWithAvatarsOnDark.jsx
│ │ ├── FullWidthWithConstrainedContent.jsx
│ │ ├── Simple.jsx
│ │ ├── SimpleInCard.jsx
│ │ ├── SimpleOnDark.jsx
│ │ ├── WithAvatarsAndMultilineContent.jsx
│ │ ├── WithBorder.jsx
│ │ ├── WithCheckboxes.jsx
│ │ ├── WithCondensedContent.jsx
│ │ ├── WithGroupedRows.jsx
│ │ ├── WithHiddenColumnsOnMobile.jsx
│ │ ├── WithHiddenHeadings.jsx
│ │ ├── WithSortableHeadings.jsx
│ │ ├── WithStackedColumnsOnMobile.jsx
│ │ ├── WithStickyHeader.jsx
│ │ ├── WithStripedRows.jsx
│ │ ├── WithSummaryRows.jsx
│ │ ├── WithUppercaseHeadings.jsx
│ │ └── WithVerticalLines.jsx
│ ├── navigation
│ │ ├── breadcrumbs
│ │ │ ├── Contained.jsx
│ │ │ ├── FullwidthBar.jsx
│ │ │ ├── SimpleWithChevrons.jsx
│ │ │ └── SimpleWithSlashes.jsx
│ │ ├── command-palettes
│ │ │ ├── DarkWithIcons.jsx
│ │ │ ├── SemitransparentWithIcons.jsx
│ │ │ ├── Simple.jsx
│ │ │ ├── SimpleWithPadding.jsx
│ │ │ ├── WithFooter.jsx
│ │ │ ├── WithGroups.jsx
│ │ │ ├── WithIcons.jsx
│ │ │ ├── WithImagesAndDescriptions.jsx
│ │ │ └── WithPreview.jsx
│ │ ├── navbars
│ │ │ ├── DarkWithQuickAction.jsx
│ │ │ ├── DarkWithSearch.jsx
│ │ │ ├── Simple.jsx
│ │ │ ├── SimpleDark.jsx
│ │ │ ├── SimpleDarkWithMenuButtonOnLeft.jsx
│ │ │ ├── SimpleWithMenuButtonOnLeft.jsx
│ │ │ ├── WithCenteredSearchAndSecondaryLinks.jsx
│ │ │ ├── WithCenteredSearchAndSecondaryLinksDark.jsx
│ │ │ ├── WithQuickAction.jsx
│ │ │ ├── WithSearch.jsx
│ │ │ └── WithSearchInColumnLayout.jsx
│ │ ├── pagination
│ │ │ ├── CardFooterWithPageButtons.jsx
│ │ │ ├── CenteredPageNumbers.jsx
│ │ │ └── SimpleCardFooter.jsx
│ │ ├── progress-bars
│ │ │ ├── Bullets.jsx
│ │ │ ├── BulletsAndText.jsx
│ │ │ ├── Circles.jsx
│ │ │ ├── CirclesWithText.jsx
│ │ │ ├── Panels.jsx
│ │ │ ├── PanelsWithBorder.jsx
│ │ │ ├── ProgressBar.jsx
│ │ │ └── Simple.jsx
│ │ ├── sidebar-navigation
│ │ │ ├── Brand.jsx
│ │ │ ├── Dark.jsx
│ │ │ ├── Light.jsx
│ │ │ ├── WithExpandableSections.jsx
│ │ │ └── WithSecondaryNavigation.jsx
│ │ ├── tabs
│ │ │ ├── BarWithUnderline.jsx
│ │ │ ├── FullwidthTabsWithUnderline.jsx
│ │ │ ├── SimpleOnDark.jsx
│ │ │ ├── TabsInPills.jsx
│ │ │ ├── TabsInPillsOnGray.jsx
│ │ │ ├── TabsInPillsWithBrandColor.jsx
│ │ │ ├── TabsWithUnderline.jsx
│ │ │ ├── TabsWithUnderlineAndBadges.jsx
│ │ │ └── TabsWithUnderlineAndIcons.jsx
│ │ └── vertical-navigation
│ │ ├── OnGray.jsx
│ │ ├── Simple.jsx
│ │ ├── WithBadges.jsx
│ │ ├── WithIcons.jsx
│ │ ├── WithIconsAndBadges.jsx
│ │ └── WithSecondaryNavigation.jsx
│ ├── overlays
│ │ ├── drawers
│ │ │ ├── ContactListExample.jsx
│ │ │ ├── CreateProjectFormExample.jsx
│ │ │ ├── Empty.jsx
│ │ │ ├── FileDetailsExample.jsx
│ │ │ ├── UserProfileExample.jsx
│ │ │ ├── WideCreateProjectFormExample.jsx
│ │ │ ├── WideEmpty.jsx
│ │ │ ├── WideHorizontalUserProfileExample.jsx
│ │ │ ├── WithBackgroundOverlay.jsx
│ │ │ ├── WithBrandedHeader.jsx
│ │ │ ├── WithCloseButtonOnOutside.jsx
│ │ │ └── WithStickyFooter.jsx
│ │ ├── modal-dialogs
│ │ │ ├── CenteredWithSingleAction.jsx
│ │ │ ├── CenteredWithWideButtons.jsx
│ │ │ ├── SimpleAlert.jsx
│ │ │ ├── SimpleAlertWithLeftalignedButtons.jsx
│ │ │ ├── SimpleWithDismissButton.jsx
│ │ │ └── SimpleWithGrayFooter.jsx
│ │ └── notifications
│ │ ├── Condensed.jsx
│ │ ├── Simple.jsx
│ │ ├── WithActionsBelow.jsx
│ │ ├── WithAvatar.jsx
│ │ ├── WithButtonsBelow.jsx
│ │ └── WithSplitButtons.jsx
│ └── page-examples
│ ├── detail-screens
│ │ ├── SidebarOnDark.jsx
│ │ └── Stacked.jsx
│ ├── home-screens
│ │ ├── SidebarOnDark.jsx
│ │ └── Stacked.jsx
│ └── settings-screens
│ ├── SidebarOnDark.jsx
│ └── Stacked.jsx
├── ecommerce
│ ├── components
│ │ ├── category-filters
│ │ │ ├── SidebarFilters.jsx
│ │ │ ├── WithCenteredTextAndDropdownProductFilters.jsx
│ │ │ ├── WithDropdownProductFilters.jsx
│ │ │ ├── WithExpandableProductFilterPanel.jsx
│ │ │ └── WithInlineActionsAndExpandableSidebarFilters.jsx
│ │ ├── category-previews
│ │ │ ├── Threecolumn.jsx
│ │ │ ├── ThreecolumnWithDescription.jsx
│ │ │ ├── WithBackgroundImageAndDetailOverlay.jsx
│ │ │ ├── WithImageBackgrounds.jsx
│ │ │ ├── WithScrollingCards.jsx
│ │ │ └── WithSplitImages.jsx
│ │ ├── checkout-forms
│ │ │ ├── Multistep.jsx
│ │ │ ├── SingleStepWithOrderSummary.jsx
│ │ │ ├── SplitWithOrderSummary.jsx
│ │ │ ├── WithMobileOrderSummaryOverlay.jsx
│ │ │ └── WithOrderSummarySidebar.jsx
│ │ ├── incentives
│ │ │ ├── 2x2GridWithIllustrations.jsx
│ │ │ ├── 3columnWithIcons.jsx
│ │ │ ├── 3columnWithIconsAndSupportingText.jsx
│ │ │ ├── 3columnWithIllustrationsAndCenteredText.jsx
│ │ │ ├── 3columnWithIllustrationsAndHeader.jsx
│ │ │ ├── 3columnWithIllustrationsAndHeading.jsx
│ │ │ ├── 3columnWithIllustrationsAndSplitHeader.jsx
│ │ │ └── 4columnWithIllustrations.jsx
│ │ ├── order-history
│ │ │ ├── InvoiceList.jsx
│ │ │ ├── InvoiceListWithQuickActions.jsx
│ │ │ ├── InvoicePanels.jsx
│ │ │ └── InvoiceTable.jsx
│ │ ├── order-summaries
│ │ │ ├── SimpleWithFullOrderDetails.jsx
│ │ │ ├── WithLargeImagesAndProgressBars.jsx
│ │ │ ├── WithProgressBars.jsx
│ │ │ └── WithSplitImage.jsx
│ │ ├── product-features
│ │ │ ├── WithAlternatingSections.jsx
│ │ │ ├── WithFadingImage.jsx
│ │ │ ├── WithHeaderImagesAndDescriptions.jsx
│ │ │ ├── WithImageGrid.jsx
│ │ │ ├── WithSplitImage.jsx
│ │ │ ├── WithSquareImages.jsx
│ │ │ ├── WithTabs.jsx
│ │ │ ├── WithTieredImages.jsx
│ │ │ └── WithWideImages.jsx
│ │ ├── product-lists
│ │ │ ├── CardWithFullDetails.jsx
│ │ │ ├── Simple.jsx
│ │ │ ├── WithBorderGrid.jsx
│ │ │ ├── WithColorSwatchesAndHorizontalScrolling.jsx
│ │ │ ├── WithCtaLink.jsx
│ │ │ ├── WithImageOverlayAndAddButton.jsx
│ │ │ ├── WithInlinePrice.jsx
│ │ │ ├── WithInlinePriceAndCtaLink.jsx
│ │ │ ├── WithSupportingText.jsx
│ │ │ ├── WithTallImages.jsx
│ │ │ └── WithTallImagesAndCtaLink.jsx
│ │ ├── product-overviews
│ │ │ ├── SplitWithImage.jsx
│ │ │ ├── WithImageGalleryAndExpandableDetails.jsx
│ │ │ ├── WithImageGrid.jsx
│ │ │ ├── WithTabs.jsx
│ │ │ └── WithTieredImages.jsx
│ │ ├── product-quickviews
│ │ │ ├── WithColorAndSizeSelector.jsx
│ │ │ ├── WithColorSelectorAndDescription.jsx
│ │ │ ├── WithColorSelectorSizeSelectorAndDetailsLink.jsx
│ │ │ └── WithLargeSizeSelector.jsx
│ │ ├── promo-sections
│ │ │ ├── FullwidthWithBackgroundImage.jsx
│ │ │ ├── FullwidthWithBackgroundImageAndLargeContent.jsx
│ │ │ ├── FullwidthWithOverlappingImageTiles.jsx
│ │ │ ├── WithBackgroundImage.jsx
│ │ │ ├── WithFadingBackgroundImageAndTestimonials.jsx
│ │ │ ├── WithImageTiles.jsx
│ │ │ ├── WithOffersAndSplitImage.jsx
│ │ │ └── WithOverlappingImageTiles.jsx
│ │ ├── reviews
│ │ │ ├── AvatarsWithSeparateDescription.jsx
│ │ │ ├── Multicolumn.jsx
│ │ │ ├── SimpleWithAvatars.jsx
│ │ │ └── WithSummaryChart.jsx
│ │ ├── shopping-carts
│ │ │ ├── Modal.jsx
│ │ │ ├── Popover.jsx
│ │ │ ├── SingleColumn.jsx
│ │ │ ├── Slideover.jsx
│ │ │ ├── TwoColumnWithQuantityDropdown.jsx
│ │ │ └── WithExtendedSummary.jsx
│ │ └── store-navigation
│ │ ├── WithCenteredLogoAndFeaturedCategories.jsx
│ │ ├── WithDoubleColumnAndPersistentMobileNav.jsx
│ │ ├── WithFeaturedCategories.jsx
│ │ ├── WithImageGrid.jsx
│ │ └── WithSimpleMenuAndPromo.jsx
│ └── page-examples
│ ├── category-pages
│ │ ├── WithImageHeaderAndDetailProductGrid.jsx
│ │ ├── WithLargeImagesAndFiltersSidebar.jsx
│ │ ├── WithProductGridAndPagination.jsx
│ │ ├── WithTextHeaderAndImageProductGrid.jsx
│ │ └── WithTextHeaderAndSimpleProductGrid.jsx
│ ├── checkout-pages
│ │ ├── Multistep.jsx
│ │ ├── SingleStepWithOrderSummary.jsx
│ │ ├── SplitWithOrderSummary.jsx
│ │ ├── WithMobileOrderSummaryOverlay.jsx
│ │ └── WithOrderSummarySidebar.jsx
│ ├── order-detail-pages
│ │ ├── SimpleWithFullOrderDetails.jsx
│ │ ├── WithLargeImagesAndProgressBars.jsx
│ │ └── WithProgressBars.jsx
│ ├── order-history-pages
│ │ ├── Simple.jsx
│ │ ├── WithInvoiceList.jsx
│ │ ├── WithInvoiceListAndQuickActions.jsx
│ │ ├── WithInvoicePanels.jsx
│ │ └── WithInvoiceTables.jsx
│ ├── product-pages
│ │ ├── WithExpandableProductDetails.jsx
│ │ ├── WithFeaturedDetails.jsx
│ │ ├── WithImageGrid.jsx
│ │ ├── WithRelatedProducts.jsx
│ │ └── WithTabsAndRelatedProducts.jsx
│ ├── shopping-cart-pages
│ │ ├── SimpleWithPolicyGrid.jsx
│ │ ├── WithPolicyGridAndExtendedSummary.jsx
│ │ └── WithRelatedProducts.jsx
│ └── storefront-pages
│ ├── WithDarkNavAndFooter.jsx
│ ├── WithImageTilesAndFeatureSections.jsx
│ ├── WithOffersAndTestimonials.jsx
│ └── WithOverlappingImageTilesAndPerks.jsx
└── marketing
├── elements
│ ├── banners
│ │ ├── BottomAligned.jsx
│ │ ├── FloatingAtBottom.jsx
│ │ ├── FloatingAtBottomCentered.jsx
│ │ ├── Leftaligned.jsx
│ │ ├── OnBrand.jsx
│ │ ├── OnDark.jsx
│ │ ├── PrivacyNoticeCentered.jsx
│ │ ├── PrivacyNoticeFullWidth.jsx
│ │ ├── PrivacyNoticeLeftaligned.jsx
│ │ ├── PrivacyNoticeRightaligned.jsx
│ │ ├── WithBackgroundGlow.jsx
│ │ ├── WithButton.jsx
│ │ └── WithLink.jsx
│ ├── flyout-menus
│ │ ├── Fullwidth.jsx
│ │ ├── FullwidthTwocolumns.jsx
│ │ ├── Simple.jsx
│ │ ├── SimpleWithDescriptions.jsx
│ │ ├── StackedWithFooterActions.jsx
│ │ ├── StackedWithFooterList.jsx
│ │ └── Twocolumn.jsx
│ └── headers
│ ├── Constrained.jsx
│ ├── FullWidth.jsx
│ ├── OnBrandBackground.jsx
│ ├── OnDarkBackground.jsx
│ ├── WithCalltoaction.jsx
│ ├── WithCenteredLogo.jsx
│ ├── WithFullWidthFlyoutMenu.jsx
│ ├── WithIconsInMobileMenu.jsx
│ ├── WithLeftalignedNav.jsx
│ ├── WithMultipleFlyoutMenus.jsx
│ ├── WithRightalignedNav.jsx
│ └── WithStackedFlyoutMenu.jsx
├── feedback
│ └── 404-pages
│ ├── Simple.jsx
│ ├── SplitWithImage.jsx
│ ├── WithBackgroundImage.jsx
│ ├── WithNavbarAndFooter.jsx
│ └── WithPopularPages.jsx
├── page-examples
│ ├── about-pages
│ │ ├── Dark.jsx
│ │ ├── WithImageTiles.jsx
│ │ └── WithTimelineAndStats.jsx
│ ├── landing-pages
│ │ ├── WithBackgroundImageHeroAndPricingSection.jsx
│ │ ├── WithLargeScreenshotAndTestimonial.jsx
│ │ ├── WithMobileScreenshotAndTestimonialsGrid.jsx
│ │ └── WithScreenshotsAndStats.jsx
│ └── pricing-pages
│ ├── WithComparisonTable.jsx
│ ├── WithFourTiers.jsx
│ └── WithThreeTiersAndTestimonials.jsx
└── sections
├── bento-grids
│ ├── ThreeColumnBentoGrid.jsx
│ ├── TwoRowBentoGrid.jsx
│ └── TwoRowBentoGridOnDark.jsx
├── blog-sections
│ ├── Singlecolumn.jsx
│ ├── SinglecolumnWithImages.jsx
│ ├── Threecolumn.jsx
│ ├── ThreecolumnWithBackgroundImages.jsx
│ ├── ThreecolumnWithImages.jsx
│ ├── WithFeaturedPost.jsx
│ └── WithPhotoAndList.jsx
├── contact-sections
│ ├── Centered.jsx
│ ├── SidebysideGrid.jsx
│ ├── SimpleCentered.jsx
│ ├── SimpleFourcolumn.jsx
│ ├── SplitWithImage.jsx
│ ├── SplitWithPattern.jsx
│ ├── SplitWithPatternOnDark.jsx
│ └── WithTestimonial.jsx
├── content-sections
│ ├── Centered.jsx
│ ├── SplitWithImage.jsx
│ ├── TwoColumnsWithScreenshot.jsx
│ ├── WithImageTitles.jsx
│ ├── WithStickyProductScreenshot.jsx
│ ├── WithTestimonial.jsx
│ └── WithTestimonialAndStats.jsx
├── cta-sections
│ ├── CenteredOnDarkPanel.jsx
│ ├── DarkPanelWithAppScreenshot.jsx
│ ├── SimpleCentered.jsx
│ ├── SimpleCenteredOnBrand.jsx
│ ├── SimpleCenteredOnDark.jsx
│ ├── SimpleJustified.jsx
│ ├── SimpleJustifiedOnLightBrand.jsx
│ ├── SimpleStacked.jsx
│ ├── SplitWithImage.jsx
│ ├── TwoColumnsWithPhotoOnDark.jsx
│ └── WithImageTiles.jsx
├── faq-sections
│ ├── CenteredAccordion.jsx
│ ├── CenteredAccordionOnDark.jsx
│ ├── OffsetWithSupportingText.jsx
│ ├── Sidebyside.jsx
│ ├── ThreeColumns.jsx
│ ├── ThreeColumnsOnDark.jsx
│ ├── ThreeColumnsWithCenteredIntroduction.jsx
│ ├── TwoColumns.jsx
│ ├── TwoColumnsOnDark.jsx
│ └── TwoColumnsWithCenteredIntroduction.jsx
├── feature-sections
│ ├── Centered2x2Grid.jsx
│ ├── ContainedInPanel.jsx
│ ├── Offset2x2Grid.jsx
│ ├── OffsetWithFeatureList.jsx
│ ├── Simple.jsx
│ ├── Simple3x2OnDark.jsx
│ ├── SimpleThreeColumnWithLargeIcons.jsx
│ ├── SimpleThreeColumnWithLargeIconsOnDark.jsx
│ ├── SimpleThreeColumnWithSmallIcons.jsx
│ ├── SimpleThreeColumnWithSmallIconsOnDark.jsx
│ ├── WithCodeExamplePanel.jsx
│ ├── WithLargeBorderedScreenshot.jsx
│ ├── WithLargeBorderedScreenshotOnDark.jsx
│ ├── WithLargeScreenshot.jsx
│ ├── WithLargeScreenshotOnDark.jsx
│ ├── WithProductScreenshot.jsx
│ ├── WithProductScreenshotOnDark.jsx
│ ├── WithProductScreenshotOnLeft.jsx
│ ├── WithProductScreenshotPanel.jsx
│ └── WithTestimonial.jsx
├── footers
│ ├── 4columnSimple.jsx
│ ├── 4columnSimpleOnDark.jsx
│ ├── 4columnWithCalltoaction.jsx
│ ├── 4columnWithCalltoactionOnDark.jsx
│ ├── 4columnWithCompanyMission.jsx
│ ├── 4columnWithCompanyMissionOnDark.jsx
│ ├── 4columnWithNewsletter.jsx
│ ├── 4columnWithNewsletterBelow.jsx
│ ├── 4columnWithNewsletterBelowOnDark.jsx
│ ├── 4columnWithNewsletterOnDark.jsx
│ ├── SimpleCentered.jsx
│ ├── SimpleCenteredOnDark.jsx
│ ├── SimpleWithSocialLinks.jsx
│ └── SimpleWithSocialLinksOnDark.jsx
├── header
│ ├── Centered.jsx
│ ├── CenteredOnDark.jsx
│ ├── CenteredWithBackgroundImage.jsx
│ ├── CenteredWithEyebrow.jsx
│ ├── Simple.jsx
│ ├── SimpleOnDark.jsx
│ ├── SimpleWithBackgroundImage.jsx
│ ├── SimpleWithEyebrow.jsx
│ ├── WithCards.jsx
│ └── WithStats.jsx
├── heroes
│ ├── SimpleCentered.jsx
│ ├── SimpleCenteredWithBackgroundImage.jsx
│ ├── SplitWithCodeExample.jsx
│ ├── SplitWithImage.jsx
│ ├── SplitWithScreenshot.jsx
│ ├── SplitWithScreenshotOnDark.jsx
│ ├── WithAngledImageOnRight.jsx
│ ├── WithAppScreenshot.jsx
│ ├── WithAppScreenshotOnDark.jsx
│ ├── WithImageTiles.jsx
│ ├── WithOffsetImage.jsx
│ └── WithPhoneMockup.jsx
├── logo-clouds
│ ├── Grid.jsx
│ ├── GridOnDark.jsx
│ ├── Simple.jsx
│ ├── SimpleLeftaligned.jsx
│ ├── SimpleLeftalignedOnDark.jsx
│ ├── SimpleOnDark.jsx
│ ├── SimpleWithCalltoaction.jsx
│ ├── SimpleWithCalltoactionOnDark.jsx
│ ├── SimpleWithHeading.jsx
│ ├── SimpleWithHeadingOnDark.jsx
│ ├── SplitWithLogosOnRight.jsx
│ └── SplitWithLogosOnRightOnDark.jsx
├── newsletter-sections
│ ├── CenteredCard.jsx
│ ├── SidebysideOnCard.jsx
│ ├── SidebysideWithDetails.jsx
│ ├── SimpleSidebyside.jsx
│ ├── SimpleSidebysideOnBrand.jsx
│ ├── SimpleSidebysideOnDark.jsx
│ └── SimpleStacked.jsx
├── pricing
│ ├── FourTiersWithToggle.jsx
│ ├── SinglePriceWithDetails.jsx
│ ├── ThreeTiers.jsx
│ ├── ThreeTiersWithDividers.jsx
│ ├── ThreeTiersWithEmphasizedTier.jsx
│ ├── ThreeTiersWithFeatureComparison.jsx
│ ├── ThreeTiersWithLogosAndFeatureComparison.jsx
│ ├── ThreeTiersWithToggle.jsx
│ ├── ThreeTiersWithToggleOnDark.jsx
│ ├── TwoTiers.jsx
│ ├── TwoTiersWithEmphasizedTier.jsx
│ ├── TwoTiersWithExtraTier.jsx
│ ├── WithComparisonTable.jsx
│ └── WithComparisonTableOnDark.jsx
├── stats-sections
│ ├── Simple.jsx
│ ├── SimpleGrid.jsx
│ ├── SimpleGridOnDark.jsx
│ ├── SimpleOnDark.jsx
│ ├── SplitWithImage.jsx
│ ├── Stepped.jsx
│ ├── Timeline.jsx
│ ├── WithBackgroundImage.jsx
│ ├── WithDescription.jsx
│ └── WithTwoColumnDescriptionOnDark.jsx
├── team-sections
│ ├── DarkVersionWithLargeImages.jsx
│ ├── FullWidthWithVerticalImages.jsx
│ ├── GridWithLargeRoundImages.jsx
│ ├── GridWithRoundImages.jsx
│ ├── WithImageAndShortParagraph.jsx
│ ├── WithLargeImages.jsx
│ ├── WithMediumImagesOnDark.jsx
│ ├── WithSmallImages.jsx
│ └── WithVerticalImages.jsx
└── testimonials
├── Grid.jsx
├── OffwhiteGrid.jsx
├── Sidebyside.jsx
├── SidebysideOnDark.jsx
├── SimpleCentered.jsx
├── WithBackgroundImage.jsx
├── WithLargeAvatar.jsx
├── WithOverlappingImage.jsx
└── WithStarRating.jsx
遇到了点问题，本来放的是 React V3、Vue V3、HTML V3 三大块的，但无奈，内容太多，触发了限制：
那就换一种方式，授人以鱼不如授人以渔，我给指引，大家自己生成去吧。
打开 uTools（下载），搜索下载 “目录树” 插件：
准备组件目录的路径，打开（tree 关键词唤起）：
复制，搞定！