Vue

Import Caustica the same way you would in React — typed components, native elements underneath, glass that still feels like light through a pane.

Install

Peer: vue ≥ 3.4. Load CSS once in the app entry.

npm install caustica-design vue
import 'caustica-design/css'
import { Button, Panel, Modal } from 'caustica-design/vue'

Usage

<script setup>
import { Button, Panel, PanelHead, PanelTitle } from 'caustica-design/vue'
</script>

<template>
  <Panel>
    <PanelHead>
      <PanelTitle>Tonight’s release</PanelTitle>
    </PanelHead>
    <Button variant="primary">Name it</Button>
  </Panel>
</template>

Wrap the app in .ca-root as on Getting started.

Component names

Exports match React caustica-design/core: Button, Panel, Card, Field, Input, Badge, Modal, Tabs, Collapse, Checkbox, Switch, layout (Stack, Grid), and the other presentational primitives.

Overlay pickers (Select, DatePicker, Toast, Navbar) stay on the React core or CSS classes for now — the Vue set covers the daily building blocks plus modal, tabs, and collapse.

Events

Modal emits openChange. Tabs emits valueChange. Collapse emits openChange. Form controls forward native change / input from the inner <input>. 

<Modal :open="open" backdrop-label="Dismiss dialog" @open-change="open = $event">
  <ModalDialog label="Name this release">…</ModalDialog>
</Modal>

Next steps