shadcn components — cnippet-ui | registry.directory

C

animated-numberSmooth spring-based number interpolation

annotated-chartTime series with event markers, target lines and shaded periods

area-chartData-driven area chart: default, stacked or percent, with gradient, solid or no fill

bar-chartData-driven bar chart: columns or horizontal bars, grouped, stacked or percent, with value labels

bar-listRanked horizontal bars with a name and value per row; rows can be links or buttons

box-plotQuartiles and range per group, from raw values or precomputed stats

breathing-textCharacters scale and opacity pulse in a wave pattern using variable fonts

brush-chartArea or line chart with a brush underneath to zoom and pan a long series

bullet-chartCompact bar comparing a value with a target over qualitative ranges

calendar-heatmapDays laid out in week columns and shaded by value, like a contribution graph

candlestick-chartOpen, high, low and close candles with optional volume bars

canvas-textText filled with flowing colored lines drawn on a canvas

category-barOne bar split into coloured ranges, with boundary labels and an optional marker

chart-cardCard frame for a chart with title, headline value, delta badge, actions and footer

chart-emptyEmpty state sized for a chart, with icon, message and action

chart-skeletonLoading placeholder shaped like a bar, line, area or donut chart

chart-tooltip-presetsTooltip layouts for the chart primitive: totals, sorted list and previous-period comparison

cohort-retentionTriangle table of retention by cohort and period, with shaded % cells

colorful-textCharacters animate in with randomized vibrant colors

combo-chartBars and lines on one plot, with an optional second y-axis for the lines

container-scrollA card tilts back flat and settles as it scrolls into view

counting-numberAnimates from a start value to a target number

delta-barBar growing left or right from the centre to show a +/− change

donut-chartPart-to-whole ring with a centre value, slice labels and a bottom or side legend

drilldown-chartBar chart that drills into a bar's breakdown on click or Enter, with breadcrumbs back

encrypted-textCharacters decrypt from gibberish in a military terminal style

flip-wordsWords flip in 3D on a timer along X or Y axis rotation

funnel-chartSteps of a process with the share reaching each step and the drop-off between them

gauge-chartHalf-circle gauge with coloured threshold bands, a needle or a value arc

heatmapGrid of cells shaded by value, with keyboard navigation and a tooltip per cell

hero-parallaxRows of product cards slide sideways in opposite directions as the hero scrolls

histogramDistribution of raw values in equal-width buckets, drawn as touching bars

horizontal-scrollPins a section and turns vertical scrolling into horizontal movement

interactive-legendChart legend whose items toggle series on and off and highlight them on hover

letter-3d-swapLetters rotate in 3D space on hover revealing a second face

letter-swap-hoverEach letter swaps position vertically on hover

line-chartData-driven line chart with dots, dashed forecast series and gap handling

macbook-scrollA laptop lid opens on scroll to reveal an image or custom screen content

morphing-textSmooth blur-based morphing between words

navigation-menu

parallax-floatingElements float at different speeds based on cursor position for a parallax depth effect

pie-chartPart-to-whole pie with slice labels; a donut chart with no hole

polar-area-chartRose chart: equal-angle slices whose length shows the value

progress-circleRing showing progress toward a maximum, with centre content

progressive-blurLayered backdrop-blur overlay that progressively fades content at container edges

radar-chartMulti-axis comparison with polygon or circle grid, filled or outlined

radial-chartConcentric progress rings with a track and centre label

random-letter-swapLetters swap in random order on hover for a glitchy effect

range-area-chartShaded band between a low and high value, with an optional line inside

realtime-chartStreaming line chart with a sliding window, live values and a pause button

rolling-textText rolls in from top or bottom with 3D perspective

rotating-textSingle-slot word rotator with configurable transitions

sankeyFlows between named stages, with link widths proportional to value

scatter-chartX/Y scatter plot with optional bubble size and colour groups

scramble-hoverText scrambles on hover then resolves back to original

scroll-direction-headerHeader that hides while scrolling one way and returns when scrolling back

scroll-image-revealAn image is revealed with a clip-path wipe or circle as it scrolls into view

scroll-progressA spring-animated progress bar that tracks page or container scroll position

scroll-revealElements animate into view when they enter the viewport, with any Motion variant

scroll-snap-sectionsFull-height sections that snap into place, with dot navigation and entrance animation

scroll-swap-textText content swaps and transforms tied to scroll position

scroll-velocity-textText marquee speed reacts to scroll velocity — faster scrolling spins it faster

series-toggle-chartMetric tabs with totals above a chart; each tab switches the series shown

