https://github.com/fictoan/fictoan-react

An intuitive, performant designer-friendly React framework to build UI with just markup.
https://github.com/fictoan/fictoan-react

css css-framework hacktoberfest hacktoberfest2021 react reactjs storybook styled-components ui-components ui-design ui-framework ui-frontend

Last synced: 12 days ago
JSON representation

An intuitive, performant designer-friendly React framework to build UI with just markup.

Host: GitHub
URL: https://github.com/fictoan/fictoan-react
Owner: fictoan
License: mit
Archived: true
Created: 2020-01-12T07:13:13.000Z (over 5 years ago)
Default Branch: main
Last Pushed: 2025-03-23T05:04:36.000Z (about 2 months ago)
Last Synced: 2025-04-03T14:13:33.921Z (about 1 month ago)
Topics: css, css-framework, hacktoberfest, hacktoberfest2021, react, reactjs, storybook, styled-components, ui-components, ui-design, ui-framework, ui-frontend
Language: CSS
Homepage: https://fictoan.io
Size: 22 MB
Stars: 24
Watchers: 1
Forks: 3
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        | :warning: WARNING :warning: |

|:----------------------------|

| **This repo is now read-only, Docs has been moved to [fictoan/fictoan](https://github.com/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](https://fictoan.io/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](https://bundlephobia.com/package/[email protected]) 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:

```bash

yarn add fictoan-react

# or

pnpm add fictoan-react

# or

npm install fictoan-react

```

2. Import and use components:

```jsx

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

export const MyComponent = () => {

    return (

        

            

                Simple, intuitive and obvious

            

            

            

                A complete no-brainer

            

        

    );

}

```

---

## Write UI code the way you’d speak 🧠

Doesn’t get simpler than this—

```jsx

// Responsive layout

    

        

    

// A form input

// A primary button

    Click me

```

...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](https://fictoan.io) 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](https://github.com/fictoan/fictoan-react/blob/main/src/styles/theme.css)!

---

## Community and support 💬

- [GitHub Issues](https://github.com/fictoan/fictoan-react/issues) for bugs and feature requests

- [Discussions](https://github.com/fictoan/fictoan-react/discussions) for questions and community interaction

- [Twitter](https://twitter.com/fictoan) (Coming soon!) for updates and news

---

## License

Uses a simple [MIT License](LICENSE). Have at it.

---



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