Components Gallery

Explore all Lightview components powered by DaisyUI. Use the sidebar (>>) to navigate to individual component documentation, or browse just a few examples below and click on the ⓘ icons to see more documentation.

Using Components

Components can be used with multiple syntaxes. Choose your style (Object DOM and HTML requires lightview-x):

await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { div, Button } = tags;

const app = div({ style: 'padding: 1rem; display: flex; gap: 0.5rem;' },
    Button({ color: 'primary' }, 'Save'),
    Button({ variant: 'outline' }, 'Cancel')
);

$('#example').content(app);

await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { div, Button } = tags;

const app = {
    tag: div,
    attributes: { style: 'padding: 1rem; display: flex; gap: 0.5rem;' },
    children: [
        { tag: Button, attributes: { color: 'primary' }, children: ['Save'] },
        { tag: Button, attributes: { variant: 'outline' }, children: ['Cancel'] }
    ]
};

$('#example').content(app);

// Object DOM syntax now requires lightview-x.js
await import('/components/actions/button.js');
const { $ } = Lightview;

const app = {
    div: {
        style: 'padding: 1rem; display: flex; gap: 0.5rem;',
        children: [
            { Button: { color: 'primary', children: ['Save'] } },
            { Button: { variant: 'outline', children: ['Cancel'] } }
        ]
    }
};

$('#example').content(app);

<!-- Import the component (registers lv-button) -->
<script type="module" src="/components/actions/button.js"></script>

<div style="padding: 1rem; display: flex; gap: 0.5rem;">
    <lv-button color="primary">Save</lv-button>
    <lv-button variant="outline">Cancel</lv-button>
</div>