sliding-numberDigits slide up or down independently when value changes (odometer style)

spark-areaTiny area trend with no axes, optionally coloured by trend

spark-barTiny bars for daily volume or win/loss, coloured by sign

spark-lineTiny line trend with an optional last-point dot, coloured by trend

spinning-textText arranged in a circle rotating continuously

splitting-textText splits into characters or words with individual animation control

stacking-cardsCards stack and scale on scroll — each pins to the top while the next slides underneath

sticky-footerFooter that stays put underneath the page and is uncovered at the end of the scroll

sticky-scroll-revealText steps scroll past a sticky panel that swaps to each step's content

sunburst-chartTwo-level nested rings: category in the middle, breakdown outside

synced-chartsStacked chart panels on one x-axis that share a cursor and tooltip

text-along-pathText follows an SVG path, optionally animated

text-cursor-proximityCharacters scale and transform based on cursor distance

text-flipping-boardSplit-flap board that flips each character through a charset to the new text

text-generate-effectWords fade in sequentially as if being AI-generated

text-gradientAnimated gradient colors flowing through text

text-highlightBackground highlight animates behind text on scroll or hover

text-loopCycles through an array of strings with smooth exit and enter transitions

text-morphSmooth character-level morphing between two strings using shared layout

text-revealCharacters or words animate in with fade, slide-up, or blur and stagger

text-rollWords roll in and out vertically like a slot machine

text-rotateRotating text with configurable enter/exit animations and stagger

text-scrambleCharacters scramble through random glyphs before resolving to the final text

text-shimmerGradient shine sweeps across text continuously

text-shimmer-waveWave-like shimmer ripples across text characters

time-range-chartArea or bar chart with a 7d / 30d / 90d range toggle and totals for the range

trackerRow of status blocks with tooltips, e.g. daily uptime or build history

treemapNested rectangles sized by value, coloured by top-level group

typewriterCharacters appear one by one with an optional blinking cursor

variable-font-cursor-proximityFont axes respond to cursor distance from each character

variable-font-hoverVariable font weight and width changes per letter on hover

vertical-cut-revealText reveals with a vertical clip-path wipe per character, word, or line

waterfall-chartRunning total built from increases, decreases and subtotal bars

animated-numberSmooth spring-based number interpolation

annotated-chartTime series with event markers, target lines and shaded periods

area-chartData-driven area chart: default, stacked or percent, with gradient, solid or no fill

bar-chartData-driven bar chart: columns or horizontal bars, grouped, stacked or percent, with value labels

bar-listRanked horizontal bars with a name and value per row; rows can be links or buttons

box-plotQuartiles and range per group, from raw values or precomputed stats

breathing-textCharacters scale and opacity pulse in a wave pattern using variable fonts

brush-chartArea or line chart with a brush underneath to zoom and pan a long series

bullet-chartCompact bar comparing a value with a target over qualitative ranges

calendar-heatmapDays laid out in week columns and shaded by value, like a contribution graph

candlestick-chartOpen, high, low and close candles with optional volume bars

canvas-textText filled with flowing colored lines drawn on a canvas

category-barOne bar split into coloured ranges, with boundary labels and an optional marker

chart-cardCard frame for a chart with title, headline value, delta badge, actions and footer

chart-emptyEmpty state sized for a chart, with icon, message and action

chart-skeletonLoading placeholder shaped like a bar, line, area or donut chart

chart-tooltip-presetsTooltip layouts for the chart primitive: totals, sorted list and previous-period comparison

cohort-retentionTriangle table of retention by cohort and period, with shaded % cells

colorful-textCharacters animate in with randomized vibrant colors

combo-chartBars and lines on one plot, with an optional second y-axis for the lines

container-scrollA card tilts back flat and settles as it scrolls into view

counting-numberAnimates from a start value to a target number

delta-barBar growing left or right from the centre to show a +/− change

donut-chartPart-to-whole ring with a centre value, slice labels and a bottom or side legend

drilldown-chartBar chart that drills into a bar's breakdown on click or Enter, with breadcrumbs back

encrypted-textCharacters decrypt from gibberish in a military terminal style

flip-wordsWords flip in 3D on a timer along X or Y axis rotation

funnel-chartSteps of a process with the share reaching each step and the drop-off between them

gauge-chartHalf-circle gauge with coloured threshold bands, a needle or a value arc

heatmapGrid of cells shaded by value, with keyboard navigation and a tooltip per cell

hero-parallaxRows of product cards slide sideways in opposite directions as the hero scrolls

