Components — Modern React UI Library

Examples

Basic Tabs with Alert

Demonstrates a basic tabs component with multiple tabs, including one that shows an Alert component when active, and a disabled tab.

I'm an alert

"use client";
import { useState } from "react";
import { Alert, Tab, Tabs } from "@g4rcez/components";

function BasicTabs() {
  const [state, setState] = useState("second");
  return (
    <Tabs active={state} onChange={setState}>
      <Tab id="first" title="First tab">
        Element
      </Tab>
      <Tab id="second" title="Second">
        <Alert title="Title" open={state === "second"} theme="info">
          I'm an alert
        </Alert>
      </Tab>
      <Tab id="other" title="Other">
        0192fc45-add4-7552-8e6f-fc06085040d4
      </Tab>
      <Tab id="last" title="Disabled" disabled>
        null
      </Tab>
    </Tabs>
  );
}

When to use Tabs

Use when

You need the documented Tabs interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Tabs behavior you need.

Accessibility

Keep the Tabs labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.