@tomo-inc/uikit-lite

@tomo-inc/uikit

A shared UI utilities package for Tomo Wallet, providing common components and theme configurations.

Features

• 🎨 Unified theme configuration
• 🧩 Common UI components
• 🎭 Shared styles and layouts
• 🛠️ UI utility functions
• 📦 Third-party UI library extensions

Installation

pnpm add @tomo-inc/uikit

Usage

Theme Configuration

import { ThemeProvider, defaultTheme } from "@tomo-inc/uikit";

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <YourApp />
    </ThemeProvider>
  );
}

Common Components

import { Card, Modal, Toast, Loading } from "@tomo-inc/uikit";

function YourComponent() {
  return (
    <Card>
      <Loading />
      <Toast message="Operation successful" />
    </Card>
  );
}

Layout Components

import { Container, Row, Column, Spacer } from "@tomo-inc/uikit/layout";

function Layout() {
  return (
    <Container>
      <Row>
        <Column>Content</Column>
        <Spacer size={16} />
        <Column>More Content</Column>
      </Row>
    </Container>
  );
}

Package Structure

src/
  ├── components/        # Common UI components
  │   ├── base/         # Basic components
  │   ├── layout/       # Layout components
  │   └── feedback/     # Feedback components
  ├── theme/            # Theme configurations
  ├── styles/           # Shared styles
  └── utils/            # UI utility functions

Main Exports

Base Components

• Button
• Card
• Modal
• Tooltip
• Dropdown

Layout Components

• Container
• Row
• Column
• Spacer
• Divider

Feedback Components

• Toast
• Loading
• ErrorBoundary
• Skeleton

Theme

• ThemeProvider
• defaultTheme
• darkTheme
• createCustomTheme

Utils

• getThemeColor
• getSpacing
• mediaQuery
• styleHelpers

Development

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build package
pnpm build

# Run storybook
pnpm storybook

Contributing

1. Create feature branch
2. Make changes
3. Add tests
4. Submit PR

License

MIT © Tomo Inc.