GitHub

Content blocks

Long-form reading components. Every sample below is exhaustive — each labeled row shows every type, variant, and size.

Callout

Documentation admonition. Every type, plus title-less and icon-less variants.

note
note
A note callout carries its own default icon and role.
info
info
A info callout carries its own default icon and role.
tip
tip
A tip callout carries its own default icon and role.
warning
danger
success
success
A success callout carries its own default icon and role.
important
important
A important callout carries its own default icon and role.
no title
Saved. Your changes are live.
no icon
Plain
Pass icon={null} to render without the leading icon.

Prose

Styled wrapper for markdown-rendered content. Every size and content width.

size: sm
size: md
size: lg
maxWidth: wide

QuoteBlock

Standalone blockquote with attribution. Every variant and size — seeded with Sundanese sample people.

variant: default

Idin Studio shipped our first paying product in four weeks. Rare in our industry.

Ahmad MuhyidinManajer Produk
variant: featured

Idin Studio shipped our first paying product in four weeks. Rare in our industry.

Ahmad MuhyidinManajer Produk
variant: inline

Idin Studio shipped our first paying product in four weeks. Rare in our industry.

size: md

We had a four-month backlog on our ops dashboard. They rebuilt the whole thing cleaner in three weeks.

Novi YantikaPerancang UI
size: lg

We had a four-month backlog on our ops dashboard. They rebuilt the whole thing cleaner in three weeks.

Novi YantikaPerancang UI
size: xl

We had a four-month backlog on our ops dashboard. They rebuilt the whole thing cleaner in three weeks.

Novi YantikaPerancang UI

BlogPostCard

Index card for a blog post. Both orientations and both variants — seeded with Sundanese sample people.

vertical
horizontal
Product

Why we hand you the repo on day one

No vendor lock, no hidden retainers. You own everything we ship.

Azlan Althaf
4 min read
Why we hand you the repo on day one

BlogAuthor

Author block with avatar, bio, and social links. Every variant and platform icon.

variant: inline
Ahmad MuhyidinManajer Produk
variant: card
variant: hero
all platforms

NewsletterSignup

Email capture with async submit. Every variant and size.

variant: horizontal

Subscribe to our changelog

Monthly updates, no spam. Unsubscribe anytime.

By subscribing you agree to our privacy policy.

variant: stacked

Subscribe to our changelog

Monthly updates, no spam. Unsubscribe anytime.

By subscribing you agree to our privacy policy.

variant: card

Subscribe to our changelog

Monthly updates, no spam. Unsubscribe anytime.

By subscribing you agree to our privacy policy.

size

Small variant

ComparisonTable

Full pricing comparison grid with sectioned rows, a highlighted tier, and boolean / value cells.

Feature
Free$0
PopularPro$29/mo
Team$99/mo
Core
Projects3UnlimitedUnlimited
Team members110Unlimited
Community supportYesYesYes
Advanced
SSO + SCIMNoNoYes
Custom SLANoNoYes
Dedicated CSMNoNoYes

FeatureComparison

Lean us-vs-them matrix with a highlighted column and boolean cells.

Feature
Idin Studio
Agency Alt 1
Offshore Shop
Fixed-scope first sprintYesNoNo
Repo ownership on day 1YesNoYes
Senior-only engineersYesNoNo
NDA within 1 hourYesYesNo
Full design + codeYesNoNo

ChangelogEntry

Single version release block. Featured and standard, with categorised change lists.

featured
v1.0.0

Production-ready release

Added

  • All primitive components promoted to stable.
  • Full Figma Code Connect coverage.

Changed

  • Default theme mode flipped from dark to light.

Fixed

  • Focus restoration when closing a Sheet from within a Dialog.
standard
v0.9.0

Release candidate

Final polish before 1.0.

Deprecated

  • The legacy dark-first token map.

Removed

  • Unused Radix 1–12 scale aliases.

Security

  • Hardened iframe sandbox defaults.

FAQDetail

Native <details>-based disclosure for FAQ pages. Open and closed defaults.

defaultOpen
How do I install @idinstudio/ui?
Run bun add @idinstudio/ui @idinstudio/tokens and import the styles at your root.
closed
Is it tree-shakeable?
Yes. Each component has its own entry point, e.g. @idinstudio/ui/primitives/button.
What's the licence?
MIT. You own everything we ship.

TableOfContents

Sticky anchor navigation for docs pages. Every heading level renders at its own indent.