@declareuihq/components

Official component library — 20+ production-ready UI components declared in YAML, compiled to any framework.

---

What it does

A curated set of commonly-used UI components, declared once in .ui.yaml and ready to compile for React, Vue, Angular, Svelte, Web Components, or vanilla JS/TS.

Installation

pnpm add @declareuihq/components

Available components

Category	Components
Actions	Button, IconButton, Toggle, DropdownMenu
Forms	Input, Textarea, Select, Checkbox, Radio, Switch
Layout	Card, Container, Stack, Grid, Divider
Feedback	Alert, Badge, Toast, Tooltip, Progress
Navigation	Tabs, Breadcrumb, Pagination
Data	Avatar, Table, DataTable

Usage

# Copy components into your project
declareui add button card input

# Or build directly from the library
declareui build --from @declareuihq/components --targets react,vue

Each component follows DeclareUI conventions:

# Example: button.ui.yaml
component: Button
props:
  variant:
    type: enum
    values: [primary, secondary, ghost, destructive]
    default: primary
  size:
    type: enum
    values: [sm, md, lg]
    default: md
  label:
    type: string
    required: true
template:
  tag: button
  classes:
    base: "inline-flex items-center justify-center rounded-lg font-medium"
    variants:
      variant:
        primary: "bg-blue-600 text-white hover:bg-blue-700"
        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200"

Related packages

Package	Description
@declareuihq/core	Parser, AST, and code generators
@declareuihq/tailwind-plugin	Tailwind CSS integration
@declareuihq/cli	CLI tool

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT