Bklit UI

Avoid hardcoding colors. Bklit UI uses a token-based theming system to ensure consistency and support for light/dark modes.

Best Practices:

• Use chartCssVars: Import chartCssVars from @bklitui/ui/charts to access theme tokens instead of writing raw var(--chart-...) strings.
• Multi-series Palettes: Use the --chart-1 through --chart-5 variables to define colors for different data series.
• Tooltip Styling: For tooltip surfaces, use Tailwind classes bg-popover text-popover-foreground to prevent visibility issues (like white-on-white) in light mode.

The Background component provides a pattern fill for the plot area of a chart, serving as an alternative to Grid when you want texture instead of reference lines.

Key behaviors:

• It must be a child of a cartesian chart (e.g., LineChart, AreaChart, BarChart, ScatterChart, CandlestickChart, ComposedChart, LiveLineChart).
• It renders behind series layers.
• On time-series charts, it sits outside the series clip reveal and fades in after the chart finishes loading.
• It uses @visx/pattern under the hood.

import { LineChart, Line, Background, ChartTooltip, XAxis } from "@bklitui/ui/charts";

<LineChart data={data}>
  <Background pattern="diagonal" />
  <Line dataKey="value" />
  <XAxis />
  <ChartTooltip />
</LineChart>

The Legend component uses a composable API. Instead of passing a configuration object for the layout, you define a single layout using child components (like LegendItemComponent, LegendMarker, etc.) inside the Legend root. The Legend component then automatically maps this layout to every item in your items data array.

This allows for highly flexible layouts, such as simple horizontal rows, grid-based layouts with progress bars, or complex custom arrangements, all while maintaining a single source of truth for the data.

const data = [
  { label: "Organic", value: 4250, maxValue: 5000, color: "#0ea5e9" },
  { label: "Paid", value: 3120, maxValue: 5000, color: "#a855f7" },
];

<Legend items={data} title="Traffic Sources">
  <LegendItemComponent>
    <LegendMarker />
    <LegendLabel />
    <LegendValue />
  </LegendItemComponent>
</Legend>

For advanced custom crosshairs or markers that exist outside the standard ChartTooltip configuration, do not attempt to track mouse position manually via window event listeners. Instead, use the useChart hook from @bklitui/ui/charts to access the tooltipData provided by the chart context.

import { useChart } from "@bklitui/ui/charts";

function CustomIndicator() {
  const { tooltipData } = useChart();
  // render from tooltipData
}

The Axis components provide date labels (X Axis) and value labels (Y Axis) for line and area charts.

To use them correctly, you must follow these requirements:

1. Parent Container: Both components must be placed inside a LineChart or AreaChart component.
2. Rendering: They are designed to render via a portal into the chart container to ensure proper positioning relative to the axes.

Studio UI is the design system specifically for the chart editor (sidebars, property rows, motion controls, and pickers). It is distinct from the chart rendering primitives, which reside in @bklitui/ui.

Key architectural boundaries:

• @bklitui/studio: Contains editor-only UI components, including property widgets and the editor shell.
• @bklitui/ui: Contains the actual chart rendering components.
• @bklitui/icons: The central icon system used across the ecosystem.

Note: Studio UI is intended for local development/editor use and is not a deployed public site.