"shadcn-ify" your NiceGUI application with a hack-script #5608

evnchn · 2025-12-30T12:56:44Z

evnchn
Dec 30, 2025
Collaborator

Was reviewing #5606. Good in its own right but realized that it wasn't much shadcn but rather Gemini 3 Pro memorizing beautiful Tailwind CSS, and Gemini 3 Pro is not available to me...

Here I propose a "hack-script" which overrides the default props and classes of elements which I have found working, as well as mutationobserver, to let us use basecoat (shadcn without the JS) in NiceGUI

Here is the code and the kitchen sink:

from nicegui import ui

ui.add_head_html('''
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.9/dist/basecoat.cdn.css">
<style>
:root {
--primary: #5898d4;
}
</style>
<script>
function updateInner(inner, checked) {
    inner.classList.remove('hidden');
    inner.classList.add('input', 'm-0.5', 'absolute');
    inner.checked = checked;
}

document.addEventListener('DOMContentLoaded', () => {
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'aria-checked') {
                const checked = mutation.target.getAttribute('aria-checked') === 'true';
                mutation.target.querySelectorAll('.q-checkbox__native').forEach(inner => updateInner(inner, checked));
                mutation.target.querySelectorAll('.q-checkbox__bg').forEach(svg => svg.style.display = 'none');
                // for radio as well
                mutation.target.querySelectorAll('.q-radio__native').forEach(inner => updateInner(inner, checked));
                mutation.target.querySelectorAll('.q-radio__bg').forEach(svg => svg.style.display = 'none');
                // for switch as well
                mutation.target.querySelectorAll('.q-toggle__native').forEach(inner => {updateInner(inner, checked); inner.setAttribute('role', 'switch');});
                mutation.target.querySelectorAll('.q-toggle__track, .q-toggle__thumb').forEach(svg => svg.style.display = 'none');
            } else if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('aria-checked')) {
                        const checked = node.getAttribute('aria-checked') === 'true';
                        node.querySelectorAll('.q-checkbox__native').forEach(inner => updateInner(inner, checked));
                        node.querySelectorAll('.q-checkbox__bg').forEach(svg => svg.style.display = 'none');
                        // for radio as well
                        node.querySelectorAll('.q-radio__native').forEach(inner => updateInner(inner, checked));
                        node.querySelectorAll('.q-radio__bg').forEach(svg => svg.style.display = 'none');
                        // for switch as well
                        node.querySelectorAll('.q-toggle__native').forEach(inner => {updateInner(inner, checked); inner.setAttribute('role', 'switch');});
                        node.querySelectorAll('.q-toggle__track, .q-toggle__thumb').forEach(svg => svg.style.display = 'none');
                    }
                });
            }
        });
    });
    observer.observe(document.body, { attributes: true, subtree: true, childList: true });

    document.querySelectorAll('[aria-checked]').forEach(target => {
        const checked = target.getAttribute('aria-checked') === 'true';
        target.querySelectorAll('.q-checkbox__native').forEach(inner => updateInner(inner, checked));
        target.querySelectorAll('.q-checkbox__bg').forEach(svg => svg.style.display = 'none');
        // for radio as well
        target.querySelectorAll('.q-radio__native').forEach(inner => updateInner(inner, checked));
        target.querySelectorAll('.q-radio__bg').forEach(svg => svg.style.display = 'none');
        // for switch as well
        target.querySelectorAll('.q-toggle__native').forEach(inner => {updateInner(inner, checked); inner.setAttribute('role', 'switch');});
        target.querySelectorAll('.q-toggle__track, .q-toggle__thumb').forEach(svg => svg.style.display = 'none');
    });
});
</script>
''', shared=True)

ui.button.default_classes('btn')
ui.input.default_props('borderless dense input-class="input"')
ui.number.default_props('borderless dense input-class="input"')
ui.textarea.default_props('borderless dense input-class="textarea"')
ui.select.default_props('borderless dense').default_classes('btn-outline border-[var(--color-input)] *:-mt-2.5')
ui.card.default_classes('card border-[var(--color-input)]')
ui.badge.default_classes('badge')
ui.radio.default_props('dense')
ui.checkbox.default_props('dense')


