{"id":27595,"library":"arwes","title":"Arwes","description":"Arwes is a futuristic Sci-Fi UI web framework that provides a set of React components, animation tools, and theming utilities to build user interfaces with a distinctive sci-fi aesthetic. Current stable version is 1.0.0-next.25020502 (pre-release). The framework is designed for building immersive, animated UIs with a focus on CSS-in-JS (Emotion) and React. It offers themes, bleeps (sound effects), frame animations, and card components. Key differentiators: unique sci-fi visual style, built-in animation system, and comprehensive theming for dark/light palettes. Release cadence is pre-release (alpha/next).","status":"active","version":"1.0.0-next.25020502","language":"javascript","source_language":"en","source_url":"https://github.com/arwes/arwes","tags":["javascript","arwes","ui","front-end","framework","scifi","sci-fi","science-fiction","typescript"],"install":[{"cmd":"npm install arwes","lang":"bash","label":"npm"},{"cmd":"yarn add arwes","lang":"bash","label":"yarn"},{"cmd":"pnpm add arwes","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components","package":"react","optional":false},{"reason":"Peer dependency for React DOM rendering","package":"react-dom","optional":false},{"reason":"CSS-in-JS styling (peer dependency for @arwes/design)","package":"@emotion/react","optional":true},{"reason":"Styled components (peer dependency for @arwes/react)","package":"@emotion/styled","optional":true}],"imports":[{"note":"Main package is @arwes/react; 'arwes' is legacy. ESM only.","wrong":"import { ArwesThemeProvider } from 'arwes'","symbol":"ArwesThemeProvider","correct":"import { ArwesThemeProvider } from '@arwes/react'"},{"note":"Animation tools are in @arwes/animation, not @arwes/core.","wrong":"import { Animation } from '@arwes/core'","symbol":"Animation","correct":"import { Animation } from '@arwes/animation'"},{"note":"Frame components are in @arwes/react-frames since v1.0.0-alpha.20.","wrong":"import { FrameSVG } from '@arwes/react'","symbol":"FrameSVG","correct":"import { FrameSVG } from '@arwes/react-frames'"},{"note":"Sound effects provider, separate from core package.","symbol":"BleepsProvider","correct":"import { BleepsProvider } from '@arwes/react-bleeps'"}],"quickstart":{"code":"import React from 'react';\nimport { ArwesThemeProvider, StylesBaseline, Text, Button } from '@arwes/react';\nimport { createTheme } from '@arwes/design';\n\nconst theme = createTheme();\n\nfunction App() {\n  return (\n    <ArwesThemeProvider theme={theme}>\n      <StylesBaseline />\n      <div style={{ padding: 20 }}>\n        <Text as=\"h1\">Welcome to Arwes</Text>\n        <Button palette=\"primary\">\n          Activate\n        </Button>\n      </div>\n    </ArwesThemeProvider>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Sets up Arwes theme provider, baseline styles, and renders a Text heading with a Button."},"warnings":[{"fix":"Update imports to use the correct subpackage, e.g., @arwes/react-frames for FrameSVG.","message":"Package structure changed in v1.0.0-alpha.20: components moved to subpackages (e.g., @arwes/core, @arwes/react-frames). Import paths from old monolith are invalid.","severity":"breaking","affected_versions":">=1.0.0-alpha.20"},{"fix":"Use ESM imports; if CommonJS needed, use bundler or dynamic import.","message":"UMD/CommonJS builds removed; only ESM format is provided since v1.0.0-alpha.16.","severity":"breaking","affected_versions":">=1.0.0-alpha.16"},{"fix":"Install @arwes/react and import from it, not from 'arwes'.","message":"The 'arwes' top-level package is deprecated; use '@arwes/react' and other subpackages instead.","severity":"deprecated","affected_versions":">=1.0.0-alpha.20"},{"fix":"Ensure AudioContext is available or disable bleeps via BleepsProvider settings.","message":"Bleeps (sound effects) require AudioContext; they will silently fail if not available.","severity":"gotcha","affected_versions":">=1.0.0-alpha.22"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Replace import '@arwes/core' with import '@arwes/react' (or the correct subpackage)","cause":"Trying to import from '@arwes/core' which does not exist; correct package is '@arwes/react' or other subpackages.","error":"Module not found: Can't resolve '@arwes/core'"},{"fix":"Change import to: import { createTheme } from '@arwes/design';","cause":"Importing createTheme directly from 'arwes' (deprecated) instead of '@arwes/design'.","error":"TypeError: Cannot read property 'createTheme' of undefined"},{"fix":"Downgrade React to 17 or use Arwes with --legacy-peer-deps (experimental).","cause":"Arwes v1.0.0-next currently peer depends on React 17.","error":"Warning: React version mismatch. Expected 17.x, got 18.x"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}