stnd.build

Design System Playground

Every @stnd/ui component and design token in one place. A living quality check — flip themes in the Lab and watch everything update.

Accordion

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that matches the other components' aesthetic.

Is it animated?

Yes. It's animated by default, but you can disable it if you prefer.

Avatar

@hunvreus @shadcn @adamwathan
@hunvreus @shadcn @adamwathan
@hunvreus @shadcn @adamwathan

Badge

Primary Secondary Outline Destructive
Badge Alert
8 99 20+
Link Link Link Link

Card

Login to your account

Enter your details below to login to your account

Forgot your password?

Don't have an account? Sign up

Meeting Notes

Transcript from the meeting with the client.

Client requested dashboard redesign with focus on mobile responsiveness.

  1. New analytics widgets for daily/weekly metrics
  2. Simplified navigation menu
  3. Dark mode support
  4. Timeline: 6 weeks
  5. Follow-up meeting scheduled for next Tuesday
@hunvreus @shadcn @adamwathan

Is this an image?

This is a card with an image.

Photo by Drew Beamer
1 2 350m² $135,000
Content Only
Content
Footer

Header and Content

This is a card with a header and a content.

Content only.

Header + Content + Footer

This is a card with a header, content and footer.

Content
Footer

Skeleton

Table

A list of your recent invoices.
Invoice Status Method Amount
INV001 Paid Credit Card $250.00
INV002 Pending PayPal $150.00
INV003 Unpaid Bank Transfer $350.00
INV004 Paid Paypal $450.00
INV005 Paid Credit Card $550.00
INV006 Pending Bank Transfer $200.00
INV007 Unpaid Credit Card $300.00
Total $2,500.00

Tooltip

Toast

Lightweight notification system. Dispatches a custom toast event — no framework needed. The Toast component listens globally and renders items in a fixed container at the top of the viewport.

Scroller

A fixed scroll-progress bar at the very top of the page. It's already active on this page — scroll down and watch the thin line fill. No configuration needed; it's mounted automatically by the Base layout.

The bar at the top of this page is the Scroller. It uses window.scrollY and the document height to compute a 0–100% fill width, rendered as a glassmorphic strip with a glow shadow.

Example: 60% through page

Are you absolutely sure?

This action cannot be undone.