@ui.page('/')
def main_page():
    ui.button('Click me', color=None, on_click=lambda: ui.notify('Button clicked!'))

    with ui.card():
        ui.label('Normal card')

    ui.checkbox('Check me (normal)', on_change=lambda e: ui.notify(f'Normal checkbox: {e.value}'))

    ui.input(on_change=lambda e: ui.notify(f'Input changed to: {e.value}'), placeholder='MyPlaceholder')
    ui.number(on_change=lambda e: ui.notify(f'Number changed to: {e.value}'), placeholder='MyPlaceholder')
    ui.textarea(on_change=lambda e: ui.notify(f'Textarea changed to: {e.value}'), placeholder='MyPlaceholder')
    ui.select(options=['Option 1', 'Option 2', 'Option 3'], on_change=lambda e: ui.notify(
        f'Select changed to: {e.value}'))

    ui.badge('Badge')

    with ui.element('div').classes('button-group'):
        ui.button('One', on_click=lambda: ui.notify('You clicked Button 1!'))
        ui.button('Two', on_click=lambda: ui.notify('You clicked Button 2!'))
        ui.button('Three', on_click=lambda: ui.notify('You clicked Button 3!'))

    ui.radio([1, 2, 3], value=1).props('inline')


ui.run()

evnchn · 2025-12-31T16:36:03Z

evnchn
Dec 31, 2025
Collaborator Author

V2 simply takes directly from https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css

ui.add_head_html('''
<style type="text/tailwindcss">
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #5898d4;
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --sidebar-width: 16rem;
  --sidebar-mobile-width: 18rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.3);
  --scrollbar-width: 6px;
  --scrollbar-radius: 6px;
  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'); /* --muted-foreground */
}

.dark, .body--dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
  --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');/* --muted-foreground */
  color-scheme: dark;
}


@layer components {
  .input-switch, .q-toggle__native {
    @apply !block;
    @apply inline-flex h-[1.15rem] w-8 shrink-0 appearance-none items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)]/50 disabled:cursor-not-allowed disabled:opacity-50;
    @apply bg-[var(--input)] checked:bg-[var(--primary)] dark:bg-[var(--input)]/80 dark:checked:bg-[var(--primary)];
    @apply before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all before:content-[''];
    @apply before:bg-[var(--background)] dark:before:bg-[var(--foreground)];
    @apply checked:before:ms-3.5 dark:checked:before:bg-[var(--primary-foreground)];
  }
  .input-checkbox, .q-checkbox__native {
    @apply !block m-0.5 size-4 shrink-0 appearance-none rounded-[4px] border border-[var(--input)] shadow-xs transition-shadow outline-none checked:border-[var(--primary)] checked:bg-[var(--primary)] focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)]/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-[var(--destructive)] aria-invalid:ring-[var(--destructive)]/20 dark:bg-[var(--input)]/30 dark:checked:bg-[var(--primary)] dark:aria-invalid:ring-[var(--destructive)]/40;

    &:checked:after {
      @apply block size-3.5 bg-[var(--primary-foreground)] content-[''];
      @apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-center mask-no-repeat;
    }
  }
  .input-radio, .q-radio__native {
    @apply !block absolute m-0.5 appearance-none border-[var(--input)] text-[var(--primary)] focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] dark:bg-[var(--input)]/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;

    &:checked:before {
      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 content-[''] rounded-full size-2 bg-[var(--primary)];
    }
  }
  .q-radio__bg, .q-checkbox__bg, .q-toggle__track, .q-toggle__thumb, .q-field__label {
    display: none !important;
  }
  .textarea {
    @apply border-[var(--input)] placeholder:text-[var(--muted-foreground)] focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] dark:bg-[var(--input)]/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
  }
  .input-text {
    @apply appearance-none file:text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] selection:bg-[var(--primary)] selection:text-[var(--primary-foreground)] dark:bg-[var(--input)]/30 border-[var(--input)] flex h-9 min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    @apply focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)];
  }
  .mycard {
    @apply bg-[var(--card)] text-[var(--card-foreground)] flex flex-col rounded-xl border shadow-sm border-[var(--input)]
  }
  .mybadge {
    @apply border-transparent inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 focus-visible:ring-[3px] aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] transition-[color,box-shadow] overflow-hidden
  }
}
</style>
''', shared=True)

