# @jcsoftdev/ui > Token-driven React 19 component library (Radix, Tailwind CSS v4, no runtime CSS-in-JS): atoms, forms, containers, overlays, about one hundred pure-SVG charts, a spreadsheet-grade DataGrid, an AI chat kit, rich text, XLSX and brand tools, themed by data-style, data-density, data-radius, data-accent and data-theme attributes. Import a component from its category, for example `import { Button } from "@jcsoftdev/ui/atoms"`, or from a single-component entry such as `@jcsoftdev/ui/containers/data-grid`. Components adapt to their container width (Tailwind container queries), not the viewport. Component pages are generated from the library source, so prop names, types and defaults are exact. Sample data is Spanish (a barbershop); identifiers and docs are English. ## Guides - [Introduction](https://ui.jcsoftdev.com/docs/index.md): What @jcsoftdev/ui is, what it ships and how this documentation is organised. - [Getting started](https://ui.jcsoftdev.com/docs/getting-started.md): Install @jcsoftdev/ui, import the token stylesheets and render your first component in Next.js, Astro or Vite. - [Tree-shaking and subpaths](https://ui.jcsoftdev.com/docs/subpaths.md): Every @jcsoftdev/ui subpath and single-component entry point, and how to keep bundles small. - [Container queries](https://ui.jcsoftdev.com/docs/container-queries.md): Components respond to the width of their container, not the viewport, so they behave the same in a sidebar, a card or a dialog. - [Accessibility](https://ui.jcsoftdev.com/docs/accessibility.md): Keyboard support, focus management, reduced motion, contrast and data alternatives built into the components. - [Docs for LLMs](https://ui.jcsoftdev.com/docs/llms.md): llms.txt, llms-full.txt and a Markdown version of every page, generated from the same source as the HTML docs. ## Theming - [Theming and presets](https://ui.jcsoftdev.com/docs/theming.md): Zero-runtime theming with data-style, data-density, data-radius, data-accent and data-theme, plus precedence and custom token files. - [Design tokens](https://ui.jcsoftdev.com/docs/theming/tokens.md): Every design token of the default theme, generated from tokens/default.json. ## Guides - [Introduction](https://ui.jcsoftdev.com/docs/index.md): What @jcsoftdev/ui is, what it ships and how this documentation is organised. - [Getting started](https://ui.jcsoftdev.com/docs/getting-started.md): Install @jcsoftdev/ui, import the token stylesheets and render your first component in Next.js, Astro or Vite. - [Tree-shaking and subpaths](https://ui.jcsoftdev.com/docs/subpaths.md): Every @jcsoftdev/ui subpath and single-component entry point, and how to keep bundles small. - [Container queries](https://ui.jcsoftdev.com/docs/container-queries.md): Components respond to the width of their container, not the viewport, so they behave the same in a sidebar, a card or a dialog. - [Accessibility](https://ui.jcsoftdev.com/docs/accessibility.md): Keyboard support, focus management, reduced motion, contrast and data alternatives built into the components. - [Docs for LLMs](https://ui.jcsoftdev.com/docs/llms.md): llms.txt, llms-full.txt and a Markdown version of every page, generated from the same source as the HTML docs. ## Theming - [Theming and presets](https://ui.jcsoftdev.com/docs/theming.md): Zero-runtime theming with data-style, data-density, data-radius, data-accent and data-theme, plus precedence and custom token files. - [Design tokens](https://ui.jcsoftdev.com/docs/theming/tokens.md): Every design token of the default theme, generated from tokens/default.json. ## Components: AI - [Attachment](https://ui.jcsoftdev.com/docs/components/attachment.md): File chip or preview tile for prompt attachments, with an optional remove button. - [ChainOfThought](https://ui.jcsoftdev.com/docs/components/chain-of-thought.md): Collapsible list of reasoning steps with a status rail. - [ChatList](https://ui.jcsoftdev.com/docs/components/chat-list.md): Sidebar list of conversations grouped by date (Hoy, Ayer, Últimos 7 días…). - [ChatMessage](https://ui.jcsoftdev.com/docs/components/chat-message.md): One chat turn: avatar, bubble, status, streaming caret and an optional footer slot. - [CodeBlock](https://ui.jcsoftdev.com/docs/components/code-block.md): Code with a language label, a copy button and a dependency-free syntax highlighter. - [Conversation](https://ui.jcsoftdev.com/docs/components/conversation.md): Scrollable message log that sticks to the bottom while new content streams in. - [Loader](https://ui.jcsoftdev.com/docs/components/loader.md): Animated waiting indicator. - [Markdown](https://ui.jcsoftdev.com/docs/components/markdown.md): Safe Markdown renderer: headings, lists, emphasis, inline code, code fences, quotes, tables and links. - [MessageActions](https://ui.jcsoftdev.com/docs/components/message-actions.md): Copy, regenerate, like and dislike for an assistant message. - [PromptInput](https://ui.jcsoftdev.com/docs/components/prompt-input.md): Composer: autosizing textarea, Enter to send, Shift+Enter for a new line, attachments slot and a stop button while a response streams. - [PromptSuggestion](https://ui.jcsoftdev.com/docs/components/prompt-suggestion.md): Chip with a suggested prompt. - [PromptSuggestionList](https://ui.jcsoftdev.com/docs/components/prompt-suggestion-list.md): Wrapping group of suggestion chips. - [Source](https://ui.jcsoftdev.com/docs/components/source.md): Citation chip with a hover/focus preview of the source (title, host and excerpt). - [TextShimmer](https://ui.jcsoftdev.com/docs/components/text-shimmer.md): Text with a light sweep, used for "thinking…" labels. - [ToolCall](https://ui.jcsoftdev.com/docs/components/tool-call.md): Collapsible tool invocation with status, JSON arguments and JSON result. ## Components: Atoms - [Avatar](https://ui.jcsoftdev.com/docs/components/avatar.md): `Avatar` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [AvatarGroup](https://ui.jcsoftdev.com/docs/components/avatar-group.md): Stacked, overlapping avatars separated by a surface-colored ring. - [BigDate](https://ui.jcsoftdev.com/docs/components/big-date.md): Prominent date or number, typically at the top of a card. - [Button](https://ui.jcsoftdev.com/docs/components/button.md): `Button` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [Checkbox](https://ui.jcsoftdev.com/docs/components/checkbox.md): `Checkbox` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [Chip](https://ui.jcsoftdev.com/docs/components/chip.md): `Chip` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [Icon](https://ui.jcsoftdev.com/docs/components/icon.md): `Icon` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [Led](https://ui.jcsoftdev.com/docs/components/led.md): `Led` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [Meter](https://ui.jcsoftdev.com/docs/components/meter.md): Thinner progress bar. - [NumberValue](https://ui.jcsoftdev.com/docs/components/number-value.md): Number that counts up to `value`, formatted with Intl. - [PressableFeedback](https://ui.jcsoftdev.com/docs/components/pressable-feedback.md): Wraps any content with press feedback: a ripple from the pointer and a small scale-down. - [Progress](https://ui.jcsoftdev.com/docs/components/progress.md): `Progress` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [RadioGroup](https://ui.jcsoftdev.com/docs/components/radio-group.md): `RadioGroup` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [StatusDot](https://ui.jcsoftdev.com/docs/components/status-dot.md): `StatusDot` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [StatusPill](https://ui.jcsoftdev.com/docs/components/status-pill.md): Pill showing a status LED and its label; the label is hidden when the surrounding container (e.g. - [Switch](https://ui.jcsoftdev.com/docs/components/switch.md): `Switch` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`. - [TrendChip](https://ui.jcsoftdev.com/docs/components/trend-chip.md): Compact change indicator: arrow, signed percent and a good/bad tone, never color alone. ## Components: Brand - [LogoForge](https://ui.jcsoftdev.com/docs/components/logo-forge.md): Interactive brand-mark editor: pick a shape, monogram, palette and layout, browse twelve seeded variations, then download SVG or PNG or copy the SVG source. - [LogoMark](https://ui.jcsoftdev.com/docs/components/logo-mark.md): Renders a generated brand mark as an inline ``. ## Components: Calendar - [DayChip](https://ui.jcsoftdev.com/docs/components/day-chip.md): Compact single-line chip for a day marker. - [EventBlock](https://ui.jcsoftdev.com/docs/components/event-block.md): `EventBlock` is part of the Calendar set, imported from `@jcsoftdev/ui/calendar`. - [MonthView](https://ui.jcsoftdev.com/docs/components/month-view.md): `MonthView` is part of the Calendar set, imported from `@jcsoftdev/ui/calendar`. - [TimelineView](https://ui.jcsoftdev.com/docs/components/timeline-view.md): `TimelineView` is part of the Calendar set, imported from `@jcsoftdev/ui/calendar`. - [WeekView](https://ui.jcsoftdev.com/docs/components/week-view.md): `WeekView` is part of the Calendar set, imported from `@jcsoftdev/ui/calendar`. ## Components: Charts - [AlluvialChart](https://ui.jcsoftdev.com/docs/components/alluvial-chart.md): Alluvial diagram: how the same categories flow from one moment to the next (client segments month by month, services chosen by season). - [AreaChart](https://ui.jcsoftdev.com/docs/components/area-chart.md): Volume over time with a soft gradient fill. - [AxisBottom](https://ui.jcsoftdev.com/docs/components/axis-bottom.md): Category or time labels under the plot. - [AxisLeft](https://ui.jcsoftdev.com/docs/components/axis-left.md): Value labels on the left, right-aligned against the plot. - [AxisRight](https://ui.jcsoftdev.com/docs/components/axis-right.md): Value labels on the right, for a secondary axis. - [BarChart](https://ui.jcsoftdev.com/docs/components/bar-chart.md): Columns (`orientation="vertical"`, default) or horizontal bars. - [BarRaceChart](https://ui.jcsoftdev.com/docs/components/bar-race-chart.md): Bar race: horizontal bars that grow, shrink and swap places as time moves through `frames`. - [BeeswarmChart](https://ui.jcsoftdev.com/docs/components/beeswarm-chart.md): Beeswarm: every observation is a dot on the value axis, nudged sideways just enough that no two overlap, so clusters read as density while each point stays individually explorable. - [BoxGlyph](https://ui.jcsoftdev.com/docs/components/box-glyph.md): One box-and-whisker: IQR box, median line, whiskers with caps, optional mean diamond and outlier dots. - [BoxPlot](https://ui.jcsoftdev.com/docs/components/box-plot.md): Box-and-whisker plot: median, quartiles, Tukey whiskers, outliers and the mean for every category, optionally grouped by series. - [BoxStatsTable](https://ui.jcsoftdev.com/docs/components/box-stats-table.md): Hidden data table with the summary of every box, violin or cloud. - [BubbleChart](https://ui.jcsoftdev.com/docs/components/bubble-chart.md): Bubble chart: x, y and a third value as the bubble's area (radius grows with the square root, so twice the value is twice the ink). - [BubbleMap](https://ui.jcsoftdev.com/docs/components/bubble-map.md): Markers on a map by longitude and latitude, sized by value (area proportional) and colored by category, with optional clustering. - [CalendarHeatmap](https://ui.jcsoftdev.com/docs/components/calendar-heatmap.md): Contribution-style calendar: one square per day, weeks as columns (Monday first), months labelled on top. - [CandlestickChart](https://ui.jcsoftdev.com/docs/components/candlestick-chart.md): Open-high-low-close candles with up and down tokens, optional volume bars on the same x axis, a last-price line and a brush to zoom. - [CartesianChart](https://ui.jcsoftdev.com/docs/components/cartesian-chart.md): The cartesian engine. - [CategoryAxes](https://ui.jcsoftdev.com/docs/components/category-axes.md): Gridlines along the value axis plus both axes of a `categoryLayout`. - [CategoryGroupAxis](https://ui.jcsoftdev.com/docs/components/category-group-axis.md): Brackets and labels of category groups, placed `offset` pixels below the plot. - [CategorySlider](https://ui.jcsoftdev.com/docs/components/category-slider.md): Focusable keyboard layer laid over the drawing. - [ChartBreadcrumb](https://ui.jcsoftdev.com/docs/components/chart-breadcrumb.md): Drill-down path of a hierarchy chart. - [ChartBrush](https://ui.jcsoftdev.com/docs/components/chart-brush.md): Overview of the whole series with a draggable window. - [ChartDataTable](https://ui.jcsoftdev.com/docs/components/chart-data-table.md): Visually hidden table with the same numbers as the chart, so the data is reachable by screen readers (and by copy/paste) without relying on color. - [ChartEmpty](https://ui.jcsoftdev.com/docs/components/chart-empty.md): Shown when there is nothing to plot: keeps the chart's footprint, says why. - [ChartFrame](https://ui.jcsoftdev.com/docs/components/chart-frame.md): Shared outer shell for every chart: measures its slot (width and, when filling, height), swaps in the loading or empty state, and places the legend, drawing, footer and the hidden… - [ChartGrid](https://ui.jcsoftdev.com/docs/components/chart-grid.md): Small multiples (trellis): the same chart repeated per category over shared scales, so panels compare at a glance. - [ChartInkToolbar](https://ui.jcsoftdev.com/docs/components/chart-ink-toolbar.md): Buttons for the ruler and pen tools plus undo, redo and clear. - [ChartLegend](https://ui.jcsoftdev.com/docs/components/chart-legend.md): Series legend. - [ChartPatternDefs](https://ui.jcsoftdev.com/docs/components/chart-pattern-defs.md): `` definitions to place inside an ``. - [ChartSkeleton](https://ui.jcsoftdev.com/docs/components/chart-skeleton.md): Loading placeholder with the rough shape of the chart that is coming. - [ChartSyncProvider](https://ui.jcsoftdev.com/docs/components/chart-sync-provider.md): Scopes chart sync to its children, so two groups that happen to use the same `syncId` never talk to each other. - [ChartTooltip](https://ui.jcsoftdev.com/docs/components/chart-tooltip.md): Floating card that lists every series at the hovered position. - [ChordChart](https://ui.jcsoftdev.com/docs/components/chord-chart.md): Chord diagram: groups share a circle, ribbons between them are the flows (who switches to whom, which service goes with which). - [ChoroplethDrilldown](https://ui.jcsoftdev.com/docs/components/choropleth-drilldown.md): `ChoroplethMap` that opens a region into a finer map (world to country, country to departments) with a breadcrumb back up. - [ChoroplethMap](https://ui.jcsoftdev.com/docs/components/choropleth-map.md): Regions colored by value: customers by department, sales by country. - [ComboChart](https://ui.jcsoftdev.com/docs/components/combo-chart.md): Columns and lines on one plot, e.g. - [CrossfilterBarChart](https://ui.jcsoftdev.com/docs/components/crossfilter-bar-chart.md): Bars per category of one dimension. - [CrossfilterHistogram](https://ui.jcsoftdev.com/docs/components/crossfilter-histogram.md): Distribution of a numeric dimension. - [CrossfilterProvider](https://ui.jcsoftdev.com/docs/components/crossfilter-provider.md): Shares one dataset and its filters with every chart inside: each chart filters by brushing or clicking, and every other chart (and any table fed from `useCrossfilter().filtered`) … - [CrossfilterScatter](https://ui.jcsoftdev.com/docs/components/crossfilter-scatter.md): One dot per record: accent for the records every filter leaves in, faint for the rest, so the dots you filtered out stay visible as context. - [CrossfilterSummary](https://ui.jcsoftdev.com/docs/components/crossfilter-summary.md): "128 of 480" plus a button that clears every filter. - [DonutChart](https://ui.jcsoftdev.com/docs/components/donut-chart.md): Donut, pie and semi-donut. - [DrilldownBarChart](https://ui.jcsoftdev.com/docs/components/drilldown-bar-chart.md): Bars of one level of a hierarchy. - [DrilldownHeatmap](https://ui.jcsoftdev.com/docs/components/drilldown-heatmap.md): Heatmap you can dive into: click (or press Enter on) a cell to open the matrix behind it. - [DumbbellChart](https://ui.jcsoftdev.com/docs/components/dumbbell-chart.md): Two or more values per category joined by a bar: the length of the line is the spread, the change is last minus first. - [ExportMenu](https://ui.jcsoftdev.com/docs/components/export-menu.md): Two compact buttons that download the chart drawing as SVG or PNG. - [FillGaugeChart](https://ui.jcsoftdev.com/docs/components/fill-gauge-chart.md): Silhouettes filled to a level: stock left in a bottle, a battery of capacity, a droplet of water, a target reached. - [FunnelChart](https://ui.jcsoftdev.com/docs/components/funnel-chart.md): Funnel and pyramid: stage widths follow the value, the outline stays continuous between stages, and the conversion rate between consecutive stages sits on the joint. - [GanttChart](https://ui.jcsoftdev.com/docs/components/gantt-chart.md): Project plan: a task list (name, start, end, progress; collapsible parents with summary bars) beside a zoomable timeline (hours to quarters) with progress bars, milestones, finish… - [GaugeChart](https://ui.jcsoftdev.com/docs/components/gauge-chart.md): Gauge (semi or three-quarter arc). - [GlobeChart](https://ui.jcsoftdev.com/docs/components/globe-chart.md): The world as a globe (orthographic projection) you turn with the pointer or the arrow keys. - [GridLines](https://ui.jcsoftdev.com/docs/components/grid-lines.md): Soft background lines; the zero line, when visible, is a little stronger. - [HeatmapChart](https://ui.jcsoftdev.com/docs/components/heatmap-chart.md): Matrix heatmap: one colored cell per row × column, e.g. - [HexTileMap](https://ui.jcsoftdev.com/docs/components/hex-tile-map.md): Tile map: every region is one hexagon of the same size, so small regions (Callao, Tumbes) weigh as much as large ones and nothing hides behind Loreto. - [HierarchyHeader](https://ui.jcsoftdev.com/docs/components/hierarchy-header.md): Drill-down path, pass it as the frame `legend`. - [HierarchyLegend](https://ui.jcsoftdev.com/docs/components/hierarchy-legend.md): Read-only legend of the open level's branches, pass it as the frame `footer`: below the drawing in narrow containers, above it from `@md`. - [HierarchyMorph](https://ui.jcsoftdev.com/docs/components/hierarchy-morph.md): One hierarchy, two views. - [HierarchyTable](https://ui.jcsoftdev.com/docs/components/hierarchy-table.md): Hidden table: every node below the root with its value and share of the total. - [Histogram](https://ui.jcsoftdev.com/docs/components/histogram.md): Histogram with automatic (Freedman–Diaconis / Sturges) or fixed bins, counts or densities, and an optional fitted normal curve. - [IcicleChart](https://ui.jcsoftdev.com/docs/components/icicle-chart.md): Rectangular partition: the open node fills the first band and each band after it splits its parent by value. - [IsotypeRows](https://ui.jcsoftdev.com/docs/components/isotype-rows.md): Classic isotype rows: a name, then the same icon repeated in proportion to the value, then the value. - [LineChart](https://ui.jcsoftdev.com/docs/components/line-chart.md): Trends over categories or time. - [LineDrilldown](https://ui.jcsoftdev.com/docs/components/line-drilldown.md): A line chart you can drill into: click (or press Enter on) a point that has children to zoom into it, and use the breadcrumb to climb back out. - [MapDataTable](https://ui.jcsoftdev.com/docs/components/map-data-table.md): Visible, sortable table with the same numbers as a choropleth: the accessible alternative to the colors. - [MapLegend](https://ui.jcsoftdev.com/docs/components/map-legend.md): Color key of a choropleth: a gradient bar with its extremes (and centre when diverging), or one swatch per range. - [MapViewport](https://ui.jcsoftdev.com/docs/components/map-viewport.md): The shared stage of the maps: draws the regions of a fitted geometry, owns zoom and pan (wheel, drag, pinch, buttons, keys), the region labels, the zoom buttons and the focusable … - [ObservationDots](https://ui.jcsoftdev.com/docs/components/observation-dots.md): Raw observations of a box or violin as small dots (jitter already applied). - [ParliamentChart](https://ui.jcsoftdev.com/docs/components/parliament-chart.md): Hemicycle of seats: the arcs are worked out for the total, every arc gets seats in proportion to its length, and groups are laid left to right so each one reads as a wedge. - [PictogramChart](https://ui.jcsoftdev.com/docs/components/pictogram-chart.md): Isotype pictogram: every icon stands for `perUnit` of something (clients, services, bottles) and the last icon of a category is cut to its remainder. - [PieChart](https://ui.jcsoftdev.com/docs/components/pie-chart.md): A donut without the hole: same slices, rounded corners, gaps, explode on hover, outside labels and legend toggling (see `DonutChart`). - [PlotExplorer](https://ui.jcsoftdev.com/docs/components/plot-explorer.md): Transparent overlay that owns pointer and keyboard exploration of a plot: a focusable `role="slider"` (arrows move, Home/End jump, Escape clears), the same contract as the cartesi… - [PlotOverlay](https://ui.jcsoftdev.com/docs/components/plot-overlay.md): Transparent, focusable layer over a plot: one place for pointer hover and keyboard exploration, shared by the non-cartesian charts. - [PolarAreaChart](https://ui.jcsoftdev.com/docs/components/polar-area-chart.md): Polar area (Nightingale rose): equal-angle sectors whose radius, or area, follows the value. - [ProgressUnits](https://ui.jcsoftdev.com/docs/components/progress-units.md): Segmented progress: a rating of 4.5 of 5 stars with a half star, the steps of a booking, the cells of a battery. - [RadarChart](https://ui.jcsoftdev.com/docs/components/radar-chart.md): Radar (spider) chart: several series over shared spokes, polygon or circular grid, translucent areas, markers and a tooltip that lists every series for the hovered or focused axis. - [RadialBarChart](https://ui.jcsoftdev.com/docs/components/radial-bar-chart.md): Concentric progress rings ("actividad del día"): one ring per series with a track, rounded caps, optional gradient, labels at the start of each ring and a centre readout that foll… - [RaincloudChart](https://ui.jcsoftdev.com/docs/components/raincloud-chart.md): Raincloud plot (horizontal): a half violin "cloud" for the shape, a slim box for the summary and the jittered raw observations falling below as "rain", so nothing about the distri… - [RangeAreaChart](https://ui.jcsoftdev.com/docs/components/range-area-chart.md): Min–max band over time (or categories) with an optional line for the average. - [SankeyChart](https://ui.jcsoftdev.com/docs/components/sankey-chart.md): Sankey diagram: flows between columns of nodes, band widths proportional to the value. - [ScatterChart](https://ui.jcsoftdev.com/docs/components/scatter-chart.md): Scatter plot: one dot per observation on two numeric axes, several series, an optional least-squares trend line per series and quadrant annotations. - [SlopeChart](https://ui.jcsoftdev.com/docs/components/slope-chart.md): Two columns, one line per category: the slope is the change. - [Sparkline](https://ui.jcsoftdev.com/docs/components/sparkline.md): Word-sized chart for KPI tiles: no axes, no legend. - [StockChart](https://ui.jcsoftdev.com/docs/components/stock-chart.md): Price chart for long daily series: candles, OHLC bars, a line or an area; a range selector and a navigator to zoom; moving averages, Bollinger bands and VWAP over the price; RSI o… - [StreamGraph](https://ui.jcsoftdev.com/docs/components/stream-graph.md): Flowing stacked areas around a moving baseline. - [SunburstChart](https://ui.jcsoftdev.com/docs/components/sunburst-chart.md): Radial partition: the open node in the center, its descendants in rings, each slice proportional to value. - [TimelineChart](https://ui.jcsoftdev.com/docs/components/timeline-chart.md): Gantt-style time ranges: one row per resource, one bar per item. - [TreeCard](https://ui.jcsoftdev.com/docs/components/tree-card.md): Default node template: a card with a color rail, an avatar (image or initials), the name, a subtitle and an optional badge. - [TreeChart](https://ui.jcsoftdev.com/docs/components/tree-chart.md): Org chart / hierarchy tree: tidy layout in four directions, card templates, curved, step or straight edges, animated expand/collapse, pan and zoom, and the path to the root highli… - [TreeChip](https://ui.jcsoftdev.com/docs/components/tree-chip.md): Compact node template for the radial and dendrogram layouts: a pill with a color dot, the name and, optionally, the descendant count. - [TreemapChart](https://ui.jcsoftdev.com/docs/components/treemap-chart.md): Squarified treemap: areas proportional to value, nested groups with a header band, click a group to open it (breadcrumb to go back). - [UnitGlyph](https://ui.jcsoftdev.com/docs/components/unit-glyph.md): One icon of a unit chart, centered in a square cell. - [ViolinChart](https://ui.jcsoftdev.com/docs/components/violin-chart.md): Violin plot: a Gaussian kernel density mirrored around each category axis, with an optional inner box or quartile lines. - [WaffleChart](https://ui.jcsoftdev.com/docs/components/waffle-chart.md): Proportions as a grid of cells (10 x 10 by default, so one cell is 1%). - [WaterfallChart](https://ui.jcsoftdev.com/docs/components/waterfall-chart.md): Bridge from a start value to a total: increases and decreases float on the running total, subtotals and totals stand on the baseline, and dashed connectors carry the eye from one … - [XYAxes](https://ui.jcsoftdev.com/docs/components/xy-axes.md): Gridlines in both directions and the x/y axes of an `xyLayout`. - [XYPointChart](https://ui.jcsoftdev.com/docs/components/xy-point-chart.md): Shared engine of `ScatterChart` and `BubbleChart`: two continuous axes, multi-series points, optional bubbles, trend lines and quadrants. ## Components: Containers - [ActionBar](https://ui.jcsoftdev.com/docs/components/action-bar.md): Floating toolbar for bulk actions on a selection. - [Banner](https://ui.jcsoftdev.com/docs/components/banner.md): `Banner` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [Card](https://ui.jcsoftdev.com/docs/components/card.md): `Card` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [CardBody](https://ui.jcsoftdev.com/docs/components/card-body.md): `CardBody` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [CardFooter](https://ui.jcsoftdev.com/docs/components/card-footer.md): `CardFooter` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [CardHeader](https://ui.jcsoftdev.com/docs/components/card-header.md): `CardHeader` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [Carousel](https://ui.jcsoftdev.com/docs/components/carousel.md): Scroll-snap carousel. - [Cell](https://ui.jcsoftdev.com/docs/components/cell.md): Settings-list row with a ready-made control. - [Cols](https://ui.jcsoftdev.com/docs/components/cols.md): `Cols` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [ColsStack](https://ui.jcsoftdev.com/docs/components/cols-stack.md): `ColsStack` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [Comment](https://ui.jcsoftdev.com/docs/components/comment.md): Annotation callout on a document: bold author, optional counter, body. - [DataGrid](https://ui.jcsoftdev.com/docs/components/data-grid.md): Data grid with sorting, filters, quick search, column pinning, resizing, reordering and visibility, row selection, grouping with aggregates, inline editing, virtualized rows or pa… - [DescriptionList](https://ui.jcsoftdev.com/docs/components/description-list.md): Two-column definition list (auto term / flexible value aligned right); stacks term over value when its own container is narrower than 24rem. - [Facts](https://ui.jcsoftdev.com/docs/components/facts.md): Three-column grid of key facts with a dashed top separator. - [FileTree](https://ui.jcsoftdev.com/docs/components/file-tree.md): Expandable tree following the WAI-ARIA tree pattern: one tab stop with roving focus, arrows to move and open/close, Home/End, type-ahead, Enter or Space to select. - [FilterBuilder](https://ui.jcsoftdev.com/docs/components/filter-builder.md): Builds a filter of nested AND / OR groups of conditions (column, operator, value). - [GenericRow](https://ui.jcsoftdev.com/docs/components/generic-row.md): Generic 3-column row (start / flexible content / end) for heterogeneous lists. - [GenericRowContent](https://ui.jcsoftdev.com/docs/components/generic-row-content.md): Flexible middle column wrapping title and meta. - [GenericRowMeta](https://ui.jcsoftdev.com/docs/components/generic-row-meta.md): Secondary metadata under the title. - [GenericRowTitle](https://ui.jcsoftdev.com/docs/components/generic-row-title.md): `GenericRowTitle` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [HBars](https://ui.jcsoftdev.com/docs/components/h-bars.md): Horizontal comparison bars. - [HighlightLine](https://ui.jcsoftdev.com/docs/components/highlight-line.md): Focus sentence at the top of a card; wrap the key phrase in `` to emphasize it. - [ItemCardGroup](https://ui.jcsoftdev.com/docs/components/item-card-group.md): Rows grouped inside a single card (settings, clients, services), with an optional heading. - [Kanban](https://ui.jcsoftdev.com/docs/components/kanban.md): Board of columns with draggable cards and WIP limits. - [Kpi](https://ui.jcsoftdev.com/docs/components/kpi.md): `Kpi` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [KpiGroup](https://ui.jcsoftdev.com/docs/components/kpi-group.md): Metrics that belong together in one card, divided by hairlines. - [PageHeader](https://ui.jcsoftdev.com/docs/components/page-header.md): Page header. - [PageHeaderActions](https://ui.jcsoftdev.com/docs/components/page-header-actions.md): `PageHeaderActions` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [PageHeaderEyebrow](https://ui.jcsoftdev.com/docs/components/page-header-eyebrow.md): `PageHeaderEyebrow` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [PageHeaderLede](https://ui.jcsoftdev.com/docs/components/page-header-lede.md): `PageHeaderLede` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [PageHeaderTitle](https://ui.jcsoftdev.com/docs/components/page-header-title.md): Page title. - [ResizableHandle](https://ui.jcsoftdev.com/docs/components/resizable-handle.md): Draggable and keyboard-resizable separator between two panels. - [ResizablePanel](https://ui.jcsoftdev.com/docs/components/resizable-panel.md): A panel of a ResizablePanelGroup. - [ResizablePanelGroup](https://ui.jcsoftdev.com/docs/components/resizable-panel-group.md): Row or column of resizable panels. - [Scrolly](https://ui.jcsoftdev.com/docs/components/scrolly.md): Scrollytelling: text steps scroll past while a graphic stays in view and follows the active step. - [ScrollyStep](https://ui.jcsoftdev.com/docs/components/scrolly-step.md): One block of the narrative. - [SettingsLayout](https://ui.jcsoftdev.com/docs/components/settings-layout.md): Two-column settings grid (side nav + content). - [SettingsLayoutMain](https://ui.jcsoftdev.com/docs/components/settings-layout-main.md): Content column: a single stack that becomes a 2-column masonry at 1180px of page width, where each direct child (a card) is not split across columns. - [SettingsLayoutNav](https://ui.jcsoftdev.com/docs/components/settings-layout-nav.md): Sticky side nav that becomes a scrollable horizontal row on narrow pages. - [SettingsLayoutNavItem](https://ui.jcsoftdev.com/docs/components/settings-layout-nav-item.md): `SettingsLayoutNavItem` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [SettingsRow](https://ui.jcsoftdev.com/docs/components/settings-row.md): `SettingsRow` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [Table](https://ui.jcsoftdev.com/docs/components/table.md): Table inside its own horizontal scroll wrapper. - [TableBody](https://ui.jcsoftdev.com/docs/components/table-body.md): `TableBody` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [TableCell](https://ui.jcsoftdev.com/docs/components/table-cell.md): `TableCell` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [TableHead](https://ui.jcsoftdev.com/docs/components/table-head.md): `TableHead` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [TableHeaderCell](https://ui.jcsoftdev.com/docs/components/table-header-cell.md): `TableHeaderCell` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [TableLinkRow](https://ui.jcsoftdev.com/docs/components/table-link-row.md): Fully navigable table row: the real link lives in the first cell and, via a stretched link (positioned `` + anchor `::before` at `inset-0`), its click area covers the whole ro… - [TableRow](https://ui.jcsoftdev.com/docs/components/table-row.md): `TableRow` is part of the Containers set, imported from `@jcsoftdev/ui/containers`. - [Timeline](https://ui.jcsoftdev.com/docs/components/timeline.md): Vertical activity feed: marker rail on the left, grouped by day, newest first by convention. - [Toolbar](https://ui.jcsoftdev.com/docs/components/toolbar.md): Row of filters/controls above a table or grid. - [ToolbarRight](https://ui.jcsoftdev.com/docs/components/toolbar-right.md): Group pushed to the right edge of the toolbar. ## Components: Forms - [AccentPicker](https://ui.jcsoftdev.com/docs/components/accent-picker.md): Exclusive swatch picker. - [CheckboxButtonGroup](https://ui.jcsoftdev.com/docs/components/checkbox-button-group.md): Multi-select where each option is a button-like card; native checkboxes underneath. - [Dropzone](https://ui.jcsoftdev.com/docs/components/dropzone.md): `Dropzone` is part of the Forms set, imported from `@jcsoftdev/ui/forms`. - [EmojiPicker](https://ui.jcsoftdev.com/docs/components/emoji-picker.md): Emoji panel with search, category tabs and a keyboard-navigable grid (arrows, Home/End; Enter or Space picks). - [EmojiReactionBar](https://ui.jcsoftdev.com/docs/components/emoji-reaction-bar.md): Row of reaction chips plus an "add reaction" button that opens an emoji picker. - [EmojiReactionButton](https://ui.jcsoftdev.com/docs/components/emoji-reaction-button.md): Reaction chip: an emoji with its count, pressed when the current user reacted. - [Field](https://ui.jcsoftdev.com/docs/components/field.md): `Field` is part of the Forms set, imported from `@jcsoftdev/ui/forms`. - [FormGrid](https://ui.jcsoftdev.com/docs/components/form-grid.md): Grid for pairs of fields. - [InlineSelect](https://ui.jcsoftdev.com/docs/components/inline-select.md): Borderless select that reads as part of a sentence or a row ("Repetir cada [semana v]"). - [Input](https://ui.jcsoftdev.com/docs/components/input.md): `Input` is part of the Forms set, imported from `@jcsoftdev/ui/forms`. - [InputIcon](https://ui.jcsoftdev.com/docs/components/input-icon.md): `InputIcon` is part of the Forms set, imported from `@jcsoftdev/ui/forms`. - [Label](https://ui.jcsoftdev.com/docs/components/label.md): `Label` is part of the Forms set, imported from `@jcsoftdev/ui/forms`. - [NativeSelect](https://ui.jcsoftdev.com/docs/components/native-select.md): Styled native `` (keeps the system picker on mobile) and draws the chevron with an icon. - [Slider](https://ui.jcsoftdev.com/docs/components/slider.md): Single or range slider. - [Textarea](https://ui.jcsoftdev.com/docs/components/textarea.md): `Textarea` is part of the Forms set, imported from `@jcsoftdev/ui/forms`. - [TimeInput](https://ui.jcsoftdev.com/docs/components/time-input.md): 24h time field. ## Components: Navigation - [FloatingToc](https://ui.jcsoftdev.com/docs/components/floating-toc.md): Table of contents that tracks the section being read. - [Segmented](https://ui.jcsoftdev.com/docs/components/segmented.md): Exclusive selector for 2-4 options. - [SegmentedItem](https://ui.jcsoftdev.com/docs/components/segmented-item.md): `SegmentedItem` is part of the Navigation set, imported from `@jcsoftdev/ui/navigation`. - [Stepper](https://ui.jcsoftdev.com/docs/components/stepper.md): Step 1-N indicator for multi-stage flows. - [Tabs](https://ui.jcsoftdev.com/docs/components/tabs.md): To sync the active tab with a search param, use Radix's controlled pattern: `value={param}` + `onValueChange={(v) => updateParam(v)}`. - [TabsContent](https://ui.jcsoftdev.com/docs/components/tabs-content.md): `TabsContent` is part of the Navigation set, imported from `@jcsoftdev/ui/navigation`. - [TabsList](https://ui.jcsoftdev.com/docs/components/tabs-list.md): `TabsList` is part of the Navigation set, imported from `@jcsoftdev/ui/navigation`. - [TabsTrigger](https://ui.jcsoftdev.com/docs/components/tabs-trigger.md): `TabsTrigger` is part of the Navigation set, imported from `@jcsoftdev/ui/navigation`. ## Components: Overlays - [ContextMenu](https://ui.jcsoftdev.com/docs/components/context-menu.md): Menu opened by right-click, long-press or the keyboard (Menu key, Shift+F10) on its trigger area. - [ContextMenuCheckboxItem](https://ui.jcsoftdev.com/docs/components/context-menu-checkbox-item.md): `ContextMenuCheckboxItem` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [ContextMenuContent](https://ui.jcsoftdev.com/docs/components/context-menu-content.md): `ContextMenuContent` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [ContextMenuItem](https://ui.jcsoftdev.com/docs/components/context-menu-item.md): `ContextMenuItem` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [ContextMenuLabel](https://ui.jcsoftdev.com/docs/components/context-menu-label.md): `ContextMenuLabel` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [ContextMenuSeparator](https://ui.jcsoftdev.com/docs/components/context-menu-separator.md): `ContextMenuSeparator` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [ContextMenuShortcut](https://ui.jcsoftdev.com/docs/components/context-menu-shortcut.md): Right-aligned hint such as "Ctrl+D"; purely visual. - [ContextMenuTrigger](https://ui.jcsoftdev.com/docs/components/context-menu-trigger.md): The area that answers to right-click. - [Dialog](https://ui.jcsoftdev.com/docs/components/dialog.md): Wraps `DialogPrimitive.Root` so focus is restored on close even when the dialog is opened in a controlled way, without its own `DialogTrigger`. - [DialogBody](https://ui.jcsoftdev.com/docs/components/dialog-body.md): `DialogBody` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DialogClose](https://ui.jcsoftdev.com/docs/components/dialog-close.md): `DialogClose` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DialogContent](https://ui.jcsoftdev.com/docs/components/dialog-content.md): `DialogContent` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DialogFooter](https://ui.jcsoftdev.com/docs/components/dialog-footer.md): `DialogFooter` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DialogHeader](https://ui.jcsoftdev.com/docs/components/dialog-header.md): `DialogHeader` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DialogTitle](https://ui.jcsoftdev.com/docs/components/dialog-title.md): `DialogTitle` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DialogTrigger](https://ui.jcsoftdev.com/docs/components/dialog-trigger.md): `DialogTrigger` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [Drawer](https://ui.jcsoftdev.com/docs/components/drawer.md): Wraps `DialogPrimitive.Root` so focus is restored on close even when the drawer is opened in a controlled way, without its own `DrawerTrigger`. - [DrawerClose](https://ui.jcsoftdev.com/docs/components/drawer-close.md): `DrawerClose` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DrawerContent](https://ui.jcsoftdev.com/docs/components/drawer-content.md): Right-anchored side panel for secondary flows. - [DrawerTitle](https://ui.jcsoftdev.com/docs/components/drawer-title.md): `DrawerTitle` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DrawerTrigger](https://ui.jcsoftdev.com/docs/components/drawer-trigger.md): `DrawerTrigger` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DropdownMenu](https://ui.jcsoftdev.com/docs/components/dropdown-menu.md): `DropdownMenu` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DropdownMenuContent](https://ui.jcsoftdev.com/docs/components/dropdown-menu-content.md): `DropdownMenuContent` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DropdownMenuItem](https://ui.jcsoftdev.com/docs/components/dropdown-menu-item.md): `DropdownMenuItem` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DropdownMenuLabel](https://ui.jcsoftdev.com/docs/components/dropdown-menu-label.md): `DropdownMenuLabel` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DropdownMenuRadioGroup](https://ui.jcsoftdev.com/docs/components/dropdown-menu-radio-group.md): `DropdownMenuRadioGroup` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DropdownMenuRadioItem](https://ui.jcsoftdev.com/docs/components/dropdown-menu-radio-item.md): Radix sets `role="menuitemradio"` and `aria-checked`: use it for single-value filters. - [DropdownMenuSeparator](https://ui.jcsoftdev.com/docs/components/dropdown-menu-separator.md): `DropdownMenuSeparator` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [DropdownMenuTrigger](https://ui.jcsoftdev.com/docs/components/dropdown-menu-trigger.md): `DropdownMenuTrigger` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [HoverCard](https://ui.jcsoftdev.com/docs/components/hover-card.md): Preview card shown on hover or keyboard focus of its trigger. - [HoverCardContent](https://ui.jcsoftdev.com/docs/components/hover-card-content.md): `HoverCardContent` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [HoverCardTrigger](https://ui.jcsoftdev.com/docs/components/hover-card-trigger.md): `HoverCardTrigger` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [Popover](https://ui.jcsoftdev.com/docs/components/popover.md): `Popover` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [PopoverAnchor](https://ui.jcsoftdev.com/docs/components/popover-anchor.md): `PopoverAnchor` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [PopoverClose](https://ui.jcsoftdev.com/docs/components/popover-close.md): `PopoverClose` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [PopoverContent](https://ui.jcsoftdev.com/docs/components/popover-content.md): Positioned contextual panel; viewport collision is handled by Radix (Floating UI). - [PopoverTrigger](https://ui.jcsoftdev.com/docs/components/popover-trigger.md): `PopoverTrigger` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [PreviousFocusProvider](https://ui.jcsoftdev.com/docs/components/previous-focus-provider.md): `PreviousFocusProvider` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`. - [Toaster](https://ui.jcsoftdev.com/docs/components/toaster.md): Ephemeral, non-critical confirmations. ## Components: Palette - [CommandPalette](https://ui.jcsoftdev.com/docs/components/command-palette.md): Global search/command palette built on `cmdk`, shown in a modal dialog. ## Components: Rich text - [RichTextEditor](https://ui.jcsoftdev.com/docs/components/rich-text-editor.md): Rich text editor on a plain `contenteditable`, with no dependencies. - [RichTextView](https://ui.jcsoftdev.com/docs/components/rich-text-view.md): Read-only rendering of editor output; sanitizes again so stored HTML is never trusted. ## Components: Shell - [AppShell](https://ui.jcsoftdev.com/docs/components/app-shell.md): Root of the app frame (sidebar + topbar + page). - [Sidebar](https://ui.jcsoftdev.com/docs/components/sidebar.md): Main navigation. - [Topbar](https://ui.jcsoftdev.com/docs/components/topbar.md): `Topbar` is part of the Shell set, imported from `@jcsoftdev/ui/shell`. ## Components: States - [EmptyState](https://ui.jcsoftdev.com/docs/components/empty-state.md): `EmptyState` is part of the States set, imported from `@jcsoftdev/ui/states`. - [ErrorState](https://ui.jcsoftdev.com/docs/components/error-state.md): `ErrorState` is part of the States set, imported from `@jcsoftdev/ui/states`. - [ForbiddenState](https://ui.jcsoftdev.com/docs/components/forbidden-state.md): `ForbiddenState` is part of the States set, imported from `@jcsoftdev/ui/states`. - [OfflineBanner](https://ui.jcsoftdev.com/docs/components/offline-banner.md): `OfflineBanner` is part of the States set, imported from `@jcsoftdev/ui/states`. - [Skeleton](https://ui.jcsoftdev.com/docs/components/skeleton.md): `Skeleton` is part of the States set, imported from `@jcsoftdev/ui/states`. ## Reference - [Exports reference](https://ui.jcsoftdev.com/docs/reference/exports.md): Every public hook, function and constant of @jcsoftdev/ui that is not a React component. ## Optional - [Storybook](https://ui.jcsoftdev.com/storybook/): Interactive stories for every component, with controls and accessibility checks - [Component manifest (JSON)](https://ui.jcsoftdev.com/manifest.json): Machine-readable list of components, import paths, props and story ids - [Complete documentation](https://ui.jcsoftdev.com/llms-full.txt): Every page concatenated into one file