@sentio/ui-core

A basic UI component library with zero Web3 dependencies.

Features

- 🎨 Full Tailwind CSS theme system
- 🧩 Core UI components (Button, Dialog, Tooltip, Loading, etc.)
- 📦 No Web3 dependency
- 🎯 Lightweight

Installation

``bash
pnpm add @sentio/ui-core
`

Usage

`tsx
import {
Button,
BaseDialog,
BarLoading,
CopyButton,
Input,
Select,
Switch,
PopoverTooltip,
ResizeTable,
FlatTree,
useMobile
} from '@sentio/ui-core'
import '@sentio/ui-core/dist/style.css'

function App() {
const isMobile = useMobile()

return (
<>
Click me



{!isMobile &&

Desktop view

}

)
}
`

Included components

$3

- BarLoading - Bar loading indicator
- SpinLoading - Spinner loading indicator
- CopyButton, CopyIcon, CopySuccessIcon - Copy button and icons
- Button - Button component with loading state support
- BaseDialog, BaseZIndexContext - Dialog component with z-index context
- PopoverTooltip - Tooltip component
- DisclosurePanel - Disclosure panel component
- Collapse - Collapse/expand component
- Input - Input component
- RadioSelect - Radio select component
- Switch - Switch toggle component
- Select - Select dropdown component
- FlatTree - Tree component with flat data structure
- LinkifyText - Text component that converts URLs to links
- Empty - Empty state component
- StatusBadge, StatusRole - Status badge components
- HeaderToolsToggleButton, HeaderToolsContent - Header tools dropdown

$3

- ResizeTable - Resizable table component
- MoveLeftIcon, MoveRightIcon, RenameIcon, DeleteIcon - Table action icons

$3

- PopupMenuButton - Popup menu button
- MenuItem, SubMenuButton, MenuContext, COLOR_MAP - Menu system components

$3

- ROOT_KEY, SUFFIX_NODE_KEY - Tree node key constants
- PlusSquareO, MinusSquareO, CloseSquareO, EyeO - Tree icons

$3

- useMobile() - Detect mobile device
- useBoolean() - Boolean state hook
- Number formatting utilities (e.g., getNumberWithDecimal())
- classNames() - Classname utility
- Contexts: NavSizeContext, BaseZIndexContext, MenuContext
- Extension context utilities

Theming

Components are themed using CSS variables. You can customize the theme by overriding these variables:

`css
:root {
--primary-600: 7, 86, 213;
--gray-600: 75, 85, 99;
/ ... /
}
``