ui.add_head_html('''
<script>
function updateTarget(target) {
    const checked = target.getAttribute('aria-checked') === 'true';
    target.querySelectorAll('.q-checkbox__native').forEach(inner => {inner.checked = checked});
    target.querySelectorAll('.q-radio__native').forEach(inner => {inner.checked = checked});
    target.querySelectorAll('.q-toggle__native').forEach(inner => {inner.checked = checked});
}

document.addEventListener('DOMContentLoaded', () => {
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'aria-checked') {
                updateTarget(mutation.target);
            }
        });
    });
    observer.observe(document.body, { attributes: true, subtree: true, childList: true, attributeFilter: ['aria-checked'] });

    document.querySelectorAll('[aria-checked]').forEach(target => {
        updateTarget(target);
    });
});
</script>
''', shared=True)

ui.button.default_classes('rounded-md')
ui.toggle.default_classes('rounded-md')
ui.input.default_props('borderless dense input-class="input-text"')
ui.number.default_props('borderless dense input-class="input-text"')
ui.textarea.default_props('borderless dense input-class="textarea"')
ui.select.default_props('borderless dense').default_classes('input-text *:-mt-1.5')
ui.card.default_classes('mycard')
ui.badge.default_classes('mybadge')
ui.radio.default_props('dense')
ui.checkbox.default_props('dense')

@falkoschindler Stuff is getting interesting real quick!

0 replies

evnchn · 2025-12-31T17:38:03Z

evnchn
Dec 31, 2025
Collaborator Author

V3: No more MutationObserver yay

ui.add_head_html('''
<style type="text/tailwindcss">
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'); /* --muted-foreground */
}

.dark, .body--dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');/* --muted-foreground */
}


@layer components {
  .q-toggle__inner > .q-toggle__native {
    @apply !block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
    @apply inline-flex h-[1.15rem] w-8 shrink-0 appearance-none items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)]/50 disabled:cursor-not-allowed disabled:opacity-50;
    @apply bg-[var(--input)] dark:bg-[var(--input)]/80;
    @apply before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all before:content-[''];
    @apply before:bg-[var(--background)] dark:before:bg-[var(--foreground)];
  }
  .q-toggle__inner--truthy > .q-toggle__native {
    @apply before:ms-3.5 bg-[var(--q-primary)] dark:bg-[var(--q-primary)] dark:before:bg-[var(--primary-foreground)];
  }
  .q-checkbox__inner > .q-checkbox__native {
    @apply !block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 shrink-0 appearance-none rounded-[4px] border border-[var(--input)] shadow-xs transition-shadow outline-none focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)]/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-[var(--destructive)] aria-invalid:ring-[var(--destructive)]/20 dark:bg-[var(--input)]/30 dark:aria-invalid:ring-[var(--destructive)]/40;
  }
  .q-checkbox__inner--truthy > .q-checkbox__native {
    @apply border-[var(--q-primary)] bg-[var(--q-primary)] dark:bg-[var(--q-primary)];
    &:after {
    @apply block size-3.5 bg-[var(--primary-foreground)] content-[''];
    @apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-center mask-no-repeat;
    }
  }
  .q-radio__inner > .q-radio__native {
    @apply !block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 appearance-none border-[var(--input)] text-[var(--q-primary)] focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] dark:bg-[var(--input)]/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
  }
  .q-radio__inner--truthy > .q-radio__native:before {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 content-[''] rounded-full size-2 bg-[var(--q-primary)];
  }
  .q-radio__bg, .q-checkbox__bg, .q-toggle__track, .q-toggle__thumb, .q-field__label {
    display: none !important;
  }
  .q-field--labeled .q-field__control-container {
    padding-top: 2px !important;
  }
  .textarea {
    @apply border-[var(--input)] placeholder:text-[var(--muted-foreground)] focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] dark:bg-[var(--input)]/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
  }
  .input-text {
    @apply appearance-none file:text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] selection:bg-[var(--q-primary)] selection:text-[var(--primary-foreground)] dark:bg-[var(--input)]/30 border-[var(--input)] flex h-9 min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    @apply focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)];
  }
  .mycard {
    @apply bg-[var(--card)] text-[var(--card-foreground)] flex flex-col rounded-xl border shadow-sm border-[var(--input)]
  }
  .mybadge {
    @apply border-transparent inline-flex items-center justify-center rounded-full border px-1.5 py-0 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 focus-visible:ring-[3px] aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] transition-[color,box-shadow] overflow-hidden
  }
}
</style>
''', shared=True)

