🪟 Solid 7.CSS

A comprehensive SolidJS wrapper library for the 7.css Windows 7 UI framework. Built with full TypeScript support and reactive SolidJS patterns.

Features

• ✅ Zero Configuration - Automatic CSS import, just install and use
• ✅ Complete 7.css Coverage - All components wrapped with SolidJS
• ✅ TypeScript Support - Full type definitions included
• ✅ Reactive Props - Seamless SolidJS integration
• ✅ Accessibility - ARIA attributes and semantic HTML
• ✅ Tree Shaking - Import only what you need

Installation

bun add solid-7css solid-js

Quick Start

import { Window, Button, ProgressBar } from 'solid-7css';

function App() {
  return (
    <Window title='My App' width='400px' active>
      <Button variant='default'>Click me!</Button>
      <ProgressBar value={75} />
    </Window>
  );
}

✨ Zero Configuration: 7.css styles are included automatically from the library build.

Components

Window

<Window
  title='Window Title'
  width='500px'
  active
  glass
  onClose={() => console.log('Closed!')}
>
  Content goes here
</Window>

Buttons

<Button>Normal Button</Button>
<Button variant="default">Default Button</Button>
<Button disabled>Disabled</Button>

Form Controls

<Checkbox label="Check me" checked={checked()} onChange={setChecked} />
<Radio name="group" value="1" label="Option 1" />
<Select options={[
  { value: 'a', label: 'Option A' },
  { value: 'b', label: 'Option B' }
]} />
<SearchBox placeholder="Search..." />
<Slider value={50} hasBoxIndicator />

Progress & Status

<ProgressBar value={progress()} animate />
<StatusBar fields={[
  { id: 'status', content: 'Ready' },
  { id: 'count', content: '5 items' }
]} />

Navigation

<Tabs.Root defaultValue="general" orientation="horizontal">
  <Tabs.List justified>
    <Tabs.Trigger value="general">General</Tabs.Trigger>
    <Tabs.Trigger value="network">Network</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value="general">General content</Tabs.Panel>
  <Tabs.Panel value="network">Network content</Tabs.Panel>
</Tabs.Root>

<Menu items={[
  { id: 'file', label: 'File', onClick: () => {} },
  { id: 'edit', label: 'Edit', disabled: true },
  {
    id: 'view',
    label: 'View',
    children: [
      { id: 'statusBar', label: 'Status Bar', onClick: () => {} },
      { id: 'details', label: 'Details', divider: true }
    ]
  }
]} />

Consult src/docs/components-reference.md for all available props and complete examples.

Available Components

• Windows/Dialogs: Window, WindowHeader, Dialog, DialogBox, Modal, ModalPortal
• Forms: Button, Checkbox, Radio, Select, SearchBox, Slider, TextBox, TextArea, Form
• Navigation: Tabs, Menu, NavBar, ListView, TreeView
• Layout: Grid, Stack, HStack, VStack, Scrollbar
• Feedback: ProgressBar, StatusBar, Balloon, Notification
• Data Display: Card, ImageViewer
• File System: FileExplorer, WindowedFileExplorer, Notepad, NotepadMenuBar, ZipViewer
• Media: AudioPlayer, MiniAudioPlayer
• Desktop: DesktopIcons, DesktopIcon

Development

# Install dependencies
bun install

# Build the library bundle and types
bun run build

# Type check
bun run typecheck

# Lint
bun run lint

Built With

• SolidJS - Reactive UI library
• 7.css - Windows 7 CSS framework
• TypeScript - Type safety
• Vite - Build tool

License

MIT License - see LICENSE file for details.

Contributing

Contributions welcome! Please submit pull requests to our repository.