arrow-react-bootstrap

React 18 components for T-Mobile's Arrow Design System (TDDS). 65 components with full accessibility, keyboard navigation, and dark mode support.

Future scoped name on GitLab: @tmobile/arrow-react.

Install

npm install arrow-react-bootstrap

Setup

Import styles once at your app root:

import 'arrow-react-bootstrap/styles';

Wrap your app in the theme provider:

import { ArrowThemeProvider } from 'arrow-react-bootstrap';

<ArrowThemeProvider>
  <App />
</ArrowThemeProvider>

Usage

import { Button, TextField, Accordion, Tabs, Modal } from 'arrow-react-bootstrap';

<Button variant="primary">Submit</Button>

<TextField id="email" name="email" label="Email address" />

<Accordion
  items={[
    { id: 'q1', heading: 'Question?', content: <p>Answer.</p> },
  ]}
/>

All components are data-driven — pass arrays of objects, not compound children.

Exports

• 68 components — buttons, forms, navigation, disclosure, data viz, feedback
• 5 hooks — useFloatingLabel, useRovingTabIndex, useMenuDropdown, useExpandCollapse, useArrowTheme
• 1 provider — ArrowThemeProvider (inverse + brand theming)
• 2 utilities — cx (classnames), dataAttr/dataAttrs

Key Props

Every component supports inverse for dark mode. Form inputs require id and label. Icons are passed as ReactNode (SVG elements).

Figma Make Kit

This package is designed as the code-context pillar of a Figma Make Kit. The published tarball includes per-component documentation under dist/guidelines/:

• dist/guidelines/components/{slug}.md — one file per component (import line, design prose, prop table)
• dist/guidelines/components/index.md — discoverability index
• dist/guidelines/overview.md — system-level rules (imports, theme, styles)

Make's package auto-gen analyzes these when generating Kit guidelines. They can also be imported directly:

import buttonMd from 'arrow-react-bootstrap/guidelines/components/button';

Documentation

• guidelines/ — system-level rules (imports, theme, styles, patterns)
• dist/guidelines/components/ — per-component docs, regenerated on every npm run build