Components
Cart
A divided list of CartItems. Purely presentational — no Morphos equivalent.
Installation
npx kosmesis add cartpnpm dlx kosmesis add cartyarn dlx kosmesis add cartbunx kosmesis add cartCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";import { cn } from "@/lib/utils";export interface CartProps { class?: string; children?: Children;}@Component()export class Cart extends StatelessComponent<CartProps> { render() { const { class: cls, children } = this.props; return ( <div data-slot="cart" class={cn("flex flex-col divide-y", cls)}> {children} </div> ); }}Install the following dependencies:
npm install @praxisjs/csspnpm add @praxisjs/cssyarn add @praxisjs/cssbun add @praxisjs/cssCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled, tokenVars } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";import { KosmesisTokens } from "@/lib/kosmesis-theme";const t = tokenVars(KosmesisTokens);class CartStyles extends Stylesheet { $root = this.css({ display: "flex", flexDirection: "column" }).on("& > * + *", { borderTop: `1px solid ${t.border}` });}export interface CartProps { class?: string; children?: Children;}@Component()export class Cart extends StatelessComponent<CartProps> { @Styled(CartStyles) $s!: CartStyles; render() { const { class: cls, children } = this.props; return ( <div data-slot="cart" class={cx(this.$s.$root, cls)}> {children} </div> ); }}Examples
About
Purely presentational — no Morphos equivalent. Just a divide-y list container — pair with
CartItem for each row.
Usage
import { Cart } from "@/components/ui/cart";
import { CartItem } from "@/components/ui/cart-item";
<Cart>
{items.map((item) => <CartItem key={item.id} {...item} />)}
</Cart>Props
Cart accepts class and children only.