@obolnetwork/obol-ui

Obol Network's shared React component library, built with Stitches and organised using Atomic Design principles.

Installation

yarn add @obolnetwork/obol-ui
# or
npm install @obolnetwork/obol-ui

Usage

import { Button, Text, Flex } from "@obolnetwork/obol-ui";

export default function App() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Obol UI</Text>
      <Button onClick={() => console.log("clicked")}>Get Started</Button>
    </Flex>
  );
}

Theme setup

Obol UI uses Stitches for styling. Import and apply the global CSS reset in your app's entry point:

import { globalCss, getCssText } from "@obolnetwork/obol-ui";

Components

The library follows Atomic Design methodology:

Atoms — Avatar, Badge, Box, Button, Checkbox, Container, Flex, Grid, IconButton, Image, Link, NavigationMenu, NumberField, ProgressBar, Separator, Skeleton, Switch, Text, TextField, Toggle, Tooltip, and more.

Molecules — Accordion, Card, Dialog, Navbar, NotificationCard, Pagination, Profile, ProgressTracker, RadioGroup, ResponsiveDialog, Table, Tabs, and more.

Organisms — Advisory, Footer, HeroSection, Selector, TwoColumnSection.

Utilities — Color variants, media query hooks, shared styles and types.

Development

# Run Storybook for local component development
yarn storybook

# Build the design system
yarn ds:build

# Run tests
yarn test

Links

• Obol Network
• Documentation
• GitHub

License

MIT