{"node":{"id":"2f2c0edd-25d7-48f1-8130-b1fe4c351f65","handle":"2f2c","type":"note","authorName":"Vincent Yeung","intent":"learning","title":"Source: Astryx","aiSummary":null,"content":"## What it is\n- A React design system from Meta, released as open source.\n- Licence: MIT, copyright 2026 Meta Platforms.\n- The project calls itself beta. Its npm page shows the current version.\n- Built on React 19 or later (a hard requirement) and StyleX. You import CSS that's already built, so you don't have to adopt StyleX.\n- Packaging, as npm packages:\n  - `@astryxdesign/core`: the components, themes and utilities;\n  - `@astryxdesign/cli`: docs lookup, templates, scaffolding, themes and code changes;\n  - theme packages such as `@astryxdesign/theme-neutral`;\n  - `@astryxdesign/richtext`: a rich text editor and viewer.\n- 150+ components, seven themes, dark mode, page templates, a CLI and an MCP server.\n- Docs at astryx.atmeta.com, plus a Storybook and a sandbox.\n- Its README says it grew inside Meta over eight years and powers 13,000+ apps there.\n\n## How to get it\n- `npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex`, plus the CLI as a dev dependency.\n- Import three stylesheets in order: `reset.css`, `astryx.css`, the theme's `theme.css`. Then wrap the app in a theme.\n- Recipes exist for Next.js (with or without Tailwind or StyleX) and Vite.\n- With no bundler, load it from esm.sh through an import map. `npx @astryxdesign/cli template --cdn` writes a starter page.\n\n## Cautions\n- It's in beta.\n- Charts and the native (iOS, Android, macOS, Windows) packages are experimental and published only as canary builds.\n- The experimental `lab` package: the README says it isn't published; its package file says it is, as canary.\n- `packages/README.md` lists different themes from the main README. It looks out of date.\n- Always use the scoped CLI name. The bare `astryx` package on npm is unrelated.\n- Its layered pop-ups need recent browsers (CSS anchor positioning, Baseline 2026). In older supported browsers, pop-ups open but aren't positioned.\n- With server rendering, runtime themes flash on load. Use built themes.\n- Themes name a font but don't load it.\n- The README calls all components accessible. The contributing guide says automated checks cover only part of it, and keyboard, focus and screen-reader behaviour need checking by hand.\n- Its claims about use inside Meta come from the README, with no evidence shown.\n- Nothing was installed or run when it was read. Our build did try it: see Tool: Astryx theming.\n\n## Cards it supplies\n- Tool: Astryx forms.\n- Tool: Astryx theming.\n- Tool: Astryx for agents (CLI and MCP server).","capturedAt":"2026-10-29T09:31:24.229Z","createdAt":"2026-10-29T09:31:24.230Z","updatedAt":"2026-11-06T04:43:52.029Z","spanId":null,"contributor":null,"audiences":[{"kind":"public","createdAt":"2026-11-06T04:27:09.723Z"}],"fingerprint":"d761ec49db42fdd14c0969ea58965fac3359b23f1d42679abe0f507d95208719","revisionNo":"2","structureHash":"ee089e894f5fbd9426846cab5da491a0b2750257bd73c23532be7958ca7fa3b9","page":"https://lattris.com/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65"},"links":[{"direction":"out","verb":"references","reason":"Follow back to find the drawer for the job you're on.","hash":"435ab859ab646a9ccc3796057de092f5df827ccad11efe9135e4d0e9ad27b5bb","node":{"id":"5f8b457d-b87a-4e61-9af2-3008deaf37a9","handle":"5f8b","type":"note","title":"Front-end design: the toolbox","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9?links=1","fingerprint":"49e1c7f41f22c466c7ef1a993cab80b6dcbedab4552d2ac684133d60dea7e60b","revisionNo":"2","structureHash":"64df670c7bd82572e0ad9b2e06b8829d3b2e509be134591c04ea1fa281fca3ef","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9"}},{"direction":"out","verb":"references","reason":"Follow to see how to use this capability.","hash":"6a85e784e82700789ed13b5152d0ab5190663a7a48c610755ea46ede1a659c41","node":{"id":"652bb4cd-0dc8-432d-b2c5-f571a5e308d2","handle":"652b","type":"note","title":"Tool: Astryx forms","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/652bb4cd-0dc8-432d-b2c5-f571a5e308d2?links=1","fingerprint":"100abb4f344196d894688c0c46799e4f88d89b136b3ee53ff8f205f218929e35","revisionNo":"1","structureHash":"706bfddf88472bf50997bb2c0db60b9a8a8f2d11bc773b3ca071064762bd373e","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/652bb4cd-0dc8-432d-b2c5-f571a5e308d2"}},{"direction":"out","verb":"references","reason":"Follow to see how to use this capability.","hash":"d1efd48aca1153171e235c79ad6497d2c2d25fee59e4cf9cdd0057a656233c5a","node":{"id":"803f6d6d-0ecf-4a9c-8438-26d25e3f73b7","handle":"803f","type":"note","title":"Tool: Astryx theming","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7?links=1","fingerprint":"dc9053afefddf3d2523af49f2dc7652c9ce9955adc55647354c3fbbbee347beb","revisionNo":"1","structureHash":"f8aecdf69fc5b9e2c44844d6a75246bb7995d69e7545fae9599379f4f58453e9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7"}},{"direction":"out","verb":"references","reason":"Follow to see how to use this capability.","hash":"a5f08d22d7f840ddef66d642856628425eb185385e3a6d93ee318cf6a20271cd","node":{"id":"ff94b18f-43e0-4c83-a456-25cc433dbfd7","handle":"ff94","type":"note","title":"Tool: Astryx for agents (CLI and MCP server)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ff94b18f-43e0-4c83-a456-25cc433dbfd7?links=1","fingerprint":"52ba88470bbc1372c6f33fff25d588124335bc2775fe4cde42e7e883e8d76896","revisionNo":"1","structureHash":"fca111ae4ffb0caf03fabbc5422e51fd57b197cf8653f02d652a50916226c131","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ff94b18f-43e0-4c83-a456-25cc433dbfd7"}},{"direction":"in","verb":"references","reason":"Follow to install Astryx and see its beta cautions.","hash":"a006dd6da4ddcbd3ea1c343959553503ad30cf219032aaae982b74358480277a","node":{"id":"5f8b457d-b87a-4e61-9af2-3008deaf37a9","handle":"5f8b","type":"note","title":"Front-end design: the toolbox","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9?links=1","fingerprint":"49e1c7f41f22c466c7ef1a993cab80b6dcbedab4552d2ac684133d60dea7e60b","revisionNo":"2","structureHash":"64df670c7bd82572e0ad9b2e06b8829d3b2e509be134591c04ea1fa281fca3ef","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9"}},{"direction":"in","verb":"references","reason":"Follow to install it, or to check its licence and cautions before relying on it.","hash":"bb3be8752b56f3f103ba77cec62645eeedcb5b8387bd9500af2323e8a39b6bc7","node":{"id":"652bb4cd-0dc8-432d-b2c5-f571a5e308d2","handle":"652b","type":"note","title":"Tool: Astryx forms","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/652bb4cd-0dc8-432d-b2c5-f571a5e308d2?links=1","fingerprint":"100abb4f344196d894688c0c46799e4f88d89b136b3ee53ff8f205f218929e35","revisionNo":"1","structureHash":"706bfddf88472bf50997bb2c0db60b9a8a8f2d11bc773b3ca071064762bd373e","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/652bb4cd-0dc8-432d-b2c5-f571a5e308d2"}},{"direction":"in","verb":"references","reason":"Follow to install it, or to check its licence and cautions before relying on it.","hash":"57eb3a39f408b9bc3c5d121578e21e634c8fbc4d008c4b4587df7f67a67d1e0b","node":{"id":"803f6d6d-0ecf-4a9c-8438-26d25e3f73b7","handle":"803f","type":"note","title":"Tool: Astryx theming","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7?links=1","fingerprint":"dc9053afefddf3d2523af49f2dc7652c9ce9955adc55647354c3fbbbee347beb","revisionNo":"1","structureHash":"f8aecdf69fc5b9e2c44844d6a75246bb7995d69e7545fae9599379f4f58453e9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7"}},{"direction":"in","verb":"references","reason":"Follow to install it, or to check its licence and cautions before relying on it.","hash":"11b4f1828bc81e2c85d308d2f0700317cd27884c1ddec785af9ab367e47d8e55","node":{"id":"ff94b18f-43e0-4c83-a456-25cc433dbfd7","handle":"ff94","type":"note","title":"Tool: Astryx for agents (CLI and MCP server)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ff94b18f-43e0-4c83-a456-25cc433dbfd7?links=1","fingerprint":"52ba88470bbc1372c6f33fff25d588124335bc2775fe4cde42e7e883e8d76896","revisionNo":"1","structureHash":"fca111ae4ffb0caf03fabbc5422e51fd57b197cf8653f02d652a50916226c131","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ff94b18f-43e0-4c83-a456-25cc433dbfd7"}}],"dictionary":{"lattris":"A personal knowledge base — how a person captures what they know as linked blocks they own and control. To understand how this knowledge base works: https://lattris.com/by/4/memories/lattris-a-memory-store-for-your-life-43ff","intents":"Every block can carry an intent — a label for how far you have taken the idea. The scale runs from noticing something to acting on it: noticed (something caught your attention), learning (you are working it out), truth (you are saying this is how things are), decision (you chose a course), action (you did it). Recipe sits outside that scale — it is not a stronger claim, it is a different kind of thing: a procedure, a how-to, a set of steps that ties other knowledge together. Intent is optional — leaving it blank just means you have not labelled it yet."},"instructions_to_ai":"This is knowledge from a personal knowledge base. Read it and consider how it's relevant to what the person you're talking to needs. Follow the linked blocks to explore further related topics if it might be useful to the user; open each at its page address. Start by letting the user know what this is about and how it may be relevant to them."}