UI and forms
On this page
The interface brings the application workflow to the person using it. OwlMeans Common combines familiar UI libraries with forms, navigation and identity conventions.
Libraries by purpose
| Library or standard | Purpose | Public OwlMeans package |
|---|---|---|
| React and React DOM | Render interactive application screens. | @owlmeans/web-client |
| shadcn/ui | Supply UI components used by the current web panel family. | @owlmeans/web-panel |
| Radix UI | Provide interface primitives such as dialogs, menus and selection controls. | @owlmeans/web-panel |
| Tailwind CSS | Support consistent styling through utility classes. | @owlmeans/web-panel |
| Lucide | Provide reusable interface icons. | @owlmeans/web-panel |
| React Hook Form and resolver adapters | Manage form fields and connect them to validation. | @owlmeans/client-panel |
| i18next | Support translated application text. | @owlmeans/client-i18n |
| Sonner | Show application notifications. | @owlmeans/web-panel |
| react-dropzone | Support file selection and upload interactions. | @owlmeans/web-client |
| qrcode.react | Render QR codes where a feature needs them. | @owlmeans/web-panel |
These are public ecosystem dependencies and standards. The exact dependency set of an app depends on its generated project and developed features; not every library listed here is required by every application.
Use this in a project
- Describe the behavior you need in the specification or story.
- Ask the agent to use the project’s existing OwlMeans Common conventions.
- Review the related public package documentation when you want to understand a dependency.
- Try the behavior in the preview and review its access rules.
Ask the agent for a labeled contact form, clear field errors and keyboard navigation. Try an invalid email and verify the form explains what to fix.
A UI is the set of screens and controls a person uses. A form library helps keep entered values, errors and submission behavior consistent.
Read OwlMeans Tech Concept for the application architecture and continue with another agent for the harness workflow.
Application example
Category: CRM and customer management. Example: a small team CRM with contact ownership and manager access.
Names and marks
shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone, qrcode.react names and any associated marks remain with their respective owners or project maintainers. References identify products, standards or source examples. OwlMeans documentation does not imply sponsorship or endorsement by those owners.