React version of the Fictoan framework
Fictoan is an intuitive React framework for designers looking to code and rapidly iterate on UI.
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 🌞
- Familiar like Figma: Props mirror properties in your favourite design tool—
bgColour,shadow,shape,marginBottom,weightand 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
- 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
- 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>
);
}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.
- 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
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
Fictoan uses CSS variables for theming, with nearly 500 different variables that you can customise. Check it out!
- GitHub Issues for bugs and feature requests
- Discussions for questions and community interaction
- Twitter (Coming soon!) for updates and news
Uses a simple MIT License. Have at it.
A simple monorepo setup for Fictoan React component library and documentation site.
packages/fictoan-react: The Fictoan React component librarypackages/fictoan-docs: The documentation site for Fictoan
This monorepo is set up with a minimal, no-frills workflow for developing the Fictoan component library and documentation together.
yarn dev- Run the documentation site on localhostyarn rebuild- Build the component library and update it in the docs site automatically
- Clone this repository
- Run
yarn installat the root - Run
yarn devto start developing
When making changes to the component library:
- Make your changes in
packages/fictoan-react - Run
yarn updateLibto build the library and copy the files to the docs site - The docs site will now use your latest changes
fictoan-turborepo/
├── packages/
│ ├── fictoan-react/ # Component library
│ └── fictoan-docs/ # Documentation site
├── scripts/
│ └── copy-lib.js # Script to copy built files to docs
├── turbo.json # Turborepo configuration
└── package.json # Root package.json with workspace config