Components

WebArcade includes a UI component library built with SolidJS, Tailwind CSS, and DaisyUI.

Available Components

Components are located in src/ui/:

Form Inputs

• Input (text, with multiline prop for textarea)
• Select
• Checkbox
• Toggle
• Radio
• Range
• Rating
• FileInput

Display

• Card
• Badge
• Avatar
• Alert
• Progress
• Skeleton
• Loading
• Tooltip
• Table
• TreeView
• Timeline
• Code

Navigation

• Tabs
• TabBar
• Breadcrumb
• Pagination
• Steps

Feedback

• Modal
• Toast
• Drawer
• Popover
• Dropdown

Layout

• Toolbar
• MenuBar
• Footer
• Divider
• Collapse
• Accordion

Other

• Carousel
• Countdown
• ButtonGroup
• InputGroup
• SearchBox
• ColorPicker
• EmptyState

Using Components

Import from the UI library:

import { Input, Select, Card, Modal } from 'webarcade/ui';

Styling

Components use DaisyUI classes and support:

• variant - primary, secondary, accent, info, success, warning, error
• size - xs, sm, md, lg
• class - custom CSS classes

<Input variant="primary" size="lg" />
<Card bordered hoverable />

Toast Notifications

import { toast } from 'webarcade/ui';

toast.success('Saved!');
toast.error('Failed');
toast.info('Info');
toast.warning('Warning');

TIP

See the actual component source files in src/ui/ for exact props and usage.