⚠️ WARNING ⚠️
This repo is now read-only, Docs has been moved to fictoan/fictoan, to ease development. Nothing changes, just the repo setup is now different.
But why? With separate repos for the components and docs, it became difficult to test changes to the components, and involved a lot of manual processes to build, copy over files to another repo and see if the changes work. With the new monorepo setup, all that has been automated, and local development is far easier.

---

Fictoan

React version of the Fictoan framework
Fictoan is an intuitive React framework for designers looking to code and rapidly iterate on UI.

---

Yet another component library? No, sir! 🎨

What if a designer wrote static UI code, allowing the developer to focus more on integration, performance, deployments etc? Wouldn’t that be a massive time saver?

We want to blur the lines between a designer and a developer. Read our Manifesto 🌞

---

Key features ✨

For Designers

• Familiar like Figma: Props mirror properties in your favourite design tool—bgColour, shadow, shape, marginBottom, weight and so on.
• Theme to your heart’s content: Intricate control over every aspect of the UI
• Iterate like crazy: Change properties as easily as you would in a design tool
• For one and all: Accessible components and elements

For Developers

• Just your type: Fully typed, and a clean consistent component API
• Light as a feather: ~14kb gzipped bundle size with no dependencies
• Bare metal: Plain CSS styling, no JS bloat
• Flexible: Easily extend and customise components
• Modern Stack: Built with React 18+ and modern best practices

---

Getting started 🚀

1. Add Fictoan to your project:

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

2. Import and use components:

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

export const MyComponent = () => {
    return (
        <Card
            shape="rounded" padding="medium"
            bgColour="white" borderColor="slate-20"
            shadow="soft"
        >
            <Text size="large" weight="600">
                Simple, intuitive and obvious
            </Text>
            
            <Badge bgColor="blue-light40" textColour="blue">
                A complete no-brainer
            </Badge>
        </Card>
    );
}

---

Write UI code the way you’d speak 🧠

Doesn’t get simpler than this—

// Responsive layout
<Row gutters="large" horizontalPadding="small">
    <Portion desktopSpan="one-third" mobileSpan="14">
        <MyComponent />
    </Portion>
</Row>

// A form input
<InputField
    label="Email"
    placeholder="Enter your work email"
    helpText="Must be your primary ID"
    errorText="No such employee"
/>

// A primary button
<Button kind="primary" isFullWidth>
    Click me
</Button>

...and so much more.

---

Core principles 🎯

• Intuitive props: Properties that make sense at first glance
• Consistent patterns: Similar components share similar prop patterns
• Design-Developer bridge: Make hand-off painless as possible
• Minimal friction: Get from design to implementation faster

---

Documentation 📚

Read our documentation to:

• Explore the guides, boilerplate and component library
• Check out the extensive theming and customisation ability with ~500 theme variables
• See examples and use cases

---

Theming 🎨

Fictoan uses CSS variables for theming, with nearly 500 different variables that you can customise. Check it out!

---

Community and support 💬

• GitHub Issues for bugs and feature requests
• Discussions for questions and community interaction
• Twitter (Coming soon!) for updates and news

---

License

Uses a simple MIT License. Have at it.

---

Built with ♥️ for designers who code and developers who value design.