shadcn/ui
Accessible React components for buttons, forms, dialogs, sidebars, dashboard shells, and charts, with a neutral Tailwind CSS foundation.
144 published items
shadcn
144 published items
Overlay
A modal dialog that interrupts the user with important content and expects a response.
ReactTailwindFeedback
Constrains media or other content to a chosen width-to-height ratio.
ReactTailwind
Navigation
Displays the path to the current resource using a hierarchy of links.
ReactTailwind
Button
A container that groups related buttons together with consistent styling.
ReactTailwind
Plots a filled time series against labeled horizontal and vertical axes.
ReactTailwind
Uses a vertical color fade to emphasize the region beneath the series.
ReactTailwind
Adds icons to axis labels for quicker category recognition.
ReactTailwind
Lets readers switch between data series from the chart header.
ReactTailwind
Identifies each filled series with a chart legend.
ReactTailwind
Connects points with straight segments and fills the area below.
ReactTailwind
Layers filled series to compare totals and composition over time.
ReactTailwind
Normalizes stacked series to show each category's proportional share.
ReactTailwind
Fills the area under a stepped line, for discrete-interval values where the magnitude matters.
ReactTailwind
Highlights one column while leaving the remaining values subdued.
ReactTailwind
Compares values across categories with vertical columns.
ReactTailwind
Uses horizontal bars for categories with longer labels.
ReactTailwind
Lets readers switch between bar series from the chart header.
ReactTailwind
Pairs each bar with a customized value label.
ReactTailwind
Uses distinct bar treatments to separate categories in one plot.
ReactTailwind
Places multiple series side by side for each category.
ReactTailwind
Extends bars on both sides of zero to compare positive and negative values.
ReactTailwind
Stacks series within each bar and identifies them with a legend.
ReactTailwind
Chart
Plots change across a sequence with a connected line.
ReactTailwind
Marks each sampled value with a visible point.
ReactTailwind
Uses colored point markers to distinguish values along the line.
ReactTailwind
Renders a customized marker at each sampled value.
ReactTailwind
Lets readers switch between line series from the chart header.
ReactTailwind
Places customized labels beside selected line values.
ReactTailwind
Uses straight segments rather than curved interpolation between points.
ReactTailwind
Overlays several series for comparison across the same sequence.
ReactTailwind
A bare stepped line for discrete-interval values, where only the level changes matter.
ReactTailwind
Leaves the center open while showing each category's share of the whole.
ReactTailwind
Pulls one donut segment forward to emphasize the active category.
ReactTailwind
Places a total and supporting label in the center of the ring.
ReactTailwind
Lets readers select a segment to inspect its category value.
ReactTailwind
Prints category labels beside their corresponding segments.
ReactTailwind