ui.button.default_classes('rounded-md')
ui.dropdown_button.default_classes('rounded-md')
ui.toggle.default_classes('rounded-md')
ui.menu.default_classes('rounded-md')
ui.link.default_classes('rounded-md')
ui.upload.default_classes('rounded-md')
ui.time.default_classes('rounded-md')
ui.date.default_classes('rounded-md')
ui.table.default_classes('rounded-md')
ui.stepper.default_classes('rounded-md')
ui.input.default_props('borderless dense input-class="input-text"')
ui.number.default_props('borderless dense input-class="input-text"')
ui.textarea.default_props('borderless dense input-class="textarea"')
ui.color_input.default_props('borderless dense input-class="input-text"')
ui.date_input.default_props('borderless dense input-class="input-text"')
ui.time_input.default_props('borderless dense input-class="input-text"')
ui.select.default_props('borderless dense').default_classes('input-text *:-mt-1.5')
ui.card.default_classes('mycard')
ui.badge.default_classes('mybadge')  # opinionated: make it smaller

0 replies

evnchn · 2025-12-31T18:05:17Z

evnchn
Dec 31, 2025
Collaborator Author

V4: Tabs as well (BETA)

ui.add_head_html('''
<style type="text/tailwindcss">
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'); /* --muted-foreground */
}

.dark, .body--dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');/* --muted-foreground */
}


@layer components {
  .q-toggle__inner > .q-toggle__native {
    @apply !block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
    @apply inline-flex h-[1.15rem] w-8 shrink-0 appearance-none items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)]/50 disabled:cursor-not-allowed disabled:opacity-50;
    @apply bg-[var(--input)] dark:bg-[var(--input)]/80;
    @apply before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all before:content-[''];
    @apply before:bg-[var(--background)] dark:before:bg-[var(--foreground)];
  }
  .q-toggle__inner--truthy > .q-toggle__native {
    @apply before:ms-3.5 bg-[var(--q-primary)] dark:bg-[var(--q-primary)] dark:before:bg-[var(--primary-foreground)];
  }
  .q-checkbox__inner > .q-checkbox__native {
    @apply !block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 shrink-0 appearance-none rounded-[4px] border border-[var(--input)] shadow-xs transition-shadow outline-none focus-visible:border-[var(--ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ring)]/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-[var(--destructive)] aria-invalid:ring-[var(--destructive)]/20 dark:bg-[var(--input)]/30 dark:aria-invalid:ring-[var(--destructive)]/40;
  }
  .q-checkbox__inner--truthy > .q-checkbox__native {
    @apply border-[var(--q-primary)] bg-[var(--q-primary)] dark:bg-[var(--q-primary)];
    &:after {
    @apply block size-3.5 bg-[var(--primary-foreground)] content-[''];
    @apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-center mask-no-repeat;
    }
  }
  .q-radio__inner > .q-radio__native {
    @apply !block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 appearance-none border-[var(--input)] text-[var(--q-primary)] focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] dark:bg-[var(--input)]/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
  }
  .q-radio__inner--truthy > .q-radio__native:before {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 content-[''] rounded-full size-2 bg-[var(--q-primary)];
  }
  .q-radio__bg, .q-checkbox__bg, .q-toggle__track, .q-toggle__thumb, .q-field__label, .q-tab__indicator {
    display: none !important;
  }
  .q-field--labeled .q-field__control-container {
    padding-top: 2px !important;
  }
  .textarea {
    @apply border-[var(--input)] placeholder:text-[var(--muted-foreground)] focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] dark:bg-[var(--input)]/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
  }
  .input-text {
    @apply appearance-none file:text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] selection:bg-[var(--q-primary)] selection:text-[var(--primary-foreground)] dark:bg-[var(--input)]/30 border-[var(--input)] flex h-9 min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    @apply focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)];
  }
  .mycard {
    @apply bg-[var(--card)] text-[var(--card-foreground)] flex flex-col rounded-xl border shadow-sm border-[var(--input)]
  }
  .mybadge {
    @apply border-transparent inline-flex items-center justify-center rounded-full border px-1.5 py-0 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 focus-visible:ring-[3px] aria-invalid:ring-[var(--destructive)]/20 dark:aria-invalid:ring-[var(--destructive)]/40 aria-invalid:border-[var(--destructive)] transition-[color,box-shadow] overflow-hidden
  }
  .mytabs {
    @apply bg-[var(--muted)] text-[var(--muted-foreground)] inline-flex w-fit items-center justify-center rounded-lg p-[3px] pb-[0px];
  }
  .mytab {
    @apply mb-[3px] focus-visible:border-[var(--ring)] focus-visible:ring-[var(--ring)]/50 focus-visible:outline-[var(--ring)] text-[var(--foreground)] dark:text-[var(--muted-foreground)] inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;

    &[aria-selected='true'] {
        @apply bg-[var(--background)] dark:text-[var(--foreground)] dark:border-[var(--input)] dark:bg-[var(--input)]/30 shadow-sm;
    }
  }
}
</style>
''', shared=True)

