B
Box Kite
Box Kite
v3.3.3
Getting Started
Introduction
Installation
Theme Setup
Server Components
AI Context
NEW
Core
Box
SVG
Icon
Charts
Animation
State Variants
Pseudo-Elements
Container Queries
Gradients & Effects
Right to Left
Tailwind Parity
Escape Hatch
Components
Button
Textbox
Textarea
Checkbox
Radio Button
Switch
Tooltip
Overlay
Dropdown
Data Grid
Layout
Flex
Grid
Extensions
Style Grouping
Resources
Colors
Theme

AI Assistant Context

One file that teaches an AI assistant the whole prop surface, the formatter rules and the patterns that trip it up.

One file. Infinite possibilities.

The BOX_AI_CONTEXT.md file contains everything an AI assistant needs to write perfect React Box code. No more guessing, no more mistakes.

Why does this matter?

AI assistants don't know your library
Without context, AI tools make mistakes. They might use wrong prop names, incorrect values, or miss important patterns. BOX_AI_CONTEXT.md fixes this.
Teaching is faster than fixing
Instead of correcting AI mistakes over and over, give it the knowledge upfront. One-time setup, permanent improvement.
Write code 10x faster
When your AI assistant truly understands React Box, it generates production-ready code on the first try. Every time.

How to use it

3 simple steps to supercharge your AI
1
Get the context file
The BOX_AI_CONTEXT.md file is included in the package. Find it in node_modules/@cronocode/react-box/BOX_AI_CONTEXT.md or copy it to your project root.
Terminal
cp node_modules/@cronocode/react-box/BOX_AI_CONTEXT.md ./BOX_AI_CONTEXT.md
2
Share it with your AI assistant
Simply reference the file in your conversation. Most AI coding tools support file references.
Claude Code / Cursor
Just type @BOX_AI_CONTEXT.md in your prompt or say "Read the BOX_AI_CONTEXT.md file"
GitHub Copilot Chat
Attach the file to your conversation or paste the content
ChatGPT / Claude Web
Copy and paste the file content into your first message
3
Start coding
Your AI assistant now understands React Box deeply. Just describe what you want to build.
Example prompt:
"Create a responsive card component with a header, body, and footer. It should have a subtle shadow, rounded corners, and look good in both light and dark themes."

What's inside BOX_AI_CONTEXT.md?

Complete prop reference
All 212 props with their CSS mappings and accepted values
Critical gotchas
Like fontSize using divider 16 (not 4) - saves hours of debugging
Component catalog
All pre-built components: Flex, Grid, Button, Textbox, and more
Theme system
How to create light/dark themes with nested pseudo-classes
Common patterns
Ready-to-use code snippets for cards, layouts, forms
Extension system
How to add custom colors, props, and components
Pro tip: Keep it in your project root
Copy BOX_AI_CONTEXT.md to your project root. This way, AI tools like Cursor and Claude Code will automatically include it in their context when you work on your project. No need to reference it every time!

That's it. Seriously.

Your AI assistant is now a React Box expert. Go build something amazing.