[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10351":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":35,"discoverSource":36},10351,"bubbles","charmbracelet\u002Fbubbles","charmbracelet","TUI components for Bubble Tea 🫧","",null,"Go",8527,425,27,126,0,2,33,192,13,38.89,"MIT License",false,"main",true,[27,28,29,30,31],"cli","elm-architecture","hacktoberfest","terminal","tui","2026-06-12 02:02:20","# Bubbles\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fb89fa46e-d451-4b33-a009-c68d4765520f\" width=\"350\" \u002F>\n\n[![Latest Release](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Frelease\u002Fcharmbracelet\u002Fbubbles.svg)](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbles\u002Freleases)\n[![GoDoc](https:\u002F\u002Fgodoc.org\u002Fgithub.com\u002Fgolang\u002Fgddo?status.svg)](https:\u002F\u002Fpkg.go.dev\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbles)\n[![Build Status](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbles\u002Fworkflows\u002Fbuild\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbles\u002Factions)\n[![Go ReportCard](https:\u002F\u002Fgoreportcard.com\u002Fbadge\u002Fcharmbracelet\u002Fbubbles)](https:\u002F\u002Fgoreportcard.com\u002Freport\u002Fcharmbracelet\u002Fbubbles)\n\nPrimitives for [Bubble Tea](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea)\napplications. These components are used in production in [Crush][crush], and [many other applications][otherstuff].\n\n> [!TIP]\n>\n> Upgrading from v1? Check out the [upgrade guide](.\u002FUPGRADE_GUIDE_V2.md), or\n> point your LLM at it and let it go to town.\n\n[crush]: https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fcrush\n[otherstuff]: https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002F#bubble-tea-in-the-wild\n\n## Spinner\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Fspinner.gif\" width=\"400\" alt=\"Spinner Example\">\n\nA spinner, useful for indicating that some kind an operation is happening.\nThere are a couple default ones, but you can also pass your own ”frames.”\n\n- [Example code, basic spinner](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fspinner\u002Fmain.go)\n- [Example code, various spinners](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fspinners\u002Fmain.go)\n\n## Text Input\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Ftextinput.gif\" width=\"400\" alt=\"Text Input Example\">\n\nA text input field, akin to an `\u003Cinput type=\"text\">` in HTML. Supports unicode,\npasting, in-place scrolling when the value exceeds the width of the element and\nthe common, and many customization options.\n\n- [Example code, one field](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Ftextinput\u002Fmain.go)\n- [Example code, many fields](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Ftextinputs\u002Fmain.go)\n\n## Text Area\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Ftextarea.gif\" width=\"400\" alt=\"Text Area Example\">\n\nA text area field, akin to an `\u003Ctextarea \u002F>` in HTML. Allows for input that\nspans multiple lines. Supports unicode, pasting, vertical scrolling when the\nvalue exceeds the width and height of the element, and many customization\noptions.\n\n- [Example code, chat input](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fchat\u002Fmain.go)\n- [Example code, story time input](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Ftextarea\u002Fmain.go)\n\n## Table\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Ftable.gif\" width=\"400\" alt=\"Table Example\">\n\nA component for displaying and navigating tabular data (columns and rows).\nSupports vertical scrolling and many customization options.\n\n- [Example code, countries and populations](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Ftable\u002Fmain.go)\n\n## Progress\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Fprogress.gif\" width=\"800\" alt=\"Progressbar Example\">\n\nA simple, customizable progress meter, with optional animation via\n[Harmonica][harmonica]. Supports solid and gradient fills. The empty and filled\nrunes can be set to whatever you'd like. The percentage readout is customizable\nand can also be omitted entirely.\n\n- [Animated example](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fprogress-animated\u002Fmain.go)\n- [Static example](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fprogress-static\u002Fmain.go)\n\n[harmonica]: https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fharmonica\n\n## Paginator\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Fpagination.gif\" width=\"200\" alt=\"Paginator Example\">\n\nA component for handling pagination logic and optionally drawing pagination UI.\nSupports \"dot-style\" pagination (similar to what you might see on iOS) and\nnumeric page numbering, but you could also just use this component for the\nlogic and visualize pagination however you like.\n\n- [Example code](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fpaginator\u002Fmain.go)\n\n## Viewport\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Fviewport.gif\" width=\"600\" alt=\"Viewport Example\">\n\nA viewport for vertically scrolling content. Optionally includes standard\npager keybindings and mouse wheel support. A high performance mode is available\nfor applications which make use of the alternate screen buffer.\n\n- [Example code](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fpager\u002Fmain.go)\n\nThis component is well complemented with [Reflow][reflow] for ANSI-aware\nindenting and text wrapping.\n\n[reflow]: https:\u002F\u002Fgithub.com\u002Fmuesli\u002Freflow\n\n## List\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Flist.gif\" width=\"600\" alt=\"List Example\">\n\nA customizable, batteries-included component for browsing a set of items.\nFeatures pagination, fuzzy filtering, auto-generated help, an activity spinner,\nand status messages, all of which can be enabled and disabled as needed.\nExtrapolated from [Glow][glow].\n\n- [Example code, default list](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Flist-default\u002Fmain.go)\n- [Example code, simple list](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Flist-simple\u002Fmain.go)\n- [Example code, all features](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Flist-fancy\u002Fmain.go)\n\n## File Picker\n\n\u003Cimg src=\"https:\u002F\u002Fvhs.charm.sh\u002Fvhs-yET2HNiJNEbyqaVfYuLnY.gif\" width=\"600\" alt=\"File picker example\">\n\nA customizable component for picking a file from the file system. Navigate\nthrough directories and select files, optionally limit to certain file\nextensions.\n\n- [Example code](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Ffile-picker\u002Fmain.go)\n\n## Timer\n\nA simple, flexible component for counting down. The update frequency and output\ncan be customized as you like.\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Ftimer.gif\" width=\"400\" alt=\"Timer example\">\n\n- [Example code](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Ftimer\u002Fmain.go)\n\n## Stopwatch\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Fstopwatch.gif\" width=\"400\" alt=\"Stopwatch example\">\n\nA simple, flexible component for counting up. The update frequency and output\ncan be customized as you see fit.\n\n- [Example code](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fstopwatch\u002Fmain.go)\n\n## Help\n\n\u003Cimg src=\"https:\u002F\u002Fstuff.charm.sh\u002Fbubbles-examples\u002Fhelp.gif\" width=\"500\" alt=\"Help Example\">\n\nA customizable horizontal mini help view that automatically generates itself\nfrom your keybindings. It features single and multi-line modes, which the user\ncan optionally toggle between. It will truncate gracefully if the terminal is\ntoo wide for the content.\n\n- [Example code](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fblob\u002Fmain\u002Fexamples\u002Fhelp\u002Fmain.go)\n\n## Key\n\nA non-visual component for managing keybindings. It’s useful for allowing users\nto remap keybindings as well as generating help views corresponding to your\nkeybindings.\n\n```go\ntype KeyMap struct {\n    Up key.Binding\n    Down key.Binding\n}\n\nvar DefaultKeyMap = KeyMap{\n    Up: key.NewBinding(\n        key.WithKeys(\"k\", \"up\"),        \u002F\u002F actual keybindings\n        key.WithHelp(\"↑\u002Fk\", \"move up\"), \u002F\u002F corresponding help text\n    ),\n    Down: key.NewBinding(\n        key.WithKeys(\"j\", \"down\"),\n        key.WithHelp(\"↓\u002Fj\", \"move down\"),\n    ),\n}\n\nfunc (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {\n    switch msg := msg.(type) {\n    case tea.KeyPressMsg:\n        switch {\n        case key.Matches(msg, DefaultKeyMap.Up):\n            \u002F\u002F The user pressed up\n        case key.Matches(msg, DefaultKeyMap.Down):\n            \u002F\u002F The user pressed down\n        }\n    }\n    return m, nil\n}\n```\n\n## There’s more where that came from\n\nTo check out community-maintained Bubbles see [Charm & Friends][charmandfriends].\nMade a cool Bubble that you want to share? [PRs][prs] are welcome!\n\n[charmandfriends]: https:\u002F\u002Fgithub.com\u002Fcharm-and-friends\u002Fadditional-bubbles\n[prs]: https:\u002F\u002Fgithub.com\u002Fcharm-and-friends\u002Fadditional-bubbles?tab=readme-ov-file#what-is-a-complete-project\n\n## Contributing\n\nSee [contributing][contribute].\n\n[contribute]: https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbles\u002Fcontribute\n\n## Feedback\n\nWe’d love to hear your thoughts on this project. Feel free to drop us a note!\n\n- [Twitter](https:\u002F\u002Ftwitter.com\u002Fcharmcli)\n- [The Fediverse](https:\u002F\u002Fmastodon.social\u002F@charmcli)\n- [Discord](https:\u002F\u002Fcharm.sh\u002Fchat)\n\n## License\n\n[MIT](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea\u002Fraw\u002Fmain\u002FLICENSE)\n\n---\n\nPart of [Charm](https:\u002F\u002Fcharm.land).\n\n\u003Ca href=\"https:\u002F\u002Fcharm.sh\u002F\">\u003Cimg alt=\"The Charm logo\" src=\"https:\u002F\u002Fstuff.charm.sh\u002Fcharm-banner-next.jpg\" width=\"400\">\u003C\u002Fa>\n\nCharm热爱开源 • Charm loves open source\n","charmbracelet\u002Fbubbles 是一个为 Bubble Tea 应用程序设计的终端用户界面（TUI）组件库。它提供了包括文本输入、文本区域、表格和加载指示器在内的多种基础组件，这些组件支持 Unicode、粘贴操作以及自定义样式等多种功能。项目采用 Go 语言编写，遵循 Elm 架构模式，确保了良好的可维护性和扩展性。非常适合需要在命令行环境中提供丰富交互体验的应用场景，如系统管理工具、日志查看器或任何希望以更直观方式展示数据的 CLI 应用。","2026-06-11 03:27:56","top_topic"]