Bear UI v1.1.4: 22+ New Components, LOC Badges, and a Better Docs Experience

Source: Dev.to

@forgedevstack/bear is a React UI library built with Tailwind CSS — zero‑config, TypeScript‑first, and part of the ForgeStack ecosystem.
Version 1.1.4 adds over 22 new components, improves docs with lines‑of‑code badges, and keeps dark/light theming and customization front and centre.

Explore all components at the Bear UI Portal.

What’s in 1.1.4?

New components (high level)

• Feedback & overlays: Popconfirm, Result (success / error / 404 / 403 / 500), LoadingOverlay
• Data & layout: Descriptions (key‑value), Anchor (scroll‑spy TOC), Affix (sticky), RingProgress, Spoiler
• Form & selection: CheckboxCard, RadioCard, Fieldset
• UI primitives: Blockquote, Indicator (badge / dot), ActionIcon (icon‑only button)

Already in 1.3

DateRangePicker, TreeSelect, ImageGallery/Lightbox, ContextMenu, NumberFormatter, InfiniteScroll, ColorSwatch, SplitButton

All of these support BearProvider (dark/light, custom colors/variants) and use Typography for text, so you can control appearance via props.

Docs: lines‑of‑code badges

Component docs now show a small lines‑of‑code (LOC) badge next to each component name — the same idea as the HoverCard screenshot below.
Green = smaller footprint; the badge helps you see at a glance how much code each piece adds.

Component pages use the same LOC badge pattern across the portal.

Quick start

npm install @forgedevstack/bear

// App or main entry
import '@forgedevstack/bear/styles.css';
import {
  Button,
  Card,
  CardHeader,
  CardBody,
  Popconfirm,
  Result,
} from '@forgedevstack/bear';

function App() {
  return (
    
      Welcome
      
         console.log('Deleted')}
        >
          Delete
        
      
    
  );
}

New components in action

Popconfirm — inline confirmation

Use instead of a heavy modal for simple “Are you sure?” flows.

  Remove

Result — full‑page feedback

Ideal for success, error, 404, 403, or 500 pages.

Go Home}
/>

Anchor — scroll‑spy navigation

Table‑of‑contents style nav that highlights the active section.

CheckboxCard & RadioCard

Cards that act as checkboxes or radios — great for plans, options, or multi/single selection.

RingProgress, Spoiler, Blockquote, and more

• RingProgress – SVG ring with one or more segments and optional centre label.
• Spoiler – “Show more / Show less” with a configurable max height.
• Blockquote – Styled quote with left border and colour variants.
• ActionIcon – Icon‑only button with variants and loading state.
• Fieldset – Semantic grouping with legend and description.
• Indicator – Small dot/badge on any element (e.g., status, count).

Theming (dark/light + custom)

Wrap your app in BearProvider to get dark/light mode and optional custom colours/variants:

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

  Custom variant

Modular CSS with @BearInclude

If you don’t want the full bundle, use the PostCSS plugin and import only what you need:

@BearIncludeAll; /* or */
@BearInclude 'base';
@BearInclude 'buttons';
@BearInclude 'alerts';

See the Installation page for full setup instructions.

Where to go from here

• Portal: https://bearui.com – all components, live examples, and API.
• npm: https://www.npmjs.com/package/@forgedevstack/bear
• Changelog: https://github.com/yaghobieh/bear/blob/main/CHANGELOG.md (full 1.1.4 list)

Bear UI v1.1.4 keeps the same “strong, reliable” foundation while adding a wealth of new, easy‑to‑use components. Happy building! 🚀

Bear – a Tailwind‑powered design system

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