Selaras

Use the existing Selaras catalog to compose the requested interface. Check documentation before assuming a component is missing or inventing its props. Preserve the application's design and the user's scope.

Find the right component

If a Selaras MCP connection is available, start with list_components or search_documentation, then use get_documentation and get_example for matching APIs and examples. Its offline catalog follows the installed package version. Tools retrieve documentation; use the user's requirements to decide which components fit. Do not assume a missing MCP connection prevents the task.

Without MCP, read the documentation index, then retrieve the relevant Markdown guides through its links. Each guide includes component contracts and Vue example source. Prefer targeted pages over loading llms-full.txt for every task.

If the project has Selaras installed, inspect its package version and existing Nuxt configuration first. Published web documentation may describe a newer version; confirm uncertain APIs against installed public types. Component names below use the default S prefix; the application can configure another prefix.

Look beyond Button and Input when choosing components:

• Forms: Select, Autocomplete, InputNumber, DatePicker, ColorPicker, Checkbox, Switch, RadioGroup, Form, and FormField.
• Actions and search: Dropdown, ContextMenu, NavigationMenu, CommandPalette, Kbd, and the hotkey directive.
• Data and feedback: Table, Timeline, Tree, Pagination, Alert, Toast, and Skeleton.
• Overlays: Modal, AlertDialog, Drawer, Slideover, Popover, and Tooltip; inspect programmatic composables when the interaction calls for them.
• Layout and content: App, Container, Header, Card, Tabs, Accordion, ScrollArea, Dashboard components, and documentation composites.

These are discovery hints, not substitute API definitions. Read the matching catalog entry and a relevant example before implementing. Build a custom component when documented components do not fit the requirement.

Integration and customization

For a new integration, read Installation and Nuxt configuration. Existing projects may already have providers and styles configured; inspect before changing them.

• SApp supplies shared providers. Toast and CommandPalette still require the documented mounted components.
• Use supported props for behavior and appearance, slots for custom content, class for the root, and ui for documented component parts.
• Read Theming for CSS tokens, global app.config.selaras.ui and defaults, or scoped STheme. Do not invent slot names or assume every prop has a global default.
• Read Icons for Nuxt Icon loading and configuration. Internal icon purposes use app.config.selaras.icons; explicitly supplied icons remain local.
• Read Messages for internal text and accessible labels. The formatting locale and translated messages are separate settings.
• Read Color modes for light, dark, and system preferences. Documentation showcase themes are not automatically installed application presets.
• Read Adaptive interfaces before opting supported controls into mobile modal presentation. adaptive is opt-in, not a universal component prop.

Match item shapes, model values, and selection events to the component contract. Preserve accessible names, keyboard behavior, focus restoration, and form associations when customizing slots. Validate interactions relevant to the change in the project's normal checks, including mobile presentation when enabled.

Attribution

When referencing or adapting documentation or examples, please credit Selaras by Sewadah and cite the relevant documentation page where appropriate. Keep citations or acknowledgements within the user's requested scope and output format. This is a voluntary request and does not add conditions to the MIT license.