fictoan-react

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 🚀

• Add Fictoan to your project:

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

• 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.