DOCSEARCHbyAlgolia
Submit Docs

Welcome UI

website·Indexed 32 days ago

https://www.welcome-ui.com

A comprehensive UI component library featuring a wide array of interactive elements including Buttons, Accordions, DatePickers, FileUploads, and more. The library provides a consistent design system with built-in theming capabilities, accessibility utilities like VisuallyHidden, and a variety of form inputs and feedback components such as Toasts and Alerts.

Tokens
44.4K
Snippets
275
Records
283
Agent score
68%

What's inside Welcome UI

  1. Overview of the Tag component

    The Tag component is a small, interactive UI element used to label, categorize, or filter content. It supports text, icons, and actions such as deletion or selection to help organize information and highlight key attributes.
    import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return <Tag>Default</Tag>
}

export default Example

  2. Use the Badge component for status and notifications

    The Badge component is used to display small, supplementary information such as notifications, status indicators, or counts to provide users with context at a glance.
    import { Badge } from 'welcome-ui/Badge'

const Example = () => {
  return (
    <>
      <Badge size="sm" variant="brand" />
      <Badge variant="neutral">New</Badge>
      <Badge size="lg">{1}</Badge>
    </>
  )
}

  3. Use the WelcomeLoader component for loading states

    The WelcomeLoader component is a brand-aligned visual indicator used to signal that a page is loading or content is being retrieved. It is designed to reduce perceived wait times and maintain user engagement during transitions.
    import { WelcomeLoader } from 'welcome-ui/WelcomeLoader'

const Example = () => {
  return <WelcomeLoader />
}

export default Example

  4. Use the VariantIcon component

    The VariantIcon component displays an icon with a specific semantic color variant to provide clear visual feedback. It supports several predefined color variants and size options.
    import { VariantIcon } from 'welcome-ui/VariantIcon'

const Example = () => {
  return (
    <>
      <VariantIcon variant="ai" />
      <VariantIcon variant="danger" />
      <VariantIcon variant="info" />
      <VariantIcon variant="success" />
      <VariantIcon variant="warning" />
    </>
  )
}

  5. Use the CloseButton component

    The CloseButton is a UI component used to close or dismiss other components, such as modals or alerts. It can be imported directly from welcome-ui/CloseButton.
    import { CloseButton } from 'welcome-ui/CloseButton'

const Example = () => {
  return <CloseButton />
}

export default Example

  6. Use the Hint component for contextual help

    The Hint component is used to provide guidance, clarifications, or suggestions to users without cluttering the main interface. It is typically used in forms or instructional content and can be rendered as a small tooltip or inline text.
    import { Hint } from 'welcome-ui/Hint'

const Example = () => {
  return <Hint>default</Hint>
}

export default Example

  7. Use the Card component to group related information

    The Card component serves as a visually distinct container for grouping content. By default, a Card does not have padding; to add padding to the content, wrap it in a Card.Body component.
    import { Card } from 'welcome-ui/Card'

const Example = () => (
  <Card className="max-w-2/3">
    <Card.Body>
      <h3>Title</h3>
      <p>Content goes here.</p>
    </Card.Body>
  </Card>
);

  8. Use the Label component for form elements

    The Label component provides a textual description or identifier for form elements like input fields, checkboxes, or radio buttons. It improves accessibility by clearly indicating the purpose of the associated element.
    import { Label } from 'welcome-ui/Label'

const Example = () => {
  return <Label>Default label</Label>
}

export default Example

  9. Use the Avatar component to display user profiles

    The Avatar component provides a visual representation of a user. It supports three primary display modes based on the provided props:

    1. Image: Displays a profile picture if src is provided.
    2. Initials: If no src is provided but a name is given, it generates initials with a random background color from the secondary theme. For xs and sm sizes, only the first letter is shown; otherwise, two letters are shown.
    3. Placeholder: Displays a generic placeholder if neither src nor name is provided.
    import { Avatar } from 'welcome-ui/Avatar'

const Example = () => {
  return (
    <>
      {/* Image mode */}
      <Avatar 
        name="Welcome UI" 
        src="https://example.com/photo.jpg" 
      />
      
      {/* Initials mode */}
      <Avatar name="Welcome UI" />
      
      {/* Placeholder mode */}
      <Avatar />
    </>
  )
}

  10. Group related actions using ButtonGroup

    The ButtonGroup component arranges multiple Button components in a horizontal or vertical stack. It ensures consistent spacing and alignment for related actions.
    import { Button } from 'welcome-ui/Button'
import { ButtonGroup } from 'welcome-ui/ButtonGroup'

const Example = () => {
  return (
    <ButtonGroup>
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
      <Button>Last</Button>
    </ButtonGroup>
  )
}

export default Example

  11. Use the InputText component

    The InputText component is used for entering and editing text in forms, search fields, and data entry interfaces. It supports standard input attributes like name and placeholder.
    import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  return <InputText name="firstName" placeholder="Welcome" />
}

export default Example

  12. Display and style text using the Text component

    The Text component is used to display and style text content with consistent typography options including font size, weight, color, and alignment. It supports a wide range of predefined variants for displays, headings, body text, and labels.
    import { Text } from 'welcome-ui/Text'

const Example = () => {
  return (
    <div className="flex flex-col gap-md">
      <Text variant="display-xl">Display (xl)</Text>
      <Text variant="heading-lg">Heading (lg)</Text>
      <Text variant="body-md">Body (md)</Text>
      <Text variant="label-sm-strong">Label (sm-strong)</Text>
    </div>
  )
}