histogramDistribution of raw values in equal-width buckets, drawn as touching bars

horizontal-scrollPins a section and turns vertical scrolling into horizontal movement

interactive-legendChart legend whose items toggle series on and off and highlight them on hover

letter-3d-swapLetters rotate in 3D space on hover revealing a second face

letter-swap-hoverEach letter swaps position vertically on hover

line-chartData-driven line chart with dots, dashed forecast series and gap handling

macbook-scrollA laptop lid opens on scroll to reveal an image or custom screen content

morphing-textSmooth blur-based morphing between words

navigation-menu

parallax-floatingElements float at different speeds based on cursor position for a parallax depth effect

pie-chartPart-to-whole pie with slice labels; a donut chart with no hole

polar-area-chartRose chart: equal-angle slices whose length shows the value

progress-circleRing showing progress toward a maximum, with centre content

progressive-blurLayered backdrop-blur overlay that progressively fades content at container edges

radar-chartMulti-axis comparison with polygon or circle grid, filled or outlined

radial-chartConcentric progress rings with a track and centre label

random-letter-swapLetters swap in random order on hover for a glitchy effect

range-area-chartShaded band between a low and high value, with an optional line inside

realtime-chartStreaming line chart with a sliding window, live values and a pause button

rolling-textText rolls in from top or bottom with 3D perspective

rotating-textSingle-slot word rotator with configurable transitions

sankeyFlows between named stages, with link widths proportional to value

scatter-chartX/Y scatter plot with optional bubble size and colour groups

scramble-hoverText scrambles on hover then resolves back to original

scroll-direction-headerHeader that hides while scrolling one way and returns when scrolling back

scroll-image-revealAn image is revealed with a clip-path wipe or circle as it scrolls into view

scroll-progressA spring-animated progress bar that tracks page or container scroll position

scroll-revealElements animate into view when they enter the viewport, with any Motion variant

scroll-snap-sectionsFull-height sections that snap into place, with dot navigation and entrance animation

scroll-swap-textText content swaps and transforms tied to scroll position

scroll-velocity-textText marquee speed reacts to scroll velocity — faster scrolling spins it faster

series-toggle-chartMetric tabs with totals above a chart; each tab switches the series shown

sliding-numberDigits slide up or down independently when value changes (odometer style)

spark-areaTiny area trend with no axes, optionally coloured by trend

spark-barTiny bars for daily volume or win/loss, coloured by sign

spark-lineTiny line trend with an optional last-point dot, coloured by trend

spinning-textText arranged in a circle rotating continuously

splitting-textText splits into characters or words with individual animation control

stacking-cardsCards stack and scale on scroll — each pins to the top while the next slides underneath

sticky-footerFooter that stays put underneath the page and is uncovered at the end of the scroll

sticky-scroll-revealText steps scroll past a sticky panel that swaps to each step's content

sunburst-chartTwo-level nested rings: category in the middle, breakdown outside

synced-chartsStacked chart panels on one x-axis that share a cursor and tooltip

text-along-pathText follows an SVG path, optionally animated

text-cursor-proximityCharacters scale and transform based on cursor distance

text-flipping-boardSplit-flap board that flips each character through a charset to the new text

text-generate-effectWords fade in sequentially as if being AI-generated

text-gradientAnimated gradient colors flowing through text

text-highlightBackground highlight animates behind text on scroll or hover

text-loopCycles through an array of strings with smooth exit and enter transitions

text-morphSmooth character-level morphing between two strings using shared layout

text-revealCharacters or words animate in with fade, slide-up, or blur and stagger

text-rollWords roll in and out vertically like a slot machine

text-rotateRotating text with configurable enter/exit animations and stagger

text-scrambleCharacters scramble through random glyphs before resolving to the final text

text-shimmerGradient shine sweeps across text continuously

text-shimmer-waveWave-like shimmer ripples across text characters

time-range-chartArea or bar chart with a 7d / 30d / 90d range toggle and totals for the range

trackerRow of status blocks with tooltips, e.g. daily uptime or build history

treemapNested rectangles sized by value, coloured by top-level group

typewriterCharacters appear one by one with an optional blinking cursor

variable-font-cursor-proximityFont axes respond to cursor distance from each character

variable-font-hoverVariable font weight and width changes per letter on hover

vertical-cut-revealText reveals with a vertical clip-path wipe per character, word, or line

waterfall-chartRunning total built from increases, decreases and subtotal bars

Select a component to view its code

Click on any item in the sidebar to get started

Select a component to view its information