UIKit Components
Smile provides a library of built-in lower level components which are styled and themed to match the overall project. These components build on Radix-Vue and Shadcn-vue and help you quickly develop consisent interfaces with themed colors, dark mode support, and a consistent look and feel. We anticipate adding more here over time.
Importing Components
All UIkit components can be imported from the @/uikit/components directory. The full list of available components is in the file. Most are in fact imported from Shadcn-vue but some have been extended for use in Smile and are documented here:
import { Badge } from '@/uikit/components/badge'
import { Button } from '@/uikit/components/button'
import { ButtonGroup, ButtonGroupItem } from '@/uikit/components/button-group'
import { Checkbox } from '@/uikit/components/checkbox'
import { Switch } from '@/uikit/components/switch'Button Component
The Button component is the primary interactive element for user actions. It supports various styles, sizes, and can include icons.
There are also many color variants controlled by the main Tailwind theme sheet (src/core/main.css)/
There are also many sizes:
Buttons can include icons alongside text. Icons should ideally be placed before the text content:
Props
variant (string): The visual style variant can be default, destructive, outline, secondary, ghost, link, primary, primary-light, button-link, button-link-light, info, info-light, success, success-light, warning, warning-light, danger, or danger-light.
size (string): The button size can be icon for icon-only buttons without text or menu for menu-style buttons. Other standard sizes are also available.
ButtonGroup Component
The ButtonGroup component creates a connected group of buttons, useful for related actions or options.
ButtonGroup supports different sizes:
Props
variant (string): The visual style variant (same as Button component)
size (string): The button size (same as Button component)
Checkbox Component
The Checkbox component provides a standard checkbox input with various styling options.
Props
modelValue (boolean): The checked state (use v-model for two-way binding)
variant (string): The visual style variant can be default, primary, info, success, warning, or danger.
size (string): The checkbox size can be xs, sm, default, lg, or xl.
disabled (boolean): Whether the checkbox is disabled
Switch Component
The Switch component provides a toggle switch input, ideal for on/off states.
Props
modelValue (boolean): The checked state (use v-model for two-way binding)
variant (string): The visual style variant can be default, primary, info, success, warning, or danger.
size (string): The switch size can be sm, default, lg, or xl.
disabled (boolean): Whether the switch is disabled
Badge Component
The Badge component is used to display small pieces of information, such as status indicators, labels, or counts.
Props
variant (string): The visual style variant can be default, secondary, destructive, or outline.