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:

1yarn add fictoan-react
2# or
3pnpm add fictoan-react
4# or
5npm install fictoan-react

2. Import and use components:

1import { Card, Badge, Text } from "fictoan-react";
2
3export const MyComponent = () => {
4    return (
5        <Card
6            shape="rounded" padding="medium"
7            bgColour="white" borderColor="slate-20"
8            shadow="soft"
9        >
10            <Text size="large" weight="600">
11                Simple, intuitive and obvious
12            </Text>
13            
14            <Badge bgColor="blue-light40" textColour="blue">
15                A complete no-brainer
16            </Badge>
17        </Card>
18    );
19}

---

Write UI code the way you’d speak 🧠

Doesn’t get simpler than this—

1// Responsive layout
2<Row gutters="large" horizontalPadding="small">
3    <Portion desktopSpan="one-third" mobileSpan="14">
4        <MyComponent />
5    </Portion>
6</Row>
7
8// A form input
9<InputField
10    label="Email"
11    placeholder="Enter your work email"
12    helpText="Must be your primary ID"
13    errorText="No such employee"
14/>
15
16// A primary button
17<Button kind="primary" isFullWidth>
18    Click me
19</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.