Pop
Slide

AI Presentations

gabriel.lft/UI Kit
26 components · 7themes · light & dark

A component library with a pulse.

14 flagship showpieces and 12 everyday essentials — native React + Tailwind, every color driven by one set of design tokens. Pick a theme, flip light or dark, drag the radius, and watch all 26 re-skin instantly.

01 flagship

Showpieces

14 components
01component

Flow Editor

Wire draggable nodes into a flow, add your own, then flip to a live knowledge-graph view.

Automation flow· 5 nodes · 3 wires
On new lead
Webhook
Enrich data
Transform
Score with AI
Gemini
Notify Slack
Channel
Add to CRM
Destination

Drag a node to move it, click one to open its inspector, or use Add node. Drag from an output dot to an input to wire steps, click a wire to remove it, then hit Verify flow.

02component

Islands

A floating-panel knowledge workspace — ingest documents, cite sources, explore the subgraph.

Workspace· 4 islands
Sources
1 / 3 indexed
Q3-market-analysis.pdfindexed2.4 MB
competitor-teardown.docxpending880 KB
board-deck-v4.pptxpending14 MB
Synthesis
Claude Mythossynthesis

Where the pricing pressure is coming from

Across the indexed corpus, the dominant signal is pricing pressure in EMEA. The teardown shows two rivals undercutting the mid-tier by 12–18%, while the board deck frames margin as the gating metric for any response.

Recommendation.Hold list price, push the annual plan, and route churn-risk accounts to a save offer — the model projects recovery of most lost share within two quarters.

cited sources
Subgraph
supportsciteslinksderivesmarketteardowndeckPricingChurnEMEAMarginSignals
documententityhover a node to trace
Model
Temperature0.40
Stream tokens
Inline citations

Ingest a source to watch it scan and index, then hover a citation, source or graph node to trace it across every island. Grab a header handle to rearrange the workspace.

03component

Command Palette

A keyboard-driven ⌘K palette with a cinematic open.

Press the bar above or hit Cmd-K to open the palette.

04component

Agentic Chat

A chatbot that thinks out loud — streaming tokens, live tool calls, and a graph that builds itself.

Agent· Claude Mythos

running tools…

Research our top competitor and draft a pricing post.
Agent is working…
Claude Mythos
05component

Gooey Input

A liquid-glass search field with a voice button — both melt open through an SVG metaball filter and shared-layout motion.

desktop
mobile
06component

3D Tilt Card

A card that tilts in 3D toward the cursor, with glare.

Move your cursor across the card

07component

Border Beam

A light beam that travels around a card border.

StatusEdge runtime

All systems nominal

A beam of light traces the perimeter while every service in the region reports healthy. No action needed.

Updated just now
Border beamSweeping the edge
08component

Magnetic Button

Buttons magnetically pulled toward the cursor.

Move your cursor toward a button

09component

Magnify Dock

A macOS-style dock that magnifies icons near the cursor.

Magnify DockGlide across the bar to magnify
10component

Number Ticker

Numbers that roll up to their value on view.

12,480Active users+18% MoM
99.9%Uptime SLA30 days
4.9Avg rating2.3k reviews
11component

Text Scramble

Text that decrypts itself character by character.

decrypt

Design in motion

A component kit engineered for the dark.

12component

Marquee

A seamless infinite marquee with edge fades.

Commandline
Hexform
Aperture
Orbital
Composite
Boxel
Northstar
Atomic
The fastest path from a blank page to a finished deck.
MVMara VanceDesign Lead
It feels less like a tool and more like a teammate.
DODevin OkaforFounder
We shipped an entire launch deck in under ten minutes.
LHLena HartHead of Growth
Genuinely the most polished editor we have used.
PNPriya NairProduct
Every slide lands and the motion feels effortless.
TRTom ReyesCreative Director

Hover any row to pause. Both rows fade at the edges.

13component

Code Block

A docs-grade code block with window chrome and copy.

counter.tsx
import { useState } from "react";
// A tiny counter with a springy bump on each click
export function Counter({ start = 0 }: { start?: number }) {
const [count, setCount] = useState(start);
return (
<button
type="button"
onClick={() => setCount((c) => c + 1)}
className="rounded-full px-4 py-2"
>
Clicked {count} times
</button>
);
}
14component

OTP Input

A segmented one-time-code input with paste and caret.

Two-step verification

Enter the 6-digit code we sent to your device.

••• •••0 of 6

Did not get a code?

02 everyday

Essentials

12 components
15component

Segmented Control

A physics-driven segmented control — the thumb springs, stretches and settles like it has weight.

Appearance
Range
16component

Checkbox & Radio

Animated checkboxes and radio groups.

Today

Plan

17component

Keyboard Keys

Sculpted key caps and shortcut rows that respond to real presses.

Press K · N · P to see the caps respond.

  • Open command paletteK
  • Quick search/
  • New presentationN
  • Toggle previewP
  • Send to chat
18component

Streamed Tooltip

A glass tooltip whose copy streams in the moment you hover.

Hover or tab a control — the copy streams in

20component

Accordion

A glassy accordion whose panels spring open with a soft bounce.

Describe your topic and the model drafts a structured blueprint first, then designs each slide in parallel — layout, copy, and imagery — streaming them into the preview as they finish.

  • Outline generated before any pixel
  • Slides render live, one by one

21component

Loader

A hypnotic, genuinely-working loader for long-running work.

Generating slides
0%
loading…
23component

Toast Messages

Frosted-glass notifications — no colored rails, just light and depth.

24component

Streaming Chat

An assistant that narrates its tool calls as they stream and resolve in real time.

agent run
streaming
25component

AI Card

An AI slide-generation card with a live shimmer.

Market Overview

16:9 · Presentation

Generating
Designing layout…
24%
Gemini3 credits · 1.1k tokens

Q3 Highlights

16:9 · Presentation

Done
Gemini8 credits · 2.4k tokens
26component

Prompt Box

A polished AI prompt composer with a model picker.