ai-native-react-components

KO | EN

gitlite — search

#generative-ai #rag #self-hosted #kubernetes #monitoring #chatgpt #ai #json #html #electron

ai-native-react-components

(★ 17)

19 crafted React primitives for AI-native interfaces — streaming text, thinking states, approval flows, tool traces, and tables. From beautifului.dev.

File Explorer

ZIP Download

- globals.css
- layout.tsx
- page.tsx
- theme-toggle.tsx
- - Shimmer.tsx
  - StreamText.tsx
- approval-card.tsx
- chat.tsx
- code-block.tsx
- context-cards.tsx
- diff-table.tsx
- filter-table.tsx
- fine-tune-card.tsx
- insight-cards.tsx
- loading-state.tsx
- prompt-bar.tsx
- recommendation-card.tsx
- records-table.tsx
- search.tsx
- selection-actions.tsx
- sidebar-nav.tsx
- streaming-text.tsx
- task-rows.tsx
- thinking.tsx
- tool-chips.tsx
- - approval-card.json
  - chat.json
  - code-block.json
  - context-cards.json
  - diff-table.json
  - filter-table.json
  - fine-tune-card.json
  - insight-cards.json
  - loading-state.json
  - prompt-bar.json
  - recommendation-card.json
  - records-table.json
  - search.json
  - selection-actions.json
  - sidebar-nav.json
  - streaming-text.json
  - task-rows.json
  - thinking.json
  - tool-chips.json
.gitignore
LICENSE
next.config.ts
package.json
postcss.config.mjs
README.md
registry.json
tsconfig.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

19 crafted primitives for AI-native interfaces — loading and thinking states, streaming
text, approval flows, tool traces, tables, and search. Sourced from
[beautifului.dev](https://www.beautifului.dev/).

Every component is a self-contained `.tsx` file with no shared runtime beyond React and
a set of design tokens. Install one with the shadcn CLI and it arrives with its tokens,
keyframes, and npm dependencies already wired in:

```bash
npx shadcn@latest add https://raw.githubusercontent.com/TurboKach/ai-native-react-components/main/public/r/records-table.json
```

Requires a Tailwind CSS v4 project with a `components.json` (`npx shadcn@latest init`).

## Components

Swap the file name at the end of the URL above for any of these.

| Component | File | Extra deps |
| --- | --- | --- |
| Loading State | `components/loading-state.tsx` | — |
| Thinking | `components/thinking.tsx` | — |
| Streaming Text | `components/streaming-text.tsx` | — |
| Approval Card | `components/approval-card.tsx` | — |
| Tool Chips | `components/tool-chips.tsx` | — |
| Task Rows | `components/task-rows.tsx` | — |
| Chat | `components/chat.tsx` | — |
| Prompt Bar | `components/prompt-bar.tsx` | `glimm` |
| Recommendation Card | `components/recommendation-card.tsx` | — |
| Context Cards | `components/context-cards.tsx` | — |
| Diff Table | `components/diff-table.tsx` | — |
| Records Table | `components/records-table.tsx` | `.records-*` CSS |
| Filter Table | `components/filter-table.tsx` | — |
| Sidebar Nav | `components/sidebar-nav.tsx` | — |
| Search | `components/search.tsx` | — |
| Insight Cards | `components/insight-cards.tsx` | `liveline`, `.insight-chart-*` CSS |
| Code Block | `components/code-block.tsx` | — |
| Fine-tune Card | `components/fine-tune-card.tsx` | — |
| Selection Actions | `components/selection-actions.tsx` | `iconoir-react`, `components/atoms/*` |

## Running the showcase

```bash
npm install
npm run dev
```

`app/page.tsx` renders all 19 on one page with a light/dark toggle.

## Copying by hand

The CLI is a convenience, not a requirement — nothing here is locked to it.

1. Copy the `.tsx` file into your project.
2. Copy `app/globals.css` — or, if you already have a stylesheet, the `:root`/`.dark`
   token blocks, the `@theme inline` mapping, and the `@keyframes` from it. The
   components address colors only through tokens (`bg-surface`, `text-ink-2`,
   `shadow-card`), so re-skinning is a matter of editing the two token blocks.
3. Install the extra dependency listed above, if the component has one.

Requires Tailwind CSS v4 — the `@theme inline` block is v4 syntax.

## The registry

`registry.json` is the source of truth; `public/r/*.json` are the built items the CLI
fetches, each one carrying its component source, the full light/dark token set, only
the `@keyframes` that component actually uses, and its npm dependencies.

Regenerate after editing a component:

```bash
npm run registry:build
```

Serving the repo (or the deployed showcase) at a domain also makes
`https://<your-domain>/r/<name>.json` work, since the built items live under `public/`.

### Fonts

Components assume Inter (`--font-inter`) and JetBrains Mono (`--font-mono-face`),
wired up in `app/layout.tsx` via `next/font/google`. Substitute freely; nothing
depends on the specific faces beyond tabular figures in the mono stack.

## Notes

- Every component is `"use client"` and self-animating — they run their own demo loop
  (streaming, thinking, settling) rather than taking data props. Treat them as visual
  references to wire up to real state, not as finished API surfaces.
- `components/atoms/Shimmer.tsx` and `components/atoms/StreamText.tsx` are
  reimplementations, matching the CSS and call sites of the originals.

## License

MIT — see [LICENSE](LICENSE).

ai-native-react-components

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

ai-native-react-components

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README