@designsystem_test/react

React component library for the design system - 36 production-ready components

📦 Installation

npm install @designsystem_test/react @designsystem_test/tokens

🚀 Quick Start

1. Import Styles

import '@designsystem_test/tokens/styles.css';

2. Import Components

import { TextButton, IconButton, Input, Navigation } from '@designsystem_test/react';

function App() {
  return (
    <div>
      <Navigation />
      <TextButton size="medium">Click me</TextButton>
      <Input placeholder="Enter text" />
    </div>
  );
}

📚 Components (36)

Buttons (8)

• TextButton, IconTextButton, DynamicStateButton
• SelectableButton, IconButton, IconButtonWithStroke
• IconButtonOnImage, OptionsButton

Forms (8)

• Input, Checkbox, RadioField, SwitchField
• SelectField, TextareaField, InputField, CheckboxField, TagInputField

Navigation (2)

• Navigation, NaviMenuItem

Cards (2)

• PlatformInfoCard, ProductInfoCard

Feedback (4)

• Toast, Tooltip, Notification, InfoMessage

Dialog (1)

• DialogBody

Media (2)

• Avatar, ImageUploadButton

Branding (2)

• PartnerLogo, Talk

Data Display (5)

• Tag, Table, Pagination, Options, ReservationStatus

🎨 Design Tokens

This package uses @designsystem_test/tokens for design tokens. Import the CSS to get all design variables:

import '@designsystem_test/tokens/styles.css';

📄 License

MIT