Music School Manager
UI Library
One brand, one set of components, and one way to build each screen. Every preview uses the same shared code as the product.
How to build with it
Start from a pattern. Patterns encode the MSM experience: wiring, states, accessibility, and copy. Reach for a shadcn primitive only when no pattern does the job.
- 1. Find the jobUse the table below. Each job has exactly one component.
- 2. Copy the exampleEvery page has live previews and their exact source.
- 3. Pass data, not stylesVariants and props own appearance; lint rejects restyling.
Which component do I use?
The prescribed component for each job.
| When you need to | Use |
|---|---|
| Compare a school day by teacher or room | Resource Calendar |
| Choose a date or range | Calendar |
| Label a text, email, phone, or search input | Text Field |
| Label any other control | Form Field |
| Pick one from a short fixed list | Select |
| Pick one record from a long list | Search Select |
| Pick several records | Multi Select |
| Show every option at once | Radio Group |
| Turn a setting on immediately | Switch |
| Submit a form | Submit Button |
| PricingOption quick actions beside the main action | Button Group |
| Show a collection of records | Data Table |
| Move records through pipeline stages | Kanban Board |
| Build or inspect a workflow graph | Workflow Canvas |
| Show a static table | Table |
| Show a person | Person |
| Show a status | Badge |
| Show a metric | Stat Card |
| Plot a trend or comparison | Chart |
| Show empty, loading, or failed results | Feedback State |
| Keep a status message on the page | Alert |
| Confirm that something happened | Toast |
| Confirm a destructive action | Alert Dialog |
| Open a record's details | Sheet |
| Do a short focused task | Dialog |
| Frame a product page | App Shell |
| Title a page or section | Page Header |
| Search everything | Command Palette |
| Talk to the assistant | Agent Thread |
| Write to the assistant | Agent Composer |
| Frame the inbox | Inbox Layout |
| List conversations | Conversation List |
| Show a conversation with a family | Conversation Thread |
| Reply to a family or add a note | Conversation Composer |
| Frame a marketing page | Marketing Shell |
| Open a landing page | Marketing Hero |
| Explain features | Marketing Features |
| Show customers and results | Social Proof |
| Show plans and prices | Pricing |
| Answer common questions | FAQ |
| Close a page with a call to action | Call to Action |
| Build another marketing section | Marketing Section |
Everything in the library
79 components, including 32 MSM patterns built on shadcn primitives.