Arwes

1.0.0-next.25020502 verified Sat May 09 auth: no javascript

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).

Common errors

error Module not found: Can't resolve '@arwes/core' ↓

cause Trying to import from '@arwes/core' which does not exist; correct package is '@arwes/react' or other subpackages.

fix

Replace import '@arwes/core' with import '@arwes/react' (or the correct subpackage)

error TypeError: Cannot read property 'createTheme' of undefined ↓

cause Importing createTheme directly from 'arwes' (deprecated) instead of '@arwes/design'.

fix

Change import to: import { createTheme } from '@arwes/design';

error Warning: React version mismatch. Expected 17.x, got 18.x ↓

cause Arwes v1.0.0-next currently peer depends on React 17.

fix

Downgrade React to 17 or use Arwes with --legacy-peer-deps (experimental).

Warnings

breaking 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. ↓

fix Update imports to use the correct subpackage, e.g., @arwes/react-frames for FrameSVG.

breaking UMD/CommonJS builds removed; only ESM format is provided since v1.0.0-alpha.16. ↓

fix Use ESM imports; if CommonJS needed, use bundler or dynamic import.

deprecated The 'arwes' top-level package is deprecated; use '@arwes/react' and other subpackages instead. ↓

fix Install @arwes/react and import from it, not from 'arwes'.

gotcha Bleeps (sound effects) require AudioContext; they will silently fail if not available. ↓

fix Ensure AudioContext is available or disable bleeps via BleepsProvider settings.

Install

npm install arwes

yarn add arwes

pnpm add arwes

Imports

ArwesThemeProvider

wrong

import { ArwesThemeProvider } from 'arwes'

correct

import { ArwesThemeProvider } from '@arwes/react'

Main package is @arwes/react; 'arwes' is legacy. ESM only.

Animation

wrong

import { Animation } from '@arwes/core'

correct

import { Animation } from '@arwes/animation'

Animation tools are in @arwes/animation, not @arwes/core.

FrameSVG

wrong

import { FrameSVG } from '@arwes/react'

correct

import { FrameSVG } from '@arwes/react-frames'

Frame components are in @arwes/react-frames since v1.0.0-alpha.20.

BleepsProvider
```
import { BleepsProvider } from '@arwes/react-bleeps'
```
Sound effects provider, separate from core package.

Quickstart

Sets up Arwes theme provider, baseline styles, and renders a Text heading with a Button.

import React from 'react';
import { ArwesThemeProvider, StylesBaseline, Text, Button } from '@arwes/react';
import { createTheme } from '@arwes/design';

const theme = createTheme();

function App() {
  return (
    <ArwesThemeProvider theme={theme}>
      <StylesBaseline />
      <div style={{ padding: 20 }}>
        <Text as="h1">Welcome to Arwes</Text>
        <Button palette="primary">
          Activate
        </Button>
      </div>
    </ArwesThemeProvider>
  );
}

export default App;