Components

Color

Render a CSS color swatch or background.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Color } from '@swiftuijs/ui';
export default function Example() {
    return (<Color color="#007AFF" style={{ width: '200px', height: '100px' }}></Color>);
}

Color Palette

Display multiple colors:

Usage and limitations

  • Provide color in any CSS color format, such as hex, rgb or a named color.
  • Set width and height explicitly; an empty swatch has no content-derived size.
  • Use consistent color tokens and sufficient contrast. Add text when color communicates a status.

More examples

Color Palette

API reference

PropTypeRequiredDescription
colorstringYesColor value (CSS color string)

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Chart

Chart presents numeric series as either bar or line marks.

ColorPicker

ColorPicker wraps the native color input while keeping SwiftUI-style label and value semantics.