@charpente-ui/vue

Charpente UI

A logic-first, headless UI library for Vue 3. The logic you need, without the CSS you don't.

Documentation

charpente.frontfactory.dev — guides, API reference and a live demo for every component.

Philosophy: don't reinvent the wheel

Most UI libraries are bloated because they try to impose a visual style. Charpente UI is headless: it provides the "chassis" (HTML structure and complex input logic) and you bring the "paint" (Tailwind, CSS Modules, or Styled Components).

• Zero Style: No CSS included. Total freedom for your UI.
• Transparent Wrapper: We don't hide native HTML. Attributes like type, placeholder or required work exactly like standard HTML via attribute inheritance.
• Smart Logic: Checkbox arrays, shared radio names, for/id wiring and native validation are handled for you.

Requirements

On an older Vue, npm stops the install with an ERESOLVE conflict while pnpm and yarn only warn — and forcing past that warning surfaces as useId is not a function at mount. See Requirements.

Installing

npm install @charpente-ui/vue

Playground

Try it live on StackBlitz — no installation required:

Or run it locally:

npm run dev

Usage

<script setup>
    import { ref } from 'vue';
    import { CForm, CField, CLabel, CInput, CSupportingText, CButton } from '@charpente-ui/vue';

    const email = ref('');

    function onSubmit() {
        // Only called once the form passes native validation.
    }
</script>

<template>
    <CForm validate @submit="onSubmit">
        <CField class="form-group">
            <CLabel>Email Address</CLabel>

            <CInput v-model="email" type="email" placeholder="hello@world.com" required
                    class="my-custom-input-style"/>

            <CSupportingText validation>We never share your email.</CSupportingText>
        </CField>

        <CButton type="submit" class="btn-primary">
            Subscribe
        </CButton>
    </CForm>
</template>

No for/id wiring, no validation library: the label, the hint and the browser-localized error messages are linked and accessible automatically — and every class lands on the native element, ready for your CSS.

Getting started →

Components

Name	Core Logic	Tag	Status
Button	Polymorphic: Switches tags (a, button, etc...) while keeping logic.	CButton
Checkbox	Smart Toggle: Handles array state, booleans, and indeterminate natively.	CCheckbox
CheckboxGroup	Group: Shared v-model and opt-in name across checkboxes inside a fieldset.	CCheckboxGroup
Field	Wrapper: Auto-links a label and an input via a shared generated id.	CField
File	File Input: Reactive file selection with v-model support.	CFile
Form	No Reload: Calls preventDefault for you, with opt-in native validation.	CForm
Input	Auto-ID: Auto-links to labels via useId() and full attributes inheritance.	CInput
Label	Context-Aware: Simple, accessible binding for any input.	CLabel
Radio	Selection: Minimalist wrapper for native radio input.	CRadio
RadioGroup	Group: Shared v-model and name across radios inside a fieldset.	CRadioGroup
Select	Native Wrapper: Single and multiple selection support.	CSelect
SupportingText	Field Text: Hint or error text wired to its input via aria-describedby.	CSupportingText
Textarea	Flexible Binding: Auto-ID and reactive model management.	CTextarea

Component reference →

Guides

• Introduction — what headless means here, and what it is not
• Getting started — install, first form, SSR, TypeScript
• Comparison — against headless widgets, form frameworks and styled libraries
• Ids — the for/id cascade, the cui- prefix, taking it over
• Native validation — validate, custom rules, async checks
• Accessibility — what the platform does, what is left to you
• Wrapping components — building your own <AppInput>