new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · all subjects

specialized components

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Command component purpose

The Command component is a command menu for search and quick actions.

Chart basic usage example

Example of using Chart component with Recharts: ```tsx import { Bar, BarChart } from "recharts" import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart" export function MyChart() { return ( <ChartContainer> <BarChart data={data}> <Bar dataKey="value" /> <ChartTooltip content={<ChartTooltipContent />} /> </BarChart> </ChartContainer> ) } ```

Chart config structure

Chart config is where you define labels, icons and colors for a chart. It is intentionally decoupled from chart data. Each key in the config object contains a label property, optional icon property (Lucide component), and color property which can be a hex/hsl/oklch color string or a theme object with 'light' and 'dark' keys.

Chart config example with theme support

Example of chart config with theming: ```tsx import { Monitor } from "lucide-react" import { type ChartConfig } from "@/components/ui/chart" const chartConfig = { desktop: { label: "Desktop", icon: Monitor, color: "#2563eb", theme: { light: "#2563eb", dark: "#dc2626", }, }, } satisfies ChartConfig ```

ChartTooltip and ChartTooltipContent components

The Chart component provides custom ChartTooltip and ChartTooltipContent components for adding tooltips to charts. Import from @/components/ui/chart and use together: <ChartTooltip content={<ChartTooltipContent />} />

ChartTooltip props

ChartTooltipContent supports the following props: labelKey (string) - The config or data key to use for the label; nameKey (string) - The config or data key to use for the name; indicator (dot, line, or dashed) - The indicator style for the tooltip; hideLabel (boolean) - Whether to hide the label; hideIndicator (boolean) - Whether to hide the indicator.

ChartLegend and ChartLegendContent components

The Chart component provides custom ChartLegend and ChartLegendContent components for adding a legend to charts. Import from @/components/ui/chart and use together: <ChartLegend content={<ChartLegendContent />} />

ChartLegendContent nameKey prop

ChartLegendContent supports the nameKey prop (string) to specify a custom key for legend names from your chart data.

Chart ChartContainer min-height requirement

The ChartContainer component requires a min-h-[VALUE] class to be set for the chart to be responsive. This is important for proper chart rendering.

Chart accessibility with accessibilityLayer

To add keyboard access and screen reader support to charts, use the accessibilityLayer prop on chart components like LineChart and BarChart: <BarChart accessibilityLayer data={chartData}>

How to use Chart component with shadcn/ui

Use the Chart component by installing via CLI (npx shadcn@latest add chart), then import ChartContainer, ChartTooltip, ChartTooltipContent from @/components/ui/chart. Combine these with Recharts components like BarChart, Bar, CartesianGrid, XAxis, and other Recharts primitives. Define a chartConfig object with labels and colors, then reference colors using var(--color-KEY) format.

Chart custom tooltip with labelKey and nameKey

Example of custom chart tooltip: ```tsx const chartData = [ { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, ] const chartConfig = { visitors: { label: "Total Visitors", }, chrome: { label: "Chrome", color: "var(--chart-1)", }, safari: { label: "Safari", color: "var(--chart-2)", }, } satisfies ChartConfig <ChartTooltip content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />} /> ```

Chart custom legend with nameKey

Example of custom chart legend: ```tsx const chartData = [ { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, ] const chartConfig = { chrome: { label: "Chrome", color: "var(--chart-1)", }, safari: { label: "Safari", color: "var(--chart-2)", }, } satisfies ChartConfig <ChartLegend content={<ChartLegendContent nameKey="browser" />} /> ```

Chart component uses Recharts

The Chart component is built using Recharts under the hood. Charts are designed with composition in mind, where you build charts using Recharts components and only bring in custom components like ChartTooltip when needed.

Chart does not wrap Recharts

The Chart component does not wrap Recharts, meaning you are not locked into an abstraction. When a new Recharts version is released, you can follow the official upgrade path to upgrade your charts. The components are yours to control.

Give your agent this brain