---
name: "@beadkit"
slug: "beadkit"
description: "Learning primitives for AI-native interfaces: inline quizzes, flashcards, sequences, and mastery meters with streaming support and xAPI telemetry."
category: "AI/chat UI"
tags: ["ai", "blocks", "cards", "dashboard", "design-system", "forms", "hooks", "loaders", "tables"]
framework: "react"
license: null
author: "ale-alejandro"
website: "https://beadkit.dev"
github: "https://github.com/ale-alejandro/beadkit"
registry: "https://beadkit.dev/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 27
generated_at: "2026-10-13T06:38:00.276Z"
---

# @beadkit

Learning primitives for AI-native interfaces: inline quizzes, flashcards, sequences, and mastery meters with streaming support and xAPI telemetry.

## Links

- Website: https://beadkit.dev
- GitHub: https://github.com/ale-alejandro/beadkit
- Registry JSON: https://beadkit.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/beadkit
- This file: https://sh4dcn.vercel.app/md/beadkit.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://beadkit.dev/r/registry.json
pnpm dlx shadcn@latest add https://beadkit.dev/r/registry.json
bunx shadcn@latest add https://beadkit.dev/r/registry.json
# clone the source repo
git clone https://github.com/ale-alejandro/beadkit.git
# fetch the raw registry index
curl -s https://beadkit.dev/r/registry.json
```

## Components (27)

| name | type | description | install |
| --- | --- | --- | --- |
| learning-core | registry:component | Shared card shell and xAPI telemetry. Every learning component depends on this; installing a component pulls it in automatically. | `npx shadcn@latest add https://beadkit.dev/r/learning-core.json` |
| quiz | registry:component | Inline concept check with immediate feedback and an xAPI answered statement. | `npx shadcn@latest add https://beadkit.dev/r/quiz.json` |
| flashcard | registry:component | Two-sided card with an xAPI experienced statement on first reveal. | `npx shadcn@latest add https://beadkit.dev/r/flashcard.json` |
| sequence | registry:component | Shuffled steps the learner drags back into order, with equivalent keyboard reordering, live-region announcements, and an xAPI answered statement carrying the s… | `npx shadcn@latest add https://beadkit.dev/r/sequence.json` |
| mastery | registry:component | Per-skill mastery bars plus a learner self-rating, emitting an xAPI rated statement. | `npx shadcn@latest add https://beadkit.dev/r/mastery.json` |
| learning-stream | registry:component | Parses <LEARNING_COMPONENT> payloads out of streaming model output and hydrates them inline. Pulls in every component it can render. | `npx shadcn@latest add https://beadkit.dev/r/learning-stream.json` |
| ai-core | registry:component | Shared motion styles and the upstream Beautiful UI MIT notice used by Beadkit's AI interface primitives. | `npx shadcn@latest add https://beadkit.dev/r/ai-core.json` |
| loading-state | registry:component | Pixel-grid AI loading state with Drive, Dots, and Orbit variants, a shimmer label, elapsed time, and reduced-motion support. | `npx shadcn@latest add https://beadkit.dev/r/loading-state.json` |
| thinking | registry:component | Expandable AI trace for step, reasoning, search, and coding progress with reusable row data and reduced-motion support. | `npx shadcn@latest add https://beadkit.dev/r/thinking.json` |
| thinking-examples | registry:example | Approved deterministic Thinking scenarios used by the Beadkit workbench. | `npx shadcn@latest add https://beadkit.dev/r/thinking-examples.json` |
| approval-card | registry:component | Paged human-in-the-loop questions with single- and multi-select answers, custom input, and submission state. | `npx shadcn@latest add https://beadkit.dev/r/approval-card.json` |
| tool-chips | registry:component | Progressively revealed tool calls with expandable details and file diff summaries. | `npx shadcn@latest add https://beadkit.dev/r/tool-chips.json` |
| task-rows | registry:component | Expandable agent task rows with pending, running, failed, and completed states plus Capsule and List layouts. | `npx shadcn@latest add https://beadkit.dev/r/task-rows.json` |
| recommendation-card | registry:component | Agent recommendation with confidence meter, alternatives drawer, and acceptance callback. | `npx shadcn@latest add https://beadkit.dev/r/recommendation-card.json` |
| context-cards | registry:component | Retrieved context chunks with metadata and linked source attribution. | `npx shadcn@latest add https://beadkit.dev/r/context-cards.json` |
| code-block | registry:component | Line-streaming code surface with typed syntax tokens, static output mode, and accessible copy feedback. | `npx shadcn@latest add https://beadkit.dev/r/code-block.json` |
| streaming-text | registry:component | Paced response text with inline citations, sources, actions, follow-ups, and reduced-motion behavior. | `npx shadcn@latest add https://beadkit.dev/r/streaming-text.json` |
| prompt-bar | registry:component | Rounded or Pill composer with source mentions, slash commands, attachments, model selection, and dictation state. | `npx shadcn@latest add https://beadkit.dev/r/prompt-bar.json` |
| selection-actions | registry:component | Async rewrite actions for selected text with custom instructions, retry, keep, and discard controls. | `npx shadcn@latest add https://beadkit.dev/r/selection-actions.json` |
| chat | registry:component | Tabbed AI SDK chat with a reusable prompt bar, typed learning tools, streamed Markdown, and compatibility with the learning-component protocol. | `npx shadcn@latest add https://beadkit.dev/r/chat.json` |
| diff-table | registry:component | AI-proposed table changes with staged reveal and row-level or bulk accept/reject decisions. | `npx shadcn@latest add https://beadkit.dev/r/diff-table.json` |
| records-table | registry:component | CRM-style sortable and selectable records grid with tags, relationship status, and links. | `npx shadcn@latest add https://beadkit.dev/r/records-table.json` |
| filter-table | registry:component | Controlled or uncontrolled status chips that filter a responsive semantic data table. | `npx shadcn@latest add https://beadkit.dev/r/filter-table.json` |
| sidebar-nav | registry:component | Expanded or collapsed workspace navigation with sections, counts, actions, and quick search. | `npx shadcn@latest add https://beadkit.dev/r/sidebar-nav.json` |
| search | registry:component | Live command search with keyboard navigation, result callbacks, clearing, and an empty state. | `npx shadcn@latest add https://beadkit.dev/r/search.json` |
| insight-cards | registry:component | Paged agent insights with responsive, pointer- and keyboard-scrubbable SVG charts. | `npx shadcn@latest add https://beadkit.dev/r/insight-cards.json` |
| fine-tune-card | registry:component | Controlled or uncontrolled design inspector for layout, dimensions, radius, opacity, and type. | `npx shadcn@latest add https://beadkit.dev/r/fine-tune-card.json` |

## For AI agents

```text
You are adding components from @beadkit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/beadkit.md) for the component list.
2. Fetch the machine-readable index: https://beadkit.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: beadkit).
```