Getting Started
Install Tres Leches and add your first reactive control panel.
Installation
Add Tres Leches to a Vue 3 project:
pnpm add @tresjs/leches
npm install @tresjs/leches
yarn add @tresjs/leches
The package includes its component styles, so no plugin or extra stylesheet is required.
Your first controls
Call useControls in <script setup> and render one <TresLeches /> panel. Each returned value is a Vue ref.
<script setup lang="ts">
import { TresLeches, useControls } from '@tresjs/leches'
const { visible, speed, color } = useControls({
visible: true,
speed: {
value: 0.5,
min: 0,
max: 2,
step: 0.01,
},
color: '#f59e0b',
})
</script>
<template>
<TresLeches />
<p v-if="visible">
Speed: {{ speed }} · Color: {{ color }}
</p>
</template>
Tres Leches infers a checkbox for visible, a range for the configured numeric value, and a color input for the hexadecimal color.
Where to render the panel
Render TresLeches once for each panel. useControls calls can live in the same component or in any descendant that uses the same panel id.
Next steps
- Learn how values map to inputs in the controls guide.
- Organize large panels with folders and multiple panels.
- See every signature and prop in the API reference.