DEV Community

Cover image for Bear UI v1.1.4: 22+ New Components, LOC Badges, and a Better Docs Experience
John Yaghobieh
John Yaghobieh

Posted on

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

#react #javascript #tailwindcss #ui

@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 center.

Explore all components at 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.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 — 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
Enter fullscreen mode Exit fullscreen mode 
// App or main entry
import '@forgedevstack/bear/styles.css';

import { Button, Card, CardHeader, CardBody, Popconfirm, Result } from '@forgedevstack/bear';

function App() {
  return (
    <Card>
      <CardHeader>Welcome</CardHeader>
      <CardBody>
        <Popconfirm title="Delete this?" onConfirm={() => console.log('Deleted')}>
          <Button variant="outline">Delete</Button>
        </Popconfirm>
      </CardBody>
    </Card>
  );
}
Enter fullscreen mode Exit fullscreen mode

New components in action

Popconfirm — inline confirmation

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

<Popconfirm
  title="Delete this item?"
  description="This cannot be undone."
  variant="danger"
  onConfirm={handleDelete}
>
  <Button variant="outline">Remove</Button>
</Popconfirm>
Enter fullscreen mode Exit fullscreen mode

Result — full-page feedback

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

<Result
  status="404"
  title="Page Not Found"
  subtitle="The page you're looking for doesn't exist."
  extra={<Button onClick={goHome}>Go Home</Button>}
/>
Enter fullscreen mode Exit fullscreen mode

Anchor — scroll-spy navigation

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

<Anchor
  links={[
    { id: 'overview', label: 'Overview' },
    { id: 'api', label: 'API', children: [
      { id: 'props', label: 'Props' },
      { id: 'events', label: 'Events' },
    ]},
  ]}
/>
Enter fullscreen mode Exit fullscreen mode

CheckboxCard & RadioCard

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

<RadioCardGroup value={plan} onChange={setPlan} columns={3}>
  <RadioCard value="free" label="Free" description="$0/mo" />
  <RadioCard value="pro" label="Pro" description="$19/mo" />
  <RadioCard value="enterprise" label="Enterprise" description="Custom" />
</RadioCardGroup>
Enter fullscreen mode Exit fullscreen mode

RingProgress, Spoiler, Blockquote, and more

  • RingProgress — SVG ring with one or more segments and optional center label.
  • Spoiler — “Show more / Show less” with a configurable max height.
  • Blockquote — Styled quote with left border and color 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 colors/variants:

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

<BearProvider
  defaultMode="dark"
  customVariants={{
    brand: { bg: '#6366f1', text: '#fff', hoverBg: '#4f46e5' },
  }}
>
  <Button variant="brand">Custom variant</Button>
</BearProvider>
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

See the portal Installation page for setup.

Where to go from here

Bear UI v1.1.4 keeps the same “strong, reliable, Tailwind-powered” approach while adding a lot of new building blocks and a clearer docs experience with LOC badges. If you’re building a React app and want a single design system with dark mode and room to customize, Bear is worth a look.

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

Top comments (0)