Usage

Learn how to use Solid Bits components in your SolidJS applications.

Importing Components

Import components from the solid-bits package:

import { GlassIconsUno, GlassSurfaceUno } from 'solid-bits';

Component Variants

Most components come in two variants:

Default

Uses vanilla CSS with custom properties. Imported without suffix.

import { GlassIcons }

UnoCSS

Uses UnoCSS utility classes. Imported with 'Uno' suffix.

import { GlassIconsUno }

Basic Example

Here's a simple example using the Glass Icons component:

import { GlassIconsUno } from 'solid-bits';
import { createSignal } from 'solid-js';

export default function App() {
  const icons = [
    { label: 'Home', icon: <HomeIcon /> },
    { label: 'Profile', icon: <UserIcon /> },
    { label: 'Settings', icon: <SettingsIcon /> }
  ];

  return (
    <div>
      <h1>My App</h1>
      <GlassIconsUno items={icons} />
    </div>
  );
}

Component Props

Each component accepts different props. Check the individual component documentation for details.

💡 Tip

All components are fully typed with TypeScript, so your IDE will provide autocomplete and type checking for props.

Next Steps