- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Message Scroller
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
December 2023 - New Components
Carousel, Drawer, Pagination, Resizable, Sonner, and CLI updates.
We've added new components to Force UI and made a lot of improvements to the CLI.
Here's a quick overview of what's new:
- Carousel - A carousel component with motion, swipe gestures and keyboard support.
- Drawer - A drawer component that looks amazing on mobile.
- Pagination - A pagination component with page navigation, previous and next buttons.
- Resizable - A resizable component for building resizable panel groups and layouts.
- Sonner - The last toast component you'll ever need.
- CLI updates - Support for custom Tailwind prefix and
tailwind.config.ts.
Carousel#
We've added a fully featured carousel component with motion, swipe gestures and keyboard support. Built on top of Embla Carousel.
It has support for infinite looping, autoplay, vertical orientation, and more.
Component carousel-demo not found in registry.
Drawer#
Oh the drawer component. Built on top of Vaul by emilkowalski.
Try opening the following drawer on mobile. It looks amazing!
Component drawer-demo not found in registry.
Pagination#
We've added a pagination component with page navigation, previous and next buttons. Simple, flexible and works with your framework's <Link /> component.
Component pagination-demo not found in registry.
Resizable#
Build resizable panel groups and layouts with this <Resizable /> component.
Component resizable-demo-with-handle not found in registry.
<Resizable /> is built using react-resizable-panels by bvaughn. It has support for mouse, touch and keyboard.
Sonner#
Another one by emilkowalski. The last toast component you'll ever need. Sonner is now available in Force UI.
Component sonner-demo not found in registry.
CLI updates#
This has been one of the most requested features. You can now configure a custom Tailwind prefix and the cli will automatically prefix your utility classes when adding components.
This means you can now easily add Force UI components to existing projects like Docusaurus, Nextra...etc. A drop-in for your existing design system with no conflict.
<AlertDialog className="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />It works with cn, cva and CSS variables.
The cli can now also detect tailwind.config.ts and add the TypeScript version of the config for you.
That's it. Happy Holidays.