Fluid Goo

A liquid glass React design system with a gooey soul.

Selectors stretch like drops of liquid, toggles swell into glass lenses when pressed, and everything springs into place. Inspired by Apple's Liquid Glass, tuned to feel premium and clean. Dark and light mode from a single set of tokens.

• Springs, not durations — a tiny shared physics loop drives every motion
• Liquid glass material — frosted backdrop, lit rim, pointer-following sheen
• Light & dark from one light-dark() token set, scopable per subtree
• Zero runtime dependencies — React is the only peer

What's inside

• App — FluidApp (theme, accent, translucency, font, background, toasts in one), AppShell, NavList, SidebarToggle, ToolbarGroup, ToolbarButton, Aurora
• Surfaces — Glass, GlassScope, Card, Badge, BadgeAnchor, Avatar, AvatarGroup
• Controls — Button, SegmentedControl, Tabs, Switch, Checkbox, RadioGroup, Slider, Rating, NumberField
• Fields — TextField, TextArea, SearchField, Select, Combobox, Tag, TagInput, Calendar, DatePicker, DropZone, FileList
• Overlays & feedback — Menu, Dialog, Tooltip, Drawer, Popover, CommandPalette, toast() / Toaster, Progress, Spinner, Skeleton, EmptyState
• Structure & navigation — Accordion, Breadcrumbs, Pagination, Divider, Kbd, Timeline
• AI & chat — ChatThread, ChatMessage, ChatComposer, ChatGreeting, ChatAction, TypingIndicator, Markdown, CodeBlock
• Boards — KanbanBoard, KanbanCard
• Dashboard — Stat, AnimatedNumber, Sparkline, BarChart, LineChart, DonutChart, ProgressRing, CalendarHeatmap, Table
• Symbols — SF-style icons (ChevronLeftIcon, SparklesIcon, HouseIcon…) and createIcon
• Motion primitives — useSpring, useLiquidEdges, squashFor, springs, createSpring, GooFilter, useHotkey

Usage

import { FluidApp, SegmentedControl } from 'fluid-goo';
import 'fluid-goo/styles.css';

export function App() {
  return (
    <FluidApp defaultTheme="system" accent="#0a84ff" background="aurora">
      <SegmentedControl
        aria-label="Range"
        options={[
          { value: 'day', label: 'Day' },
          { value: 'week', label: 'Week' },
          { value: 'month', label: 'Month' },
        ]}
      />
    </FluidApp>
  );
}

Development

npm install
npm run dev        # docs at http://localhost:5173 (library hot-reloads from source)
npm run build      # library → packages/fluid-goo/dist, docs → apps/docs/dist

| Path | What | |---|---| | packages/fluid-goo | The library (published as fluid-goo) | | apps/docs | Documentation site |

License

MIT