@nimble-space/react

React component library for Nimble Space mini apps, scaffolded from the ❖ [NimSpace] Design System (1) Figma file through the ksn-figma bridge.

Included in 0.1.0

• Design tokens mapped from Figma foundations: Background, Text, Border, Slate, spacing, radius, depth, type scale
• Layout primitives: NimbleProvider, Box, Stack, Inline, Container, Section, HeroSection
• Navigation and surface components: PageHeader, Card, Tag, Avatar, AvatarGroup
• Form and action components: Button, IconButton, InputField, TextareaField
• Feedback components: Toast, ProgressIndicator, Skeleton

Install

npm install @nimble-space/react

Import the bundled stylesheet once near your app root:

import '@nimble-space/react/styles.css'
import { NimbleProvider, Button, Card } from '@nimble-space/react'

Usage

import {
  NimbleProvider,
  Container,
  HeroSection,
  Button,
  Card,
  InputField,
  ProgressIndicator
} from '@nimble-space/react'
import { ArrowRight, Bell } from 'lucide-react'

export function ExamplePage() {
  return (
    <NimbleProvider>
      <Container size="mobile">
        <HeroSection
          platform="mobile"
          title="Nimble Space"
          subtitle="Mini app design system in React"
          actions={
            <Button endIcon={<ArrowRight size={16} />}>
              Continue
            </Button>
          }
        />

        <Card
          icon={<Bell size={32} />}
          title="Notify Users"
          description="Use Figma-aligned surfaces, spacing, and typography."
          footer={<Button variant="secondary">Open</Button>}
        />

        <InputField label="Workspace" placeholder="Select a workspace" />

        <ProgressIndicator
          currentStep={2}
          labels={['Start', 'Verify', 'Approve', 'Done']}
        />
      </Container>
    </NimbleProvider>
  )
}

Local development

cd packages/nimspace-react
npm install
npm run build
npm run pack:check

Publish

This package is configured to publish publicly to npm:

cd packages/nimspace-react
npm publish --access public

If npm whoami returns 401 Unauthorized, authenticate first with an npm token or npm login.

Figma mapping

The current implementation is aligned primarily to these Figma component sets and sections:

• Button
• Icon Button
• Input Field
• .Card
• Header
• Hero Basic
• Toast
• Progress indicator
• Skeleton
• Avatar
• Tags

Notes

• The package is intentionally composition-first, so Box, Stack, Inline, and Section cover many of the “box layout” patterns from the Figma system without forcing one rigid page structure.
• Icons are consumer-provided to avoid shipping a duplicate icon bundle.
• The next expansion candidates from the Figma inventory are Tabs, Dialog Body, List, Navigation Pill, OTP Box, and Select Field.