# Fragms

> React components for AI interfaces. A voice glow, agents with a face, an AI cursor, plans, diffs, approvals, citations and a prompt box. Tune them live, copy one file, ship it.

Every component is a single React file with no setup and no Tailwind required. It is MIT licensed and owned by whoever copies it. Each file starts with a short guide and an example.

- Site https://fragms.simonveprek.cz
- Studio, every setting for every component https://fragms.simonveprek.cz/studio
- Changelog, every release and what it brought https://fragms.simonveprek.cz/changelog
- Every component's own guide and props in one file https://fragms.simonveprek.cz/llms-full.txt
- Source https://github.com/simonveprek/fragms

## Components

### Aura

A glow on the inside edge of a shape, moving with a voice.

- Needs React, Theme
- Install with `curl --create-dirs -o src/components/aura.tsx https://fragms.simonveprek.cz/source/aura -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/aura.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/aura.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/aura.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/aura.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/aura

### Points

Little agents with a face that think, talk, listen and nap.

- Needs React, Theme
- Install with `curl --create-dirs -o src/components/points.tsx https://fragms.simonveprek.cz/source/points -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/points.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/points.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/points.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/points.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/points

### Ghost

An AI cursor that works your interface for real.

- Needs React, Framer Motion, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/ghost.tsx https://fragms.simonveprek.cz/source/ghost -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/ghost.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/ghost.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/ghost.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/ghost.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/ghost

### Composer

The prompt box for an AI app, with files, skills, a model picker, voice and stop.

- Needs React, Framer Motion, Aura, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/composer.tsx https://fragms.simonveprek.cz/source/composer -o src/components/aura.tsx https://fragms.simonveprek.cz/source/aura -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/composer.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/composer.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/composer.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/composer.tsx -o src/components/aura.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/aura.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/composer

### Context

A ring that fills as a conversation uses up the model's context window.

- Needs React, Theme
- Install with `curl --create-dirs -o src/components/context.tsx https://fragms.simonveprek.cz/source/context -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/context.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/context.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/context.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/context.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/context

### Trail

An agent browsing the web, each page joining a trail of site icons.

- Needs React, Framer Motion, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/trail.tsx https://fragms.simonveprek.cz/source/trail -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/trail.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/trail.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/trail.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/trail.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/trail

### Sources

Citation chips that open a preview of the page, and a list of every source.

- Needs React, Framer Motion, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/sources.tsx https://fragms.simonveprek.cz/source/sources -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/sources.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/sources.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/sources.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/sources.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/sources

### Approve

What an agent wants to do, and a button you hold to let it.

- Needs React, Framer Motion, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/approve.tsx https://fragms.simonveprek.cz/source/approve -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/approve.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/approve.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/approve.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/approve.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/approve

### Confidence

A small mark of how sure an answer is, with the reason on hover.

- Needs React, Framer Motion, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/confidence.tsx https://fragms.simonveprek.cz/source/confidence -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/confidence.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/confidence.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/confidence.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/confidence.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/confidence

### Plan

An agent's to do list that ticks itself off, folding finished steps away.

- Needs React, Framer Motion, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/plan.tsx https://fragms.simonveprek.cz/source/plan -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/plan.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/plan.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/plan.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/plan.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/plan

### Diff

An agent's proposed change, reviewed line by line, each part accepted or kept.

- Needs React, Framer Motion, Theme
- Install with `npm install framer-motion && curl --create-dirs -o src/components/diff.tsx https://fragms.simonveprek.cz/source/diff -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/diff.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/diff.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/diff.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/diff.tsx -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/diff

### Theme

One accent, glow, roundness and pace that every Fragms component takes.

- Needs React
- Install with `curl --create-dirs -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme`
- Or with shadcn, `npx shadcn@latest add https://fragms.simonveprek.cz/r/theme.json`
- Source https://github.com/simonveprek/fragms/blob/main/components/theme.tsx
- Pinned to 2.1.0, `curl --create-dirs -o src/components/theme.tsx https://raw.githubusercontent.com/simonveprek/fragms/v2.1.0/components/theme.tsx`
- Live demo and every setting https://fragms.simonveprek.cz/theme