ui.button.default_classes('rounded-md')
ui.dropdown_button.default_classes('rounded-md')
ui.toggle.default_classes('rounded-md')
ui.menu.default_classes('rounded-md')
ui.link.default_classes('rounded-md')
ui.upload.default_classes('rounded-md')
ui.time.default_classes('rounded-md')
ui.date.default_classes('rounded-md')
ui.table.default_classes('rounded-md')
ui.stepper.default_classes('rounded-md')
ui.input.default_props('borderless dense input-class="input-text"')
ui.number.default_props('borderless dense input-class="input-text"')
ui.textarea.default_props('borderless dense input-class="textarea"')
ui.color_input.default_props('borderless dense input-class="input-text"')
ui.date_input.default_props('borderless dense input-class="input-text"')
ui.time_input.default_props('borderless dense input-class="input-text"')
ui.select.default_props('borderless dense').default_classes('input-text *:-mt-1.5')
ui.card.default_classes('mycard')
ui.badge.default_classes('mybadge')  # opinionated: make it smaller
ui.tabs.default_classes('mytabs')  # NOTE: avoid w-full or vertical tabs
ui.tab.default_classes('mytab')

0 replies

evnchn · 2026-01-01T06:32:36Z

evnchn
Jan 1, 2026
Collaborator Author

V5: hunvreus/basecoat#130

Gone are the days of copying from https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css

While that approach works, it has a risk of falling out of sync with upstream.

0 replies

evnchn · 2026-01-01T09:29:43Z

evnchn
Jan 1, 2026
Collaborator Author

TODO

Try and have the entire (yes I mean entire!) page to follow the styles of shadcn, when it is in use by the hack-script.

Right now, the color of ui.card changes with it, but not the body. It makes things weird.

Goal: Just like https://basecoatui.com/, the entire page themes when I click the theme on the side

Also: Open to discussion, we may hack in https://daisyui.com/ also (sound likes more mature, but likely harder to hack-in... Look at https://github.com/saadeghi/daisyui/blob/de213728084450b81d683cb01795205a3b518941/packages/daisyui/src/components/alert.css#L5C3-L5C26 there's internal CSS layers...)

1 reply

evnchn Jan 1, 2026
Collaborator Author

Got it hunvreus/basecoat@f855609

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

"shadcn-ify" your NiceGUI application with a hack-script #5608

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

"shadcn-ify" your NiceGUI application with a hack-script #5608

Uh oh!

evnchn Dec 30, 2025 Collaborator

Replies: 5 comments · 1 reply

Uh oh!

evnchn Dec 31, 2025 Collaborator Author

Uh oh!

evnchn Dec 31, 2025 Collaborator Author

Uh oh!

evnchn Dec 31, 2025 Collaborator Author

Uh oh!

evnchn Jan 1, 2026 Collaborator Author

Uh oh!

Uh oh!

evnchn Jan 1, 2026 Collaborator Author

TODO

Uh oh!

evnchn Jan 1, 2026 Collaborator Author

evnchn
Dec 30, 2025
Collaborator

Replies: 5 comments 1 reply

evnchn
Dec 31, 2025
Collaborator Author

evnchn
Dec 31, 2025
Collaborator Author

evnchn
Dec 31, 2025
Collaborator Author

evnchn
Jan 1, 2026
Collaborator Author

evnchn
Jan 1, 2026
Collaborator Author

evnchn Jan 1, 2026
Collaborator Author