@nimspace/ui

NimSpace Design System React Component Library

Extracted from the NimSpace Design System Figma file.

Installation

npm install @nimspace/ui

Usage

import '@nimspace/ui/styles.css'
import { Button, Card, Input, Dialog, Typography } from '@nimspace/ui'

function App() {
  return (
    <div>
      <Typography style="title-page">NimSpace</Typography>
      <Button variant="primary" size="large">
        Create Booking
      </Button>
    </div>
  )
}

Components

| Component | Description | |-----------|-------------| | Button | Primary, Secondary, Neutral, Subtle, Danger variants | | IconButton | Icon-only button with sizes | | Card | Content cards with horizontal/vertical layouts | | CardBadge | Statistic/value badge cards | | Input | Text input with label, error, prefix/suffix | | Dialog | Modal dialog with useDialog hook | | Typography | 18 text styles from Figma design system | | AppShell | Mobile-first app layout shell | | PageHeader | Page header with back button support |

Design Tokens

import { colors, spacing, typography } from '@nimspace/ui'

colors.brand       // '#ffd21f'
spacing.lg         // '20px'
typography.heading // { fontSize, lineHeight, fontWeight }

License

MIT