DEV Community

John Yaghobieh
John Yaghobieh

Posted on

Bear UI 1.2.3: Goodbye Tailwind, Hello AeroCraft

#tailwindcss #forgestack #react #javascript

Repo: github.com/yaghobieh/bear

Docs: bearui.com

npm: @forgedevstack/bear@1.2.3

Bear UI 1.2.3 is a foundation release. The headline change is not another component — it is how the library is styled and built. We migrated the entire CSS pipeline from Tailwind CSS to AeroCraft (@forgedevstack/aerocraft), the utility engine we ship across ForgeStack.

If you only install Bear and import styles.css, your app keeps working the same way. If you maintain Bear or customize themes, this release is worth reading end to end.

Why we moved off Tailwind

Bear grew on Tailwind for years. It worked, but three problems kept showing up as the library and ForgeStack ecosystem scaled:

  1. Stack alignment — AeroCraft, AeroCraft Portal, Grid Table, and other ForgeStack libs share one styling model. Keeping Bear on Tailwind meant two utility dialects, two configs, and duplicated mental overhead for contributors.
  2. Class noise at scale — Hundreds of components with long bear-* utility chains are hard to review and easy to drift. AeroCraft gives us config-driven shortcuts, component recipes, and the same bear- prefix without Tailwind as a middle layer.
  3. Build ownership — We wanted a PostCSS pipeline we control end to end: theme tokens, dark mode selectors, responsive groups, and future VS Code tooling (the AeroCraft plugin) tied to the same config Bear ships.

We did not move because Tailwind is bad. We moved because one CSS engine for the whole stack is simpler for maintainers and more predictable for consumers.

What AeroCraft changes under the hood

Before (Tailwind) 

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Build: tailwindcss CLI + tailwind.config.js + autoprefixer.

After (AeroCraft) 

@aerocraft all;
Enter fullscreen mode Exit fullscreen mode

Build: postcss-cli + @forgedevstack/aerocraft/postcss + aerocraft.config.js.

Bear keeps the same class prefix consumers already know:

// aerocraft.config.js (simplified)
export default {
  prefix: 'bear',
  separator: '-',
  mode: 'standalone',
  groups: 'all',
  responsive: true,
  content: ['./src/**/*.{ts,tsx}'],
  theme: { colors: { bear: { /* pink scale */ }, zinc: { /* ... */ } } },
};
Enter fullscreen mode Exit fullscreen mode

PostCSS wires AeroCraft with Bear’s dark-mode convention:

import { aerocraftPlugin } from '@forgedevstack/aerocraft/postcss';
import config from './aerocraft.config.js';

export default {
  plugins: [
    postcssImport(),
    aerocraftPlugin({
      ...config,
      darkSelector: '.dark, .bear-dark',
    }),
  ],
};
Enter fullscreen mode Exit fullscreen mode

_base.css now ships full semantic scales (secondary, success, warning, danger, info, neutral) as CSS variables, so theming stays consistent in light and dark mode.

What this means for your app

You are… Action
Using Bear via npm and import '@forgedevstack/bear/styles.css' No change required. Styles are pre-built in dist/styles.css.
Customizing Bear colors via BearProvider No change required. CSS variables still drive variants.
Forking Bear or running npm run build in the repo Install @forgedevstack/aerocraft as a devDependency; Tailwind is removed.
Want your own utility layer on top Optional: add aerocraft.config.js + PostCSS plugin (see portal Installation page).

Publishing @forgedevstack/bear@1.2.3 to npm does not force you to install AeroCraft in your app unless you build Bear from source.

Component updates in 1.2.3

The CSS migration shipped alongside practical API improvements on high-traffic primitives.

Button

New props for dense, branded, and interactive UIs:

  • radius — default | pill | square | none
  • ripple — Material-style click ripple
  • gradient + gradientDirection — two-color backgrounds
  • compact — tighter padding for toolbars
  • prefix / suffix — badges, shortcuts, status dots
  • tooltip — shorthand hover hint

Example:

<Button
  gradient={['#ec4899', '#8b5cf6']}
  radius="pill"
  ripple
  spotlight
  leftIcon={<BearIcons.RocketIcon size={16} />}
  tooltip="Launch"
>
  Launch
</Button>
Enter fullscreen mode Exit fullscreen mode

Input

  • prefix / suffix — inline static text ($, https://, units)
  • loading — spinner inside the field
  • copyable + onCopy — one-click copy
  • floatingLabel + required — denser form layouts
  • variant / radius — aligned with other Bear inputs

Dropdown

  • searchable + searchPlaceholder + filterFn
  • multiSelect + selectedKeys + onSelectionChange
  • loading / loadingText / emptyText
  • header / footer — composition slots
  • renderItem — custom row rendering
  • virtualized — large lists

Drawer

Internal refactor: size/position/transform maps moved to Drawer.const.ts, scroll locking to Drawer.utils.ts — no intentional breaking API changes.

Ecosystem context (1.2.2 → 1.2.3)

1.2.2 added a large batch of display components (GlowCard, Heatmap, TagCloud, MediaPlayer, AnimatedCounter, CurrencyInput, TimelineChart, ImageAnnotation, and more). 1.2.3 stabilizes how they are styled going forward on AeroCraft.

The portal also teases Torch (@forgedevstack/player) — playlists, subtitles, PiP, and streaming built to pair with Bear layouts.

Upgrade 

npm install @forgedevstack/bear@1.2.3
Enter fullscreen mode Exit fullscreen mode 
import '@forgedevstack/bear/styles.css';
import { BearProvider, Button, Input, Dropdown } from '@forgedevstack/bear';
Enter fullscreen mode Exit fullscreen mode

Explore live docs: bearui.com

Links

Top comments (0)