Beautify

Component index — Tailwind CSS v4 utility library

Base / Layout

PresetGlobal variables, base styles, dark mode, RTL NormalizeCross-browser reset and normalization Reset List & HeadingReset list, heading, and other element defaults Text LeadingLine-height presets Heading (H1~H6)Heading typography styles SpacerFlexible spacing filler DividerHorizontal/vertical dividers ToolsInline toolbar Background & TextureDot, grid, noise textures Color SystemFull color palette and usage ThemeTheme switching ShadowBox-shadow presets

Button

ButtonButton variants, colors, sizes, shapes Button IconIcon-only buttons Button LinkLink-styled button variant Button GroupGrouped button toolbar

Form

Input & TextareaText input and textarea styling File InputFile upload input styling Range InputRange slider styling OTP InputOne-time password input group SelectDropdown and multi-select styling Input ShellDecorative input wrapper with prefix/suffix Checkbox & RadioCustom checkbox and radio controls RatingStar rating component SwitchToggle switch Field BoxForm field container with label ValidateForm validation styles FormComplete form examples

Navigation

BreadcrumbBreadcrumb navigation PaginationPage navigation StepStep progress indicator DropmenuDropdown menu DroppanelDropdown panel BookmarkBookmark-style tab switcher SegmentSegmented control tab switcher LampTab switcher with a lamp-style active indicator

Data Display

BadgeBadge with collapse behavior TagTag labels FlagPromotional flag BuoyLabel + Value data badge RankRank number StatsStatistic grid ProgressProgress bar TreeHierarchical tree component

Typography

LinkHyperlink styles CodeInline code PreCode block KbdKeyboard key BlockquoteBlock quotation EllipsisSingle/multi-line text truncation UnderlineText underline decoration EmphasisEmphasis highlight GiltGradient metallic text

Display / Decoration

AvatarUser avatar PosterImage poster with aspect ratio TableTable styling IconMask-image icons SwatchColor swatch EntrySingle-line list item BubbleFloating tooltip bubble AuraContainer edge glow BlobOrganic blob shapes SketchHand-drawn sketch styles ShimmerShimmer sweep effect

Status / Feedback

StatusStatus indicator dot AlarmPulse alarm DeformState transition icon CalloutAlert and tip callouts EmptyEmpty state container SpinnerLoading spinner SkeletonSkeleton loading placeholder

Comment

CommentComment list and item

Animation

AnimationCSS keyframe animations TransitionCSS transition utilities

Interaction

DialogNative dialog modal SummaryNative details/summary collapse