Accordion
Expand & collapse content sections vertically.
Installation
pnpm add @base-ui/react motion
Examples
Implement this component in your project using Yumma CSS and Base UI.
Base
Go to User Settings > Account > Username and enter your new username. It must be unique across the platform.
Click your avatar in the bottom left and select a status emoji or type a custom message.
Navigate to User Settings > Profile > Avatar and upload a new image up to 2MB in size.
Multiple
Allow multiple panels to be open at the same time.
Right-click a member in the member list, select Timeout, and choose the duration (1 min to 28 days).
Right-click a user and select Ban. They will be permanently removed from the server.
Use a moderation bot to track warnings. Configure auto-moderation rules to kick or ban after X warnings.
Bordered
A bordered style with spacing between items.
Go to Privacy & Safety > Message Delivery to choose who can send you direct messages.
Open a user's profile, click the three dots, and select Block. They won't be able to message or mention you.
Go to User Settings > Privacy > Activity and disable 'Show current games' and 'Show online status'.
Ghost
Items highlight with a left-border accent when expanded.
Click the plus icon next to your servers and select 'Create My Own'. Choose a name and customize the icon.
Go to Server Settings > Invite People and create a permanent invite link to share.
Go to Server Settings > Roles to create, edit, and assign roles with custom permissions.
Subtle
Items use a light fill that shifts to indigo when open.
Right-click a channel and select Mute. You won't receive notifications for that channel.
Click the bell icon at the top of a channel to choose All Messages, Mentions Only, or Nothing.
Press Ctrl+Shift+G or click User Settings > Appearance > Theme > Dark.
Icons
Use Plus & Minus icons instead of the default caret.
Visit the bot's webpage and click Add to Server. Authorize it in the server you manage.
Go to Server Settings > Integrations > Webhooks to create and manage outgoing webhooks.
Enable a bot with command features, then use '/' followed by the command name.
Static
Open and close instantly, without animation.