soluid

SolidJS component toolkit. Copy components into your project and own the code directly.

Website

Usage

Install is not required. Run directly with bunx or npx:

bunx soluid init                # create soluid.config.json interactively
bunx soluid install             # download and install components + CSS
bunx soluid add <component...>  # add components to config
bunx soluid remove <comp...>    # remove components from config
bunx soluid list                # list available components

Config

soluid.config.json

{
  "componentDir": "src/components/ui",
  "cssPath": "src/styles/soluid.css",
  "components": ["Button", "TextField", "Dialog"]
}

cssPath receives all component CSS concatenated into a single file.

Setup

Import CSS in your app entry point:

// src/index.tsx
import "./styles/soluid.css";

Theme and density switching:

document.documentElement.setAttribute("data-theme", "dark");
document.documentElement.setAttribute("data-density", "dense");

Components (34)

| Category | Components | |---|---| | Layout | Stack, HStack, Divider, Spacer | | General | Button, IconButton, Badge, Tag, Tooltip, Avatar | | Form | FormField, TextField, TextArea, NumberInput, Select, Checkbox, CheckboxGroup, RadioGroup, Switch | | Data | Table, Card, DescriptionList, Skeleton, EmptyState, Accordion | | Feedback | Dialog, Drawer, Alert, Toast, Progress, Spinner | | Navigation | Tabs, Breadcrumb, Pagination, Menu | | Utility | VisuallyHidden, Popover |

Core Utilities

createFocusTrap, createToast, createToggle

Installed automatically as dependencies when any component that requires them is added.

Development

bun install                  # install dependencies
bun run dev                  # start catalog dev server (localhost:5173)
bun run typecheck            # type check
bun run lint                 # lint (oxlint)
bun run fmt                  # format (dprint)
bun run generate:api         # regenerate API data from component Props
bun run build:catalog        # build catalog site to docs/
bun run build:cli            # build CLI to dist/