## Documentation Preview ### Getting Started Prism UI is built on the philosophy that accessibility should not be an afterthought. Unlike other libraries that rely on heavy JavaScript for interactivity, we leverage standard HTML5 attributes and CSS where possible. ### Component Usage Here is an example of a color-coded code block (JSX): ```jsx import { Button, Card } from '@prism-ui/core'; function App() { return (

Hello World

); } ``` ### Process Flow Here is a visual representation of the compilation process using Mermaid: ```mermaid graph LR A[Source Code] -->|Parser| B(AST Tree) B --> C{Optimization} C -->|Static| D[CSS Output] C -->|Dynamic| E[Runtime JS] D --> F[Final Bundle] E --> F style A fill:#f4f4f5,stroke:#e4e4e7,stroke-width:1px style B fill:#f4f4f5,stroke:#e4e4e7,stroke-width:1px style C fill:#fff,stroke:#18181b,stroke-width:2px style D fill:#f4f4f5,stroke:#e4e4e7,stroke-width:1px style E fill:#f4f4f5,stroke:#e4e4e7,stroke-width:1px style F fill:#18181b,stroke:#18181b,stroke-width:1px,color:#fff ``` ```mermaid flowchart TB AI[AI Frameworks] AI --> ML[Machine Learning] AI --> DL[Deep Learning] AI --> LLM[LLM & GenAI] AI --> CV[Computer Vision] AI --> RL[Reinforcement Learning] AI --> DATA[Data & MLOps] ML --> SK[Scikit-learn] ML --> XGB[XGBoost] ML --> LGBM[LightGBM] DL --> TF[TensorFlow] DL --> PT[PyTorch] DL --> JAX[JAX] DL --> MX[MXNet] LLM --> HF[Hugging Face Transformers] LLM --> LC[LangChain] LLM --> LL[LLamaIndex] LLM --> OA[OpenAI SDKs] CV --> OP[OpenCV] CV --> MM[MMDetection] CV --> YOLO[YOLO] RL --> SB[Stable-Baselines3] RL --> RLlib[Ray RLlib] DATA --> MLflow[MLflow] DATA --> KF[Kubeflow] DATA --> DVC[DVC] ``` ### Detailed Feature Analysis | Capability | Score | Implementation Notes | Tech Stack | | :--- | :---: | :--- | :--- | | **Zero Runtime** | **10/10** | Styles are extracted to static CSS during build time, eliminating CSS-in-JS runtime overhead. | Rust Compiler | | **Type Safety** | **9/10** | Full TypeScript support with typed theme tokens. Autocomplete works instantly. | Native TS | | **Dark Mode** | **10/10** | Automatic dark mode support via `prefers-color-scheme` media query. | CSS Variables | | **Accessibility** | **9.5/10** | ARIA attributes are managed automatically. Focus management is handled by primitives. | Radix UI | | **Animation** | **6/10** | Basic transitions supported. Complex animations need external libs like Framer Motion. | CSS Transitions | ### Installation ```bash npm install @prism-ui/core @prism-ui/hooks # or using yarn yarn add @prism-ui/core @prism-ui/hooks ``` ### Performance

Why 0ms Runtime?

Prism compiles your styles at build time. There is no style injection during the render phase.

Read the benchmark →