@lssm/lib.ui-kit

Universal UI components for React Native and Web, built on top ofnativewind and @rn-primitives.

Installation

npm install @lssm/lib.ui-kit
# or
bun add @lssm/lib.ui-kit

Key Features

  • Universal: Components render natively on iOS/Android and as standard HTML on web
  • Styled with NativeWind: Uses Tailwind CSS classes for styling
  • Accessible: Leverages @rn-primitives (Radix UI for Native)
  • Atomic Design: Exports atoms, molecules, and organisms

Example Usage

import { Button } from '@lssm/lib.ui-kit/ui/button';
import { Text } from '@lssm/lib.ui-kit/ui/text';
import { Card, CardHeader, CardTitle, CardContent } from '@lssm/lib.ui-kit/ui/card';

export function MyComponent() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent className="gap-4">
        <Text>This works on Web and Native.</Text>
        <Button onPress={() => console.log('Clicked!')}>
          Click me
        </Button>
      </CardContent>
    </Card>
  );
}

Core Components

Form Controls

  • Button
  • Input
  • Checkbox
  • Switch
  • Select

Layout

  • Card
  • Stack
  • Separator
  • Sheet

Feedback

  • Alert
  • Skeleton
  • Progress
  • Tooltip
Previous: SchemaNext: Design System