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

Theme Configurator@djangocfg/playground-ui

Interactive configurator for Tailwind CSS v4 themes. Customize colors for both light and dark modes, preview changes live, and generate CSS output.

Theme Configurator

Editing: light theme

Core color palette for UI elements
Colors for sidebar navigation
Color palette for data visualizations

Preview: light theme

Colors

Background
Card
Primary
Secondary
Muted
Accent
Destructive
Warning
Success
Border

Chart Colors

Buttons

Card

Card Title

This is a card component with muted foreground text.

Input

Import

Loading code...