Components
All the components in this package are exported in the package @firecms/ui,
but also reexported in @firecms/cloud, for convenience.
FireCMS UI is a high quality set of components that you can use to build your own custom views. You can
use these components to build your own FireCMS views, or in any other React application. You just need to install
tailwindcss and the @firecms/ui package.
All the components are exported from the @firecms/ui package. These are the same components used internally in FireCMS.
FireCMS was using MUI until version 3.0. MUI provides ready to use components with intuitive APIs, but it also comes with a lot of complexity and overhead. We wanted to build a simpler and more flexible UI kit that could be used in any React project, not just in FireCMS. We also wanted to make it easy to transition from MUI to our new UI kit, so we kept the API as similar as possible. The result it a set of components that are easy to use, easy to customize, much more performant and with a smaller bundle size.
The components are primarily built using Radix UI primitives and tailwindcss. This means that you can easily customize them using tailwindcss classes or override the styles using CSS.
This documentation is still a work in progress. If you have any questions or suggestions, please reach out to us in our Discord channel.
The list of components includes:
- Alert: A component to display information alerts
- Autocomplete: A text field with autocomplete functionality
- Avatar: A component to display an avatar image
- Badge: A component to display a small indicator
- BooleanSwitch: A switch component to toggle boolean values
- BooleanSwitchWithLabel: A switch component to toggle boolean values with a label
- Button: A button component
- Card: A component to display a card
- CenteredView: A component to center its children
- Checkbox: A checkbox component
- Chip: A component to display a chip
- CircularProgress: A component to display a circular progress indicator
- Collapse: A component to display collapsible content
- Container: A component that acts as a container, with a max width and centered content
- DateTimeField: A component to that allows to select a date and time
- DebouncedTextField: A text field that debounces the input
- Dialog: A dialog component
- DialogActions: A component to display actions in a dialog
- DialogContent: A component to display content in a dialog
- ExpandablePanel: A component to display an expandable panel
- FileUpload: A component to upload files
- IconButton: A component to display an icon button
- InfoLabel: A component to display an information label
- InputLabel: A component to display an input label
- LoadingButton: A button component with a loading indicator
- Markdown: A component to display markdown content
- Menu: A component to display a menu
- MultiSelect: A component to select multiple values
- Paper: A component to display a paper
- Popover: A component to display a popover
- SearchBar: A component to display a search bar
- Select: A component to select a value
- Sheet: A component to display a sheet
- Skeleton: A component to display a skeleton loader
- Spinner: A component to display a spinner
- Table: A component to display a table
- Tabs: A component to display tabs
- TextareaAutosize: A component to display a textarea that automatically adjusts its height
- TextField: A component to display a text field
- Tooltip: A component to display a tooltip
- Typography: A component to display text