DOCSEARCHbyAlgolia
Submit Docs

Sober UI Component Library

repository·alpha·Indexed 42 days ago

https://github.com/unreal-space/sober

A lightweight, framework-agnostic UI component library implementing Google Material 3 Expressive design specifications. Supporting Vue, React, Svelte, and Solid-js, Sober provides components like <s-button>, <s-checkbox>, <s-fab>, and <s-field-set> with a dedicated Theme Generator for custom schemes. Version 2.0.0-alpha.19.

Tokens
34.3K
Snippets
93
Records
110
Agent score
47%

What's inside Sober

  1. Overview of Sober features

    alpha

    Sober is a Web Components UI library based on the Material 3 Expressive design system. Key characteristics include:

    • Responsive: Components automatically adapt to desktop, tablet, and mobile devices.
    • Framework-Agnostic: Works with any frontend framework or SSR solution.
    • Zero Dependencies: Tiny bundle size with no third-party requirements.
    • Multilingual: Supports all browser-recognized languages.
    • TypeScript Support: Includes complete type definitions.
    • Interoperable: Designed to coexist with other UI libraries.
    • Customizable: Every component supports full style customization.

  3. Configure FieldSet slots

    alpha

    The s-field-set component uses several slots to organize content:

    • title: Defines the title of the field set.
    • start: Content placed at the beginning (e.g., a leading icon).
    • end: Content placed at the end (e.g., a trailing icon).
    • Anonymous: Default slot for the main body content.
    <s-field-set>
 <s-icon slot="start" name="star"></s-icon>
 <div slot="title">Title Content</div>
 <div>Main Body Content</div>
 <s-icon slot="end" name="star"></s-icon>
</s-field-set>

  4. Use slots in FloatingActionButton

    alpha

    The s-fab component supports several slots to allow for complex content layouts:

    • Anonymous Slot: Used for main button text.
    • start Slot: Content placed at the beginning. Supports svg, s-icon, s-loading, and s-spinner by default.
    • end Slot: Content placed at the end. Supports svg, s-icon, s-loading, and s-spinner by default.
    <s-fab>
  <s-icon name="add" slot="start"></s-icon>
  Button Text
  <s-icon name="done" slot="end"></s-icon>
</s-fab>

  5. Use slots in `<s-button>`

    alpha

    The <s-button> component provides several slots to arrange content:

    • Anonymous slot: Used for the main button text.
    • start slot: For content at the beginning of the button. Supports svg, <s-icon>, <s-loading>, and <s-circular-progress>.
    • end slot: For content at the end of the button. Supports svg, <s-icon>, <s-loading>, and <s-circular-progress>.
    <s-button>
  <s-icon name="star" slot="start"></s-icon>
  Button Text
  <s-icon name="close" slot="end"></s-icon>
</s-button>

  6. Configure Slider modes (single, reversed, range)

    alpha

    The mode property determines how the slider behaves:

    • single (default): A standard single-value selection slider.
    • reversed: A single-value slider where the direction is reversed.
    • range: A slider that allows selecting a range of values using a start and end point.

    Use the end attribute to set the maximum value for range or reversed modes.

    <s-slider mode="reversed" end="80"></s-slider>
<s-slider mode="range" end="80"></s-slider>

  7. Use the Switch component

    alpha

    The s-switch component is used to toggle the selection of items. It can be used in its default state or with the checked attribute to represent an active state. You can also customize the icons shown for the selected and unselected states using the selected and unselected slots with an s-icon component.

    <!-- Basic usage -->
<s-switch></s-switch>
<s-switch checked></s-switch>

<!-- Custom icons using slots -->
<s-switch>
  <s-icon name="close" slot="unselected"></s-icon>
  <s-icon name="done" slot="selected"></s-icon>
</s-switch>

  8. Use the Radio component

    alpha

    The s-radio component allows users to select a single option from a set. To group radio buttons together so that only one can be selected at a time, you must assign them the same name attribute.

    Basic HTML Usage

    <s-radio name="group">Male</s-radio>
<s-radio name="group">Female</s-radio>
<s-radio name="group">Unknown</s-radio>

    Vue Integration

    When using Vue with v-model.lazy, you can omit the name attribute. However, you must explicitly set type="radio" for the v-model sugar to work correctly.

    <template>
  <s-radio value="male" v-model.lazy="group" type="radio">Male</s-radio>
  <s-radio value="female" v-model.lazy="group" type="radio">Female</s-radio>
  <s-radio value="unknown" v-model.lazy="group" type="radio">Unknown</s-radio>
  Currently selected: {{ group }}
</template>

<script setup>
  import { ref } from 'vue'
  const group = ref('male')
</script>

  9. Use the FieldSet component

    alpha

    The s-field-set component acts as a container or a form container. It supports a title area and various slots for icons or custom content. If no title slot is provided, it behaves as a standard container.

    <s-field-set>
 <div slot="title">My Title</div>
 <div>My main content area</div>
</s-field-set>

  10. Configure IconButton variants and sizes

    alpha

    You can customize the visual style and dimensions of the s-icon-button using the variant, size, and width attributes.

    Variants

    Set variant to one of:

    • standard (default)
    • filled
    • tonal
    • outlined

    Sizes

    Set size to one of:

    • extra-small
    • small
    • medium (default)
    • large
    • extra-large

    Width

    Set width to adjust the button's horizontal footprint:

    • default
    • narrow
    • wide

    Note: You can also use standard CSS width and height properties for precise control.

    <s-icon-button variant="filled" size="small" width="wide">
  <s-icon name="more_horiz"></s-icon>
</s-icon-button>

  12. Use `<s-button>` in forms

    alpha

    The <s-button> component supports standard HTML form functionality via the type attribute:

    • type="submit": Submits the form.
    • type="reset": Resets the form to its default state.
    • type="checkbox": Acts as a checkbox input within the form.
    • type="button" (default): A standard button.

    When using type="checkbox" in a form, use the name and value attributes to ensure the data is correctly submitted.

    <form action="/submit" method="get">
  <s-button name="tag" type="checkbox" value="rust"> Rust </s-button>
  <s-button type="submit"> Submit </s-button>
</form>