CommandToggleToggleGroup
ButtonButtonGroupButtonLinkCheckboxComboboxCopyButtonCopyFieldDownloadButtonFieldFormInputInputGroupInputOTPLabelMultiSelectMultiSelectProMultiSelectProAsyncPhoneInputRadioGroupSelectSliderSwitchTextarea
AspectRatioCardImageWithFallbackItemKbdPortalPreloaderResizableScrollAreaSectionSeparatorSidebarSkeletonSticky
BreadcrumbBreadcrumbNavigationMenubarNavigationMenuPaginationTabs
AlertDialogContextMenuDialogDrawerDropdownMenuHoverCardPopoverSheetTooltip
AlertBadgeProgressToast
AccordionCalendarCarouselCollapsibleDatePickerDateRangePickerSSRPaginationStaticPaginationTable
EmptyOgImageSpinnerToaster
Interactive JsonSchemaFormJsonTreeLottiePlayerMarkdownMessage with MermaidMarkdownMessageMermaidOgImageTemplateOpenapiViewerPrettyCodeUseQueryParamsVideoPlayer
CTASectionFeatureSectionHeroNewsletterSectionStatsSectionSuperHeroTestimonialSection
useCopyuseCountdownuseDebounceuseDebouncedCallbackuseDebugToolsuseDeviceDetectuseEventListeneruseHotkeyuseImageLoaderuseIsMobileuseLocalStorageuseMediaQueryuseSessionStorageuseThemeContext
Area ChartBar ChartChartContainerDonut ChartLine ChartPie ChartRadial Bar Chart
Aurora BorealisColor SchemesFloating OrbsGeometric FlowAnimatedBackgroundLiquid GradientMesh GradientSpotlight

122 components

JsonTree@djangocfg/ui-nextjs

Interactive JSON tree viewer with expand/collapse, search, and export functionality

Dataset:
Max Depth:
User Data
    • ▶
      (4 keys)
      • 1
      • "John Doe"
      • "[email protected]"
      • ▶
        (2 keys)
        • "Software engineer"
        • ▶
          (3 items)
          • "coding"
          • "music"
          • "travel"
    • ▶
      (2 keys)
      • "dark"
      • true

Import

Loading code...