A basic UI component library with zero Web3 dependencies.
npm install @sentio/ui-coreA basic UI component library with zero Web3 dependencies.
- 🎨 Full Tailwind CSS theme system
- 🧩 Core UI components (Button, Dialog, Tooltip, Loading, etc.)
- 📦 No Web3 dependency
- 🎯 Lightweight
``bash`
pnpm add @sentio/ui-core
`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 (
<>
{!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 utilitiesTheming
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;
/ ... /
}
``