This is a public alpha release. Expect bugs and breaking changes.
Build apps fast
This ui kit’s main aim is to help you build webapps that look good very fast.
It’s not designed to be super customizable, but instead offers you a
bunch of good-looking-by-default components that are as easy to use as possible.
Two colors
Still all apps looking the same is kinda boring, so there is one easy and quick way to customize all components.
The main idea is having two colors (in all tailwind shades from 50 up to 950):
base color (usually one of the 5 tailwind gray tones)
accent color (usually one of the not-gray tailwind colors)
You can try it out by setting the current theme colors in the navbar for this documentation site.
Copying components vs installing packages
I’m a big fan of the philosophy of copying components (shadcn-style) for better customization,
but also I think the quickest way to build something is to just install the package and use it.
So the plan is to have both options (usually you start by just using the package and if you
eventually need to customize a component you add it to your project),
currently the recommended way to use it is installing as a package,
but a cli tool is in the works and can already be tested with the base components by running:
npx fuchs add[component-name]
(Note: this still needs you to install fuchs as a package first).
Lots of components
Contrary to other component libraries that offer only some base components and expect you to built the rest,
this library is aiming to have a component library that has lots of different components that are
useful for building webapps/websites/games, all in a consistent style/theme.
Scroll down the sidebar or main page for examples of specialised components (section Color, Extra and 3D components)
Also see here for a few examples of work in progress components (some may be partially broken):
If you have a suggestion for a new component, please open an issue on github.
Works without javascript when possible & is accessible
Whenever possible components should work without javascript.
Also all components should be accessible (to the best of my knowledge).
Please let me know if you find any issues there.
Dark mode
This ui kit is designed to be used in both light and dark mode
(and switch automatically depending on system settings).
If you want to disable dark mode, add the following to your app.css:
@custom-variant dark (&:is(.dark *));
Similarly you can disable light mode:
Add the above code to your app.css
Add the dark class to the html element in your app.
Contributing/Feedback
If you have any suggestions for components or feedback in general, please open an issue on github.
Also feel free to contribute yourself, preferably by first opening an issue about the component/feature you want to add!
The base components of this ui kit are largely based on bits-ui and I’ve taken lots of inspiration
from shadcn-svelte.
Philosophy
Public alpha
This is a public alpha release. Expect bugs and breaking changes.
Build apps fast
This ui kit’s main aim is to help you build webapps that look good very fast.
It’s not designed to be super customizable, but instead offers you a
bunch of good-looking-by-default components that are as easy to use as possible.
Two colors
Still all apps looking the same is kinda boring, so there is one easy and quick way to customize all components.
The main idea is having two colors (in all tailwind shades from 50 up to 950):
base color (usually one of the 5 tailwind gray tones)
accent color (usually one of the not-gray tailwind colors)
You can try it out by setting the current theme colors in the navbar for this documentation site.
Copying components vs installing packages
I’m a big fan of the philosophy of copying components (shadcn-style) for better customization,
but also I think the quickest way to build something is to just install the package and use it.
So the plan is to have both options (usually you start by just using the package and if you
eventually need to customize a component you add it to your project),
currently the recommended way to use it is installing as a package,
but a cli tool is in the works and can already be tested with the base components by running:
npx fuchs add[component-name]
(Note: this still needs you to install fuchs as a package first).
Lots of components
Contrary to other component libraries that offer only some base components and expect you to built the rest,
this library is aiming to have a component library that has lots of different components that are
useful for building webapps/websites/games, all in a consistent style/theme.
Scroll down the sidebar or main page for examples of specialised components (section Color, Extra and 3D components)
Also see here for a few examples of work in progress components (some may be partially broken):
If you have a suggestion for a new component, please open an issue on github.
Works without javascript when possible & is accessible
Whenever possible components should work without javascript.
Also all components should be accessible (to the best of my knowledge).
Please let me know if you find any issues there.
Dark mode
This ui kit is designed to be used in both light and dark mode
(and switch automatically depending on system settings).
If you want to disable dark mode, add the following to your app.css:
@custom-variant dark (&:is(.dark *));
Similarly you can disable light mode:
Add the above code to your app.css
Add the dark class to the html element in your app.
Contributing/Feedback
If you have any suggestions for components or feedback in general, please open an issue on github.
Also feel free to contribute yourself, preferably by first opening an issue about the component/feature you want to add!