Learn how to use Solid Bits components in your SolidJS applications.
Import components from the solid-bits package:
import { GlassIconsUno, GlassSurfaceUno } from 'solid-bits';Most components come in two variants:
Uses vanilla CSS with custom properties. Imported without suffix.
import { GlassIcons }Uses UnoCSS utility classes. Imported with 'Uno' suffix.
import { GlassIconsUno }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>
);
}Each component accepts different props. Check the individual component documentation for details.
All components are fully typed with TypeScript, so your IDE will provide autocomplete and type checking for props.