GreedUI: interfaces that answer back
A copy-in React component library and design system built from scratch on Base UI, Tailwind CSS v4 and Motion. An alternative to shadcn/ui for people who want motion baked in and a look of its own. Installs with the shadcn CLI, every file has a three-line header for AI agents, and nothing phones home.
Install the theme: npx shadcn@latest add https://greedui.com/r/theme.json
Contact: knock@greedui.com (sponsorships, component requests, anything).
Components
- Accordion: Hairline-divided disclosure rows, no box
- Activity: "What just happened" feed: timeline rows with pixel time, actor, action, target, tone node, undo affordance (onUndo, undone)
- Alert Dialog: Confirm-before-consequence dialog
- Animated Number: Number whose digits roll like an odometer (only changed digits move: up when it grows, down when it shrinks, staggered)
- Autocomplete: Free-text input with suggestions (search, tags, commands)
- Avatar: Profile image with pixel-font initials fallback (tone hashed from name)
- Badge: Static status label with stepped pixel corners
- Button: Pressable action
- Chart Bar List: Ranked list that reads like a sentence: label, a dotted leader that fills to the value, share %, value
- Chart Core: Shared plumbing for chart-*: useChartSize (ResizeObserver), useFormat, useCursor + ChartReadout (hover index that re-renders only the readout), ChartTable (sr-only data), DitherFill (Bayer dot dither), chartTones.
- Chart Delta: Before/after slope chart: one line per item, labels on both ends nudged apart by their real height so they never collide (long ones wrap to 2 lines, then clamp with a Tooltip), pixel % badge on the right, hover spotlights a line
- Chart Dither Area: Area chart filled with an ordered dot dither that thins toward the baseline, crisp line on top, gliding crosshair + Tumbler readout, arrow keys
- Chart Dots: Countable dot-matrix bars: rounded-square cells fill in, a dithered cell shows the remainder, over-budget cells turn danger
- Chart Heat: Calendar heat grid: one rounded cell per day, 5 tonal steps of the brand hue, gliding outline + Tumbler readout, arrow keys
- Chart Pulse: Live heartbeat strip: one small tick per event or interval, new ticks slide in from the right and old ones fade out on the left
- Chart Ring Dots: Radial progress drawn like a watch dial: minute dots with baton markers, a hand tip that sweeps to the value, Tumbler number in the middle
- Chart Waffle: 10x10 waffle for parts of a whole: one cell = 1%, cells roll in row by row, hovering a legend row or cell spotlights that part with a Tumbler readout
- Checkbox Group: Shared-state checkbox list (Base UI CheckboxGroup)
- Checkbox: Checkbox (Base UI Checkbox): empty boxes sit inset, checked ones fill in raised while the pixel check draws in with a tiny overshoot; unchecking eases it all back
- Collapsible: Single show/hide region with an interruptible height transition
- Combobox: Filterable select (values are option ids)
- Command: ⌘K palette (Dialog + Autocomplete): grouped items {id,label,hint,icon,kbd,keywords,tone,onSelect}, highlighted item previews its consequence in the footer, recent items, empty state, shortcut
- Context Menu: Right-click / long-press menu at the pointer
- Dialog: Modal dialog
- Drawer: Swipe-to-dismiss panel
- Empty: Empty state, no card: pixel icon in a stepped-corner tile on a dot halo, label, title, description, actions
- Field: Label + control + description + inline error (Base UI Field)
- Fieldset: Groups related fields under one legend (Base UI Fieldset)
- Flow Sheet: Apple Pay style multi-step sheet: one surface that glides its width and height per step (Morph axis="both"), content slides the way you're going
- Form: Native form with consolidated validation (Base UI Form): errors={{name: msg}} from the server, validationMode=onSubmit|onBlur|onChange, onFormSubmit(values)
- Hand Underline: Wraps a few words and draws a hand-drawn mark on hover/focus, or while active (controlled)
- Highlight Trail: One highlight that glides to whichever child matches `selector` (default [data-highlighted], so it follows Base UI keyboard, pointer and virtual focus)
- Hint: Consequence preview on hover/focus: "→ what will happen"
- Hover Trail: One highlight that glides between items as the pointer or keyboard focus moves, and returns to the active item (or fades) when you leave
- Icons Hugeicons: Hugeicons free stroke set (MIT, @hugeicons/core-free-icons) behind every GreedUI icon name
- Icons Iconoir: Iconoir regular set (MIT, iconoir-react) behind every GreedUI icon name
- Icons Phosphor: Phosphor Icons regular weight (MIT, @phosphor-icons/react) behind every GreedUI icon name
- Icons Pixelart: Pixelarticons free set (MIT, pixelarticons) on a 24×24 pixel grid behind every GreedUI icon name
- Icons Remix: Remix Icon line set (Remix Icon License 1.0: free in apps, no reselling as an icon pack, no logos; @remixicon/react) behind every GreedUI icon name
- Icons Tabler: Tabler Icons outline set (MIT, @tabler/icons-react) behind every GreedUI icon name
- Icons: 1-bit pixel icon set on a 16×16 grid (1px outlines, 2px functional glyphs, 12px content box)
- Inline Confirm: Two-step destructive action, no modal: first press arms ("Confirm delete?") with a pixel countdown that auto-cancels; Esc/blur cancel; async onConfirm shows spinner then doneLabel
- Input: Calm text input on Base UI Input: a dotted ring ripples out once on focus, the caret fades instead of blinking
- Kbd: Pixel keycap for shortcuts (stepped corners, Geist Pixel)
- Menu: Dropdown of actions
- Menubar: App-style command bar
- Mesh Gradient: Smooth, grainy WebGL mesh gradient that blends spots in oklab with a soft noise warp
- Message: Chat rows without bubbles
- Meter: A measured value in a known range (quota, battery, strength)
- Morph: Wrapper that glides its own width/height when its content changes size (Dynamic Island style)
- Navigation Menu: Site nav with rich dropdown panels; one shared popup morphs size/position between triggers
- Number Field: Numeric input with −/+ steppers and a drag-to-scrub label (Base UI NumberField); stepped values roll in
- Otp Field: One-time-code entry (Base UI OTPField): pixel cells with stepped corners and a blinking block caret; a ripple runs across when complete
- Popover: Anchored floating panel that grows out of its trigger
- Preview Card: Hover preview for a link
- Progress: Task progress
- Prompt Input: Conversational input for AI/agent features: textarea that glides as it grows, ⌘↵ submit (enterSubmits for ↵), send morphs to stop while loading, suggestion chips fill the input, attachments + toolbar slots
- Radio Group: Single choice (Base UI RadioGroup + Radio), same raised fill as Checkbox
- Reactions: Reaction chips + picker (ReactionPicker alone works as a toolbar button, icon prop)
- Scribble Check: Consent checkbox (Base UI Checkbox) that signs itself: a hand-drawn check scribbles in, the label gets a hand underline, and a little pen rides along it with a "signed" note
- Scroll Area: Native scrolling with thin overlay scrollbars that appear on hover/scroll and edge fade masks driven by overflow distance
- Select: Pick from a list; popup aligns the chosen item over the trigger
- Sentence: Settings written as plain sentences with clickable inline tokens
- Separator: 1px hairline divider
- Skeleton: Shimmering placeholder that matches the shape of what's loading
- Slider: Single or range slider (Base UI Slider): thick inset track with a dotted ruler, pill thumb, fill that glides and tucks into the thumb at 0, rolling value
- Sparkline: Tiny SVG trend
- Spinner: Pixel "busy" indicator: 8 cells chase around a 3×3 grid
- Stat: Inline metric, not a card
- Status: Tiny 3x3 dot-matrix status + label: operational beats like a heart, degraded stutters, down blinks hollow, pending chases, idle flatlines
- Switch: On/off toggle (Base UI Switch): the thumb glides and squashes the same both ways, a dotted glow breathes on hover and a dotted ring pops on toggle
- Table: Hairline data table, no box: sticky header, tabular nums, row hover, selection via TableRow selected (data-selected, brand edge)
- Tabs: Tabs with a gliding indicator and a hover highlight that glides between tabs
- Textarea: Multiline input that grows with its content (CSS field-sizing, JS fallback)
- Toast: Stacked toasts that fan out on hover/focus, swipe to dismiss
- Toggle Group: Shared on/off state for a row of toggles; a hover highlight glides between items
- Toggle: Two-state button (on/off): a clicky squash-and-settle, a dotted ring when it turns on, a squish-and-bounce icon and a pixel "LED" when pressed
- Token Picker: Inline sentence token that opens a searchable, grouped picker: the popup flows out of the token, the highlight glides, the pick rolls in and the token width glides
- Toolbar: Roving-focus row of controls; one hover highlight glides across buttons, links and nested toggles
- Tooltip: Small hover/focus label
- Tumbler: Text that rolls to its next value like a drum: the old line tips away, the new one rolls in, and the size glides
- Typing: "Someone is working" indicator: 3 rounded-square pixel dots in a wave
Blocks
- Ai Chat: Agent chat that shows its work: Message rows without bubbles, expandable tool calls, words that fade in behind a soft caret, "Thinking · 3s" timer, hover copy/retry/feedback, next-step chips with Hint, a list that never yanks you while you read, a faint dotted mesh dither behind it all that drifts faster while it works (mesh preset or false)
- App Shell: Sidebar shell: Dynamic Island workspace switcher, a "now" well (rolling status + pixel ring), pixel activity signals per row, folding sections (remembered), drag or ⌥↑↓ to reorder pins, hold ⌘ for key hints (⌥1-9 jumps), ⌘K palette, inbox, icon rail ([) with pixel badges, halftone hover trail; Drawer when narrow
- Billing: Billing page, no cards: plan / next invoice / payment hairline row, inline plan change (RadioGroup choice + prorated consequence, plan name morphs on switch), ChartDitherArea spend-to-date vs last period, usage rows with pixel Meters and pace projections, spend-cap Switch, period Progress, invoices Table with Badge status + download Hint
- Chat Widget: Floating assistant that stays out of the way: the launcher grows into a compact chat, which expands into a docked side panel for longer work
- Cta Footer: Closing CTA band (halftone MeshGradient, dithered edge, two CTAs whose consequence line rolls underneath, numbers digit by digit) + footer with brand, changelog email capture, link columns, Status line and legal row
- Dashboard: Overview screen, no cards: env switcher + ⌘K palette, hairline Stat row, ChartDitherArea traffic vs previous, ChartBarList top routes, ChartPulse live strip over Activity with undo, deployments Table with Status + row Menu (optimistic redeploy/promote/delete)
- Data Table: Filterable, sortable data table: search (/ focuses), filter Menu with icon items (active fill + soft check) + removable icon chips, rows/grid view toggle (grid has a HoverTrail), row selection with a rising bulk-action bar that morphs (plan change, InlineConfirm delete, undo), rolling counts, pagination, Empty state
- Faq: FAQ: side column (title, topic filter, "still have questions" line with response time + Status) beside a numbered hairline Accordion (answers stagger in word by word)
- Features: Architectural feature grid: hairline cells with corner ticks, pixel icon per cell, one wide cell with a live micro-demo (region switch → latency tween + sparkline)
- Hero Pulse: Live landing hero (hero v3): editorial headline beside a dot field where deploys land as halftone ripples on region pins (click a city to ship there), plus a hairline ledger whose numbers roll (Tumbler)
- Hero Stage: Centered landing hero (hero v2): announcement pill, headline whose last word rolls through words (Tumbler), two CTAs with a rolling consequence line instead of tooltips, then a halftone MeshGradient stage with a dithered edge and a dry-run window you can ship
- Hero: Landing hero: meta line, headline, sub, two CTAs that preview where they go (Hint), copyable command, MeshGradient panel (mesh preset, slow drift) with dithered edge + live deploy window
- Letter Form: Sign-up + consent form (name, email, topics, note, ScribbleCheck) with live validation you can switch off (live)
- Not Found: 404 page: 1-bit pixel illustration (sad early-Mac, warm glowing screen, blinking drive LED), the missing path, "did you mean" chips, halftone dots that trail the pointer (trail) and a hairline "here's what you can do" list (search, back, home, report with inline confirmation)
- Pricing: Pricing: monthly/yearly SegmentedControl (prices roll via Tumbler), hairline-divided plan columns (hover fills a column with halftone and rolls the price line to a per-day cost), recommended plan with a brand hairline + flat tint + pixel Badge, period note that morphs, CTA hints, grouped comparison rows
- Rule Builder: Automation builder that reads like a sentence: inline tokens, if/otherwise branches on a hairline rail, wait, for each, stop, live plain-English summary, hoverable flow map, step-by-step test run with sample data, undo/redo, drag or ⌥↑↓ reorder
- Settings: Settings page: sticky section nav (HoverTrail + sliding bar), hairline rows (label + description left, control right) with Input/Select/Switch/RadioGroup/Slider, per-row "edited" marks, consequence notes that roll in, a rising unsaved-changes bar that morphs like an island (Morph swapKey) and says what will change (⌘S saves), danger zone with InlineConfirm + AlertDialog
- Sign In: Sign-in: email + password with Field validation, magic-link mode that folds the password away, Morph height between form and result, rolling labels + hints (Tumbler), SSO/passkey buttons (pixel icons, Hint), pending + success states that say what happened
- Sign Up: Multi-step onboarding: account → workspace → verify (OTPField) → invite, pixel step indicator, Morph swapKey per step (box glides, new step fades and sharpens in), rolling labels (Tumbler), per-step Field validation, password rules that tick as you type around a dotted pixel ring, finish summary
- Team Members: Team page: hairline member rows with a HoverTrail, per-row role Select (inline "now can…" note), InlineConfirm remove with undo, invite Popover that morphs into a sent state (Morph swapKey; email + role, validation, seat math), pending invites with resend/revoke, pixel seat Meter, rolling counts
Hooks & lib
- Feature Switches: Runtime switches on <html>: motion, effects, squircle, pixel
- Mesh: Cozy mesh gradient palettes + helpers
- Motion: Lean Motion setup: <MotionProvider> fetches Motion's feature bundle once the browser is idle (never in your main bundle) and respects reduced motion
- Pixel Transition: Full-screen dithered dot wipe in WebGL: rounded cells grow out from a point, you swap the UI underneath, then they shrink away
- Svg Icon: Icons from raw SVG path data (Streamline, Figma, any set) + the 16×16 pixel-grid helpers
- Create Theme: Full --ui-* theme (light+dark, AA-solved brand) from one hue
- Utils: `cn()` class merger (clsx + tailwind-merge), same as shadcn's
- Theme: GreedUI tokens + optional parts
- Shadcn Compat: Maps shadcn/ui tokens (--background, --primary, --muted, --sidebar-*, --chart-*, --radius…) onto GreedUI --ui-* vars, light+dark