DEV Community

Cover image for Bear UI v1.1.5: PropsPlayground, PageNav, Button Refactor, and a Polished Portal
John Yaghobieh
John Yaghobieh

Posted on

Bear UI v1.1.5: PropsPlayground, PageNav, Button Refactor, and a Polished Portal

#react #tailwindcss #npm #javascript

@forgedevstack/bear is a Tailwind-powered React UI library — TypeScript-first, zero config, dark/light theming out of the box. Version 1.1.5 brings two new components, a new hook, bear-themed icons, a major Button refactor, controlled Tabs, and a set of portal improvements that make browsing the docs faster.

Explore all components at Bear UI Portal.

What's in 1.1.5?

New components

PropsPlayground — An interactive prop editor panel you can embed in any documentation page. Define a config object with boolean, select, number, or string controls, pass a render function, and you get a collapsible control panel above a live preview. Supports a reset button, configurable column count, and three sizes.

import { PropsPlayground, Button } from '@forgedevstack/bear';

<PropsPlayground
  config={{
    variant: { type: 'select', default: 'primary', options: [
      { label: 'Primary', value: 'primary' },
      { label: 'Outline', value: 'outline' },
      { label: 'Ghost', value: 'ghost' },
    ]},
    loading: { type: 'boolean', default: false },
    label: { type: 'string', default: 'Click me' },
  }}
  render={(props) => (
    <Button variant={props.variant} loading={props.loading}>
      {props.label}
    </Button>
  )}
/>
Enter fullscreen mode Exit fullscreen mode

PageNav — Previous/next navigation links for documentation or multi-page flows. Three variants (default, outlined, filled), five sizes, and optional icons.

import { PageNav } from '@forgedevstack/bear';

<PageNav
  prev={{ label: 'Button', href: '/components/button' }}
  next={{ label: 'Tabs', href: '/components/tabs' }}
  variant="outlined"
/>
Enter fullscreen mode Exit fullscreen mode

New hook: useResizeObserver

A lightweight wrapper around the browser's ResizeObserver. Pass a ref, get width, height, and the full contentRect back. Useful for responsive component logic without media queries.

import { useRef } from 'react';
import { useResizeObserver } from '@forgedevstack/bear';

function ResponsiveBox() {
  const ref = useRef<HTMLDivElement>(null);
  const { width, height } = useResizeObserver(ref);

  return (
    <div ref={ref}>
      {width} x {height}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Bear-themed icons

Eight new SVG icons with a nature/bear theme: HoneycombIcon, ClawIcon, ForestIcon, DenIcon, SalmonIcon, CampfireIcon, PineTreeIcon, MountainIcon. Use them like any other Bear icon:

import { BearIcons } from '@forgedevstack/bear';

<BearIcons.ForestIcon size={24} />
<BearIcons.CampfireIcon size={24} />
Enter fullscreen mode Exit fullscreen mode

Button refactor

The Button component got a significant cleanup:

  • Spotlight logic extracted into a reusable useSpotlight hook — the same mouse-follow glow effect is now available for other components.
  • iconOnly prop — Renders a square button sized for icons, without needing to manually adjust padding.
  • Smaller file — Helper functions and variant checks moved to Button.utils.ts and Button.constants.ts. The main component file dropped by ~40 lines with no API changes. 
<Button iconOnly variant="ghost" size="sm">
  <BearIcons.SearchIcon size={16} />
</Button>
Enter fullscreen mode Exit fullscreen mode

Tabs: controlled mode

Tabs now accept an optional value prop for controlled mode. When value is provided, the component is fully controlled from outside; when omitted, it falls back to the existing defaultTab uncontrolled behavior.

const [activeTab, setActiveTab] = useState('overview');

<Tabs value={activeTab} defaultTab="overview" onChange={setActiveTab}>
  <TabList>
    <Tab id="overview">Overview</Tab>
    <Tab id="api">API</Tab>
  </TabList>
  {/* panels */}
</Tabs>
Enter fullscreen mode Exit fullscreen mode

Portal improvements

The documentation portal got four additions that improve day-to-day use:

  1. Sidebar Search — Live filter in the sidebar. Type to instantly find any component, hook, or guide. Auto-expands matching groups.
  2. Copy Import — A one-click button on every component page that copies import { ComponentName } from '@forgedevstack/bear' to your clipboard.
  3. Breadcrumbs — Navigation breadcrumbs on component and doc pages so you always know where you are.
  4. Doc Page Navigation — Previous/next links at the bottom of every page (using the new PageNav component internally).
  5. Accessibility Docs — A new guide covering focus management, ARIA attributes, keyboard navigation, and color contrast.

CSS and code quality

  • Plain CSS for base utilities — .bear-focus-ring and .bear-transition now use plain CSS instead of Tailwind @apply directives, improving compatibility with non-Tailwind setups.
  • Utility extraction — Anchor, Autocomplete, ContextMenu, CountdownTimer, Dock, FileTree, MentionsInput, Skeleton, SliderRange, and Spotlight all had logic moved into .utils.ts files.
  • New docs — A CONTRIBUTING.md guide covers branch workflow, how to add components, and coding rules. The README now includes a comparison table vs MUI, Ant Design, and Chakra UI.

Quick start 

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

function App() {
  return (
    <BearProvider defaultMode="light">
      <Button variant="primary" spotlight>
        Try Bear
      </Button>
    </BearProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Where to go from here

Bear UI v1.1.5 focuses on developer experience — a playground for testing props, better portal navigation, a cleaner Button, and controlled Tabs. The library now exports 100+ components with the same Tailwind-powered, zero-config approach.

Part of ForgeStack — React, Compass, Synapse, Harbor, Grid Table, Lingo, and more.

Top comments (0)