class prop

src/avatar.tsx

@@ -10,11 +10,12 @@ export type AvatarProps = {
   alt?: string
   size?: number
   rounded?: boolean
+  class?: string
   style?: JSX.CSSProperties
 }
 
 export const Avatar: FC<AvatarProps> = (props) => {
-  const { src, size = 32, rounded, style, alt = "" } = props
+  const { src, size = 32, rounded, class: className, style, alt = "" } = props
 
   const avatarStyle: JSX.CSSProperties = {
     width: `${size}px`,
@@ -23,7 +24,7 @@ export const Avatar: FC<AvatarProps> = (props) => {
     ...style,
   }
 
-  return <img src={src} alt={alt} style={avatarStyle} />
+  return <img src={src} alt={alt} class={className} style={avatarStyle} />
 }
 
 export const Test = () => {

src/box.tsx

@@ -6,10 +6,11 @@ type BoxProps = PropsWithChildren & {
   bg?: string
   color?: string
   p?: number
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Box: FC<BoxProps> = ({ children, bg, color, p, style }) => {
+export const Box: FC<BoxProps> = ({ children, bg, color, p, class: className, style }) => {
   const boxStyle: JSX.CSSProperties = {
     backgroundColor: bg,
     color: color,
@@ -17,7 +18,7 @@ export const Box: FC<BoxProps> = ({ children, bg, color, p, style }) => {
     ...style,
   }
 
-  return <div style={boxStyle}>{children}</div>
+  return <div class={className} style={boxStyle}>{children}</div>
 }
 
 // Common demo box colors

src/divider.tsx

@@ -6,10 +6,11 @@ import { VStack } from "./stack"
 import { CodeExamples } from "./code"
 
 type DividerProps = PropsWithChildren & {
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Divider: FC<DividerProps> = ({ children, style }) => {
+export const Divider: FC<DividerProps> = ({ children, class: className, style }) => {
   const containerStyle: JSX.CSSProperties = {
     display: "flex",
     alignItems: "center",
@@ -30,7 +31,7 @@ export const Divider: FC<DividerProps> = ({ children, style }) => {
   }
 
   return (
-    <div style={containerStyle}>
+    <div class={className} style={containerStyle}>
       <div style={lineStyle}></div>
       {children && (
         <>

src/grid.tsx

@@ -12,13 +12,14 @@ type GridProps = PropsWithChildren & {
   gap?: TailwindSize
   v?: keyof typeof alignItemsMap
   h?: keyof typeof justifyItemsMap
+  class?: string
   style?: JSX.CSSProperties
 }
 
 type GridCols = number | { sm?: number; md?: number; lg?: number; xl?: number }
 
 export const Grid: FC<GridProps> = (props) => {
-  const { cols = 2, gap = 4, v, h, style, children } = props
+  const { cols = 2, gap = 4, v, h, class: className, style, children } = props
 
   const gapPx = gap * 4
 
@@ -41,7 +42,7 @@ export const Grid: FC<GridProps> = (props) => {
     ...style,
   }
 
-  return <div style={combinedStyles}>{children}</div>
+  return <div class={className} style={combinedStyles}>{children}</div>
 }
 
 function getColumnsValue(cols: GridCols): string {

src/image.tsx

@@ -12,10 +12,11 @@ export type ImageProps = {
   width?: number
   height?: number
   objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down"
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, style }) => {
+export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit, class: className, style }) => {
   const imageStyle: JSX.CSSProperties = {
     width: width ? `${width}px` : undefined,
     height: height ? `${height}px` : undefined,
@@ -23,7 +24,7 @@ export const Image: FC<ImageProps> = ({ src, alt = "", width, height, objectFit,
     ...style,
   }
 
-  return <img src={src} alt={alt} style={imageStyle} />
+  return <img src={src} alt={alt} class={className} style={imageStyle} />
 }
 
 export const Test = () => {

src/section.tsx

@@ -7,12 +7,13 @@ import { CodeExamples } from "./code"
 type SectionProps = PropsWithChildren & {
   gap?: TailwindSize
   maxWidth?: string
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, style }) => {
+export const Section: FC<SectionProps> = ({ children, gap = 8, maxWidth, class: className, style }) => {
   return (
-    <VStack gap={gap} style={{ padding: "24px", maxWidth, ...style }}>
+    <VStack gap={gap} class={className} style={{ padding: "24px", maxWidth, ...style }}>
       {children}
     </VStack>
   )

src/stack.tsx

@@ -15,6 +15,7 @@ export const VStack: FC<VStackProps> = (props) => {
       crossAxis={props.h}
       wrap={props.wrap}
       gap={props.gap}
+      class={props.class}
       style={props.style}
     >
       {props.children}
@@ -30,6 +31,7 @@ export const HStack: FC<HStackProps> = (props) => {
       crossAxis={props.v}
       wrap={props.wrap}
       gap={props.gap}
+      class={props.class}
       style={props.style}
     >
       {props.children}
@@ -60,7 +62,7 @@ const Stack: FC<StackProps> = (props) => {
     ...props.style,
   }
 
-  return <div style={combinedStyles}>{props.children}</div>
+  return <div class={props.class} style={combinedStyles}>{props.children}</div>
 }
 
 export const Test = () => {
@@ -160,6 +162,7 @@ type StackProps = {
   crossAxis?: string
   wrap?: boolean
   gap?: TailwindSize
+  class?: string
   style?: JSX.CSSProperties
   children?: any
 }
@@ -170,6 +173,7 @@ type CrossAxisOpts = "start" | "center" | "end" | "stretch" | "baseline"
 type CommonStackProps = PropsWithChildren & {
   wrap?: boolean
   gap?: TailwindSize
+  class?: string
   style?: JSX.CSSProperties
 }
 

src/text.tsx

@@ -3,35 +3,36 @@ import type { FC, PropsWithChildren, JSX } from "hono/jsx"
 import { CodeExamples } from "./code"
 
 type TextProps = PropsWithChildren & {
+  class?: string
   style?: JSX.CSSProperties
 }
 
-export const H1: FC<TextProps> = ({ children, style }) => (
+export const H1: FC<TextProps> = ({ children, class: className, style }) => (
-  <h1 style={{ fontSize: "24px", fontWeight: "bold", ...style }}>{children}</h1>
+  <h1 class={className} style={{ fontSize: "24px", fontWeight: "bold", ...style }}>{children}</h1>
 )
 
-export const H2: FC<TextProps> = ({ children, style }) => (
+export const H2: FC<TextProps> = ({ children, class: className, style }) => (
-  <h2 style={{ fontSize: "20px", fontWeight: "bold", ...style }}>{children}</h2>
+  <h2 class={className} style={{ fontSize: "20px", fontWeight: "bold", ...style }}>{children}</h2>
 )
 
-export const H3: FC<TextProps> = ({ children, style }) => (
+export const H3: FC<TextProps> = ({ children, class: className, style }) => (
-  <h3 style={{ fontSize: "18px", fontWeight: "600", ...style }}>{children}</h3>
+  <h3 class={className} style={{ fontSize: "18px", fontWeight: "600", ...style }}>{children}</h3>
 )
 
-export const H4: FC<TextProps> = ({ children, style }) => (
+export const H4: FC<TextProps> = ({ children, class: className, style }) => (
-  <h4 style={{ fontSize: "16px", fontWeight: "600", ...style }}>{children}</h4>
+  <h4 class={className} style={{ fontSize: "16px", fontWeight: "600", ...style }}>{children}</h4>
 )
 
-export const H5: FC<TextProps> = ({ children, style }) => (
+export const H5: FC<TextProps> = ({ children, class: className, style }) => (
-  <h5 style={{ fontSize: "14px", fontWeight: "500", ...style }}>{children}</h5>
+  <h5 class={className} style={{ fontSize: "14px", fontWeight: "500", ...style }}>{children}</h5>
 )
 
-export const Text: FC<TextProps> = ({ children, style }) => (
+export const Text: FC<TextProps> = ({ children, class: className, style }) => (
-  <p style={{ fontSize: "14px", ...style }}>{children}</p>
+  <p class={className} style={{ fontSize: "14px", ...style }}>{children}</p>
 )
 
-export const SmallText: FC<TextProps> = ({ children, style }) => (
+export const SmallText: FC<TextProps> = ({ children, class: className, style }) => (
-  <p style={{ fontSize: "12px", ...style }}>{children}</p>
+  <p class={className} style={{ fontSize: "12px", ...style }}>{children}</p>
 )
 
 export const Test = () => {