Make UI code readable again.
Props that read like prose. Pure CSS, zero runtime.

• No cryptic class names — Semantic props like bgColour and marginBottom, not abbreviated utility classes to memorise. And yes, both British and American spellings work.
• No runtime CSS — Pure CSS variables. No style injection, no hydration mismatch, no flash of unstyled content.
• No assembly required — Components are styled and ready to use. No building your own design system from primitives.
• No copy-paste to maintain — An actual library with updates. You don't own (and maintain) hundreds of component files.

The bonus? Code this obvious can be read by anyone—including designers. That margin that's 2px off? They can just fix it.

A simple card—same output, different syntax:

// Utility classes
<div className="bg-white rounded-lg shadow-md p-4 mb-4 border border-slate-200">
    <h4 className="text-xl font-semibold text-slate-800 mb-2">
        Card title
    </h4>
    <p className="text-slate-600">
        Card content goes here
    </p>
</div>

// Fictoan
<Card
    shape="rounded" shadow="soft" padding="small"
    bgColour="white" borderColour="slate-light20"
    marginBottom="small"
>
    <Heading4 textColour="slate" weight="600" marginBottom="nano">
        Card title
    </Heading4>
    <Text textColour="slate-light40">
        Card content goes here
    </Text>
</Card>

Install Fictoan:

npm install fictoan-react
# or
pnpm add fictoan-react
# or
yarn add fictoan-react

Import and use:

import { Card, Text, Heading4 } from "fictoan-react";

export const MyComponent = () => (
    <Card shape="rounded" padding="medium" bgColour="white" shadow="soft">
        <Heading4 weight="600" marginBottom="nano">
            Simple, intuitive syntax
        </Heading4>
        <Text textColour="slate-light40">
            Props that make sense at first glance
        </Text>
    </Card>
);

• Props that make sense — bgColour, shadow, shape, marginBottom, weight—no documentation diving required.
• Rapid iteration — Change properties as easily as you would in a design tool.
• Accessible by default — Components ship with proper ARIA attributes and keyboard navigation.

• ~14kb gzipped — Zero runtime dependencies. Check the bundle size.
• Pure CSS — No runtime overhead, no JS-based styling.
• One theme file — ~500 CSS variables to control every aspect of the UI.

• OKLCH colour system — 36 perceptually uniform colours with flexible opacity via bgOpacity and borderOpacity props
• Simplified APIs — Modal and Drawer now use declarative isOpen/onClose props
• Provider pattern — Notifications and Toast use context providers for cleaner usage
• Consistent form handling — All form components use value-based onChange
• Better DX — Display names for all 52 components, improved TypeScript support

Read the full changelog.

Explore the full documentation:

• Component library and props
• Theming and customisation
• Manifesto — why we built this

• GitHub issues for bugs and feature requests
• Discussions for questions and community interaction

MIT Licence

This turborepo contains:

• packages/fictoan-react — The component library
• packages/fictoan-docs — The documentation site

pnpm install        # Install dependencies
pnpm dev            # Run the docs site locally
pnpm rebuild        # Build the library and update docs

1. Make changes in packages/fictoan-react
2. Run pnpm rebuild to build and copy files to docs
3. The docs site will reflect your changes