Prism UI

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):

import { Button, Card } from '@prism-ui/core';

function App() {
  return (
    <Card className="p-4 bg-white">
      <h1 className="text-xl font-bold">Hello World</h1>
      <Button 
        variant="primary" 
        onClick={() => console.log('Clicked!')}
      >
        Click Me
      </Button>
    </Card>
  );
}

Process Flow

Here is a visual representation of the compilation process using Mermaid:

Drag to pan • Scroll to zoom

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

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 →