diff --git a/examples/next-example/src/pages/index.tsx b/examples/next-example/src/pages/index.tsx
index 9f244d9..32d325c 100644
--- a/examples/next-example/src/pages/index.tsx
+++ b/examples/next-example/src/pages/index.tsx
@@ -5,10 +5,10 @@
 
 import Head from "next/head";
 import Image from "next/image";
-import { useYoshiki } from "@yoshiki/react";
+import { useYoshiki, Stylable } from "@yoshiki/react";
 import { ReactNode } from "react";
 
-const Box = ({ children, ...props }: { children?: ReactNode }) => {
+const Box = ({ children, ...props }: { children?: ReactNode } & Stylable) => {
 	const { css } = useYoshiki();
 
 	return (
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4d8eeb3..a65ec1d 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -5,7 +5,7 @@
 
 import { Properties } from "csstype";
 import { Theme, YoshikiStyle, useTheme, breakpoints, isBreakpoints } from "@yoshiki/core";
-import { useInsertionEffect } from "react";
+import { CSSProperties, useInsertionEffect } from "react";
 
 // TODO: shorthands
 export type CssObject = {
@@ -58,7 +58,7 @@ export const useYoshiki = () => {
 	return {
 		css: (
 			css: CssObject /*  | CssObject[] */,
-			leftOverProps?: { className?: string; style?: Properties },
+			leftOverProps?: { className?: string; style?: CSSProperties },
 		) => {
 			const { className, style, ...leftOver } = leftOverProps ?? {};
 
@@ -82,3 +82,8 @@ export const useYoshiki = () => {
 		theme,
 	};
 };
+
+export type Stylable = {
+	className?: string,
+	style?: CSSProperties,
+}