Component LibrarySource via MCPComponents
React components your agent installs through the Niblet MCP, running live. Try one here, copy its build prompt for your agent, or open it to see it large and what it installs.
ds-one37
- Ds One Alertds-one
- Ds One Avatards-one
- Ds One Badgeds-one
- Ds One CardComponent-specific brain for `Card.tsx` (and the slot components: `CardHeader`, `CardContent`, `CardFooter`, `CardTitle`, `CardDescription`). Read alongside `design-systems/ds-one/rules.md` (system-wide rules) before extending or composing.
- Ds One Checkboxds-one
- Ds One CornerMarkersds-one
- Ds One DataTableds-one
- Ds One DateRangePickerds-one
- Ds One Drawerds-one
- Ds One EmptyStateds-one
- Ds One Gaugea demo reading so the bare component renders meaningfully. meaning: accent = live/healthy, warning = orange, fault = red. Pass '' for a unitless reading. the circle (mono xs, muted, uppercase). Centered when showValue is false. "<label or Gauge> <value> of <max><unit>" description.
- Ds One HeatGridFill step of a single cell, from empty (0) to the bright frontier (3).
- Ds One IconButtonPhosphor / Lucide icon. Pass either `icon` OR `children` for custom glyphs.
- Ds One Inputds-one
- Ds One MetricChartds-one
- Ds One MusicPlayerds-one
- Ds One NavItemOptional icon component rendered at 20px before the label. Override only when two distinct nav lists share a viewport and you don't want the active dot to animate between them. To get the slide between sibling NavItems, wrap the list in framer's <LayoutGroup>.
- Ds One PanelHeaderComponent-specific brain for `PanelHeader.tsx`. Read alongside `design-systems/ds-one/rules.md` (system-wide rules) before extending it.
- Ds One PanelMenuds-one
- Ds One PlanetPerceived brightness, 0 to 1, of a `#rgb` or `#rrggbb` color string. Anything it cannot parse reads as bright, which keeps the dark theme's additive glow as the default answer.
- Ds One ProgressBards-one
- Ds One RadarChartds-one
- Ds One Radiods-one
- Ds One SearchFieldds-one
- Ds One SegmentedControlds-one
- Ds One Sliderds-one
- Ds One Spinnerds-one
- Ds One StatTiledirection of the move; `polarity` decides whether that move is coloured as good (accent) or bad (fault). Exactly 0 is neutral: no glyph, muted. Which direction is the good one for this metric. `'lower-is-better'` for response time, latency, error rate, incident count — a drop there is an improvement and must not render red. `'none'` for readings with no good/bad sense at all (demand, headcount,…
- Ds One Tableds-one
- Ds One Tagds-one
- Ds One Textareads-one
- Ds One Toggleds-one
- Ds One Tooltipds-one
- Ds One TrendChartThe canonical multi-series time-series chart: one component that renders as line, area, or bar with a built-in mode toggle, custom tooltip, and toggleable legend. Built on recharts.
- Ds One UserCardds-one
- Ds One UserMenuds-one
- Ds One Waveformds-one
