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 💬
License
Uses a simple MIT License. Have at it.
Built with ♥️ for designers who code and developers who value design.
