solid-tom-ui

A blazing-fast, beautifully crafted UI component library for SolidJS, inspired by Ant Design.

Entire library ships at just ~1.5 MB. Built on Tailwind CSS 4 and DaisyUI 5, solid-tom-ui harnesses SolidJS fine-grained reactivity to deliver buttery-smooth UIs with near-zero overhead — no virtual DOM, no unnecessary re-renders, just raw speed.

Customizing the look and feel is a first-class experience: swap the entire color scheme by overriding a handful of CSS variables, or dial in individual components through the unified color prop and per-slot class overrides — no CSS-in-JS, no build plugins, just plain CSS and Tailwind utilities you already know.

Why solid-tom-ui?

• Featherlight — the full library (45+ components, styles included) weighs only ~1.5 MB, keeping your app fast on any network
• Instant theming — change primary colors, border radii, and shadows site-wide by editing a single CSS block; no rebuild required
• Pixel-perfect by default — every component is designed to look great out of the box, while remaining fully customizable via class props or CSS variables
• SolidJS-native — reactivity is handled at the signal level, so components update surgically without wasting a single render cycle

Features

• 45+ components — from simple buttons to complex data tables with virtual scrolling
• Tree-shakeable — each component is its own module; unused components are not bundled
• Typed — full TypeScript support with exported prop interfaces
• Themeable — DaisyUI color tokens + unified color prop across all components
• Accessible — semantic HTML, ARIA attributes, keyboard navigation
• Zero CSS setup — pre-compiled CSS bundle includes Tailwind + DaisyUI, no extra config needed

Installation

npm install solid-tom-ui
or
pnpm install solid-tom-ui
or
bun install solid-tom-ui

Peer dependencies

npm install solid-js

Optional (only needed for specific components):

Package	Component
imask	Input with mask
qrcode	QrCode
@tanstack/solid-table	Table

Setup

1. Import the pre-compiled CSS bundle

/* app.css */
@import 'solid-tom-ui/styles';

Make sure this CSS file is imported in your app entry point:

// src/index.tsx
import './app.css';
import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root')!);

---

2. Use components

import { Button, Modal, toast } from 'solid-tom-ui';

function App() {
  return (
    <Button color="primary" onClick={() => toast.success('Hello!')}>
      Click me
    </Button>
  );
}

---

Advanced Setup (Custom Theme)

Overwrite css variable

:root {
	--color-base-100: white;
	--color-base-content: black;

	--color-primary: red;
	--color-primary-content: white;

	--color-secondary: red;
	--color-secondary-content: white;

	--color-accent: red;
	--color-accent-content: white;

	--color-neutral: red;
	--color-neutral-content: white;

	--color-info: red;
	--color-info-content: white;

	--color-success: red;
	--color-success-content: white;

	--color-warning: red;
	--color-warning-content: white;

	--color-error: red;
	--color-error-content: white;
	--radius-selector: 8px;
	--radius-field: 4px;
	--radius-box: 6px;
	--size-selector: 4px;
	--size-field: 4px;
	--border: 1px;
	--depth: 0;
	--noise: 0;
}

---

Components

Layout & Navigation

Component	Description
Breadcrumb	Navigation breadcrumb trail
Divider	Horizontal or vertical divider
Drawer	Slide-in side panel
Dropdown	Dropdown menu
Menu	Vertical/horizontal navigation menu
Pagination	Page navigation
Splitter	Resizable split pane
Steps	Step-by-step progress indicator
Tab	Tabbed navigation

Data Display

Component	Description
Avatar	User avatar with fallback
Badge	Status badge / tag
Carousel	Image/content carousel
ChatBubble	Chat message bubble
Diff	Side-by-side diff viewer
Indicator	Numeric badge overlay
Skeleton	Loading skeleton placeholder
Table	Feature-rich table (virtual scroll, sort, filter, pinned columns)
Timeline	Vertical timeline
Tooltip	Hover tooltip
Tour	Interactive product tour

Input & Forms

Component	Description
Checkbox	Checkbox input
Input	Text, password, number, textarea, color, date, range, OTP, masked inputs
Rating	Star rating
Select	Dropdown select
SelectZone	Drag-to-select zone
Slider	Range slider
Switch	Toggle switch
Upload	File upload with drag & drop

Feedback

Component	Description
Loading	Spinner / loading indicator
Modal	Dialog modal
ProgressBar	Progress bar
Toast	Toast notifications (toast.success(), toast.error(), …)

Visual & Effects

Component	Description
Collapse	Collapsible content panel
ContextMenu	Right-click context menu
FloatButton	Floating action button
Hover3dImage	3D parallax image on hover
ImagePreview	Lightbox image preview
Mansory	Masonry grid layout
QrCode	QR code generator
Swap	Flip between two states
TextRotate	Animated rotating text

Utilities

Component	Description
CodePreview	Code preview

---

API

Color prop

Most components accept a color prop:

type BaseColorProps =
  | 'primary' | 'secondary' | 'accent' | 'neutral'
  | 'info' | 'success' | 'warning' | 'error';

<Badge color="success">Active</Badge>
<Button color="warning">Caution</Button>

Class override (slot system)

Every component exposes a class prop to override individual slots:

// Single-element components
<Badge class="font-bold text-lg" />

// Multi-slot components
<Modal
  class={{
    root: 'max-w-2xl',
    header: 'bg-base-200',
    body: 'p-8',
  }}
/>

TypeScript

All prop types are exported:

import type { ButtonProps, ModalProps, BaseColorProps, SolidComponent } from 'solid-tom-ui';

License

MIT © Truong Tom