A simple, but bliss, web component library for your web applications by Strands Services Bliss UI is a simple, but bliss, web component library for your web applications. It is designed to be easy to use and customizable. Bliss UI is built using web components, which makes it compatible with all modern web browsers.

With Bliss UI, you can create beautiful and responsive web applications without writing a single line of CSS. Bliss UI provides a set of components that you can use to build your web applications quickly and easily.

Bliss UI is designed to be lightweight and fast. It is built using modern web technologies, such as HTML, CSS, and JavaScript. Bliss UI is optimized for performance and is designed to work well on all devices, including desktops, tablets, and smartphones.

Bliss UI is open source and free to use. You can use it in your personal and commercial projects without any restrictions. Bliss UI is licensed under the MIT license. To use Bliss UI, include the following code at the beginning of your body tag.
<bliss-component-loader load="{...csv-component-names}"></bliss-component-loader> <script src="https://blissui.com/load.js" async></script> Components ( name: bliss-main )

The main component is used to create the main content of a web page. The gap attribute is used to specify the gap between the child components of the main component.
<bliss-main gap="{...gap}>...</bliss-main>
Main Container A Container B ( name: bliss-container )

The container component is used to create a container for other components. The heading attribute is used to specify the title of the container. The content of the container component is displayed inside the container.
<bliss-container heading="{...heading}">...</bliss-container>
Content ( name: bliss-header )

The header component is used to create a header for a web page. The sticky attribute is used to specify the sticky behavior of the header.
<bliss-header sticky="{...sticky-position} label="{...label}" src="{...src}"> <span slot="start">...</span> <span>Default Slot</span> <span slot="end">...</span> </bliss-header>
...sticky-position = [ top | inset-block-start ] [ <length> | <percentage> ] > slot[start] // overrides title and src properties > slot[default] > slot[end]
Default Slot End Slot
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content ( name: bliss-typography )

The typography component is used to create a text element. The level attribute is used to specify the level of the text element.
<bliss-typography level="{...level}">...</bliss-typography>
...level = [ 1 | 2 | 3 | 4 | 5 | 6 | p ]
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph ( name: bliss-anchor ) The anchor component is used to create a hyperlink. The href attribute is used to specify the URL of the hyperlink. The target attribute is used to specify the target of the hyperlink. The rel attribute is used to specify the relationship of the hyperlink.
<bliss-anchor href="{...href}" target="{...target}" rel="{...rel}">...</bliss-anchor>
Strands Services ( name: bliss-code )

The code component is used to display code snippets. The lang attribute is used to specify the language of the code snippet. The theme attribute is used to specify the theme of the code snippet. The copy attribute is used to enable the copy functionality of the code snippet.
<bliss-code lang="{...lang}" theme="{...theme}" label="{...label}" copy>...</bliss-code>
Preview is above ( name: bliss-user-card )

The user card component is used to create a user card. The user card component can be used to display information about a user, such as their name, role, and profile picture.
<bliss-user-card>...</bliss-user-card> <img slot="icon" src="{...src}" alt="{...alt}"> <span slot="name">...</span> <span slot="role">...</span> </bliss-user-card>
username @username User Role ( name: bliss-toggle )

The toggle component is used to create a toggle switch. The content of the toggle component is displayed as the label of the toggle switch.
<bliss-toggle checked="{...checked}" label="{...label}">...</bliss-toggle>
...checked = [ true | false ]
Toggle ( name: bliss-input )

The input component is used to create an input field. The type attribute is used to specify the type of the input field. The placeholder attribute is used to specify the placeholder text of the input field.
<bliss-input type="{...type}" placeholder="{...placeholder}" alignment="{...alignment}"></bliss-input>
...type = [ text | password | email | number | tel | url | search | date | time | datetime-local | month | week | color ] ...alignment = [ left | center | right ]
Start

End
 ( name: bliss-button )

The button component is used to create a button. The type attribute is used to specify the type of the button. The variant attribute is used to specify the variant of the button. The size attribute is used to specify the size of the button.
<bliss-button type="{...type}" variant="{...variant}" size="{...size}">...</bliss-button>
...type = [ button | submit | reset ] ...variant = [ primary | secondary | success | warning | danger | info | light | dark ] ...size = [ small | medium | large ]
Primary Secondary Success Warning Danger Info Light Dark Primary Secondary Success Warning Danger Info Light Dark Primary Secondary Success Warning Danger Info Light Dark Primary Secondary Success Warning Danger Info Light Dark Start Primary End Start Secondary End Start Success End Start Warning End Start Danger End Start Info End Start Light End Start Dark End
( name: bliss-modal )

The modal component is used to create a modal dialog. The modal component can be used to display a dialog box with custom content. The modal component supports the display of a header, body, and footer.
<bliss-modal open="{...open}"> <div slot="content">...</div> <div slot="title">...</div> <div slot="body">...</div> <div slot="footer">...</div> </bliss-modal>
...open = [ true | false ] > slot[content] // overrides title, body, and footer properties > slot[title] > slot[body] > slot[footer]
With Body
This is the body of the modal.
With Title
This is the body of the modal.
With Description
This is the body of the modal.
Just Content
This is the body of the modal.
( name: bliss-data-grid )

The data grid component is used to create a data grid. The data grid component can be used to display tabular data in a grid format. The data grid component supports pagination, sorting, and filtering of data.
<bliss-data-grid data="{...data}" columns="{...columns}"></bliss-data-grid>
...data = [ { ...data } ] ...columns = [ { ...columns } ]
test
( name: bliss-footer )

The footer component is used to create a footer for a web page.
<bliss-footer sticky="{...sticky-position}"> <div slot="start">Start</div> <div>Center</div> <div slot="end">End</div> </bliss-footer>
...sticky-position = [ bottom | inset-block-end ] [ <length> | <percentage> ] > slot[start] > slot[default] > slot[end]

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Start Slot
Default Slot
End Slot
MIT
LordFren @LordFren Designer MR_VDOG @MR_VDOG Developer
@ 2024 Bliss UI